前端开发知识点整理

前言：
本文主要是有关前端方面知识按照 XX 目前的认知进行的收集、归类、概括和整理，涵盖『前端理论』与『前端实践』两方面。本文会告诉你前端需要了解的知识大致有什么，看上去有很多，但具体你要学什么，还是要 follow your heart & follow your BOSS。

初衷。写这篇文章主要有以下几个初衷：

• 梳理知识体系。网上虽然有许多类似的内容，但每个人都有各自独特的思维方式，适合自己的才是最好的。

• 探索不足之处。明确自己到底掌握了哪些，哪些本应掌握但还没有学习。

• 完善公司的前端培训方向。前端技能培训的方向由懂前端、懂公司前端团队的人来设定最好不过了。

• 希望借此激发大家的一点思考。我们都在路上，我不是成功的例子，我写下我的思考，希望借此激发大家的一点思考。

• 一个梗。自 2012 年以来，我知乎上获赞最多的答案却是引用他人的答案……有点尴尬：《一名合格的前端工程师的知识结构是怎样的？》

目录

• 专业技能

  • 前端理论

    • 浏览器

    • HTML

    • CSS

    • JavaScript

    • 编程通用

    • SEO 数据统计 数据分析

    • 网络基础

  • 交叉领域理论

    • 产品设计相关

    • 后端基础

  • 前端实践

    • 解决实际问题

    • 学习型项目

    • 前端工程

    • 第一阶段：框架应用

    • 第二阶段：简单自动构建优化

    • 第三阶段：JS/CSS模块化开发

    • 第四阶段：组件化开发与资源管理

    • 项目技术选型

    • 造轮子

• 版本规划

• 致谢

• 联系方式

• 结语

• 许可

专业技能

前端理论

浏览器

知己知彼

• 浏览器内核渲染原理

  • HTML 解析器

  • CSS 解析器

  • JavaScript 引擎

  • 渲染流程

    • 加载

    • 解析（确定结构、计算样式）

    • 构建 DOM 树、应用样式

    • 绘制

    • 回流

    • 重绘

• 浏览器调试

  • 工具

    • F12

    • 扩展插件

    • 浏览器常用快捷键

  • 调试内容

    • 元素

      • 结构

      • 属性

    • 样式

    • 脚本

      • 日志

      • 断点

      • 事件

      • 变量监听

      • 调用堆栈

    • 性能

      • snapshot

      • 耗时

    • 网络请求

      • 模拟请求

      • 审查网络

      • 模拟网络环境

    • 内存

    • 本地存储信息

      • cookie

      • local storage

      • cache

  • 调试技巧

• 浏览器事件

  • 常见事件

    • 鼠标事件

    • 表单元素事件

    • 键盘事件

    • 文档事件

    • CSS 事件

    • ……

  • 事件处理、添加、移除

• 浏览器任务调度机制

  • micro queue

  • macro queue

• 浏览器兼容性

  • 各平台浏览器的坑（家家有个难填的坑，有的坑深，有的坑浅）

    • 移动端浏览器

      • UC

      • Safari

      • 微信浏览器

      • 百度

      • ……

    • PC 端浏览器

      • Chrome

      • Firefox

      • IE

      • Edge

      • ……

    • 小程序

  • 不同浏览器内核差异

    • CSS 私有属性前缀（注：建议使用 postcss 自动化补全）

    • Polyfill

  • HTML、CSS、Javascript 特性支持度

    • MDN

    • Can I use ?

• 常见问题

  • 请求跨域

  • iframe 跨域通信

  • 各种兼容性问题

  • 网页加载速度慢

  • 按钮点击没反应……

HTML

吃土小2叉：据说 HTML 和 CSS 一起学习体验最佳哦

• 语法 & 语义

  • !DOCTYPE HTML 文档标准

    • 怪异模式

    • 标准模式

  • head

    • meta 元数据标签

      • 网页描述

      • 设备描述

      • HTTP 请求描述

      • HTTP Client Hints

  • body

    • 装饰型标记（不推荐、部分已废弃）

    • 功能型标记

      • 无语义容器（div、span）

    • 用户交互（交互型标记）

      • 输入框

      • 选择器

      • 多选框

      • 单选框

      • 按钮

    • 数据可视化（展示型标记）

      • 列表

        • 定义列表

        • 无序列表

        • 有序列表

      • 表格

      • 结构化数据标记、微数据

      • 多媒体

        • 图片

        • 视频

        • 音频

      • SVG、Canvas

      • 文章（正文、摘要、段落、章节、前言、结语、引用）

