前端工程师自检清单

二、HTML 和 CSS

HTML

• 从规范角度理解 HTML，从分类和语义角度使用标签
• 常用页面标签的默认样式、自带属性、不同浏览器的差异，以及处理兼容问题的方式
• 元信息类标签（head、title、meta）的使用目的和配置方法
• HTML5 离线缓存原理
• 能使用 Canvas API、SVG 等绘制高性能动画

CSS

• CSS 盒模型，以及不同浏览器中的差异
• CSS 所有选择器及其优先级、使用场景，哪些可以继承，如何运用 @ 规则
• CSS 伪类和伪元素有哪些，它们的区别和实际应用
• HTML 文档流的排版规则，CSS 各种定位方式的规则、定位参照物、对文档流的影响，如何选择更合适的定位方式，雪碧图的实现原理
• 水平垂直居中的方案，至少能说出 6 种并对比优缺点
• BFC 的实现原理，可以解决哪些问题，如何创建 BFC
• 可使用 CSS 函数复用代码，实现特殊效果
• PostCSS、Sass、Less 的异同，以及使用配置，至少掌握一种
• CSS 模块化方案、如何配置按需加载、如何防止 CSS 阻塞渲染
• 熟练使用 CSS 实现常见动画，如渐变、移动、旋转、缩放等
• CSS 浏览器兼容性写法，了解不同 API 在不同浏览器下的兼容性情况
• 掌握一套完整的响应式布局方案

手写

• 手写图片瀑布流效果
• 使用 CSS 绘制几何图形（圆形、三角形、扇形、菱形等）
• 使用纯 CSS 实现曲线运动（贝塞尔曲线）
• 实现常用布局（三栏、圣杯、双飞翼、吸顶），并能说出多种方式及其优缺点

三、计算机基础

编译原理不需要钻得太深，但最基本的原理和概念一定要懂，这对理解一门编程语言很重要。

编译原理

• 理解代码到底是什么，计算机如何将代码转换为可以运行的目标程序
• 正则表达式的匹配原理和性能优化
• 如何将 JavaScript 代码解析成抽象语法树（AST）
• base64 的编码原理
• 几种进制的相互转换方法，以及在 JavaScript 中如何表示和转换

网络协议

• 理解什么是协议，了解 TCP/IP 网络协议族的构成，以及每层协议在应用程序中的作用
• 三次握手和四次挥手的详细原理，为什么要使用这种机制
• 哪些协议是可靠的，TCP 用了哪些手段保证可靠交付
• DNS 的作用、解析过程和优化原理
• CDN 的作用和原理
• HTTP 请求报文和响应报文的组成，理解常见请求头含义，知道常见请求方式及区别
• HTTP 状态码的具体含义，看到异常状态码能快速定位问题
• HTTP/1.1、HTTP/2.0 带来的改变
• HTTPS 的加密原理，如何开启 HTTPS，以及如何劫持 HTTPS 请求
• 理解 WebSocket 协议的底层原理，以及它和 HTTP 的区别

设计模式

• 熟练使用前端常用的设计模式编写代码，如单例模式、装饰器模式、代理模式等
• 发布订阅模式和观察者模式的异同，以及实际应用
• 能说出几种设计模式在开发中的实际应用，理解框架源码中对设计模式的运用

四、数据结构和算法

很多前端对这一块不够重视，甚至有点抵触。但如果你想把能力再往上推一层，这部分几乎绕不过去，而且真的很有用。

JavaScript 编码能力

• 多种方式实现数组去重、扁平化，并对比优缺点
• 多种方式实现深拷贝，并对比优缺点
• 手写函数柯里化工具函数，并理解其应用场景和优势
• 手写防抖和节流工具函数，并理解其内部原理和应用场景
• 实现一个 sleep 函数

手动实现前端轮子

• 手动实现 call、apply、bind
• 手动实现符合 Promise/A+ 规范的 Promise，手动实现 async/await
• 手写一个 EventEmitter 实现事件发布订阅
• 能说出两种实现双向绑定的方案，并能手动实现
• 手写 JSON.stringify、JSON.parse
• 手写一个模板引擎，并能解释其中原理
• 手写懒加载、下拉刷新、上拉加载、预加载等效果

