Web前端知识体系精简

Web前端技术由 html、css 和 javascript 三大部分构成，是一个庞大而复杂的技术体系，其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入，然后不断地接触和学习新的知识点，因此对于初学者很难理清楚整个体系的脉络结构。本文将对Web前端知识体系进行简单的梳理，对应的每个知识点点到为止，不作详细介绍。目的是帮助大家审查自己的知识结构是否完善，如有遗漏或不正确的地方，希望共勉。

JAVASCRIPT 篇

0、基础语法

Javascript 基础语法包括：变量声明、数据类型、函数、控制语句、内置对象等。

在ES5 中，变量声明有两种方式，分别是  var 和 function ，var 用于声明普通的变量，接收任意类型，function用于声明函数。另外，ES6 新增了 let、const、import 和 class 等四个命令，分别用以声明 普通变量、静态变量、模块 和 类 。

JS数据类型共有六种，分别是 String、Number、Boolean、Null、Undefined 和 Object 等， 另外，ES6 新增了 Symbol 类型。其中，Object 是引用类型，其他的都是原始类型(Primitive Type)。

原始类型也称为基本类型或简单类型，因为其占据空间固定，是简单的数据段，为了便于提升变量查询速度，将其存储在栈（stack）中（按值访问）。为了便于操作这类数据，ECMAScript 提供了 3 个基本包装类型：Boolean、Number 和 String 。基本包装类型是一种特殊的引用类型，每当读取一个基本类型值的时候，JS内部就会创建一个对应的包装对象，从而可以调用一些方法来操作这些数据。

引用类型由于其值的大小会改变，所以不能将其存放在栈中，否则会降低变量查询速度，因此其存储在堆(heap)中，存储在变量处的值是一个指针，指向存储对象的内存处(按址访问)，对于引用类型的值，可以为其添加属性和方法，也可以改变和删除其属性和方法；但基本类型不可以添加属性和方法。关于更多介绍请参考：详解 ECMAScript 数据类型

JavaScript 可以通过 typeof 来判断原始数据类型，但不能判断引用类型，要知道引用类型的具体类型，需要通过 Object 原型上的 toString 方法来判断，关于数据类型判断可以参考：判断JS数据类型的4种方法

在 JavaScript 中，函数有三种角色，即普通函数、构造函数 和 对象方法。同一个函数，调用方式不同，函数的作用不一样，所扮演的角色也不一样。直接调用时就是普通函数，通过new创建对象时就是构造函数，通过对象调用时就是方法。

JavaScript 常用的内置对象有 Date、Array、JSON、RegExp 等等，Date 和 Array 使用场景最多，JSON主要用于对象的序列化和反序列化，还有一个作用就是实现对象的深拷贝。RegExp 即正则表达式，是处理字符串的利器。 关于更多介绍请参考：数组常用操作方法总结 ， 正则表达式基础知识

1、函数原型链

JS是一种基于对象的语言，但在 ES6 之前是不支持继承的，为了具备继承的能力，JavaScript 在函数对象上建立了原型对象 prototype，并以函数对象为主线，从上至下，在JS内部构建了一条原型链。原型链把一个个独立的对象联系在一起，Object 则是所有对象的祖宗， 任何对象所建立的原型链最终都指向了 Object，并以 Object 终结。

简单来说，就是建立了变量查找机制，当访问一个对象的属性时，先查找对象本身是否存在，如果不存在就去该对象所在的原型连上去找，直到 Object 对象为止，如果都没有找到该属性才会返回 undefined。因此，我们可以通过原型链来实现继承机制。关于函数原型链请参考：认识原型对象和原型链

2、函数作用域

函数作用域就是变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的。通俗来讲就是，在一个函数里，有些变量可以访问，有些不可以访问。那些能访问的变量所形成的范围，就是这个函数的作用域。

在 JavaScript 中，没有块级作用域，只有函数作用域，也就是说 if、while、for 语句不会形成独立的作用域。但有一个特殊情况，即 with 语句和 catch 语句会形成临时作用域，语句执行结束后，该作用域就会被释放。关于函数作用域请参考：函数作用域和作用域链

3、this 指针

