钉钉的前端面试范围大曝光！你能命中几个？

发表于 3年以前 | 总阅读数：224 次

大家好，今天带来一篇前端面试指南。先给你们打个预防针，看完下面的面试指南千万不要垂头丧气，也千万不要觉得自己有多菜，因为这份指南是cover了初级前端 ~ 资深前端的面试题，知识也永远学不完，你只要在心里记住一点即可，「不要给自己设边界」

前言

本文主要给大家带来组内一面面试官子弈的面试题，用于给大家进行知识扫盲，希望对正在求职的同学以及正在准备秋招的应届生有所帮助。需要注意，本文不会提供所谓的标准答案，希望大家能够自行 Google 找到心中想要的答案。

温馨提示：这里不会过多讲解阿里的校招和社招流程，如果你对校招流程感兴趣，可以阅读专有钉钉校园招聘指南，如果你对社招流程和数据感兴趣，可以查看在阿里我是如何当面试官的。

考察内容

专有钉钉的一面面试主要考察以下三个方面的内容：

基础知识：考察面试者是否掌握扎实的前端基础知识体系
业务思考：考察面试者的业务深度
笔试实践：考察面试者基本知识的实践能力，并考察代码风格和逻辑思维能力

需要注意，如果你觉得某些面试题有些突兀，不要觉得惊讶，这些面试题是在不断深入沟通的过程中层层递进被带出来的，其中某些面试题可能相对较偏，纯粹是加分项面试题。

基础知识

基础知识主要包含以下几个方面：

基础：计算机原理、编译原理、数据结构、算法、设计模式、编程范式等基本知识了解
语法：JavaScript、ECMAScript、CSS、TypeScript、HTML、Node.js 等语法的了解和使用
框架：React、Vue、Egg、Koa、Express、Webpack 等原理的了解和使用
工程：编译工具、格式工具、Git、NPM、单元测试、Nginx、PM2、CI / CD 了解和使用
网络：HTTP、TCP、UDP、WebSocket、Cookie、Session、跨域、缓存、协议的了解
性能：编译性能、监控、白屏检测、SEO、Service Worker 等了解
插件：Chrome 、Vue CLI 、Webpack 等插件设计思路的理解
系统：Mac、Windows、Linux 系统配置的实践
后端：Redis 缓存、数据库、Graphql、SSR、模板引擎等了解和使用

基础

列举你所了解的计算机存储设备类型？
一般代码存储在计算机的哪个设备中？代码在 CPU 中是如何运行的？
什么是指令和指令集？
复杂指令集和精简指令集有什么区别？
JavaScript 是如何运行的？解释型语言和编译型语言的差异是什么？
简单描述一下 Babel 的编译过程？
JavaScript 中的数组和函数在内存中是如何存储的？
浏览器和 Node.js 中的事件循环机制有什么区别？
ES6 Modules 相对于 CommonJS 的优势是什么？
高级程序设计语言是如何编译成机器语言的？
编译器一般由哪几个阶段组成？数据类型检查一般在什么阶段进行？
编译过程中虚拟机的作用是什么？
什么是中间代码（IR），它的作用是什么？
什么是交叉编译？
发布 / 订阅模式和观察者模式的区别是什么？
装饰器模式一般会在什么场合使用？
谈谈你对大型项目的代码解耦设计理解？什么是 Ioc？一般 DI 采用什么设计模式实现？
列举你所了解的编程范式？
什么是面向切面（AOP）的编程？
什么是函数式编程？什么是响应式编程？什么是函数响应式编程？
响应式编程或者函数响应式编程的使用场景有哪些？

语法