数据结构

• 理解常见数据结构的特点，以及它们在不同场景下的优缺点
• 理解数组、字符串的存储原理，并熟练应用它们解决问题
• 理解二叉树、栈、队列、哈希表的基本结构和特点，并能应用它们解决问题
• 了解图、堆的基本结构和使用场景

算法

• 能计算算法的时间复杂度和空间复杂度，并能估计业务逻辑代码的耗时和内存消耗
• 至少理解五种排序算法的实现原理、应用场景和优缺点，能快速说出时间、空间复杂度
• 了解递归和循环的优缺点、应用场景，并可在开发中熟练应用
• 能应用回溯算法、贪心算法、分治算法、动态规划等解决复杂问题
• 具备前端处理海量数据的算法思路

五、运行环境

先把语言和环境的边界理清楚：

ECMAScript = JavaScript
JavaScript + DOM + BOM
JavaScript + I/O + API

浏览器 API

• 浏览器提供的符合 W3C 标准的 DOM 操作 API、浏览器差异和兼容性
• 浏览器对象模型（BOM）提供的全局 API、浏览器差异和兼容性
• 大量 DOM 操作、海量数据的性能优化，如合并操作、Diff、requestAnimationFrame 等
• 浏览器海量数据存储、操作性能优化
• DOM 事件流的具体实现机制、不同浏览器的差异、事件代理
• 前端发起网络请求的几种方式及其底层实现，能手写原生 ajax、fetch，也能熟练使用第三方库
• 浏览器的同源策略，如何绕开同源限制，几种方式的异同点以及如何选型
• 浏览器提供的几种存储机制、优缺点，以及开发中的正确选择
• 浏览器跨标签通信

浏览器原理

• 各浏览器使用的 JavaScript 引擎以及它们的异同点，如何在代码中进行区分
• 请求数据到请求结束，服务器之间发生了几次交互
• 可详细描述浏览器从输入 URL 到页面展现的整个过程
• 浏览器解析 HTML 代码的原理，以及构建 DOM 树的流程
• 浏览器如何解析 CSS 规则，并将其应用到 DOM 树上
• 浏览器如何将解析好的、带有样式的 DOM 树进行绘制
• 浏览器的运行机制，如何配置资源异步/同步加载
• 浏览器回流与重绘的底层原理、引发原因，以及如何有效避免
• 浏览器的垃圾回收机制，以及如何避免内存泄漏
• 浏览器采用的缓存方案，如何选择和控制合适的缓存策略

Node

• 理解 Node 在应用程序中的作用，可以用 Node 搭建前端运行环境、操作文件、操作数据库等
• 掌握一种 Node 开发框架，如 Express，并理解 Express 和 Koa 的区别
• 熟练使用 Node 提供的 API，如 Path、Http、Child Process 等，并理解其实现原理
• 理解 Node 的底层运行原理，以及它和浏览器的异同
• 理解 Node 事件驱动、非阻塞机制的实现原理

六、框架和类库

轮子层出不穷，从原理上理解，才算真正站稳。

TypeScript

• 理解泛型、接口等面向对象相关概念，以及 TypeScript 对面向对象理念的实现
• 理解使用 TypeScript 的好处，掌握基础语法
• 理解 TypeScript 的规则检测原理
• 可以在 React、Vue 等框架中使用 TypeScript 开发

React

• React 和 Vue 的选型、优缺点，以及核心架构差异
• React 中 setState 的执行机制，如何有效管理状态
• React 的事件底层实现机制
• React 的虚拟 DOM 和 Diff 算法的内部实现
• React 的 Fiber 工作原理，以及它解决了什么问题
• React Router 和 Vue Router 的底层实现原理、动态加载实现原理
• 能熟练应用 React API、生命周期等，并能使用 HOC、render props、Hooks 等高阶用法解决问题
• 基于 React 的特性和原理，可以手动实现一个简单的 React

Vue

• 熟练使用 Vue 的 API、生命周期和钩子函数
• 理解 MVVM 框架设计理念
• Vue 双向绑定实现原理、Diff 算法的内部实现
• Vue 的事件机制
• 从 template 转换成真实 DOM 的实现机制