this 指针存在于函数中，用以标识函数运行时所处的上下文。函数的类型不同，this 指向规则也不一样：对于普通函数，this 始终指向全局对象window；对于构造函数，this则指向新创建的对象；对于方法，this指向调用该方法的对象。另外，Function 对象也提供了call、apply 和 bind 等方法来改变函数的 this 指向，其中，call 和 apply 主动执行函数，bind 一般在事件回调中使用，而 call 和 apply 的区别只是参数的传递方式不同。关于更多介绍请参考：深入理解 call,apply和 bind

如果往深的去理解，无论什么函数，this 是否被改变， 本质上，this 均指向触发函数运行时的那个对象。而在函数运行时，this 的值是不能被改变的。

4、new 操作符

函数的创建有三种方式，即 显式声明、匿名定义 和 new Function() 。前面提到，JS 中的函数即可以是函数，也可以是方法，还可以是构造函数。

当使用 new 来创建对象时，该函数就是构造函数，JS 将新对象的原型链指向了构造函数的原型对象，于是就在新对象和函数对象之间建立了一条原型链，通过新对象可以访问到函数对象原型 prototype 中的方法和属性。关于构造函数和 new 操作符请参考： 深入理解 new 操作符

5、闭包

闭包不是一个孤立的概念，需要从函数作用域的角度来理解。

每个函数都有自己的作用域，如果在一个函数里定义了另一个函数，那么对应的就有两个作用域，这两个作用域就会形成一个链条，俗称作用域链。本质上讲，作用域链是一个自上而下的链表， 链表的最顶端是内部函数作用域，链表的最底端是全局作用域。内部函数有权访问整个作用域链上的变量。正常情况下，每当一个函数执行完毕，对应的作用域就会从该链表上移除，然后销毁。

但如果函数 A 把函数 B 作为返回值返回时，情况又不一样。

首先，函数 A 返回的是函数 B 的引用，也就是说，B 可能会在其他地方被调用。上面提到，函数 B 的定义是位于函数 A 内部，因此 A 和 B 会形成一条作用域链，函数 B 有可能会读取 A 中的变量 。为了保证函数 B 能够在其他地方正确执行，函数 B 所在的这条作用域链就不能被破坏。所以，即使函数 A 执行返回后，A 的作用域也不能释放，需要一直保存在内存中，以确保函数 B 能够正常读取里面的变量。函数 B 具有永久访问 A 作用域的特权，确切说，函数 B 就是闭包 。

总而言之，闭包就是一个有权访问另一个函数作用域的函数。

6、单线程与事件循环

JavaScript 是单线程语言。在浏览器中，当JS代码被加载时，浏览器会为其分配一个主线程来执行任务，主线程会在栈中创建一个全局执行环境 （全局作用域）。每当有一个函数进入执行流时，就会形成一个对应的执行环境（函数作用域），并将该执行环境压入栈中。每当一个函数执行完毕以后，对应的执行环境就会从栈中弹出，然后被销毁。这就是执行环境栈，执行环境栈的作用就是保证所有的函数能按照正确的顺序被执行。

但在浏览器中，有一些任务是非常耗时的，比如 ajax请求、定时器、事件等。为了保证主线程上的任务不被阻塞，JavaScript 内部维护了一个任务队列， 当这些耗时任务结束时（Ajax 请求返回、定时器超时、事件被触发），就将对应的回调函数插入队列中进行等待。这些任务的执行时机并不确定，只有当所有同步任务执行完毕后，执行环境栈被清空（栈底的全局执行环境会一直存在，直到进程退出）以后，然后再从任务队列中依次读取回调函数，并将其压入执行环境栈中。于是，主线程开始执行新的同步任务，执行完毕后再从栈中弹出，栈被清空。

主线程从任务队列中读取任务是不断循环的，每当栈被清空后，主线程就会从任务队列中读取新的任务并执行，如果没有新的任务，就会一直等待，直到有新的任务。JavaScript 的这种执行机制就叫做任务循环。因为每个任务都由一个事件所触发，所以也叫 “事件循环”。

7、Ajax 和 跨域技术    

Ajax 是浏览器专门用来和服务器进行交互的异步通讯技术，其核心对象是 XMLHttpRequest，通过该对象可以创建一个 Ajax 请求。Ajax 请求是一个耗时的异步操作，当请求发出以后，Ajax 提供了两个状态位来描述请求在不同阶段的状态，这两个状态位分别是 readyState 和 status ，readyState 通过 5个状态码来描述一个请求的 5 个阶段：