• 规范

  • HTML 代码规范

  • HTML 使用规范（标签嵌套规则）

    • 标签类型

• 可访问性、无障碍体验

• 常见问题

  • 图片空 src 导致页面加载两次

  • iframe 空 src 导致无限循环加载本页面

上图据说是 HTML5 规范中关于 HTML 标签嵌套规则的示意图

CSS

吃土小2叉：用设计师的思维去理解 CSS，用程序员的思维去写 CSS

• 语法（CSS 从入门到放弃）

  • 基本用法

  • 选择器

    • 基础选择器

    • 组合选择器

    • 伪类选择器

  • 媒体查询

  • 简写属性

  • 注释

  • 属性运算 calc()

• 规范（编写可读性良好的 CSS）

  • 用例规范

    • 权限控制

    • 最佳实践

    • 不良习惯

  • 格式规范

    • 风格

    • 复用

    • BEM 规范

• 逻辑特性（在 CSS / Less 中运用 OO 思想和设计模式）

  • 权重（优先级）

  • 作用域

  • 封装（mixins）

  • 组合（mixins+）

  • 扩展（:extend）

  • 继承（mixins）

  • CSS 变量、Less 变量

  • 模块化（import）

• 视觉设计（单一状态设计）

  • 布局（分久必合、合久必分）

    • 盒模型（高度、宽度、边框、外边距、内边距、溢出控制）

    • 定位方式

    • 层叠上下文（z-index）

    • display 类型（table、inline、inline-block、block、flex、grid）

    • 浮动

    • 伪元素：:after、:before

  • 字体排印（厉害了 word 哥）

    • 字体（字体族、网络字体）

    • 文本（删除线、下划线、斜体、粗细、字号）

    • 段落（行高、缩进、断句方式、换行方式）

    • 对齐

    • 方向

  • 装饰（神说，要有光）

    • 颜色

    • 背景

    • 边框（border、outline）

    • 圆角

    • 阴影

    • 渐变

    • 透明度

    • 变形（旋转、缩放、矩阵变化）

• 交互设计（多状态设计）

• • 动画（运动和静止是对立的统一）

    • 过渡效果

    • 动画关键帧

  • 反馈

    • active、checked 状态

  • 引导

    • 结合 Javascript

    • CSS 动画

  • 互动

    • hover 状态

• 多设备设计

  • 响应式设计（多套代码，多种设备）

    • 媒体查询

  • 自适应设计（一套代码，多种设备）

    • 最小固定宽度布局

    • 百分比布局

    • 栅格布局、弹性布局

    • js + rem 方案（rpx）

• 常见问题

  • 视觉还原度

  • 调试技巧

  • 属性“失效”问题

    • transition “失效”？

    • z-index “失效”？

  • 外边距合并

  • 边框 1px 问题

  • 垂直居中

  • 大屏幕 rem 小屏幕 px

  • 图片适配

  • 可维护性

    • 权重控制

    • 嵌套层级

    • 语义性

• 扩展内容

  • 预处理器：Less、Sass

  • 后处理器：postcss

  • 小程序的 WXSS

  • Weex、RN 中的 CSS

JavaScript

吃土小2叉：至今还没看完一遍《JavaScript 高级程序设计》的我是该好好面壁思过了。

本段内容大量参考了：《The Modern JavaScript Tutorial》http://javascript.info/ ，推荐阅读。

• JavaScript 标准

  • 严格模式

  • 兼容模式

• 开发工具

  • IDE

  • 轻量编辑器

