Web前端知识体系精简

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 样式重置，比如：

1

*{ 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 就会变成这样：

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 获取到这个目标元素，这样做的好处是，父元素只需绑定一个事件监听，就可以对所有子元素的事件进行处理了，从而减少了不必要的事件绑定，对页面性能有一定的提升。

渲染引擎一开始会从网络层获取请求文档的内容，内容的大小一般限制在 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优化。

閱讀更多 web前端er 的文章

關鍵字: 知识 JSON ECMAScript