• 0 - 请求未发送，初始化阶段
• 1 - 请求发送中，服务器还未收到请求
• 2 - 请求发送成功，服务器已收到请求
• 3 - 服务器处理完成，开始响应请求，传输数据
• 4 - 客户端收到请求，并完成了数据下载，生成了响应对象

status 用于描述服务端对请求处理的情况，200 表示正确响应了请求，404 表示服务器找不到资源，500 代表服务器内部异常等等。

Ajax 对象还可以设置一个 timeout 值，代表超时时间。切记：timeout 只会影响 readyState，而不会影响 status，因为超时只会中断数据传输，但不会影响服务器的处理结果。 如果 timeout 设置的不合理，就会导致响应码 status 是 200，但 response里却没有数据，这种情况就是服务器正确响应了请求，但数据的下载被超时中断了。

为了保证用户信息的安全，浏览器引入了同源策略，对脚本请求做了限制，不允许 Ajax 跨域请求服务器 ，只允许请求和当前地址同域的服务器资源。但不限制 HTML 标签发送跨域请求，比如 script、img、a 标签等，因此可以利用标签跨域能力来实现跨域请求，这就是 JSONP 能够跨域的原理。

JSONP 虽然可以解决跨域问题，但只能发送 GET 请求，并且没有有效的错误捕获机制 。为了解决这个问题，W3C 在 XMLHttpRequest Level2 中提出了 CORS 规范，即 “跨域资源共享”。它不是一个新的 API，而是一个标准规范 。当浏览器发现该请求需要跨域时，就会自动在头信息中添加一个 Origin 字段，用以说明本次请求来自哪个源。服务器根据这个值，决定是否同意这次请求。 关于 CORS 的详细介绍请参考：跨域资源共享 CORS 详解 

随着移动端的快速发展，Web 技术的应用场景正在变得越来越复杂，“关注点分离” 原则在系统设计层面就显得越来越重要，而 XMLHttpRequest 是 Ajax 最古老的一个接口，因而不太符合现代化的系统设计理念。因此，浏览器提供了一个新的 Ajax 接口，即 Fetch，Fetch 是基于 ES6 的 Promise 思想设计的，更符合关注点分离原则。关于 Fetch 的更多介绍请参考：传统 Ajax 已死，Fetch 永生

8、模块化

历史上，JavaScript 规范一直没有模块（Module）体系，即无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。在 ES6 之前，为了实现 JS 模块化编程，社区制定了一些模块加载方案，最主要有 CMD 和 AMD 两种，分别以 commonjs 和 requirejs 为代表。ES6 在语言标准的层面上，实现了模块化编程，其设计思想是，尽量静态化，使得编译时就能确定模块的依赖关系，即编译时加载，而 CMD 和 AMD 是在运行时确定依赖关系，即运行时加载。关于 ES6 模块化请参考：ES6模块化

9、Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，它的运行不依赖于浏览器作为宿主环境，而是和服务端程序一样可以独立的运行，这使得 JavaScript 编程第一次从客户端被带到了服务端，Node.js 在服务端的优势是，它采用单线程和异步 I/O 模型，实现了一个高并发、高性能的运行时环境。相比传统的多线程模型，Node.js 实现简单，并且可以减少资源开销。关于 Node.js单线程模型请参考：Node.js 事件循环机制

10、ES6

ES6 是 ECMAScript 6.0 的简写，即 JavaScript 语言的下一代标准，已经在 2015年6月正式发布了，它的目标是让JS能够方便的开发企业级大型应用程序，因此，ES6的一些规范正在逐渐向Java、C# 等后端语言标准靠近。在 ES6 规范中，比较重大的变化有以下几个方面：

• 新增 let、const 命令 来声明变量，和var 相比，let 声明的变量不存在变量提升问题，但没有改变JS弱类型的特点，依然可以接受任意类型变量的声明；const 声明的变量不允许在后续逻辑中改变，提高了JS语法的严谨性。
• 新增解构赋值、rest 语法、箭头函数等，这些都是为了让代码看起来更简洁，而包装的语法糖。
• 新增模块化机制，这是 JavaScript 走向规范比较重要的一步，让前端更方便的实现工程化。
• 新增类和继承的概念，配合模块化，JavaScript 也可以实现高复用、高扩展的系统架构。
• 新增模板字符串功能，高效简洁，结束拼接字符串的时代。
• 新增 Promise 机制，解决异步回调多层嵌套的问题。