• 基础语法

  • 数据类型

    • 基本数据类型 number、 string、 boolean、null、undefined、object、symbol

    • 数据类型检测

    • 解构赋值

      • 数组

      • 对象

    • date 与时间

    • JSON

      • 格式说明

      • 序列化

      • 反序列化

    • 数组

      • 数组操作（增、删、改、遍历、复制）

      • 多维数组

  • 变量

    • 声明 var、let、const

    • 声明提升

    • 作用域

  • 逻辑控制

    • 循环

    • 分支

    • 判断

  • 对象（基础部分）

    • 对象操作（增、删、改、查、复制）

    • Symbols

    • 类型转换

    • 垃圾回收机制

    • 对象方法中的 this

    • new

  • 函数

    • 函数默认值

    • 函数声明

    • 立即执行函数

    • 箭头函数

  • 运算符

    • 数值运算

    • 逻辑运算

  • 事件

    • 浏览器事件

    • 冒泡、捕获

    • 事件捕获

    • 浏览器默认行为

  • 文档

    • DOM 树

    • 节点

      • 节点类型

      • 节点标签

      • 节点内容

    • window 对象

  • DOM 操作

    • 元素节点（增、删、移、换、复制）

    • 元素属性（增、删、改、查）

    • 文本内容（增、删、改、查）

  • 网络请求

    • ajax（回调函数）

    • Promise

    • async、await

• 深入细节

  • 对象、类、继承

    • 属性标记与属性描述

    • 原型、原型链

    • 继承

    • 属性定义

    • 对象混合

    • 类型检测

  • 数据类型

    • 基本类型

    • 复杂类型

  • 函数进阶

    • 递归、调用堆栈

    • 闭包

    • 函数绑定、上下文

    • 剩余参数、扩展语法

    • 函数对象

    • 任务调度：定时器

    • 柯里化

    • 深入箭头函数

    • 函数式

  • 错误处理

    • 异常捕获

• 代码质量

  • 注释

  • 相关工具

    • ESLint、JSLint

    • Standard.js

    • Prettify

    • 自动化测试工具：Jest、Mocha

  • 用例规范

    • 最佳实践

    • 不良习惯

  • 格式规范

    • 风格

• 正则表达式

  • 普通字符、转义字符

  • 元字符

  • 字符类

  • 分支条件

  • 分组

  • 反义

  • 贪婪与懒惰

  • 后向引用

  • ……

编程通用

软件工程的核心就是管理复杂度 —— 《代码大全 2》

推荐阅读：来自法海@淘宝前端团队《从达标到卓越 —— API 设计之道》

• 达标（语法、词法）

  • 正确拼写

  • 准确用词

  • 注意单复数

  • 不要搞错词性

  • 处理缩写

  • 用对时态和语态

• 熟练（语义、可用性）

  • 单一职责

  • 避免副作用

  • 代码一致性

  • 合理设计函数参数

  • 合理运用函数重载

  • 使返回值可预期

  • 固话术语表

  • 遵循一致的代码风格

• 卓越（系统性、大局观）

  • 版本控制

  • 确保向下兼容

  • 设计扩展机制（易于扩展）

  • 控制 API 的抽象级别

  • 设计模式

  • 注释

  • DRY

  • 编码规范

  • 解耦

  • 复杂度控制

SEO & 数据统计 & 数据分析

吃土小2叉：尽人事，听天命（天者，用户也）

• SEO

  • 影响因素

    • 相关性

      • title

      • 关键词密度

    • 权威性

      • 外链

      • 内链

      • 域名年限

      • 网站收录

      • 安全性

    • 用户体验

      • 广告

      • 加载速度

      • 内容质量：内容真实性、内容原创性、内容有益性

      • 用户反馈

  • 不良行为

    • 堆叠关键词

    • 抄袭、作弊

    • 大量低价值外链

    • 广告、木马、病毒
      -数据统计

  • 工具

    • 统计、埋点工具：Google Analytics、百度统计、Piwik……

    • 站长工具：Google Webmaster 、百度站长工具

    • 其他工具：百度指数、SEO 各项指标助手工具……

• 数据分析

  • 工具

    • 同数据统计工具

    • 脑子是个好东西

  • 分析方法

    • 归因、排查

    • 细分

      • 来源、渠道

      • 用户属性

        • 人口统计学

        • 用户终端、型号

      • 用户行为

        • 站内搜索关键词

        • 自定义事件（埋点事件）

        • 浏览频率、时间、跳出页

        • 访问内容

        • 访问漏斗

      • 站点属性

    • 对比

      • 时间维度

      • 统计指标维度

  • 目标设置

    • 转化路径

    • 转化目标

    • 转化价值

网络基础

