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

大家好， 今天带来一篇 前端面试指南。先给你们打个预防针，看完下面的面试指南千万不要垂头丧气，也千万不要觉得自己有多菜，因为这份指南是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); // 嗨，张三您好，今天是星期三

设计模式

• 简单实现一个发布 / 订阅模式

正则表达式

• 匹配出字符串中 const a = require('xxx') 中的 xxx

看完了吧？先自己了解做一下，等过段时间放上所有问题的完整版答案~ 敬请期待！