CSS 篇

1、CSS选择器

CSS 选择器即通过某种规则来匹配相应的标签，并为其设置 CSS 样式，常用的有类选择器、标签选择器、ID选择器、后代选择器、群组选择器、伪类选择器(before/after)、兄弟选择器(+~)、属性选择器等等。

2、CSS Reset

HTML 标签在不设置任何样式的情况下，也会有一个默认的 CSS 样式，而不同内核浏览器对于这个默认值的设置则不尽相同，这样可能会导致同一套代码在不同浏览器上的显示效果不一致，而出现兼容性问题。因此，在初始化时，需要对常用标签的样式进行初始化，使其默认样式统一，这就是 CSS Reset ，即 CSS 样式重置，比如：

*{ margin:0; padding:0; } 

就是最简单 CSS Reset。 关于 CSS 重置请参考：Neat.css

3、盒子布局

盒子模型是CSS比较重要的一个概念，也是CSS 布局的基石。 常见的盒子模型有块级盒子(block)和行内盒子(inline-block)，与盒子相关的几个属性有：margin、border、padding和content 等，这些属性的作用是设置盒子与盒子之间的关系以及盒子与内容之间的关系，而 box-sizing 属性会影响盒子大小的计算方式。

需要注意的是：

只有普通文档流中块级盒子的垂直外边距才会发生合并，而具有 BFC 特性盒子的外边距不会合并。

4、浮动布局

设置元素的 float 属性值为 left 或 right，就能使该元素脱离普通文档流，向左或向右浮动。一般在做宫格布局时会用到，如果子元素全部设置为浮动，则父元素是塌陷的，这时就需要清除浮动，清除浮动的方法也很多，常用的方法是在元素末尾加空元素设置 clear: both，更高级一点的就给父容器设置 before/after 来模拟一个空元素，还可以直接设置 overflow 属性为 auto/hidden 来清除浮动。除浮动可以实现宫格布局，行内盒子(inline-block) 和 table 也可以实现同样的效果。 

5、定位布局

设置元素的 position 属性值为 relative/absolute/fixed，就可以使该元素脱离文档流，并以某种参照坐标进行偏移。其中，releave 是相对定位，它以自己原来的位置进行偏移，偏移后，原来的空间不会被其他元素占用；absolute 是绝对定位，它以离自己最近的定位父容器作为参照进行偏移；为了对某个元素进行定位，常用的方式就是设置父容器的 poistion:relative，因为相对定位元素在不设置 top 和 left 值时，不会对元素位置产生影响；fixed 即固定定位，它则以浏览器窗口为参照物，PC网页底部悬停的banner一般都可以通过fixed定位来实现，但fixed属性在移动端有兼容性问题，因此不推荐使用，可替代的方案是：绝对定位+内部滚动。

6、弹性布局

弹性布局即 Flex 布局，定义了 flex 的容器一个可伸缩容器，首先容器本身会根据容器中的元素动态设置自身大小；然后当Flex容器被应用一个大小时（width和height），将会自动调整容器中的元素适应新大小。Flex容器也可以设置伸缩比例和固定宽度，还可以设置容器中元素的排列方向（横向和纵向）和是否支持元素的自动换行。有了这个神器，做页面布局的可以方便很多了。注意，设为Flex 布局以后，子元素的 float、clear、inline-block 和 vertical-align 属性将失效。关于 flexbox 请参考：图解CSS3 Flexbox属性

7、CSS3 动画

CSS3 中规范引入了两种动画，分别是 transition 和 animation，transition 可以让元素的 CSS 属性值的变化在一段时间内平滑的过渡，形成动画效果，为了使元素的变换更加丰富多彩，CSS3 还引入了 transfrom 属性，它可以通过对元素进行 平移(translate)、旋转(rotate)、放大缩小(scale)、倾斜(skew) 等操作，来实现 2D 和 3D 变换效果。transiton 还有一个结束事件 transitionEnd，该事件是在 CSS 完成过渡后触发，但如果过渡在完成之前被移除，则不会触发 transitionEnd 。