此处是不是又要出现，经典问题：当你在浏览器输入 URL 并回车（非单页应用的传统网站），直到你看见这个页面，此时经历了哪些过程（略去浏览器渲染环节）。

• TCP / IP

  • HTTP

    • 请求

      • 请求头

      • 请求正文

    • 响应

      • HTTP 状态码（2xx、3xx、4xx、5xx）

      • 响应头

      • 响应正文

    • 过程：三次握手

  • HTTP2

  • HTTPS

  • Web Socket

  • CORS

  • Session、Cookie

  • RESTful / RPC

• DNS 、域名、IP

  • 域名劫持

  • 内网、公网地址段

• 缓存

  • 服务端缓存

  • 客户端缓存

• 常用工具

  • F12 Network Panel

  • Advanced REST client

  • EditThisCookie

  • Wireshark

  • Fiddler、Charles

• 常见问题

  • HTTP 迁移到 HTTPS 站点部署问题

    • HTTPS 证书部署

      • TLS 版本问题

      • 证书作用域（是否包含子域名）

      • 证书、秘钥配置文件

    • 资源加载同协议

      • error 级

        • 外部 JavaScript 加载

        • iframe

      • warning 级

        • img

        • CSS

    • 网络请求同协议

      • error 级

        • ajax

        • jsonp

交叉领域理论

吃土小2叉：学习交叉领域知识的一个很朴实的目的 —— 掌握如何甩锅

产品设计相关

吃土小2叉：学会优雅地质疑设计 => 给用户更好的体验

• 与设计师的沟通、协作

• 设计理念 => 用户体验

  • 一致性

  • 可用性

  • 易用性

  • 反馈

• 提升审美

  • 单反穷三代 // 单身狗 XX：也许学好摄影就能追到女神了呢？

  • 竞品分析 // 知己知彼，重视对手

• 常用工具

  • 雪碧图生成工具（http://www.spritecow.com/）

  • 图片有损压缩工具（https://tinypng.com/）

  • .psd 智能标注（http://www.fancynode.com.cn/p...）

  • 强烈建议设计师使用 Sketch 进行设计

后端基础

吃土小2叉：只要把这篇文章《系统设计入门》上面你不认识的术语弄懂就可以了 （迷之微笑）

XX 的观点：时刻谨记编程语言只是一种工具，分别有不同适用的场景罢了。理性、客观、结合实际。

• 与后端开发工程师的沟通、协作

  • 明确分工

  • 文档先行

  • mock 数据

• 简单了解一门后端语言 // XX 注：如果你已经自己搭建了个人博客站点，后端语言的语法层面足够了。

• 了解前端路由与后端路由的区别

• 简单应用数据库（MySQL）

  • 增、删、改、查

  • 备份、导出

• 了解作用与概念

  • GraphQL

  • Nginx

  • Redis

  • 负载均衡

  • CDN

  • 数据库主从备份

• 计算机相关基础知识 // 有时间多重温（预习）重温（预习）

  • 数据库

  • 操作系统

  • 编译原理

  • 离散数学

  • 数字逻辑

前端实践

实践是检验真理的唯一标准，在此引用 Vue.js 作者尤雨溪的一段话：

技术方案都是先有问题，再有思路，同时伴随着取舍。在选择衡量技术的时候，尽量去思考这个技术背后是在解决什么问题，它做了怎样的取舍。这样一方面可以帮助我们更好的理解和使用这些技术，也为以后哪天你遇到业务中的特殊情况，需要自己做方案的时候打好基础。

解决实际问题

Learn from you mistakes.

吃土小2叉：写下这篇文章的时候恰逢今年高考，很感谢高一的英语老师当时给我们布置的一个作业：整理考试错题集。因为经历过太多次，同样类型的题目这次错，下次仍然错。而我又是一个比较较真的人，每次整理错题的时候，不单单只记录做错的问题和答案，还会去分析这里的考点，所涉及的知识点，去试着换位思考如果我是出题人，会怎么出这道题，考哪些知识点可以坑一下考生。而这一过程，又有着考试做错题的心理愧疚感，记忆会特别深刻。另一方面，在复习阶段，也可以更具有针对性地复习，为自己减压。要尽量把大脑当成 CPU 来用，或者倒排索引，而非硬盘、数据库。

Learn from your practice.