多端开发

• 单页面应用（SPA）的原理和优缺点，掌握一种快速开发 SPA 的方案
• 理解 Viewport、em、rem 的原理和用法，分辨率、px、ppi、dpi、dp 的区别和实际应用
• 移动端页面适配解决方案、不同机型适配方案
• 掌握一种 JavaScript 移动客户端开发技术，如 React Native
• 掌握一种 JavaScript PC 客户端开发技术，如 Electron
• 掌握一种小程序开发框架或原生小程序开发
• 理解多端框架的内部实现原理，至少了解一个多端框架的使用

数据流管理

• 掌握 React 和 Vue 传统的跨组件通信方案，对比数据流管理框架的差异
• 熟练使用 Redux 管理数据流，并理解其实现原理和中间件实现原理
• 熟练使用 Mobx 管理数据流，并理解其实现原理，以及相比 Redux 的优势
• 熟练使用 Vuex 管理数据流，并理解其实现原理
• 理解这些数据流方案的异同和优缺点，做好不同场景下的技术选型

实用库

• 至少掌握一种 UI 组件框架，如 antd，理解其设计理念和底层实现
• 掌握一种图表绘制框架，如 ECharts，理解其设计理念和底层实现，甚至能自己实现简单图表
• 掌握一种 GIS 开发框架，如百度地图 API
• 掌握一种可视化开发框架，如 Three.js、D3
• 理解工具函数库，如 lodash、underscore、moment 等常用工具函数的实现原理

开发和调试

• 熟练使用各浏览器提供的调试工具
• 熟练使用一种代理工具实现请求代理、抓包
• 可以使用 Android、iOS 模拟器进行调试，并掌握一种真机调试方案
• 了解 Vue、React 等框架调试工具的使用

七、前端工程

工程化的价值很直接：提高效率，降低维护成本。

项目构建

• 理解 npm、yarn 依赖包管理的原理和区别
• 可以使用 npm 运行自定义脚本
• 理解 Babel、ESLint、webpack 等工具在项目中承担的作用
• 理解 ESLint 规则检测原理和常用配置
• 理解 Babel 的核心原理，可以自己编写一个 Babel 插件
• 可以配置一种前端代码兼容方案，如 Polyfill
• 理解 Webpack 的编译原理、构建流程、热更新原理，以及 chunk、bundle、module 的区别和应用
• 能熟练配置已有的 loader 和 plugin 解决问题，甚至可以自己编写 loader 和 plugin

nginx

• 正向代理与反向代理的特点和实例
• 能手动搭建一个简单的 nginx 服务器
• 熟练应用常用的 nginx 内置变量，掌握常见匹配规则写法
• 可以用 nginx 实现请求过滤、配置 gzip、负载均衡等，并能解释其内部原理

开发提速

• 熟练掌握一种接口管理、接口 mock 工具的使用
• 掌握一种高效的日志埋点方案，能够快速借助日志查询工具定位线上问题
• 理解 TDD 与 BDD 模式，至少会使用一种前端单元测试框架

版本控制

• 理解 Git 的核心原理、工作流程，以及和 SVN 的区别
• 熟练使用常规 Git 命令、git rebase、git stash 等进阶命令
• 可以快速解决线上分支回滚、线上分支错误合并等复杂问题

持续集成

• 理解 CI/CD 的意义，至少熟练掌握一种 CI/CD 工具的使用，如 Jenkins
• 可以独立完成架构设计、技术选型、环境搭建、全流程开发和部署上线等一套完整流程

八、项目和业务

后端技能

• 了解后端的开发方式及其在应用程序中的作用，至少会使用一种后端语言
• 掌握数据最终在数据库中是如何落地存储的，能看懂表结构设计、表之间的关联，至少会使用一种数据库

性能优化

• 了解前端性能衡量指标、性能监控要点，掌握一种前端性能监控方案
• 了解常见的 Web、App 性能优化方案
• 理解 SEO 排名规则、SEO 优化方案，以及前后端分离场景下的 SEO
• 理解 SSR 实现方案、优缺点及其性能优化
• 理解 Webpack 的性能优化方案
• 理解 Canvas 性能优化方案
• 理解 React、Vue 等框架的性能优化方案

