前端开发知识点整理

摘要：前言本文主要是有关前端方面知识按照目前的认知进行的收集归类概括和整理，涵盖前端理论与前端实践两方面。

前言：
本文主要是有关前端方面知识按照 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 介绍

新增 常见问题

更新 前言

更新 网络基础

更新 学习型项目

致谢

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

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

The Modern JavaScript Tutorial by Ilya Kantor

jQuery 1.4 中文文档 by 张鑫旭

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

联系方式

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

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

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

结语

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

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

Growth CSS

Growth Vue

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

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

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

许可

MIT