如何实现一个上中下三行布局，顶部和底部最小高度是 100px，中间自适应?
如何判断一个元素 CSS 样式溢出，从而可以选择性的加 title 或者 Tooltip?
如何让 CSS 元素左侧自动溢出（... 溢出在左侧）？
什么是沙箱？浏览器的沙箱有什么作用？
如何处理浏览器中表单项的密码自动填充问题？
Hash 和 History 路由的区别和优缺点？
JavaScript 中的 const 数组可以进行 push 操作吗？为什么？
JavaScript 中对象的属性描述符有哪些？分别有什么作用？
JavaScript 中 console 有哪些 api ?
简单对比一下 Callback、Promise、Generator、Async 几个异步 API 的优劣？
Object.defineProperty 有哪几个参数？各自都有什么作用？
Object.defineProperty 和 ES6 的 Proxy 有什么区别？
ES6 中 Symbol、Map、Decorator 的使用场景有哪些？或者你在哪些库的源码里见过这些 API 的使用？
为什么要使用 TypeScript ? TypeScript 相对于 JavaScript 的优势是什么？
TypeScript 中 const 和 readonly 的区别？枚举和常量枚举的区别？接口和类型别名的区别？
TypeScript 中 any 类型的作用是什么？
TypeScript 中 any、never、unknown 和 void 有什么区别？
TypeScript 中 interface 可以给 Function / Array / Class（Indexable）做声明吗？
TypeScript 中可以使用 String、Number、Boolean、Symbol、Object 等给类型做声明吗？
TypeScript 中的 this 和 JavaScript 中的 this 有什么差异？
TypeScript 中使用 Unions 时有哪些注意事项？
TypeScript 如何设计 Class 的声明？
TypeScript 中如何联合枚举类型的 Key?
TypeScript 中 ?.、??、!.、_、** 等符号的含义？
TypeScript 中预定义的有条件类型有哪些？
简单介绍一下 TypeScript 模块的加载机制？
简单聊聊你对 TypeScript 类型兼容性的理解？抗变、双变、协变和逆变的简单理解？
TypeScript 中对象展开会有什么副作用吗？
TypeScript 中 interface、type、enum 声明有作用域的功能吗？
TypeScript 中同名的 interface 或者同名的 interface 和 class 可以合并吗？
如何使 TypeScript 项目引入并识别编译为 JavaScript 的 npm 库包？
TypeScript 的 tsconfig.json 中有哪些配置项信息？
TypeScript 中如何设置模块导入的路径别名？

框架

React Class 组件有哪些周期函数？分别有什么作用？
React Class 组件中请求可以在 componentWillMount 中发起吗？为什么？
React Class 组件和 React Hook 的区别有哪些？
React 中高阶函数和自定义 Hook 的优缺点？
简要说明 React Hook 中 useState 和 useEffect 的运行原理？
React 如何发现重渲染、什么原因容易造成重渲染、如何避免重渲染？
React Hook 中 useEffect 有哪些参数，如何检测数组依赖项的变化？
React 的 useEffect 是如何监听数组依赖项的变化的？
React Hook 和闭包有什么关联关系？
React 中 useState 是如何做数据初始化的？
列举你常用的 React 性能优化技巧？
Vue 2.x 模板中的指令是如何解析实现的？
简要说明 Vue 2.x 的全链路运作机制？
简单介绍一下 Element UI 的框架设计？
如何理解 Vue 是一个渐进式框架？
Vue 里实现跨组件通信的方式有哪些？
Vue 中响应式数据是如何做到对某个对象的深层次属性的监听的？
MVVM、MVC 和 MVP 的区别是什么？各自有什么应用场景？、
什么是 MVVM 框架？

工程