而在编程过程中，也是比较接近。我们可以记录下自己犯过的错误，不良的编码案例。同时，我们也可以像经常收集一些名人名言、固定搭配等写作套路一样，去整理、收集自己在开发过程中的最佳实践。当然若是有时间再去思考、反思、优化，那就更好了。

Learn from your worry & adversity.

另外，抱着积极的态度、强大的内心去面对开发过程中的任何困惑、困境，都是助力快速成长的好机会。

前阵子我在 GitHub 上也开了一个项目，专门记录、收集我最近在前端开发过程中遇到的一些问题，有已经解决的，也有仍待解决的。

https://github.com/xunge0613/...

目前整理的已解决问题有：

• 解决跨域 iframe 父子页面间通信问题

• 微信小程序开发 ide 的选择

• →_→ 没有更多了……

仍待解决的问题：

• 如何优雅地监听元素高度变化？

• 移动端 banner 轮播图自适应的各种坑

当然我也简单写了一些方法论，包括：

• 如何解决问题？

• 如何提问题？

后续我也会不断完善这一块内容。重点是：形成一套属于自己的最佳实践经验库。

学习型项目

这一部分内容更推荐大家关注 Phodal 大神的 Growth 系列

https://github.com/phodal/growth

而我给准备入门前端的新手的建议是：

拥有一个完全属于自己的博客、域名、网站、服务器，并每周固定更新博客文章、每年为博客更新一次主题。

前端工程

勿忘自己的 title：前端工程师

以下引用张云龙 dalao 的文章：前端工程 —— 基础篇

第一阶段：库/框架选型
第二阶段：简单构建优化
第三阶段：JS/CSS模块化开发
第四阶段：组件化开发与资源管理

由于先天缺陷，前端相比其他软件开发，在基础架构上更加迫切的需要组件化开发和资源管理，而解决资源管理的方法其实一点也不复杂：

一个通用的资源表生成工具 + 基于表的资源加载框架

第一阶段：框架应用

吃土小2叉：只要是一个文档友好的框架，遇到不会的问题，去翻翻文档，如果解决不了，再去认真翻一次。因此，第一阶段，亦可认为是：面向文档编程。

此处建议再回忆一下刚才提及的尤大的话。

以下是我个人的框架/库应用路线：

jQuery => jQuery + artTemplate => Vue.js + lodash => Vue.js 全家桶

• jQuery // 此处参考张鑫旭的 jQuery 1.4 中文文档

  • 核心

    • 对象访问

    • 数据缓存

    • 队列控制

    • 插件机制

    • 多库共存

  • 事件

    • 页面载入

    • 事件处理

    • 事件委托

    • 事件切换

    • 常用事件

      • 鼠标事件（click、dbclick、hover、mouse*……）

      • 键盘事件（key*……）

      • 表单事件（blur、change、focus、submit、select）

      • 浏览器事件（error、resize、scroll）

      • 触摸事件（touch*……）

  • 选择器

    • 基本

    • 组合

    • 伪类

    • 内容

    • 可见性

    • 属性

    • 表单

  • 筛选器

    • 过滤

    • 查找

    • 串联

  • CSS

    • CSS

    • 位置

    • 尺寸

  • DOM 操作

    • 元素节点（增、删、移、换、复制）

    • 元素属性（增、删、改、查）

    • 文本内容（增、删、改、查）

  • 网络请求

    • Ajax

    • when

    • deferred

  • 特效

    • 基本（显示、隐藏）

    • 滑动

    • 淡入淡出

    • 自定义动画控制

  • 辅助工具（类似于 lodash）

    • 数组、对象操作

    • 函数操作

    • 字符串操作

      • 浏览器及特性检测

    • 类型检测

    • JSON 序列化

• artTemplate

  • 模板引擎

• Vue.js

  • MVVM 思想

  • 声明式渲染

  • 条件与循环

  • 处理用户输入

  • 数据绑定、响应式数据

  • 组件化应用构建

    • 组件间通信

    • 状态管理

• lodash.js // 提供各种 helper 方法，专注于数据处理

  • 数据类型

    • 数组

    • 集合

    • 日期

    • 函数

    • 数值

    • 对象

    • 字符串

  • 语言特性

    • 类型检测

    • 类型比较

    • 复制

  • 数学运算

  • 辅助工具