animation 需要设置一个 @keyframes，来定义元素以哪种形式进行变换， 然后再通过动画函数让这种变换平滑的进行，从而达到动画效果，动画可以被设置为永久循环演示。设置 animation-play-state:paused 可以暂停动画，设置 animation-fill-mode:forwards 可以让动画完成后定格在最后一帧。

另外，还可以通过JS 监听 animation 的“开始”、“结束” 和 “重复播放” 状态，分别对应三个事件，即 animationStart、animationEnd、animationIteration 。需要注意的是：

当播放次数设置为1时，不会触发 animationIteration 。

和 transition相比，animation 设置动画效果更灵活更丰富，二者还有一个区别是：transition 只能通过主动改变元素的 css 值才能触发动画效果，而 animation 一旦被应用，就开始执行动画。

另外，HTML5 还新增了一个动画API，即 requestAnimationFrame，它通过JS来调用，并按照屏幕的绘制频率来改变元素的CSS属性，从而达到动画效果，关于这个API的介绍请参考：requestAnimationFrame 知多少？

8、BFC

BFC 是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素。比如：内部滚动就是一个 BFC，当一个父容器的 overflow-y 设置为 auto 时，并且子容器的长度大于父容器时，就会出现内部滚动，无论内部的元素怎么滚动，都不会影响父容器以外的布局，这个父容器的渲染区域就叫 BFC。满足下列条件之一就可触发 BFC：

• 根元素，即 HTML 元素
• float 的值不为 none
• overflow 的值不为 visible
• display 的值为 inline-block、table-cell、table-caption
• position 的值为 absolute 或 fixed

9、Sprite，Iconfont，font-face

对于大型站点，为了减少 http 请求的次数，一般会将常用的小图标排到一个大图中，页面加载时只需请求一次网络， 然后在 css 中通过设置 background-position 来控制显示所需要的小图标，这就是 Sprite 图。

Iconfont，即字体图标，就是将常用的图标转化为字体资源存在文件中，通过在 CSS 中引用该字体文件，然后可以直接用控制字体的css属性来设置图标的样式，字体图标的好处是节省网络请求、其大小不受屏幕分辨率的影响，并且可以任意修改图标的颜色。

font-face 是 CSS3 中的一个模块，通过 font-face 可以定义一种全新的字体，然后就可以通过 css 属性 font-family 来使用这个字体了，即使操作系统没有安装这种字体，网页上也会正常显示出来。

10、CSS HACK

早期，不同内核浏览器对CSS属性的解析存在着差异，导致显示效果不一致，比如 margin 属性在 ie6 中显示的距离会比其他浏览器中显示的距离宽 2 倍，也就是说 margin-left:20px; 在ie6中距左侧元素的实际显示距离是 40px，而在非 ie6 的浏览器上显示正常。因此，如果要想让所有浏览器中都显示是 20px 的宽度，就需要在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号，以达到应用不同的CSS样式的目的，这种方式就是 “css hack”， 对于 ie6 中的 margin 应用 hack 就会变成这样：

.el {
　　margin-left: 20px;  // 其他
　　_margin-left: 10px; // ie6
}

兼容各大浏览器的 css hack 如下：