Vue CLI 3.x 有哪些功能？Vue CLI 3.x 的插件系统了解？
Vue CLI 3.x 中的 Webpack 是如何组装处理的？
Vue 2.x 如何支持 TypeScript 语法？
如何配置环境使得 JavaScript 项目可以支持 TypeScript 语法？
如何对 TypeScript 进行 Lint 校验？ESLint 和 TSLint 有什么区别？
Node.js 如何支持 TypeScript 语法？
TypeScript 如何自动生成库包的声明文件？
Babel 对于 TypeScript 的支持有哪些限制？
Webpack 中 Loader 和 Plugin 的区别是什么？
在 Webpack 中是如何做到支持类似于 JSX 语法的 Sourcemap 定位？
发布 Npm 包如何指定引入地址？
如何发布开发项目的特定文件夹为 Npm 包的根目录？
如何发布一个支持 Tree Shaking 机制的 Npm 包？
Npm 包中 peerDependencies 的作用是什么？
如何优雅的调试需要发布的 Npm 包？
在设计一些库包时如何生成版本日志？
了解 Git （Submodule）子模块吗？简单介绍一下 Git 子模块的作用？
Git 如何修改已经提交的 Commit 信息？
Git 如何撤销 Commit 并保存之前的修改？
Git 如何 ignore 被 commit 过的文件？
在使用 Git 的时候如何规范 Git 的提交说明（Commit 信息）？
简述符合 Angular 规范的提交说明的结构组成？
Commit 信息如何和 Github Issues 关联？
Git Hook 在项目中哪些作用？
Git Hook 中客户端和服务端钩子各自用于什么作用？
Git Hook 中常用的钩子有哪些？
pre-commit 和 commit-msg 钩子的区别是什么？各自可用于做什么？
husky 以及 ghook 等工具制作 Git Hook 的原理是什么？
如何设计一个通用的 Git Hook ？
Git Hook 可以采用 Node 脚本进行设计吗？如何做到？
如何确保别人上传的代码没有 Lint 错误？如何确保代码构建没有 Lint 错误？
如何在 Vs Code 中进行 Lint 校验提示？如何在 Vs Code 中进行 Lint 保存格式化？
ESLint 和 Prettier 的区别是什么？两者在一起工作时会产生问题吗？
如何有效的识别 ESLint 和 Prettier 可能产生冲突的格式规则？如何解决此类规则冲突问题？
在通常的脚手架项目中进行热更新（hot module replacement）时如何做到 ESLint 实时打印校验错误信息？
谈谈你对 SourceMap 的了解？
如何调试 Node.js 代码？如何调试 Node.js TypeScript 代码？在浏览器中如何调试 Node.js 代码？
列举你知道的所有构建工具并说说这些工具的优缺点？这些构建工具在不同的场景下应该如何选型？
VS Code 配置中的用户和工作区有什么区别？
VS Code 的插件可以只对当前项目生效吗？
你所知道的测试有哪些测试类型？
你所知道的测试框架有哪些？
什么是 e2e 测试？有哪些 e2e 的测试框架？
假设现在有一个插入排序算法，如何对该算法进行单元测试？

网络

CDN 服务如何实现网络加速？
WebSocket 使用的是 TCP 还是 UDP 协议？
什么是单工、半双工和全双工通信？
简单描述 HTTP 协议发送一个带域名的 URL 请求的协议传输过程？（DNS、TCP、IP、链路）
什么是正向代理？什么是反向代理？
Cookie 可以在服务端生成吗？Cookie 在服务端生成后的工作流程是什么样的？
Session、Cookie 的区别和关联？如何进行临时性和永久性的 Session 存储？
设置 Cookie 时候如何防止 XSS 攻击？
简单描述一下用户免登陆的实现过程？可能会出现哪些安全性问题？一般如何对用户登录的密码进行加密？
HTTP 中提升传输速率的方式有哪些？常用的内容编码方式有哪些？
传输图片的过程中如果突然中断，如何在恢复后从之前的中断中恢复传输？
什么是代理？什么是网关？代理和网关的作用是什么？
HTTPS 相比 HTTP 为什么更加安全可靠？
什么是对称密钥（共享密钥）加密？什么是非对称密钥（公开密钥）加密？哪个更加安全？
你觉得 HTTP 协议目前存在哪些缺点？

性能

在 React 中如何识别一个表单项里的表单做到了最小粒度 / 代价的渲染？
在 React 的开发的过程中你能想到哪些控制渲染成本的方法？

插件

Vue CLI 3.x 的插件系统是如何设计的？
Webpack 中的插件机制是如何设计的？

系统

\r\n（CRLF）和 \n （LF）的区别是什么？(Vs Code 的右下角可以切换)
/dev/null 的作用是啥？
如何在 Mac 的终端中设置一个命令的别名？
如何在 Windows 中设置环境变量？
Mac 的文件操作系统默认区分文件路径的大小写吗？
编写 Shell 脚本时如何设置文件的绝对路径？

