阅读 32907

专有钉钉前端面试指南

作者介绍

子弈,专有钉钉前端团队成员,负责专有钉钉 PC 客户端的工程化、端上应用、端上模块插件化的开发。

前言

本文主要给大家带来组内一面面试官子弈的面试题,用于给大家进行前端知识扫盲,希望对正在求职的同学以及正在准备秋招的应届生有所帮助。如果你真的想要了解更多的详细信息,可以询问子弈。

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

考察内容

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

  • 基础知识:考察面试者是否掌握扎实的前端基础知识体系

  • 业务思考:考察面试者的业务深度

  • 笔试实践:考察面试者基本知识的实践能力,并考察代码风格和逻辑思维能力

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

基础知识

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

  • 基础:计算机原理、编译原理、数据结构、算法、设计模式、编程范式等基本知识了解

  • 语法: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

招聘

嗨,专有钉钉前端团队目前组内正在招聘优秀的前端开发工程师,如果你对我们的职位感兴趣,则可以联系我们内推简历。

文章分类
前端
文章标签