.element {
    color: #000;      // W3c标准
    [;color:#f00;];   // Webkit(Chrome/Safari) 
    color: #666\9;    // IE8
    *color: #999;     // IE7
    _color: #333;     // IE6  
}
:root .element {color: #0f0\9;}  // IE9
// Opera
@media all and (-webkit-min-device-pixel-ratio:10000), 
not all and (-webkit-min-device-pixel-ratio:0) {
    .element {color:#336699;}
}
// Firefox
@-moz-document url-prefix() {
    .element {color: #f1f1f1}
}　　

HTML 篇

1、BOM 

BOM 是 Browser Object Model 的缩写，即浏览器对象模型，当一个浏览器页面初始化时，会在内存创建一个全局的对象，用以描述当前窗口的属性和状态，这个全局对象被称为浏览器对象模型，即BOM。BOM的核心对象就是 window，window 对象也是BOM的顶级对象，其包含了浏览器的六个核心模块：

• document - 即文档对象，渲染引擎在解析HTML代码时，会为每一个元素生成对应的DOM对象，由于元素之间有层级关系，因此整个HTML代码解析完以后，会生成一个由不同节点组成的树形结构，俗称DOM树，document 用于描述DOM树的状态和属性，并提供了很多操作DOM的API。
• frames - HTML 子框架，即在浏览器里嵌入另一个窗口，父框架和子框架拥有独立的作用域和上下文。
• history - 以栈(FIFO)的形式保存着页面被访问的历史记录，页面前进即入栈，页面返回即出栈。
• location - 提供了当前窗口中加载的文档相关信息以及一些导航功能。
• navigator - 用来描述浏览器本身，包括浏览器的名称、版本、语言、系统平台、用户特性字符串等信息。
• screen - 提供了浏览器显示屏幕的相关属性，比如显示屏幕的宽度和高度，可用宽度和高度。

2、DOM 系统

DOM 是 Document Object Model 的缩写，即 文档对象模型，是所有浏览器公共遵守的标准，DOM 将HTML和XML文档映射成一个由不同节点组成的树型结构，俗称DOM树。其核心对象是document，用于描述DOM树的状态和属性，并提供对应的DOM操作API。随着历史的发展，DOM 被划分为1级、2级、3级，共3个级别：

• 1级DOM - 在1998年10月份成为W3C的提议，由 DOM 核心与 DOM HTML 两个模块组成。DOM核心能映射以XML为基础的文档结构，允许获取和操作文档的任意部分。DOM HTML通过添加HTML专用的对象与函数对DOM核心进行了扩展。
• 2级DOM - 鉴于1级DOM仅以映射文档结构为目标，DOM 2级面向更为宽广。通过对原有DOM的扩展，2级DOM通过对象接口增加了对鼠标和用户界面事件（DHTML长期支持鼠标与用户界面事件）、范围、遍历（重复执行DOM文档）和层叠样式表（CSS）的支持。同时也对DOM 1的核心进行了扩展，从而可支持XML命名空间。
• 3级DOM - 通过引入统一方式载入和保存文档和文档验证方法对DOM进行进一步扩展，DOM3包含一个名为“DOM载入与保存”的新模块，DOM核心扩展后可支持XML1.0的所有内容，包括XML Infoset、 XPath、和XML Base。

浏览器对不同级别DOM的支持情况如下所示：

从图中可以看出，移动端常用的 webkit 内核浏览器目前只支持 DOM2，而不支持 DOM3 。

3、事件系统

事件是用户与页面交互的基础，到目前为止，DOM事件从PC端的 鼠标事件(mouse) 发展到了 移动端的 触摸事件(touch) 和 手势事件(guesture)，touch事件描述了手指在屏幕操作的每一个细节，guesture 则是描述多手指操作时更为复杂的情况，总结如下：

• 第一根手指放下，触发 touchstart，除此之外什么都不会发生
• 手指滑动时，触发touchmove
• 第二根手指放下，触发 gesturestart 
• 触发第二根手指的 touchstart 
• 立即触发 gesturechange 
• 任意手指移动，持续触发 gesturechange
• 第二根手指弹起时，触发 gestureend，以后将不会再触发 gesturechange 
• 触发第二根手指的 touchend 
• 触发touchstart (多根手指在屏幕上，提起一根，会刷新一次全局touch)  
• 弹起第一根手指，触发 touchend 

更多关于手势事件的介绍请参考：gesture事件处理复杂手势

DOM2.0 模型将事件处理流程分为三个阶段，即 事件捕获阶段、事件处理阶段、事件冒泡阶段，如图所示：

• 事件捕获：当用户触发点击事件后，顶层对象 document 就会发出一个事件流，从最外层的 DOM 节点向目标元素节点传递，最终到达目标元素。
• 事件处理：当到达目标元素之后，执行目标元素绑定的处理函数。如果没有绑定监听函数，则不做任何处理。
• 事件冒泡：事件流从目标元素开始，向最外层DOM节点传递，途中如果有节点绑定了事件处理函数，这些函数就会被执行。

利用事件冒泡原理可以实现 “事件委托”。

所谓事件委托，就是在父元素上添加事件监听器，用以监听和处理子元素的事件，避免重复为子元素绑定相同的事件。当目标元素的事件被触发以后，这个事件就从目标元素开始，向最外层元素传递，最终冒泡到父元素上，父元素再通过 event.target 获取到这个目标元素，这样做的好处是，父元素只需绑定一个事件监听，就可以对所有子元素的事件进行处理了，从而减少了不必要的事件绑定，对页面性能有一定的提升。

4、HTML 渲染流程

渲染引擎一开始会从网络层获取请求文档的内容，内容的大小一般限制在 8000 个块以内。

然后进行如下所示的基本流程： 

• HTML Parser 解析 HTML 文档，并将各标记逐个转化为 DOM 节点，生成 “DOM树”。
• CSS Parser 解析外部 CSS 文件以及样式元素中的样式数据，生成 “CSSOM树”。
• “DOM树” 和 “CSSOM树” 通过 “附着” 将创建另一个树结构：“渲染树”。
• 渲染树包含多个带有视觉属性（如颜色和尺寸）的矩形，这些矩形的排列顺序就是它们将在屏幕上显示的顺序。
• 渲染树构建完毕之后，进入“布局” 处理阶段，也就是为每个节点分配一个应出现在屏幕上的确切坐标。
• 下一个阶段是 “绘制”，渲染引擎会遍历渲染树，由用户界面后端层将每个节点绘制出来。

需要注意的是：

这是一个渐进的过程。为达到更好的用户体验，呈现引擎会力求尽快将内容显示在屏幕上。它不必等到整个 HTML 文档解析完毕之后，就会开始构建呈现树和设置布局。在不断接收和处理来自网络的其余内容的同时，呈现引擎会将部分内容解析并显示出来。

5、重绘与回流

当渲染树中的一部分(或全部)因为元素的规模尺寸、布局、隐藏等改变而需要重新构建，就称为 “回流”。

当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局，就称为 “重绘”。

回流必将引起重绘，而重绘不一定会引起回流。

引起重绘和回流的操作如下：

• 添加、删除元素（回流+重绘）
• 隐藏元素，display: none（回流+重绘），visibility:hidden（只重绘，不回流）
• 移动元素，比如改变 top、left 的值，或者移动元素到另外一个父元素中。（重绘+回流）
• 对 style 的操作（对不同的属性操作，影响不一样）
• 还有一种是用户的操作，比如改变浏览器大小，改变浏览器的字体大小等（回流+重绘）

注意问题：

transform 操作不会引起重绘和回流，是一种高效率的渲染。这是因为transform属于合成属性，对合成属性进行transition/animation 动画时将会创建一个合成层，这使得动画元素在一个独立的层中进行渲染，当元素的内容没有发生改变，就没必要进行重绘，浏览器会通过重新复合来创建动画帧。

6、本地存储

本地存储最原始的方式就是 cookie,cookie 是存放在本地浏览器的一段文本，数据以键值对的形式保存，可以设置过期时间。 但是 cookie 不适合大量数据的存储，因为每请求一次页面，cookie 都会发送给服务器，这使得 cookie 速度很慢而且效率也不高。因此cookie的大小被限制为4k左右(不同浏览器可能不同,分HOST)，如下所示：

• Firefox 和 Safari 允许 cookie 多达 4097 个字节，包括名(name)、值(value) 和 等号。
• Opera 允许 cookie 多达 4096 个字节，包括：名(name)、值(value) 和 等号。
• Internet Explorer 允许 cookie 多达4095个字节，包括：名(name)、值(value) 和 等号。

在所有浏览器中，任何 cookie 大小超过限制都被忽略，且永远不会被设置。

html5 提供了两种在客户端存储数据的新方法：localStorage 和 sessionStorage, 它们都是以 key/value 的形式来存储数据，前者是永久存储，后者的存储期限仅限于浏览器会话(session)，即当浏览器窗口关闭后，sessionStorage中的数据被清除。

localStorage 的存储空间大约5M左右(不同浏览器可能不同，分 HOST)，这个相当于一个5M大小的前端数据库，相比于cookie，可以节约带宽，但localStorage在浏览器隐私模式下是不可读取的，当存储数据超过了localStorage 的存储空间后会抛出异常。

此外，H5还提供了 websql 和 indexedDB，允许前端以关系型数据库的方式来存储本地数据，相对来说，这个功能目前应用的场景比较少，此处不作介绍。

7、浏览器缓存机制

浏览器缓存机制是指通过 HTTP 协议头里的 Cache-Control (或 Expires) 和 Last-Modified (或 Etag) 等字段来控制文件缓存的机制。

Cache-Control 用于控制文件在本地缓存有效时长。最常见的，比如服务器回包：Cache-Control:max-age=600 表示文件在本地应该缓存，且有效时长是600秒 (从发出请求算起)。在接下来600秒内，如果有请求这个资源，浏览器不会发出 HTTP 请求，而是直接使用本地缓存的文件。

Last-Modified 是标识文件在服务器上的最新更新时间。下次请求时，如果文件缓存过期，浏览器通过 If-Modified-Since 字段带上这个时间，发送给服务器，由服务器比较时间戳来判断文件是否有修改。如果没有修改，服务器返回304告诉浏览器继续使用缓存；如果有修改，则返回200，同时返回最新的文件。

Cache-Control 通常与 Last-Modified 一起使用。一个用于控制缓存有效时间，一个在缓存失效后，向服务查询是否有更新。

Cache-Control 还有一个同功能的字段：Expires。Expires 的值一个绝对的时间点，如：Expires: Thu, 10 Nov 2015 08:45:11 GMT，表示在这个时间点之前，缓存都是有效的。

Expires 是 HTTP1.0 标准中的字段，Cache-Control 是 HTTP1.1 标准中新加的字段，功能一样，都是控制缓存的有效时间。当这两个字段同时出现时，Cache-Control 是高优化级的。

Etag 也是和 Last-Modified 一样，对文件进行标识的字段。不同的是，Etag 的取值是一个对文件进行标识的特征字串。在向服务器查询文件是否有更新时，浏览器通过 If-None-Match 字段把特征字串发送给服务器，由服务器和文件最新特征字串进行匹配，来判断文件是否有更新。没有更新回包304，有更新回包200。Etag 和 Last-Modified 可根据需求使用一个或两个同时使用。两个同时使用时，只要满足基中一个条件，就认为文件没有更新。

浏览缓存的基本框架如下图所示：

关于更多浏览器缓存介绍请参考：H5 缓存机制浅析 移动端 Web 加载性能优化

8、History

用户访问网页的历史记录通常会被保存在一个类似于栈的对象中，即 history 对象，点击返回就出栈，跳下一页就入栈。 它提供了以下方法来操作页面的前进和后退：

• window.history.back( )  返回到上一个页面
• window.history.forward( )  进入到下一个页面
• window.history.go( [delta] )  跳转到指定页面

HTML5 对History Api 进行了增强，新增了两个Api 和一个事件，分别是 pushState、replaceState 和 onpopstate：

• pushState 是往 history 对象里添加一个新的历史记录。
• replaceState 是替换 history 对象中的当前历史记录。
• onpopstate 当点击浏览器后退按钮或JS调用 history.back 都会触发该事件。

onpopstate 和 onhashchange 的区别：

onhashchange 本来是用来监听hash变化的，但可以被利用来做客户端前进和后退事件的监听，而 onpopstate 是专门用来监听浏览器前进后退的，不仅可以支持 hash，非 hash 的同源 url 也支持。

9、HTML5 离线缓存

HTML5离线缓存又叫Application Cache，是从浏览器的缓存中分出来的一块缓存区，如果要在这个缓存中保存数据，可以使用一个描述文件（manifest file），列出要下载和缓存的资源。

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。manifest 文件可分为三个部分：

• CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
• NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
• FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

离线缓存为应用带来三个优势：

• 离线浏览 - 用户可在应用离线时使用它们
• 速度 - 已缓存资源加载得更快
• 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

10、Web语义化与SEO

Web语义化是指使用语义恰当的标签，使页面有良好的结构，页面元素有含义，能够让人和搜索引擎都容易理解。

SEO是指在了解搜索引擎自然排名机制的基础之上，对网站进行内部及外部的调整优化，改进网站在搜索引擎中关键词的自然排名，获得更多的展现量，吸引更多目标客户点击访问网站，从而达到互联网营销及品牌建设的目标。

搜索引擎通过爬虫技术获取的页面就是由一堆 html 标签组成的代码，人可以通过可视化的方式来判断页面上哪些内容是重点，而机器做不到。 但搜索引擎会根据标签的含义来判断内容的权重，因此，在合适的位置使用恰当的标签，使整个页面的语义明确，结构清晰，搜索引擎才能正确识别页面中的重要内容，并予以较高的权值。比如h1~h6这几个标签在SEO中的权值非常高，用它们作页面的标题就是一个简单的SEO优化。

 

 

原创发布  @一像素  2017.06  

更新：2017.07.25

更新：2018.06.06

更新：2018.07.17