后端

Session、Cookie 的区别和关联？如何进行临时性和永久性的 Session 存储？
如何部署 Node.js 应用？如何处理负载均衡中 Session 的一致性问题？
如何提升 Node.js 代码的运行稳定性？
GraphQL 与 Restful 的区别，它有什么优点？
Vue SSR 的工作原理？Vuex 的数据如何同构渲染？
SSR 技术和 SPA 技术的各自的优缺点是什么？
如何处理 Node.js 渲染 HTML 压力过大问题？

业务思考

业务思考更多的是结合基础知识的广度和深度进行的具体业务实践，主要包含以下几个方面：

工程化：代码部署、CI / CD 流程设计、Jenkins、Gitlab、Docker 等
通用性：脚手架、SDK、组件库等框架设计
应用框架：Hybrid 混合、微前端、BFF、Monorepo
可视化：
低代码：通用表单设计、通用布局设计、通用页面设计、JSON Schema 协议设计等
测试：E2E 测试、单元测试、测试覆盖率、测试报告等
业务：数据、体验、复杂度、监控

工程化

你所知道的 CI / CD 工具有哪些？在项目中有接触过类似的流程吗？
如果让你实现一个 Web 前端的 CI / CD 工程研发平台，你会如何设计？
如果我们需要将已有项目中的线上产物资源（例如图片）转换成本地私有化资源，你有什么解决方案？
如何使用 Vue CLI 3.x 定制一个脚手架？比如内部自动集成了 i18n、 axios、Element UI、路由守卫等？
Jenkins 如何配合 Node.js 脚本进行 CI / CD 设计？

通用性

如果让你设计一个通用的项目脚手架，你会如何设计？一个通用的脚手架一般需要具备哪些能力？
如果让你设计一个通用的工具库，你会如何设计？一个通用的工具库一般需要具备哪些能力？
假设你自己实现的 React 或 Vue 的组件库要设计演示文档，你会如何设计？设计的文档需要实现哪些功能？
在设计工具库包的时候你是如何设计 API 文档的？

应用框架

谈谈 Electron、Nw.js、CEF、Flutter 和原生开发的理解？
谈谈桌面端应用中 HotFix 的理解？
你觉得什么样的场景需要使用微前端框架？

业务

什么是单点登录？如何做单点登录？
如何做一个项目的国际化方案？
如何做一个项目的监控和埋点方案？
如何建设项目的稳定性（监控、灰度、错误降级、回滚...）？
一般管理后台型的应用需要考虑哪些性能方面的优化？
简述一些提升项目体验的案例和技术方案（骨架屏、Loading 处理、缓存、错误降级、请求重试...）？
假设需要对页面设计一个水印方案，你会如何设计？

低代码

如何设计一个通用的 JSON Schema 协议使其可以动态渲染一个通用的联动表单？
一般的低代码平台需要具备哪些能力？

笔试实践

笔试更多的是考验应聘者的逻辑思维能力和代码书写风格，主要包含以下几个方面：

正则表达式
算法
数据结构
设计模式
框架的部分原理实现
TypeScript 语法
模板解析

数据结构

使用 TypeScript 语法将没有层级的扁平数据转换成树形结构的数据

// 扁平数据
[{
  name: '文本1',
  parent: null,
  id: 1,
}, {
  name: '文本2',
  id: 2,
  parent: 1
}, {
  name: '文本3',
  parent: 2,
  id: 3,
}]

// 树状数据
[{
  name: '文本1',
  id: 1,
  children: [{
    name: '文本2',
    id: 2,
    children: [{
      name: '文本3',
      id: 3
    }]
  }]
}]

模板解析

实现一个简易的模板引擎

const template = '嗨，{{ info.name.value }}您好，今天是星期 {{ day.value }}';

const data = {
  info: {
    name: {
      value: '张三'
    }
  },
  day: {
    value: '三'
  }
};

render(template, data); // 嗨，张三您好，今天是星期三