前端安全

• XSS 攻击的原理、分类、具体案例，以及前端如何防御
• CSRF 攻击的原理、具体案例，以及前端如何防御
• HTTP 劫持、页面劫持的原理与防御措施

业务相关

• 能理解所开发项目的整体业务形态、业务目标和业务架构，并能快速定位线上业务问题
• 能理解项目整体技术架构，能根据新需求快速做开发规划，也能基于业务报警、线上日志等信息定位并解决技术问题
• 可以将自己的想法或新技术在业务中落地实践，尽量让自己在团队中具备一定的不可替代性

九、学习提升

vczh 在知乎问题'如何能以后达到温赵轮三位大神的水平？'下曾给出过这样的回答：

这十几年我一共做了三件事：

1. 不以赚钱为目的选择学习的内容；
2. 以自己是否能造出轮子来衡量学习效果；
3. 坚持每天写自己的代码，前 10 年每天至少 6 个小时，不包含学习和工作的时间。

• 拥有自己的技术博客，或者在一些博客平台上有自己的专栏
• 定期总结知识，不断完善自己的知识体系
• 尽量把知识转换成真实产出，不要只停留在书面理解层面，更重要的是实际应用
• 坚持输出自己的代码，不要盲目扎进公司业务里

十、技术之外

这一部分，可能比前面九条加起来还重要。

• 了解互联网人员术语：CEO、CTO、COO、CFO、PM、QA、UI、FE、DEV、DBA、OPS 等
• 了解互联网行业术语：B2B、B2C、C2C、O2O 等
• 掌握互联网行业沟通、问答和学习的方法
• 具备一定的 PPT 能力
• 有一定的理财意识，至少了解储蓄、货币基金、保险、指数基金、股票等基本理财知识
• 掌握在繁重工作和长期使用电脑的情况下保持健康的方法，建立正确的养生知识体系

十一、资源推荐

有了知识体系，阅读技术文章时就更容易判断它属于哪个方向。我一直习惯这样做。

有目的、带着分类去阅读，远比'随便看看'更容易形成长期记忆。每读到一篇好文章或者一本好书，我都会把它归类到自己的知识体系里。

学习一门知识，最好先看官方文档，把核心 API 大致过一遍，再去看进阶总结。哪些是搬运，哪些是真正有价值的内容，通常一眼就能分出来。

语言基础

• JavaScript 高级程序设计（必看）
• 高性能 JavaScript
• 现代 JavaScript 教程
• 阮一峰的 ECMAScript 6 教程
• ECMAScript 6 标准
• HTML meta 标签总结与属性使用介绍
• CSS 编码指导

计算机基础

• 大前端开发者需要了解的基础编译原理和语言知识
• 图解 HTTP
• JavaScript 设计模式与开发实践
• 正则表达式 30 分钟入门教程

数据结构和算法

• 数据结构与算法之美
• 用动画的形式呈现解 LeetCode 题目的思路
• JavaScript 数据结构和算法
• 30-seconds-of-code

运行环境

• 《重学前端》中的浏览器原理章节
• 图解浏览器的基本工作原理
• 七天学会 NodeJS
• Node.js 模块加载与运行原理

框架和类库

• TypeScript Handbook
• React.js 小书
• React 深入系列
• Webpack React 小书
• Vue.js 技术揭秘
• Vuex：在 Vue 中管理状态
• 你需要 Mobx 还是 Redux？
• Underscore 源码分析
• 微信小程序开发资源汇总
• 腾讯移动 Web 前端知识库

前端工程

• 一口（很长的）气了解 babel
• Webpack 傻瓜式指南
• Webpack 原理
• 廖雪峰的 Git 教程
• 图解 Git
• 前端开发者必备的 Nginx 知识
• 使用 Jenkins 进行持续集成

项目和业务

• 常见六大 Web 安全攻防解析
• 深入理解前端性能监控
• 高性能网站建设指南
• 新人如何快速融入技术实力强的前端团队

学习提升

• 印记中文（各种中文开发文档）
• 前端学习方法
• 如何在工作内外获得持续的技术成长
• 优秀的前端博客汇总