XX：

• 学会用 artTemplate 以后，会发现 Vue.js 很容易上手

• 当你学会 Vue.js 以后，你会发现小程序真的很容易上手

第二阶段：简单自动构建优化

专注业务开发

• 工具

  • Grunt

  • Gulp

• 预处理

  • Less

  • Babel

  • TypeScript

• 后处理

  • PostCSS

• 校验

  • ESLint

• 压缩

  • 代码

  • 图片

• 合并

• 打包

• 自动化测试

• mock 接口调试

第三阶段：JS/CSS模块化开发

张云龙：分治、分治、分治

• AMD

• CommonJS

• UMD

• ES6 Module

• ……

第四阶段：组件化开发与资源管理

核心目的：提高开发效率 & 兼顾运行性能

• 分治、解耦、自由组合、就近维护

• Vue.js 组件化开发

  • 抽象业务逻辑组件

    • 组合基础 UI 组件形成业务组件

    • 独立编写业务相关组件

    • ……

  • 定制基础 UI 组件库

    • 轮播图组件

    • 弹窗组件

    • ……

• 资源管理

  • 推荐阅读：静态网页资源的管理和优化

项目技术选型

理性、客观、避免偏见

• 预计投入

  • 开发资源

    • 时间

    • 人手

    • 技术储备

  • 项目资源

    • 沟通成本

    • 设计文档、功能文档、产品原型

    • 后端接口文档

    • 项目排期

  • 产品资源

    • 用户群体

      • 浏览器兼容性

      • 浏览器局限性

      • SEO 问题

• 期望回报

  • 开发人员自我成长

  • 公司技术栈

  • 开发效率

  • 可维护性

  • 性能、稳定性

  • 易于测试

  • 易于把控项目周期

• 应急预案

  • 兼容方案

  • 回退方案

  • A / B Test

  • 渐进增强

  • Plan B

造轮子

吃土小2叉：要么站在巨人的肩膀上，要么自己成为巨人

未完待续……

• UI 组件库

• 前端工具

• 前端微服务

• 前端框架

  • （以下内容是 XX 的 YY 内容）

  • 学习优秀框架源码

  • 仿写核心内容

  • 掌握山寨一个框架的套路

  • 发现问题

  • 具备扎实的前端基础 + 运气 + 灵感

  • 解决问题

• ？

版本规划

本文会在 GitHub 上持续维护，欢迎大家提 issue ~

地址是：https://github.com/xunge0613/...

v x.x.x

• 更新 造轮子

• 内容更新

  • 性能监控

  • 安全

• 考虑翻译成英文？

• 加入重要性评分功能

  • 引导目前阶段应该掌握哪些

  • 分为：初级、中级、高级

---

===== 当前版本分割线 =====

---

v 0.0.3 内容迭代

• 更新 编程通用

  • 条目更新

• 更新 JavaScript

• 更新 前端实践

  • 新增引导语

• 更新支付宝图标、微信图标……

v 0.0.2 内容迭代

• 新增 后端基础

• 新增 前端工程 第一阶段 jQuery、Vue.js 介绍

• 新增 常见问题

• 更新 前言

• 更新 网络基础

• 更新 学习型项目

致谢

1. 前端工程 —— 基础篇 by 张云龙

2. 从达标到卓越 —— API 设计之道 by 法海@淘宝前端团队

3. The Modern JavaScript Tutorial by Ilya Kantor

4. jQuery 1.4 中文文档 by 张鑫旭

5. MDN Web 开发 // 这里有个小彩蛋，这个页面右上角有某 XX

联系方式

欢迎联系我讨论本文的不足、问题或者意见。

可以在我的 GitHub 主页上找到我的联系方式

亦可关注我的微信公众号：清风迅来

结语

作为一个老菜鸟，我只是知识的搬运工

本文大多讨论的是有哪些知识点（what），至于如何学习与应用这些知识点（how & why），敬请期待我之后的一系列文章，目前已完成一些雏形，仅供试阅：

• Growth CSS

• Growth Vue

感谢您一路看到这里，欢迎点击阅读原文在我的博客上进行留言一同探讨。（小透明表示公众号至今未开通留言功能……）

若有帮助，尽情打赏！^_^

ps: 好像图片有点大=。=

许可

MIT