大前端核心技术详尽篇

P.S: 本文暂时维护在作业部落上
P.S: 更多请及时关注 https://github.com/hylerrix
P.S: 转载请联系微信号：CorvoH

技术碎片

正则表达式、LaTeX

计算机网络

HTTP 协议

URL、URI(待做)

URL 一般包括几大部分：

• protocol，协议头，譬如有 http、ftp 等
• host，主机域名或 IP 地址
• port，端口号
• path，目录路径
• query，查询参数
• fragment，即 # 后的 hash 值，一般用来定位到某个位置

URL = 协议 + Web 服务器名(域名或 IP) + 目录名 + 文件名(可选)
或
URL = 协议 + Web 服务器名(域名或 IP) + CGI 程序接口名

其中，可选文件名由服务器配置，常见默认为 index.html 和 default.htm 等。

URL 根据访问目标不同，可以包括：

• 服务器域名
• 访问的文件路径
• 收件地址
• 用户名、密码、服务器端口号
• 新闻组名

HTTP 版本

HTTP 1.0

HTTP 2.0

HTTP 2.0不是 HTTPS，它相当于是 HTTP 的下一代规范。使用 HTTP 2.0 时，不需要雪碧图、域名拆分等优化技术。

HTTP 2.0 与 HTTP 1.1 的不同点

• HTTP 1.1中，每请求一个资源，都是需要开启一个 TCP/IP 连接的，所以对应的结果是，每一个资源对应一个 TCP/IP 请求，由于 TCP/IP 本身有并发数限制，所以当资源一多，速度就显著慢下来
• HTTP 2.0中，一个 TCP/IP 请求可以请求多个资源，也就是说，只要一次 TCP/IP 请求，就可以请求若干个资源，分割成更小的帧请求，速度明显提升。

HTTP 2.0 新特性

• 多路复用(即一个 TCP/IP 连接可以请求多个资源)
• 首部压缩(HTTP 头部压缩，减少体积)
• 二进制分帧(在应用层跟传送层之间增加了一个二进制分帧层，改进传输性能，实现低延迟和高吞吐量）
• 服务器端推送(服务端可以对客户端的一个请求发出多个响应，可以主动通知客户端)
• 请求优先级(如果流被赋予了优先级，它就会基于这个优先级来处理，由服务器决定需要多少资源来处理该请求。)

HTTPS

HTTPS 就是安全版本的 HTTP，HTTP 请求的安全系数太低。

升级为 HTTPS

一般来说，如果要将网站升级成 HTTPS ，需要后端支持(后端需要申请证书等)，然后 HTTPS 的开销也比 HTTP 要大（因为需要额外建立安全链接以及加密等），所以一般来说 HTTP 2.0 配合 HTTPS 的体验更佳(因为 HTTP2.0 更快)

HTTPS 与 HTTP 的区别

• HTTPS 在请求前，会建立 SSL 链接，确保接下来的通信都是加密的，无法被轻易截取分析

SSL/TLS的握手流程

1. 浏览器请求建立 SSL 链接，并向服务端发送一个随机数，Client random 和客户端支持的加密方法，比如 RSA 加密，此时是明文传输。
2. 服务端从中选出一组加密算法与 Hash 算法，回复一个随机数，Server random，并将自己的身份信息以证书的形式发回给浏览器(证书里包含了网站地址，非对称加密的公钥，以及证书颁发机构等信息)
3. 浏览器收到服务端的证书后
   
   • 验证证书的合法性(颁发机构是否合法，证书中包含的网址是否和正在访问的一样)，如果证书信任，则浏览器会显示一个小锁头，否则会有提示。
   • 用户接收证书后(不管信不信任)，浏览会生产新的随机数–Premaster secret，然后证书中的公钥以及指定的加密方法加密 Premaster secret，发送给服务器。
   • 利用 Client random、Server random和 Premaster secret 通过一定的算法生成 HTTP 链接数据传输的对称加密 key- session key
   • 使用约定好的 HASH 算法计算握手消息，并使用生成的 session key 对消息进行加密，最后将之前生成的所有信息发送给服务端。
4. 服务端收到浏览器的回复
   
   • 利用已知的加解密方式与自己的私钥进行解密，获取 Premaster secret
   • 和浏览器相同规则生成 session key
   • 使用 session key 解密浏览器发来的握手消息，并验证Hash是否与浏览器发来的一致
   • 使用 session key 加密一段握手消息，发送给浏览器
5. 浏览器解密并计算握手消息的HASH，如果与服务端发来的HASH一致，此时握手过程结束，

HTTP 主要方法

• GET，获取 URI 指定的信息(文件、CGI 程序)。
• POST，发送数据。
• HEAD，只返回 HTTP 消息头。
• OPTIONS，用于通知或查询通信选项。
• PUT，替换 URI 指定的服务器上文件，若不存在则新建。
• DELETE，删除 URI 指定的服务器上文件，若不存在则新建。
• TRACE，将服务器收到的请求行和头部直接返回。
• CONNECT，代理传输加密消息时使用的方法。

PUT 和 DELETE 常用于 RESTful API 设计中，App 和后端交互时常用

HTTP 请求消息(待做)

方法<空格>URI<空格>HTTP 版本
字段名:字段值
...
空行
消息体

消息头，从 字段名:字段值 开始，一直延伸到空行。
消息体可以包含 POST 方法要发送的内容等。

HTTP 响应消息(待做)

HTTP 版本<空格>状态码<空格>响应短语
字段名:字段值
...
空行
消息体

消息体均为二进制：

• 文件中读取的数据
• 如 CGI 程序输出的数据

HTTP 主要头字段

一般来说，请求头部和响应头部是匹配分析的。

• 请求头部的 Accept 和响应头部的 Content-Type 匹配，否则报错
• 跨域请求时，请求头部的 Origin 要匹配响应头部的 Access-Control-Allow-Origin，否则报跨域错误
• 使用缓存时，请求头部的 If-Modified-Since、If-None-Match 分别和响应头的 Last-Modified、Etag 对应

CRLF 是回车换行，一般作为分隔符存在。请求头和实体消息之间有一个 CRLF 分隔，响应头部和响应实体之间用一个 CRLF 分隔。

HTTP 报文结构

HTTP 状态码

HTTP 状态码，HTTP Status Code，是用以表示网页服务器超文本传输协议响应状态的 3 位数字代码。它由 RFC 2616 规范定义的，并得到 RFC 2518、RFC 2817、RFC 2295、RFC 2774 与 RFC 4918 等规范扩展。HTTP 状态码的官方注册表由互联网号码分配局 Internet Assigned Numbers Authority，维护。

• 1XX 消息，代表请求已被接受，需要继续处理。这类响应是临时响应，只包含状态行和某些可选的响应头信息，并以空行结束。由于 HTTP/1.0 协议中没有定义任何 1xx 状态码，所以除非在某些试验条件下，服务器禁止向此类客户端发送 1xx 响应。

• 2XX 成功，代表请求已成功被服务器接收、理解、并接受。

• 3XX 重定向，代表需要客户端采取进一步的操作才能完成请求。通常用来重定向，后续的请求地址(重定向目标)在本次相应的 Location 域中指明。当且仅当后续的请求所使用的方法是 GET 或者 HEAD 时，用户浏览器才可以在没有用户介入的情况下自动提交所需要的后续请求。客户端应当自动监测无限循环重定向(例如：A→B→C→……→A 或 A→A)，因为这会导致服务器和客户端大量不必要的资源消耗。按照 HTTP/1.0 版规范的建议，浏览器不应自动访问超过5次的重定向。

• 4XX 客户端错误，代表客户端看起来可能发生了错误，妨碍了服务器的处理。除非响应的是一个HEAD请求，否则服务器就应该返回一个解释当前错误状况的实体，以及这是临时的还是永久性的状况。这些状态码适用于任何请求方法。浏览器应当向用户显示任何包含在此类错误响应中的实体内容。

• 5XX 服务器错误，代表了服务器在处理请求的过程中有错误或者异常状态发生，也有可能是服务器意识到以当前的软硬件资源无法完成对请求的处理。除非这是一个 HEAD 请求，否则服务器应当包含一个解释当前错误状态以及这个状况是临时的还是永久的解释信息实体。浏览器应当向用户展示任何在当前响应中被包含的实体。这些状态码适用于任何响应方法。

HTTP 缓存

强缓存与协商缓存

缓存可以简单的划分成两种类型：强缓存(200 from cache)与协商缓存(304)。

• 强缓存(200 from cache)时，浏览器如果判断本地缓存未过期，就直接使用，无需发起 HTTP 请求。对于强缓存，在未过期时，必须更新资源路径才能发起新的请求。
• 协商缓存(304)时，浏览器会向服务端发起 HTTP 请求，然后服务端告诉浏览器文件未改变，让浏览器使用本地缓存。对于协商缓存，使用 Ctrl + F5 强制刷新可以使得缓存无效。

HTTP 缓存头部

强缓存和协商缓存通过缓存头部区分。常用的缓存头部有：If-None-Match/E-tag、If-Modified-Since/Last-Modified、Cache-Control/Max-Age、Pragma/Expires。

属于强缓存控制的：

• (http1.1)Cache-Control/Max-Age，Max-Age 不是一个头部，它是 Cache-Control 头部的值
• (http1.0)Pragma/Expires

属于协商缓存控制的：

• (http1.1)If-None-Match/E-tag
• (http1.0)If-Modified-Since/Last-Modified

其实 HTML 页面中也有一个 meta 标签可以控制缓存方案 Pragma，不过，这种方案还是比较少用到，因为支持情况不佳，譬如缓存代理服务器肯定不支持，所以不推荐。

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

Max-Age 与 Expires

• Expires 使用的是服务器端的时间
• 但是有时候会有这样一种情况-客户端时间和服务端不同步
• 那这样，可能就会出问题了，造成了浏览器本地的缓存无用或者一直无法过期
• 所以一般 HTTP 1.1 后不推荐使用 Expires
• 而Max-Age使用的是客户端本地时间的计算，因此不会有这个问题
• 因此推荐使用Max-Age
• 注意，如果同时启用了 Cache-Control 与 Expires，Cache-Control 优先级高

E-tag 与 Last-Modified

Last-Modified：

• 表明服务端的文件最后何时改变的
• 它有一个缺陷就是只能精确到 1s，
• 然后还有一个问题就是有的服务端的文件会周期性的改变，导致缓存失效

E-tag：

• 是一种指纹机制，代表文件相关指纹
• 只有文件变才会变，也只要文件变就会变，
• 也没有精确时间的限制，只要文件一遍，立马 E-tag 就不一样了

HTTP 各版本缓存控制头部

HTTP 1.0 中的缓存控制头部：

• Pragma：严格来说，它不属于专门的缓存控制头部，但是它设置 no-cache 时可以让本地强缓存失效(属于编译控制，来实现特定的指令，主要是因为兼容 HTTP1.0，所以以前又被大量应用)
• Expires：服务端配置的，属于强缓存，用来控制在规定的时间之前，浏览器不会发出请求，而是直接使用本地缓存，注意，Expires 一般对应服务器端时间，如 Expires：Fri, 30 Oct 1998 14:19:41
• If-Modified-Since/Last-Modified：这两个是成对出现的，属于协商缓存的内容，其中浏览器的头部是 If-Modified-Since，而服务端的是 Last-Modified，它的作用是，在发起请求时，如果 If-Modified-Since 和 Last-Modified 匹配，那么代表服务器资源并未改变，因此服务端不会返回资源实体，而是只返回头部，通知浏览器可以使用本地缓存。Last-Modified，顾名思义，指的是文件最后的修改时间，而且只能精确到 1s 以内

HTTP 1.1 中的缓存控制头部：

• Cache-Control：缓存控制头部，有 no-cache、max-age 等多种取值
• Max-Age：服务端配置的，用来控制强缓存，在规定的时间之内，浏览器无需发出请求，直接使用本地缓存，注意，Max-Age是Cache-Control头部的值，不是独立的头部，譬如Cache-Control: max-age=3600，而且它值得是绝对时间，由浏览器自己计算
• If-None-Match/E-tag：这两个是成对出现的，属于协商缓存的内容，其中浏览器的头部是 If-None-Match，而服务端的是 E-tag，同样，发出请求后，如果 If-None-Match 和 E-tag 匹配，则代表内容未变，通知浏览器使用本地缓存，和 Last-Modified 不同，E-tag 更精确，它是类似于指纹一样的东西，基于 FileEtag INode Mtime Size 生成，也就是说，只要文件变，指纹就会变，而且没有 1s 精确度的限制。

TCP/IP

IP 地址主体
子网掩码，决定 IP 地址哪部分是主机号

主机号为 0 时，表示整个子网
主机号为 1 时，表示向子网上所有设备发送包

TCP/IP 的三次握手四次挥手

TCP 将 HTTP 长保温划分为短报文，通过三次握手与服务端建立连接，进行可靠传输。

【问题1】为什么连接的时候是三次握手，关闭的时候却是四次握手？
答：因为当Server端收到Client端的SYN连接请求报文后，可以直接发送SYN+ACK报文。其中ACK报文是用来应答的，SYN报文是用来同步的。但是关闭连接时，当Server端收到FIN报文时，很可能并不会立即关闭SOCKET，所以只能先回复一个ACK报文，告诉Client端，"你发的FIN报文我收到了"。只有等到我Server端所有的报文都发送完了，我才能发送FIN报文，因此不能一起发送。故需要四步握手。

三次握手

• client：htllo，你是 server 么？
• server：hello，我是 server，你是 client 么？
• client：yes，我是 client

四次挥手

• 主动方：我已经关闭向你那边的主动通道了，只能被动接受了
• 被动方：收到通道关闭消息
• 被动方：那我也告诉你，我这边向你的主动通道也关闭了
• 主动方：最后收到数据，之后双方无法通信

主动方经历的状态：

【注意】 在TIME_WAIT状态中，如果TCP client端最后一次发送的ACK丢失了，它将重新发送。TIME_WAIT状态中所需要的时间是依赖于实现方法的。典型的值为30秒、1分钟和2分钟。等待之后连接正式关闭，并且所有的资源(包括端口号)都被释放。
【问题2】为什么TIME_WAIT状态需要经过2MSL(最大报文段生存时间)才能返回到CLOSE状态？

答：虽然按道理，四个报文都发送完毕，我们可以直接进入CLOSE状态了，但是我们必须假象网络是不可靠的，有可以最后一个ACK丢失。所以TIME_WAIT状态就是用来重发可能丢失的ACK报文。

被动方经历的状态：

TCP/IP 长连接与短连接

TCP/IP 层面的定义：

• 长连接：一个 TCP/IP 连接上可以连续发送多个数据包，在 TCP 连接保持期间，如果没有数据包发送，需要双方发检测包以维持此连接，一般需要自己做在线维持(类似于心跳包)
• 短连接：通信双方有数据交互时，就建立一个 TCP 连接，数据发送完成后，则断开此 TCP 连接

HTTP 层面的定义：

Keep-Alive 不会永远保持，它有一个持续时间，一般在服务器中配置(如 Apache)，另外长连接需要客户端和服务器都支持时才有效

• HTTP 1.0 中，默认使用的是短连接，也就是说，浏览器没进行一次 HTTP 操作，就建立一次连接，任务结束就中断连接，譬如每一个静态资源请求时都是一个单独的连接。
• HTTP 1.1 起，默认使用长连接，使用长连接会有这一行 Connection: keep-alive，在长连接的情况下，当一个网页打开完成后，客户端和服务端之间用于传输 HTTP 的 TCP 连接不会关闭，如果客户端再次访问这个服务器的页面，会继续使用这一条已经建立的连接。

服务器类别(待做)

Web 服务器(待做)

CGI 程序

CGI：对 Web 服务器程序调用其它程序的规则所做的定义。

Apache(待做)

Nginx(待做)

DNS 服务器(待做)

DNS 查询得到 IP 的过程：

• 如果浏览器有缓存、直接使用浏览器缓存，否则使用本机缓存，再没有的话就是用 host
• 如果本地没有，就向 DNS 域名服务器查询，中间过程经过的路由可能也有缓存，查询得到对应的 IP

DNS 查询优化

解析域名过多时，会让首屏加载速度变得过慢，可以考虑 dns-prefetch 优化。

// gethostbyname 返回 IP 地址
<内存地址> = gethostbyname("要查询的服务器域名");
gethostbyname {
    生成发送给 DNS 服务器的查询信息;
    // 发送查询消息，需要委托给操作系统内部协议栈
    向 DNS 服务器发送查询消息;
    接收 DNS 服务器返回的响应消息;
    从响应消息中取出 IP 地址，存放到 <内存地址中>;
    返回应用程序;
}

DNS 预解析

“Google Chrome 浏览器”等现代浏览器还采用了一种称为“DNS 预解析”的技术，可以更快地抓取和载入网页。通过 DNS 查找将网址转换为 IP 地址的过程称为“解析”，反之则称为“反向解析”。“Chrome 浏览器”会通过 DNS 预解析同时查找网页上的其他所有链接，并在后台将这些链接预解析为 IP 地址。因此，当您实际点击网页上的某个链接后，浏览器就能立即将您转到新的网页。

FTP 服务器(待做)

经典问题

浏览器输入网址到显示页面发生了什么

关键字
* level1: http、后台、浏览器渲染、js 引擎
* level2: http 报文通信、render 树构建流程、layout、paint、复合层与简单层、常用优化方案、JS引擎的变量提升、执行上下文、VO、AO、作用域链、回收机制、http 报文结构、缓存机制、http2.0、https、跨域与安全
* level3: 键盘输入、操作系统交互、屏幕显示原理、网卡等硬件交互、浏览器的多进程和浏览器内核的多县城、网络线程、dns 查询、tcp/ip 链接、五层因特尔协议栈、DNS 优化方案、负载均衡、安全拦截、http 场景头部、cookie、跨域、web 安全、http 缓存、http2..0、https、解析 HTML 词法分析成 DOM 树、解析 CSS 为 CSS 规则树、合并 render 树、layout/painting 渲染、复合层的合成、GPU 绘制、外链处理、加载顺序
* level4: 架构、整体把握、大型工程构建

第一种(需要整合)

1. Web 浏览器
2. TCP/IP
3. 网卡驱动
4. 集线器
5. 路由器
6. 接入网
7. 电话局
8. 网络运营商
9. 电话局
10. 接入网
11. 防火墙
12. 缓存服务器
13. 网卡驱动
14. TCP/IP
15. Web 服务器程序

第二种

• 输入地址
• 浏览器查找域名的 IP 地址
• 这一步包括 DNS 具体的查找过程，包括：浏览器缓存->系统缓存->路由器缓存...
• 浏览器向 web 服务器发送一个 HTTP 请求
• 服务器的永久重定向响应（从 http://example.com 到 http://www.example.com）
• 浏览器跟踪重定向地址
• 服务器处理请求
• 服务器返回一个 HTTP 响应
• 浏览器显示 HTML
• 浏览器发送请求获取嵌入在 HTML 中的资源（如图片、音频、视频、CSS、JS等等）
• 浏览器发送异步请求

第三种

1. 从浏览器接收url到开启网络请求线程（这一部分可以展开浏览器的机制以及进程与线程之间的关系）
2. 开启网络线程到发出一个完整的http请求（这一部分涉及到dns查询，tcp/ip请求，五层因特网协议栈等知识）
3. 从服务器接收到请求到对应后台接收到请求（这一部分可能涉及到负载均衡，安全拦截以及后台内部的处理等等）
4. 后台和前台的http交互（这一部分包括http头部、响应码、报文结构、cookie等知识，可以提下静态资源的cookie优化，以及编码解码，如gzip压缩等）
5. 单独拎出来的缓存问题，http的缓存（这部分包括http缓存头部，etag，catch-control等）
6. 浏览器接收到http数据包后的解析流程（解析html-词法分析然后解析成dom树、解析css生成css规则树、合并成render树，然后layout、painting渲染、复合图层的合成、GPU绘制、外链资源的处理、loaded和domcontentloaded等）
7. CSS的可视化格式模型（元素的渲染规则，如包含块，控制框，BFC，IFC等概念）
8. JS引擎解析过程（JS的解释阶段，预处理阶段，执行阶段生成执行上下文，VO，作用域链、回收机制等等）
9. 其它（可以拓展不同的知识模块，如跨域，web安全，hybrid模式等等内容）

当初始的 HTML 文档完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。

window 的 load 事件仅在 DOM 和所有相关资源全部完成加载后才会触发。

客户端和服务器之间收发数据操作的情形

内部分为创建套接字、连接 Web 服务器、发送数据、接受数据、断开连接几个阶段

<内存地址> = gethostbyname("要查询的服务器域名");
...
// 同一计算机上可能同时存在多个套接字，通过描述符识别。
<描述符> = socket(<使用 IPv4>, <流模式>, ...);
...
// 客户端套接字通过协议栈调用 Socket 库中的 connect 组建与服务端套接字连接
connect(<描述符>, <服务器的 IP 地址和端口号>);
...
// 程序无法直接控制套接字，需要使用 write 组件
write(<描述符>, <发送数据>, <发送数据长度>);
...
// 接收时通过 Socket 库中的 read 程序组件委托协议栈来完成
<接收数据长度> = read(<描述符>, <接收缓冲区>, ...);
...
// HTTP 协议规定，当 Web 服务器发送完响应消息后，应主动断开连接
close(<描述符>);
...

从单机至亿级流量大型网站系统架构的演进过程(待做)

从单机至亿级流量大型网站系统架构的演进过程

操作系统

进程和线程

• 进程是 CPU 资源分配的最小单位，是能拥有资源和独立运行的最小单位
• 线程是 CPU 调度的最小单位，线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程

Web 浏览器

• DOM 树、渲染树和视图(待做)
• 绑定事件(待做)

浏览器的多进程与内核的多线程

浏览器是多进程的

• 主控进程，Browser 进程：浏览器的主进程(负责协调、主控)，只有一个
  
  • 负责浏览器界面显示，与用户交互。如前进，后退等
  • 负责各个页面的管理，创建和销毁其他进程
  • 将 Renderer 进程得到的内存中的 Bitmap，绘制到用户界面上
  • 网络资源的管理，下载等
• 第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时才创建
• GPU 进程：最多一个，用于 3D 绘制
• 浏览器渲染进程(内核)：默认每个页面一个该进程，互不影响，该进程控制页面渲染，脚本执行，事件处理等

浏览器多进程的优势

• 避免单个 Page Crash 影响整个浏览器
• 避免第三方插件 Crash 影响整个浏览器
• 多进程充分利用多核优势
• 方便使用沙盒模型隔离插件等进程，提高浏览器稳定性

Browser 进程和 Renderer 进程的通信过程

• Browser 进程收到用户请求，首先需要获取页面内容，譬如通过网络下载资源，随后将该任务通过 RendererHost 接口传递给 Render 进程
• Renderer 进程的 Renderer 接口收到消息，简单解释后，交给渲染线程，然后开始渲染
  
  • 渲染线程接收请求，加载网页并渲染网页，这其中可能需要 Browser 进程获取资源和需要 GPU 进程来帮助渲染
  • 可能会有 JavaScript 线程操作 DOM，这样可能会造成回流并重绘
  • 最后 Render 进程将结果传递给 Browser 进程
• Browser 进程接收到结果并将结果绘制出来

浏览器内核是多线程的

浏览器内核多线程列表

• GUI 线程
  
  • 负责渲染浏览器界面，解析 HTML，CSS，构建 DOM 树和 RenderObject 树，布局和绘制等。
  • 当界面需要重绘 Repaint 或由于某种操作引发回流 Reflow 时，该线程就会执行
  • 注意，GUI 渲染线程与 JavaScript 引擎线程是互斥的，当 JS 引擎执行时GUI线程会被挂起(相当于被冻结了），GUI 更新会被保存在一个队列中等到 JavaScript 引擎空闲时立即被执行。
• JavaScript 引擎线程
  
  • 也称为JS内核，负责处理 JavaScript 脚本程序。例如 V8 引擎。
  • JavaScript 引擎线程负责解析 JavaScript 脚本，运行代码。
  • JavaScript 引擎一直等待着任务队列中任务的到来，然后加以处理，一个 Tab 页(Renderer 进程)中无论什么时候都只有一个 JavaScript 线程在运行 JavaScript 程序
  • 同样注意，GUI 渲染线程与 JavaScript 引擎线程是互斥的，所以如果 JavaScript 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞。
• 事件触发线程
  
  • 归属于浏览器而不是 JavaScript 引擎，用来控制事件循环(可以理解，JavaScript引擎自己都忙不过来，需要浏览器另开线程协助)
  • 当 JavaScript 引擎执行代码块如 SetTimeOut 时(也可来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等)，会将对应任务添加到事件线程中。
  • 当对应的事件符合触发条件被触发时，该线程会把事件添加到待处理队列的队尾，等待 JavaScript 引擎的处理
  • 注意，由于 JavaScript 的单线程关系，所以这些待处理队列中的事件都得排队等待 JavaScript 引擎处理(当 JavaScript 引擎空闲时才会去执行)
• 定时触发器线程
  
  • 传说中的 SetInterval 与 SetTimeout 所在的线程
  • 浏览器定时计数器并不是由 JavaScript 引擎计数的，因为 JavaScript 引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确
  • 因此通过单独线程来计时并触发定时，计时完毕后，添加到事件队列中，等待 JavaScript 引擎空闲后执行)
  • 注意，W3C 在 HTML 标准中规定，规定要求 SetTimeout 中低于 4ms 的时间间隔算为 4ms。
• 网络请求线程/异步 HTTP 请求线程
  
  • 每次网络请求时都需要开辟单独的线程，开启网络线程到发出一个完整的 HTTP 请求过程中包括：dns 查询、TCP/IP 请求构建、五层因特网协议栈等
  • 在 XMLHttpRequest 在连接后是通过浏览器新开一个线程请求
    将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件，将这个回调再放入事件队列中，再由 JavaScript 引擎执行。

浏览器内核中线程之间的关系

GUI 渲染线程与 JavaScript 引擎线程互斥

由于 JavaScript 是可操纵 DOM 的，如果在修改这些元素属性同时渲染界面(即 JavaScript 线程和 UI 线程同时运行)，那么渲染线程前后获得的元素数据就可能不一致了。

因此为了防止渲染出现不可预期的结果，浏览器设置 GUI 渲染线程与 JavaScript 引擎为互斥的关系，当 JavaScript 引擎执行时 GUI 线程会被挂起，GUI 更新则会被保存在一个队列中等到 JavaScript 引擎线程空闲时立即被执行。

JavaScript 阻塞页面加载

JavaScript 如果执行时间过长就会阻塞页面。譬如，假设 JavaScript 引擎正在进行巨量的计算，此时就算 GUI 有更新，也会被保存到队列中，等待 JavaScript 引擎空闲后执行。然后，由于巨量计算，所以 JavaScript 引擎很可能很久很久后才能空闲，自然会感觉到巨卡无比。

WebWorker，JavaScript 的多线程

MDN 官方解释如下：

Web Worker 为 Web 内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。
一个 Worker 是使用一个构造函数创建的一个对象(e.g. Worker()) 运行一个命名的 JavaScript 文件
这个文件包含将在工作线程中运行的代码 Workers 运行在另一个全局上下文中,不同于当前的 Window
因此，使用 Window 快捷方式获取当前全局的范围(而不是 self) 在一个 Worker 内将返回错误

JavaScript 引擎是单线程的，这一点的本质仍然未改变。如果有非常耗时的工作，请单独开一个 Worker 线程。

• 创建 Worker 时，JavaScript 引擎向浏览器申请开一个子线程。子线程是浏览器开的，完全受主线程控制，而且不能操作DOM
• JavaScript 引擎线程与 Worker 线程间通过特定的方式通信(postMessage API，需要通过序列化对象来与线程交互特定的数据)

WebWorker 与 SharedWorked

• WebWorker 只属于某个页面，不会和其他页面的 Render 进程(浏览器内核进程)共享
  
  • 所以 Chrome 在 Render 进程中创建一个新的线程来运行 Worker 中的 JavaScript 程序
• SharedWorker 是浏览器所有页面共享的，不能采用与 Worker 同样的方式实现，因为它不隶属于某个 Render 进程，可以为多个 Render 进程共享使用
  
  • 所以 Chrome 浏览器为 SharedWorker 单独创建一个进程来运行 JavaScript 程序，在浏览器中每个相同的 JavaScript 只存在一个 SharedWorker 进程，不管它被创建多少次。

网络线程静态资源下载

这里将遇到的静态资源分为一下几大类(未列举所有)：CSS样式资源、JS脚本资源、img图片类资源。

遇到 CSS 样式资源

• CSS 下载时异步，不会阻塞浏览器构建 DOM 树
• 但是会阻塞渲染，也就是在构建 render 时，会等到 CSS 下载解析完毕后才进行(这点与浏览器优化有关，防止 CSS 规则不断改变，避免了重复的构建)
• 有例外，media query 声明的 CSS 是不会阻塞渲染的

遇到 JS 脚本资源

• 阻塞浏览器的解析，也就是说发现一个外链脚本时，需等待脚本下载完成并执行后才会继续解析 HTML
• 浏览器的优化，一般现代浏览器有优化，在脚本阻塞时，也会继续下载其它资源(当然有并发上限)，但是虽然脚本可以并行下载，解析过程仍然是阻塞的，也就是说必须这个脚本执行完毕后才会接下来的解析，并行下载只是一种优化而已
• defer 与 async，普通的脚本是会阻塞浏览器解析的，但是可以加上 defer 或 async 属性，这样脚本就变成异步了，可以等到解析完毕后再执行

注意，defer 和 async 是有区别的：

• async 是异步执行，异步下载完毕后就会执行，不确保执行顺序，一定在 onload 前，但不确定在 DOMContentLoaded 事件的前或后
• defer 是延迟执行，在浏览器看起来的效果像是将脚本放在了 body 后面一样(虽然按规范应该是在 DOMContentLoaded 事件前，但实际上不同浏览器的优化效果不一样，也有可能在它后面)

遇到 img 图片类资源

遇到图片等资源时，直接就是异步下载，不会阻塞解析，下载完毕后直接用图片替换原有 src 的地方。

loaded 和 domcontentloaded

• DOMContentLoaded 事件触发时，仅当 DOM 加载完成，不包括样式表，图片(譬如如果有 async 加载的脚本就不一定完成)
• load 事件触发时，页面上所有 DOM，样式表，脚本，图片都已经加载完成了。

浏览器样式兼容性(待做)

浏览器样式兼容性问题解决方案

为功能受限的浏览器提供页面的技术与流程

• 在确定问题原因和有问题的浏览器后，使用单独的样式表，仅供出现问题的浏览器加载。这种方法需要使用服务器端渲染。
• 使用已经处理好此类问题的库，比如 BootStrap。
• 使用 Reset CSS 或 Normalize.css。
• 优雅的降级/渐进式增强，构建基于用户体验的应用，同时确保它在旧版浏览器中正常运行。
• 利用 caniuse.com 检查特性支持。
• 使用 autoprefixer 自动生成 CSS 属性前缀。
• 使用 Modernizr 进行特性检测。Modernizr 是一套 JavaScript 库，用来侦测浏览器是否支持 HTML5 与 CSS3 等规格。如果浏览器不支持，Modernizr 会使用其他的解决方法来进行模拟。

浏览器该具备的功能

• 可用于使用万维网；
• 提供丰富多彩的用户界面：其中包括上下页、刷新、地址栏、书签、显示源码等功能；
• 支持解析多种网页标准：HTML、HTML5、CSS、SVG、XHTML、WebGL、JavaScript 和 MathML 等；
• 支持多种文件格式及协议：可以通过浏览器打开特定格式的文件进行查询、编辑等操作，且提供 HTTPS、FTP 等网络协议的支持；
• 可通过多个窗口或多个标签页同时打开多种由统一资源标识符标志的信息资源：网络、图片、影音等；
• 可通过开放开发的浏览器插件来拓展浏览器功能。

浏览器两轮大战概要

第一轮概要，Netscape 对抗新 IE

• 围绕在二十世纪末期——人们开始注意到万维网
• 当时市场及网页浏览标准以 Netscape 主导。Netscape 曾改进了史前浏览器 Mosaic 的实用性和稳定性，并在网络上提供免费试用版。
• 用户界面友好的微软公司争取到 Mosaic 授权，IE 浏览器登场。
• IE 浏览器从技术层面通过最先支持 CSS、新增网页动态加载及图片位置改变等优势，逐步提高了市场占有率。
• 一场要求网页无论使用 IE 或 Netscape 均能正常浏览的 “可用任何浏览器浏览”（Viewable With Any Browser）运动悄然崛起。
• 微软公司使用诸多商业手段与公司规模较小的 Netscape 公司争抢浏览器用户。
• Netscape 浏览器市场占用率从 90% 跌至 IE 占有率之下。
• Netscape 公司落败，被美国在线公司收购。

第二轮概要，旧 IE 对抗各大新浏览器

• IE 浏览器寡占市场，暴露问题：使用专属格式，不尊重网页公开标准；由于高占有率，成为电脑蠕虫病毒攻击的主要目标之一。
• Netscape 浏览器衰落之时开发浏览器源码，酝酿出安全性较高的 Firefox 浏览器。
• 2012 年报告，Chrome 市场占有率达 33%，超过 IE 浏览器，成为全球第一大。

总结，使用尽可能新的浏览器

原因：

• 第一，旧版浏览器通常无法更新最新的安全补丁和功能，因而极易受到攻击。
• 第二，网络的发展十分迅速。旧版浏览器可能无法支持当今网站和网络应用程序中的许多最
  新功能。
• 第三，旧版浏览器阻碍了网络创新的步伐。如果大量的互联网用户都墨守旧版浏览器，网络
  开发人员就不得不在设计网站时兼顾新旧技术。

浏览器内核版本(排版引擎)

浏览器的内核通常仅指排版引擎，相符的有 JavaScript 引擎。

常见的浏览器内核生命周期如下。

常见的浏览器内核如下。

Trident 内核，运行在 IE 上

Trident 内核运行在 IE 上，又称 IE 内核，是 IE 的排版引擎的名称。Trident 曾因其市场占有量庞大而不思进取，一度与 W3C 标准脱节(05 年)，给了运行在 Safari、Chrome、Firefox 和 Opera 等浏览器 上的内核提供了很大的发展空间。随着微软逐步放弃 IE 浏览器品牌，Trident 内核版本也不再更新。

EdgeHTML 内核，运行在 Microsoft Edge 上

EdgeHTML 内核开启了 Trident 内核的分支，成为了替代 IE 浏览器的 Microsoft Edge 浏览器的主要排版引擎。EdgeHTML 移除所有旧版 IE 浏览器遗留下来的代码，并通过尊重网页标准、重写主要的代码以和其他现代浏览器的设计精神互通有无。

KHTML 内核，早期内核，Webkit 前身

KHTML 是由 KDE 自由软件社区所开发的 HTML 排版引擎，由 C++ 语言编写。这里提到 KHTML 是因为其是早起 Safari 的内核最终选型。Safari 开发团队因对 KHTML 作出大量的改动，逐步从 KHTML 中脱离出来，KHTML 逐渐淡出主流浏览器中。

Webkit 内核，运行在 Safari 及更多浏览器上

Webkit 的前身是 KHTML 引擎，属于其一个开源分支，是 Safari 及早期 Chromium 、Amazon Kindle 等浏览器的默认内核。通常所说的 Webkit 不仅仅是排版引擎，其包括用来渲染 HTML 和 CSS 的 Webcore 引擎和用来解析 JS 的 JSCore。Webcore 便用来处理排版。

Chromium/Blink，运行在 Chrome 上

Chrome 浏览器的内核来源于 Webkit 的 Webcore，最终用谷歌公司自主开发的开源排版引擎 Blink 所代替；同时 Chrome 浏览器对于 JavaScript 代码的解析也使用了自己的 V8 引擎。

Blink 同样来自于 Webkit，据说 Blink 删除了 880w 行 webkit 代码。Blink 引擎问世后，国产各种 chrome 系的浏览器也纷纷投入 Blink 的怀抱，可以在浏览器地址栏输入 chrome://version 进行查看。

Gecko 内核，运行在 Firefox 上

Gecko 是 Netscape6 和 Firefox 的内核。Gecko 代码公开，使用该内核浏览器很多。其诞生来源于 IE 的不思进取。微软内部人员不满，与一停止更新 Netscape 的员工一起在创办 了 Mozila 后开发，常被称为 Firefox 内核，跨平台使用。

Presto 内核，Opera 浏览器早期内核

Opera 浏览器早期使用的内核，Opera 在 Blink 引擎推出之后转用 Blink，其中原因包括毫无推广上的优势（主要原因）和使用 Webkit 内核的 Opera 可以兼容谷歌 Chrome 浏览器等。但换内核代价惨痛，从快速轻量化与稳定到异常卡顿与不稳定，书签同步都困难，很多用户流失。Presto 内核最终停留在了 12.17。

浏览器内核渲染机制

1. 解析 HTML，构建 DOM 树
2. 解析 CSS，生成 CSS 规则树
3. 合并 DOM 树和 CSS 规则，生成 render 树
4. 布局 render 树(Layout/reflow)，负责各元素尺寸、位置的计算
5. 绘制 render 树(paint)，绘制页面像素信息
6. 浏览器会将各层的信息发送给 GPU，GPU 会将各层合成(composite)，显示在屏幕上

浏览器解析 HTML，构建 DOM 树

解析HTML到构建出DOM当然过程可以简述如下：

Bytes → characters → tokens → nodes → DOM

譬如假设有这样一个 HTML 页面

<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
    <title>Critical Path</title>
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg"></div>
  </body>
</html>

浏览器的处理如下

其中的重点过程

1. Conversion 转换：浏览器将获得的 HTML 内容(Bytes)基于他的编码转换为单个字符
2. Tokenizing 分词：浏览器按照 HTML 规范标准将这些字符转换为不同的标记 token。每个 token 都有自己独特的含义以及规则集
3. Lexing 词法分析：分词的结果是得到一堆的 token，此时把他们转换为对象，这些对象分别定义他们的属性和规则
4. DOM 构建：因为 HTML 标记定义的就是不同标签之间的关系，这个关系就像是一个树形结构一样。
   例如：body 对象的父节点就是 HTML 对象，然后段略 p 对象的父节点就是 body 对象

生成 CSS 规则树

CSS 规则树的生成也是类似：

Bytes → characters → tokens → nodes → CSSOM

譬如 style.css 内容如下：

body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span { display: none }
img { float: right }

构建渲染树

一般来说，渲染树和 DOM 树相对应的，但不是严格意义上的一一对应。因为有一些不可见的DOM元素不会插入到渲染树中，如 head 这种不可见的标签或者 display: none 等。

渲染

有了 render 树，接下来就是开始渲染，基本流程如下：

1. 计算CSS样式
2. 构建渲染树
3. 布局，主要定位坐标和大小，是否换行，各种 position overflow z-index 属性
4. 绘制，将图像绘制出来

图中的线与箭头代表通过 JS 动态修改了 DOM 或 CSS，导致了重新布局(Layout)或渲染(Repaint)。

回流和重绘

• Layout，也称为 Reflow，即回流。一般意味着元素的内容、结构、位置或尺寸发生了变化，需要重新计算样式和渲染树
• Repaint，即重绘。意味着元素发生的改变只是影响了元素的一些外观之类的时候（例如，背景色，边框颜色，文字颜色等），此时只需要应用新样式绘制这个元素就可以了

回流的成本开销要高于重绘，而且一个节点的回流往往回导致子节点以及同级节点的回流，所以优化方案中一般都包括，尽量避免回流。回流一定伴随着重绘，重绘却可以单独出现。

为什么引起回流

1. 页面渲染初始化
2. DOM 结构改变，比如删除了某个节点
3. render 树变化，比如减少了 padding
4. 窗口 resize
5. 最复杂的一种：获取某些属性，引发回流，
   很多浏览器会对回流做优化，会等到数量足够时做一次批处理回流，
   但是除了 render 树的直接变化，当获取一些属性时，浏览器为了获得正确的值也会触发回流，这样使得浏览器优化无效，包括
   
   • offset(Top/Left/Width/Height)
   • scroll(Top/Left/Width/Height)
   • cilent(Top/Left/Width/Height)
   • width,height
   • 调用了 getComputedStyle() 或者IE的 currentStyle

回流优化方案

• 减少逐项更改样式，最好一次性更改 style，或者将样式定义为 class 并一次性更新
• 避免循环操作 DOM，创建一个 documentFragment 或 div，在它上面应用所有 DOM 操作，最后再把它添加到window.document
• 避免多次读取 offset 等属性。无法避免则将它们缓存到变量
• 将复杂的元素绝对定位或固定定位，使得它脱离文档流，否则回流代价会很高

注意：改变字体大小会引发回流

普通图层与复合图层

• 可以认为默认只有一个复合图层，所有的 DOM 节点都是在这个复合图层下的
• 如果开启了硬件加速功能，可以将某个节点变成复合图层
• 复合图层之间的绘制互不干扰，由 GPU 直接控制
• 而简单图层中，就算是 absolute 等布局，变化时不影响整体的回流，但是由于在同一个图层中，仍然是会影响绘制的，因此做动画时性能仍然很低。而复合层是独立的，所以一般做动画推荐使用硬件加速。

硬件加速变成复合图层

硬件加速技术如下

• 最常用的方式：translate3d、translateZ
• opacity 属性/过渡动画（需要动画执行的过程中才会创建合成层，动画没有开始或结束后元素还会回到之前的状态）
• will-chang 属性，一般配合 opacity 与 translate 使用

经测试，除了上述可以引发硬件加速的属性外，其它属性并不会变成复合层。

absolute 和硬件加速的区别

absolute 虽然可以脱离普通文档流，但是无法脱离默认复合层。所以，就算 absolute 中信息改变时不会改变普通文档流中 render 树，但浏览器最终绘制时，是整个复合层绘制的，absolute 中信息的改变仍然会影响整个复合层的绘制。

硬件加速直接就是在另一个复合层了，所以它的信息改变不会影响默认复合层。

复合层的作用？

一般一个元素开启硬件加速后会变成复合图层，可以独立于普通文档流中，改动后可以避免整个页面重绘，提升性能。

硬件加速时请使用 index

使用硬件加速时，尽可能的使用index，防止浏览器默认给后续的元素创建复合层渲染。如果a是一个复合图层，而且b在a上面，那么b也会被隐式转为一个复合图层，这点需要特别注意。

JavaScript 引擎

JavaScript 引擎版本

KJS 引擎，与早期 KHTML 引擎相配

与早期 KHTML 排版引擎相配的，还有用来解析 JavaScript 的 KJS 引擎。KJS 同样由 KDE 社区开发。其后因为 Webkit 作为分支的诞生，逐步被可以直接将 JS 代码编译为原生机器码的 JavaScriptCore 引擎替代。JavaScriptCore 引擎成为了 Webkit 中的一个重要组件。

Chakra，运行在 IE9+ 上

Chakra 引擎(又称 JScript 引擎)是由微软为 IE9+ 版本开发的 JavaScript 引擎，在一个独立的 CPU 核心上即时编译脚本，与浏览器并行。在 2009 年 11 月 18 日举行的 SunSpider 测试展示了 IE9 的 PDC 版本对脚本的执行远快于 IE8，但是仍然慢于 Firefox 3.5、Google Chrome 4 和 Safari 4。

ChakraCore，运行在 Microsoft Edge 上

Chakra是由微软为其Microsoft Edge网页浏览器开发的JavaScript引擎。它是Internet Explorer中使用的JScript引擎的一个分支。

V8 引擎，运行在 Chrome、Node.JS 上

V8 由 Google 公司开发，是开源的 JavaScript 引擎。V8 在运行之前将 JavaScript 编译成了机器码，而非字节码或是解释执行它，以此提升性能。基于 V8 引擎对 JavaScript 的高性能解析，Node.js 也选择了 V8 引擎作为其在服务端解析 JavaScript 的首选引擎，促进了前端的蓬勃发展。

JavaScriptCore 引擎

浏览器下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。

• 在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完，比如图片）。
• 如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。
• 并且在下载后进行解析，解析过程中，停止页面所有往下元素的下载。此时渲染会被阻塞，必须等js、或css资源文件加载并解析完成之后才会继续后面的渲染
• 样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素(含以前已经渲染的)重新进行渲染。重新渲染是很耗费性能的，如果可以，尽量把所有的 CSS 样式文件都在 <head> 里面，实在不行，把首屏的 CSS 样式内嵌在页面中，加快首屏显示速度，提升用户体验。

JavaScript 引擎解析过程

JavaScript 的解析阶段

JavaScript 是解释型语音，所以它无需提前编译，而是由解释器实时运行。引擎对 JavaScript 的处理过程可以简述如下：

1. 读取代码，进行词法分析 Lexical analysis，然后将代码分解成词元 token
2. 对词元进行语法分析 parsing，然后将代码整理成语法树 syntax tree
3. 使用翻译器 translator，将代码转为字节码 bytecode
4. 使用字节码解释器 bytecode interpreter，将字节码转为机器码
5. 总结：核心的 JIT 编译器将源码编译成机器码运行

最终计算机执行的就是机器码。为了提高运行速度，现代浏览器一般采用即时编译 JIT-Just In Time compiler，即字节码只在运行时编译，用到哪一行就编译哪一行，并且把编译结果缓存 inline cache，这样整个程序的运行速度能得到显著提升。

不同浏览器策略可能还不同，有的浏览器就省略了字节码的翻译步骤，直接转为机器码，如 Chrome 的 V8。

JavaScript 的预处理阶段

正式执行 JavaScript 前，还会有一个预处理阶段。

分号补全机制

JavaScript 解释器有一个 Semicolon Insertion 规则，它会按照一定规则，在适当的位置补充分号。

加分号规则：

• 当有换行符，包括含有换行符的多行注释，并且下一个 token 没法跟前面的语法匹配时，会自动补分号。
• 当有 } 时，如果缺少分号，会补分号。
• 程序源代码结束时，如果缺少分号，会补分号。

经典的例子：

function b() {
    return
    {
        a: 'a'
    };
}

分号补全机制：

function b() {
    return;
    {
        a: 'a'
    };
}

变量提升机制(待做)

变量声明，函数声明，形参，实参的优先级顺序，以及 es6 中 let 有关的临时死区、var conost let 等

一般包括函数提升和变量提升。

JavaScript 的执行阶段

执行上下文

• JavaScript 有执行上下文
• 浏览器首次载入脚本，它将创建全局执行上下文，并压入执行栈栈顶，不可被弹出
• 然后每进入其它作用域就创建对应的执行上下文并把它压入执行栈的顶部
• 一旦对应的上下文执行完毕，就从栈顶弹出，并将上下文控制权交给当前的栈。
• 这样依次执行，最终都会回到全局执行上下文

譬如，如果程序执行完毕，被弹出执行栈，然后有没有被引用，没有形成闭包，那么这个函数中用到的内存就会被垃圾处理器自动回收。

每一个执行上下文，都有三个重要属性：

• 变量对象(Variable object，VO)
• 作用域链(Scope chain)
• this

VO 与 AO

VO 是执行上下文的属性(抽象概念)，但是只有全局上下文的变量对象允许通过 VO 的属性名称来间接访问(因为在全局上下文里，全局对象自身就是变量对象)。AO(activation object)，当函数被调用者激活，AO 就被创建了。

• 在函数上下文中：VO === AO
• 在全局上下文中：VO === this === global

总的来说，VO中会存放一些变量信息（如声明的变量，函数，arguments参数等等）

作用域链

它是执行上下文中的一个属性，原理和原型链很相似，作用很重要。流程：

• 在函数上下文中，查找一个变量 foo
• 如果函数的 VO 中找到了，就直接使用
• 否则去它的父级作用域链中(parent)找
• 如果父级中没找到，继续往上找
• 直到全局上下文中也没找到就报错

this 指针

this 是执行上下文环境的一个属性，而不是某个变量对象的属性。

• this 是没有一个类似搜寻变量的过程
• 当代码中使用了 this，这个 this 的值就直接从执行的上下文中获取了，而不会从作用域链中搜寻
• this 的值只取决中进入上下文时的情况

JavaScript 的回收机制

JavaScript 有垃圾处理器，所以无需手动回收内存，而是由垃圾处理器自动处理。常用的两种垃圾回收规则是：标记清除和引用计数。

标记清除

JavaScript 引擎基础 GC 方案是(Simple GC)：mark and sweep 标记清除，简单解释如下：

• 遍历所有可访问的对象。
• 回收已不可访问的对象。

引用计数

跟踪记录每个值被引用的次数，当一个值被引用时，次数 +1，减持时 -1，下次垃圾回收器会回收次数为 0 的值的内存(容易出循环引用的bug)。

GC 的缺陷

GC 时，停止响应其他操作，这是为了安全考虑。Javascript 的 GC 在 100ms 甚至以上。对一般的应用还好，但对于 JavaScript 游戏，动画对连贯性要求比较高的应用，就麻烦了。

GC 优化策略

Generation GC 分代回收机制目前是通过区分“临时”与“持久”对象：

• 多回收“临时对象”区（young generation）
• 少回收“持久对象”区（tenured generation）
• 减少每次需遍历的对象，从而减少每次 GC 的耗时

参考资料

• 浏览器解析 CSS 原理
• 浏览器的工作原理：新式网络浏览器幕后揭秘

HTML

HTML 标准

HTML5

HTML5 基本构件

• 语义，提供更准确地描述内容；
• 连接，提供新的方式与服务器通信；
• 离线和存储，允许网页在本地存储数据并有效地离线运行；
• 多媒体，在 Open Web 中，视频和音频被视为一等公民；
• 2D/3D 图形和特效，提供多种演示选项；
• 性能和集成，提供更快的访问速度和性能更好的计算机硬件；
• 设备访问，允许使用各种输入、输出设备；
• 外观，可以开发丰富的主题。

HTML5 语义化标签

BootStrap HTML 模板

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <title>Document</title>
    </head>
    <body>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    </body>
</html>

常见 HTML 技术解析

参考资料：github@yangshun@front-end-interview-handbook

DOCTYPE 用途(待做)

DOCTYPE 是 document type 的缩写，是 HTML 用来区分标准模式和怪异模式的声明。

• 标准模式
• 怪异模式
• 兼容模式

在各个 HTML 版本中的声明方法如下。

link 标签

通常情况下，<link> 标签最好放在 <head></head> 中，这是规范要求的内容。这样做可以让页面逐步呈现，防止呈现给用户的是空白页面或没有样式的内容，提高了用户体验。

script 标签

通常情况下，<script> 标签最好放在 </body> 之前，这样可以保证 HTML 文档首先完成解析，将页面尽早呈现给用户。解决方案是使用 <script> 标签的 defer、async 属性，具体区别如下：

• 没有 defer、async 时，HTML 解析中断，脚本被提取并立即执行。执行结束后，HTML 解析继续。
• 只有 defer 时，脚本仅提取过程与 HTML 解析过程并行，脚本的执行将在 HTML 解析完毕后进行。如果含有多个 defer 脚本，脚本的执行顺序将按照在 document 中出现的位置，从上到下顺序执行。
• 只有 async 时，脚本的提取、执行的过程与 HTML 解析过程并行，脚本执行完毕可能在 HTML 解析完毕之前。当脚本与页面其它脚本相互独立时，可以使用 async，比如用作页面统计。

注意：没有 src 属性的脚本，defer、async 属性将会被忽略。

img 标签

srcset 属性配合 sizes 属性可以实现响应式图片。serset 定义了我们允许浏览器选择的图像集，以及每个图像的大小。sizes 定义了一组媒体条件(例如屏幕宽度)并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择。

浏览器遇到该属性后的处理过程：

• 查看设备宽度
• 检查 sizes 列表中哪个媒体条件是第一个为真
• 查看给予该媒体查询的槽大小
• 加载 srcset 列表中引用的最接近所选的槽大小的图像

data- 属性

在 JavaScript 框架流行前，常用 data- 属性把额外数据存储在 DOM 自身中。现在鼓励将数据模型存放在 JavaScript 本身中，并利用框架提供的数据绑定，使之与 DOM 保持更新。

渐进式渲染

渐进式渲染是用于提高网页性能(尤其是提高用户感知的加载速度)，以尽快呈现页面的技术。该技术在以前互联网宽带小时常常需要使用，现虽移动终端盛行，但移动网络不稳定，仍然有用武之地。

举例如下：

• 图片懒加载。页面上的图片不会一次性全部加载。当用户滚动页面到图片部分时，JavaScript 将加载并显示图像。
• 确定显示内容的优先级(分层次渲染)。为了尽快将页面呈现给用户，页面只包含基本的最少量 CSS、脚本和内容，然后可以使用延迟加载脚本或监听 DOMContentLoaded/Load 事件加载其他资源和内容。
• 异步加载分段 HTML。当页面通过后台渲染时，把 HTML 拆分，通过异步请求，分块发送给浏览器。

开发多语言网站

客户端可在发送 HTTP 请求时，使用 Accept-Language 请求头，让服务器返回相匹配语言的 HTML 文档。返回的文档还应在 <html> 标签中声明 lang 属性。后台不同的语言，多以 YML 或 JSON 格式存储，并动态的生成指定的 HTML 页面，整个过程通常需要借助后台框架实现。

在开发多语言网站时，应注意如下事项。

• 在 HTML 中使用 lang 属性。
• 引导用户切换到自己的母语。
• 在图片中展示文本会阻碍网站规模增长。
• 限制词语或句子的长度。网页内容在使用其他语言时，文字长度会发生变化，设计时应多加考虑。
• 注意颜色的使用。不同语言和文化中，颜色的意义、感受是不同的。
• 日期和货币的格式化。
• 不要使用连接的翻译字符串。如不使用 I will travel on {% date %}。
• 注意语言阅读方向。如英语从左向右，传统日语从右向左。

模板语言(待做)

HTML 标准(待做)

Canvas(待做)

设计

字体(待做)

颜色(待做)

CSS

样式表

样式表是一种将网页的内容和表示分离的网页设计形式，在网页设计中网页标记(HTML 或 XHTML)包含页面的语义内容和结构，但没有定义其可视化布局(风格)。相反，风格的定义是在一个外部的样式表文件中，使用如 CSS、XSLT 样式表语言。这种设计方法被认为是一种“分离”，因为它在很大程度上取代了以前风格和结构在一起的定义方法。 这种方法背后的哲学是一种关注点的分离。

优点：

• 速度
• 可维护性
• 可访问性
• 定制
• 一致性
• 可移植性

缺点：

• 没有解析和生成工具导致应用范围小

文档流

普通文档流

absolute 文档流

复合图层

CSS 标准(待做)

CSS 发展时间线(待做)

• 1996.12.17 CSS1 诞生，逐渐打败其它样式表语言

其它样式表语言有：

• 1998.5.12 CSS2 发布，推行内容和表现分离，表格布局开始落寞
• 2007 CSS2.1 发布
• 从 CSS2+ 开始，前端技术更加关注图片和文字的呈现。

CSS 1.0(待做)

CSS 2.0(待做)

CSS 2.1(待做)

CSS 3.0(待做)

• 布局更为丰富
  
  • CSS3 媒介查询以及许多响应式布局特性
  • 弹性盒子布局
  • 格栅布局
• 视觉表现长足进步
  
  • 圆角、阴影、渐变
  • transform
  • filter 滤镜和混合模式
  • animation

CSS 术语和概念(待做)

CSS 属性(待做)

CSS 值(待做)

整数值、数值、百分比值、长度值、颜色值、字符串值

CSS3：角度值、频率值、时间值

CSS 属性值(待做)

属性值可以由单一内容构成，也可以由“值 + 关键字 +功能符”构成。

属性值：声明、声明块、规则、规则集、选择器

CSS 选择器

通用元素选择器、标签选择器、类选择器、ID 选择器、属选择器性、伪类选择器、伪元素选择器、关系选择器（后代选择器、相邻后代选择器、兄弟选择器、相邻兄弟选择器）。

CSS 基本选择器

CSS 多元素的组合选择器

CSS 2.1 属性选择器

CSS 2.1 中的伪类

CSS 2.1 中的伪元素

CSS 3 的同级元素通用选择器

CSS 3 属性选择器

CSS 3 中与用户界面有关的伪类

CSS 3 中的结构性伪类

CSS 3的反选伪类

CSS 3中的 :target 伪类

CSS 选择器优先级

一种说法：

CSS 优先级，是指 CSS 样式在浏览器中被解析的先后顺序。在比较样式的优先级时，只需统计选择符中的 ID、class 和标签名的个数，然后把相应的权值相加即可，最后根据结果排出优先级。权值较大的优先级越高；权值相同的，后定义的优先级较高。

• 样式值含有！important，优先级最高；
• ID 选择器优先级很高，权值为 100；
• 类选择器、属性选择器和伪类选择器的权值为 10；
• 标签选择器权值为 1。

另一种说法：

优先级通过 4 个维度指标确定，我们假定以 a、b、c、d 命名，分别代表以下含义：

• a 表示是否使用内联样式。如果使用，a 为 1，否则为 0。
• b 表示 ID 选择器数量。
• c 表示类选择器、属性选择器和伪类选择器数量之和。
• d 表示标签(类型)选择器和伪元素选择器之和。

优先级的结果并非通过以上四个值生成一个得分，而是每个值分开比较。a、b、c、d 权重从左到右，依次减小。判断优先级时，从左到右，一一比较，直到比较出最大值，即可停止。所以，如果b的值不同，那么 c 和 d 不管多大，都不会对结果产生影响。比如 0，1，0，0的优先级高于 0，0，10，10。

当出现优先级相等的情况时，最晚出现的样式规则会被采纳。如果你在样式表里写了相同的规则（无论是在该文件内部还是其它样式文件中），那么最后出现的（在文件底部的）样式优先级更高，因此会被采纳。

在写样式时，我会使用较低的优先级，这样这些样式可以轻易地覆盖掉。尤其对写 UI 组件的时候更为重要，这样使用者就不需要通过非常复杂的优先级规则或使用 !important 的方式，去覆盖组件的样式了。

CSS 选择器查询原则及优化准则

浏览器是如何查找元素的呢？浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。

比如 #divBox p span.red {color: red;} 浏览器的查找顺序如下：先查找 HTML 中所有 class='red' 的 span 元素，找到后，再查找其父辈元素中是否有 p 元素，再判断 p 的父元素中是否有 ID 为 divBox 的 DIV 元素，如果都存在则匹配上。

浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。

优化目的是减少 CSS 文件大小，提高维护性和可读性。优化准则如下。

• 不要在 ID 选择器前使用标签名
• 不要在 class 选择器前使用标签名
• 尽量少使用层级关系
• 使用 class 代替层级关系
• 在 CSS 渲染效率中 ID 和 class 的效率是基本相当的
• 使用属性简写
• 移除 CSS 框架中多余的内容
• 将 CSS 文件的声明用注释分隔开并进行排版
• 拆分布局风格：给每种布局一个单独的CSS文件
• 养成为 CSS 写注释的习惯
• 上线时压缩使用

CSS 选择器参考链接

• CSS 选择器笔记
• CSS 选择器参考手册
• CSS选择器与优先级浅析
• 前端面试手册

CSS 关键字(待做)

CSS 变量(待做)

CSS 长度单位(待做)

相对长度单位

• 相对字体长度单位：em、ex，CSS3：rem、ch
• 相对视区长度单位：vh、vw、vmin、vmax

绝对长度单位

• px
• 不常用的：pt、cm、mm、pc

CSS Hack

什么是 CSS Hack

我们把这个针对不同的浏览器或不同版本编写相应 CSS 的过程，叫做 CSS Hack。

一般情况下，我们尽量避免使用 CSS Hack，但是有些情况为了顾及用户体验实现向下兼容，不得已才使用 Hack。使用 Hack 虽然对页面表现的一致性有好处，但过多的滥用会造成 HTML 文档混乱不堪，增加管理和维护的负担。

CSS Hack 的分类

CSS Hack 大致有 3 种表现形式。实际项目中 CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。

• 属性前缀法(即类内部 Hack)：属性前缀法是在 CSS 样式属性名前加上一些只有特定浏览器才能识别的 Hack 前缀，以达到预期的页面展现效果。

说明，在标准模式中：
1. "-" 减号是IE6专有的hack
2. "\9" IE6/IE7/IE8/IE9/IE10都生效
3. "\0" IE8/IE9/IE10都生效，是IE8/9/10的hack
4. "\9\0" 只对IE9/IE10生效，是IE9/10的hack

• 选择器前缀法(即选择器 Hack)：针对一些页面表现不一致或者需要特殊对待的浏览器，在 CSS 选择器前加上一些只有某些特定浏览器才能识别的前缀进行 Hack。例如。

*html *前缀只对 IE6 生效
*+html *+前缀只对 IE7 生效
@media screen\9{...}只对 IE6/7 生效
@media \0screen {body { background: red; }}只对 IE8 有效
@media \0screen\,screen\9{body { background: blue; }}只对 IE6/7/8 有效
@media screen\0 {body { background: green; }} 只对 IE8/9/10 有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对 IE9/10 有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对 IE10 有效
等等

• IE 条件注释法(即 HTML 条件注释 Hack)：这种方式是 IE 浏览器专有的 Hack 方式，微软官方推荐使用的 Hack 方式。如下。

只在 IE 下生效
<!--[if IE]>
这段文字只在 IE 浏览器显示
<![endif]-->
只在 IE6 下生效
<!--[if IE 6]>
这段文字只在 IE6 浏览器显示
<![endif]-->
只在 IE6 以上版本生效
<!--[if gte IE 6]>
这段文字只在 IE6 以上(包括)版本 IE 浏览器显示
<![endif]-->
只在 IE8 上不生效
<!--[if ! IE 8]>
这段文字在非 IE8 浏览器显示
<![endif]-->
非 IE 浏览器生效
<!--[if !IE]>
这段文字只在非 IE 浏览器显示
<![endif]-->

常见的浏览器兼容问题机器 hack 技巧

• PNG 24位的图片在 IE6 浏览器上出现背景，解决方案是做成 PNG8。
• 浏览器默认的 margin 和 padding 不同。解决方案是加一个全局的 *{ margin:0; padding:0;}来统一。
• IE6双边距bug：块属性标签float后，又有横行的 margin 情况下，在 IE6 显示 margin 比设置的大。

.bb{
    background-color: red;/* 所有识别 */
    background-color: #00deff\9; /* IE6、7、8 识别*/
    +background-color: #a200ff;/* IE6、7 识别*/
    _background-color: #1e0bd1;/* IE6 识别*/
}

• IE 下,可以使用获取常规属性的方法来获取自定义属性，也可以使用 getAttribute() 获取自定义属性;Firefox 下,只能使用 getAttribute() 获取自定义属性。解决方法:统一通过 getAttribute() 获取自定义属性。
• IE下,event 对象有x, y 属性,但是没有pageX, pageY 属性;Firefox 下,event 对象有 pageX, pageY 属性,但是没有 x, y 属性。
• 解决方法：(条件注释)缺点是在 IE 浏览器下可能会增加额外的 HTTP 请求数。
• Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示，可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
• 超链接访问过后 hover 样式就不出现了 被点击访问过的超链接样式不在具有 hover 和 active 了解决方法是改变 CSS 属性的排列顺序：L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

CSS Hack 参考资料

• 史上最全的 CSS Hack 方式一览

CSS 解析器(待做)

CSS 功能符(待做)

布局模型

布局是承上启下的中间环节，渲染树是从 DOM 树映射而来的可布局的层级关系，通过应用布局属性确定视图排版。同时布局更是性能的瓶颈所在，需要灵活运用缓存、线程切换等手段来优化性能。

把布局和视图生成两部分从整个架构中抽离出来，也可成为客户端 UI 框架。

布局模型基本属性

CSS 2.1 定义了以下 4 个布局模型。

• block layout，块级布局。侧重于垂直方向。
• inline layout，行内布局。侧重于水平方向。
• table layout，表格布局。
• positioned layout

CSS 3 引入了以下布局模型。

• flex layout，弹性盒布局。与方向无关。主要适用于应用程序的组件及小规模的布局。
• CSS Grid Layout。

布局模型算法思想

一个对象的布局由位置和尺寸这两个要素唯一确定，但实际使用中很少需要为其赋予绝对值来指定排版，而是通过指定相对位置、相对宽高、相互关系来间接实现。所以布局要做的就是从这些相对信息中推算出每个对象的绝对信息，通过多次从根节点开始向下遍历，以及从子节点向上回溯，不断估计、修正，计算出树上每个节点的唯一布局。

无论何种框架，要实现通过用网页的规范或自定义的模板规范来达到动态控制原生 UI，都会包含以下过程：

• HTML 或模板解析，构建 DOM 树
• CSS 样式解析，并转换为原生系统属性
• 动态数据解析及注入
• 从 DOM 树构建渲染树
• 对渲染树各节点应用样式，并计算布局
• 对渲染树各节点绑定事件，实现 JS 和原生方法之间的互相调用
• 从渲染树生成视图，最终显示

React-Native 和 Weex 的核心布局算法都采用 Facebook 开源的 CSSLayout 算法，CSSLayout 基于 W3C 标准的 Flexbox 模型对页面元素排版，同时也支持相对布局和绝对布局，iOS 和 Andriod 平台都适用。

CSSLayout 对容器可应用 FlexDirection、FlexWrap、JustifiyContent、AlignItems、AlignContent 属性。对元素可应用 Flex、AlignSelf 属性（除了 Flex 属性，还支持普通的 Position 和 Overflow 属性）。

布局算法把外部传入的计算属性先转化为对应的数组，通过下标访问具体值，而下标又是通过主轴、交叉轴构造的映射关系表来获取。

计算过程用到的样式属性如下。

计算过程中用到的布局属性如下。

• 位置 position，包括 left、top、right、bottom 四个定位值。
• 尺寸 dimension，包括 width 和 height。
• 估计尺寸 measuredDimension，包括 width 和 height，measuredDimension 是计算过程中的中间变量，几次迭代后得到最终的 dimension。

CSSLayout 算法首先对内容节点、叶子节点和非布局节点这三种情况进行预处理，提前返回，减少走完整个流程的次数，尽可能的减少计算量。

CSSLayout 算法中的缓存分为两个层次，如下。

• cached_layout 把渲染树中所有节点的布局结果和估计结果都缓存起来，内部通过 CSSCachedMeasurement 数据结构来维护，只有当两棵渲染树计算条件完全匹配时才会触发，复用要求高。
• cachedMeasurement 把中间的估算结果缓存起来，内部缓存最近 16 次的计算结果， 在渲染树增量更新、插入节点等部分更新情况下避免重复估算尺寸，复用要求低。

布局模型技术方案(待做)

• 固定布局。通过固定页面高度宽度像素大小来实现。
  
  • 优点：上手快，大小固定，便于理解。
  • 缺点：大小无法改变，无法动态化适应各个分辨率的终端设备。
• 百分比布局。使用百分比来代替传统 px 作为单位。
  
  • 优点：很好解决自适应需求。
  • 缺点：不够灵活，当增加更多的百分比元素会导致内容溢出。
• 浮动布局。通过 display、float 和 clear 等属性实现。
  
  • 优点：在没有 flexbox 时应用广泛。
  • 缺点：不易理解，需要注意清除浮动， 没有垂直居中，没有等高，也没有顺序无关性。
• 定位布局。通过 postion、left、top 等属性实现。
  
  • 优点：可以绝对定位和相对定位。
• Flexbox 布局。
  
  • 优点：拥有顺序无关性，良好支持响应式布局，方便垂直居中和等高操作。可以在沿 X 轴排列和沿 Y 轴排列间互相转换 可缩可放，可行可列，还有自适应空间能力。 同一效果可以有多种实现写法
  • 缺点：对旧版本(PC 端、移动端)浏览器兼容性不足，一维布局系统，只适合做局部布局
• Grid 布局。
  
  • 优点：二维布局系统，通常用于整个页面的规划。
  • 缺点：对一些新浏览器其兼容性也不足。
• 表格布局。通过 <table>、<tr>、<td> 等标签或通过 display:table 来实现。
  
  • 优点：能垂直居中，还能等高。
  • 缺点：没有顺序无关性，边框问题费劲，应对响应式布局能力有限。
• Multi-column 多列布局。
• 流式布局。

居中布局、多列布局、全局布局、多列等高布局

水平垂直居中

• 第一种，绝对定位

div {
    position: absolute;
    width: 300px;
    height: 300px;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: pink;
}

• 第二种，已知容器宽高

div {
    position: relative; /* 或 absolute */
    width: 500px;
    height: 300px;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -250px;
    background-color: pink;
}

• 第三种，不知容器宽高，利用 transform 属性

div {
    position: relative; /* 或 absolute */
    width: 500px;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: -150px 0 0 -250px;
    background-color: pink;
}

• 第四种，flex 布局，需考虑兼容性

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    width: 200px;
    background-color: yellow;
}
.container div {
    width: 100px;
    height: 100px;
    background-color: pink;
}

布局模型混合应用(待做)

以下混合方案可通过多种布局技术来实现。

• 基本网格布局(平均布局)。
• 栅格布局。
• 流体布局：利用元素“流”的特性实现的各类布局效果。
• 自适应布局：包括表格布局，凡是具有自适应特性实现的各类布局效果。
• 圣杯布局。下图左侧为圣杯布局模型，右侧为响应式结果。

• 双飞翼布局。

布局模型参考链接

• CSS Flexible Box Layout Module Level 1
• CSS Flex Layout 算法解析
• 手机网站常用的六种布局方案优缺点分析
• 前方有最简单、最实用CSS布局技巧总结！

相对定位、绝对定位与盒模型等(待做)

5 个 position 值与描述

relative、fixed、absolute 和 static 四种定位有什么区别？

经过定位的元素，其 position 属性值必然是 relative、fixed、absolute 或 static。

• static：默认定位属性值。该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
• relative：该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。
• absolute：不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
• fixed：不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。
• sticky：盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 table 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky 对 table 元素的效果与 position: relative 相同。

19 个 display 值与描述

其中，inline、inline-block、block 的区别是：

盒模型

CSS盒模型描述了以文档树中的元素而生成的矩形框，并根据排版模式进行布局。每个盒子都有一个内容区域（例如文本，图像等）以及周围可选的padding、border和margin区域。

CSS盒模型负责计算：

• 块级元素占用多少空间。
• 边框是否重叠，边距是否合并。
• 盒子的尺寸。

盒模型有以下规则：

• 块级元素的大小由width、height、padding、border和margin决定。
• 如果没有指定height，则块级元素的高度等于其包含子元素的内容高度加上padding（除非有浮动元素，请参阅下文）。
• 如果没有指定width，则非浮动块级元素的宽度等于其父元素的宽度减去父元素的padding。
• 元素的height是由内容的height来计算的。
• 元素的width是由内容的width来计算的。
• 默认情况下，padding和border不是元素width和height的组成部分。

.png)

Flexbox

时代背景：随着终端设备的多样化发展，需要拥有足够的定义来支持那些必须随用户代理(user agent)不同或设备方向从水平转为垂直等各种变化而变换方向、调整大小、拉伸、收缩的应用程序组件。

flexbox 是一种布局机制。分为弹性容器(Flex container)和弹性项目(Flex item)，分别有自己的属性。在 flex 中，弹性容器的子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素溢出。

flexbox 被期望设计为：

• 在任何流动的方向上(包括上下左右)都能进行良好的布局。
• 可以以逆序或者以任意顺序排列布局。
• 可以线性的沿着主轴一字排开 或者 沿着侧轴换行排列。
• 可以弹性的在任意的容器中伸缩大小。
• 可以使子元素们在容器主轴方向上或者在容器侧轴方向上进行对齐。
• 可以动态的 沿着主轴方向伸缩子级的尺寸，与此同时保证父级侧轴方向上的尺寸。

优点
* 告别使用浮动的 <div> 元素、绝对定位和一些 JavaScript hacks，使用仅仅几行 CSS 就可以构建出水平或垂直方向的布局。

缺点
* 一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。

Flexbox 容器属性

• flex-direction 决定主轴的方向。

flex-direction: row | row-reverse | column | column-reverse;
<div class="md-section-divider"></div>

• flex-wrap 定义如果一条轴线排不下，如何换行。

flex-wrap: nowrap | wrap | wrap-reverse。
<div class="md-section-divider"></div>

• flex-flow 是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap。

flex-flow: <flex-direction> || <flex-wrap>;
<div class="md-section-divider"></div>

• justify-content 定义了项目在主轴上的对齐方式。

justify-content: flex-start | flex-end | center | space-between | space-around;
<div class="md-section-divider"></div>

• align-items 定义项目在交叉轴上如何对齐。

align-items: flex-start | flex-end | center | baseline | stretch;
<div class="md-section-divider"></div>

• align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

align-content: flex-start | flex-end | center | space-between | space-around | stretch;
<div class="md-section-divider"></div>

Flexbox 项目属性

具体在下节 “flexbox 相关词汇” 有所拓展。

• order 定义项目的排列顺序。数值越小，排列越靠前，默认为 0。

order: <integer>;
<div class="md-section-divider"></div>

• flex-grow 定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。

flex-grow: <number>; /* default 0 */
<div class="md-section-divider"></div>

• flex-shrink 定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。

flex-shrink: <number>; /* default 1 */
<div class="md-section-divider"></div>

• flex-basis 定义了在分配多余空间之前，项目占据的主轴空间。

flex-basis: <length> | auto; /* default auto */
<div class="md-section-divider"></div>

• flex 是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。后两个属性可选。

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
<div class="md-section-divider"></div>

• align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

align-self: auto | flex-start | flex-end | center | baseline | stretch;
<div class="md-section-divider"></div>

Flexbox 相关词汇

需要我们从诸如水平/行内轴和垂直/块级轴这些术语中解放出来，用一套新的术语来正确描述此模型。

• Flex container，弹性容器。包含弹性项目的父元素。通过设置 display 属性的值为 flex 或 inline-flex 来定义弹性容器。值 flex 使弹性容器成为块级元素。值 inline-flex 使弹性容器成为单个不可分的行内级元素。
• Flex item，弹性项目。弹性容器的每个子元素。
• Axis，轴。每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴称为主轴(main axis)。垂直于主轴的那根轴称为侧轴(cross axis)。
  
  • flex-direction 确立主轴。
  • justify-content 定义了在当前行上，弹性项目沿主轴如何排布。
  • align-items 定义了在当前行上，弹性项目沿侧轴默认如何排布。
  • align-self 定义了单个弹性项目在侧轴上应当如何对齐，这个定义会覆盖由 align-items 所确立的默认值。
• Direction，方向。弹性容器的主轴起点(main start)/主轴终点(main end)和侧轴起点(cross start)/侧轴终点(cross end)描述了弹性项目排布的起点与终点。
  
  • order 属性将元素与序号关联起来，以此决定哪些元素先出现。order 属性并不影响语音和导航的次序。
  • flex-flow 属性是 flex-direction 和 flex-wrap 属性的简写，决定弹性项目如何排布。
• Line，行。根据 flex-wrap 属性，弹性项目可以排布在单个行或者多个行中。此属性控制侧轴的方向和新行排列的方向。
• Dimension，尺寸。根据弹性容器的主轴与侧轴，弹性项目的宽和高中，对应主轴的称为主轴尺寸(main size) ，对应侧轴的称为 侧轴尺寸(cross size)。
  
  • min-height 与 min-width 属性初始值将为 0。
  • flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写，描述弹性项目的整体的伸缩性。

Flexbox 要点须知

• 弹性容器直接包含的文本（除只包含一系列空白符外）将被包覆成匿名弹性单元。
• 对于弹性容器的绝对定位子元素来说，其静态位置参照弹性容器的内容框的主起始角确定，而后依此完成此元素的定位。
• 相邻的弹性元素其外边距不会互相合并。使用 auto 外边距可以吸收掉水平或垂直方向上的额外空间，这可以用于对齐或分隔相邻的弹性项目。
• 不像 CSS 中的其他对齐方法，弹性框的对齐属性将进行“真正的”居中对齐。这意味着即使弹性条目溢出了弹性容器，它依然保持居中。如果溢出超过了页面的上边缘或左边缘，则虽然那些地方确实有内容，却无法滚动到那些位置。在未来的发布版本里，对齐属性将会包含有“安全”选项。
• 多栏布局模块的 column-* 属性对弹性项目无效。
• float 与 clear 对弹性项目无效。使用 float 将使元素的 display 属性计为 block。
• vertical-align 对弹性项目的对齐无效。
• 只要 break- 属性的设置值允许，在弹性框布局中是可以存在分页的。CSS3 中的 break-after、break-before 和 break-inside，以及 CSS 2.1 中的 page-break-before、page-break-after 和 page-break-inside 属性在弹性容器上、弹性项目上和弹性项目内均可以使用。

Flexbox 浏览器兼容性

早期 W3C 草案为 《Flexible Box Layout Module》，发布于 2009 年 7 月 23 日，语法大不相同。

• https://caniuse.com/#search=flex

Flexbox 参考链接

在线试验场地

• Flexbox Playground
• Flexy Boxes
• Flexbox Properties Demonstration

参考博客/文档

• CSS Flexible Box Layout Module Level 1
• CSS 弹性盒子布局
• Flex 布局教程：语法篇
• 深入理解 flex 布局以及计算

CSS Grid Layout(待做)

工程化 CSS

• CSS Modules、CSS 预处理器、CSS in JS、后处理器

常见 CSS 技术解析

CSS 可视化格式模型

说到底，CSS 的可视化格式模型就是规定了浏览器在页面中如何处理文档树。

• CSS中规定每一个元素都有自己的盒子模型(相当于规定了这个元素如何显示)
• 然后可视化格式模型则是把这些盒子按照规则摆放到页面上，也就是如何布局
• 换句话说，盒子模型规定了怎么在页面里摆放盒子，盒子的相互作用等等

关键字：

• 包含块(Containing Block)
• 控制框(Controlling Box)
• BFC(Block Formatting Context)
• IFC(Inline Formatting Context)
• 定位体系
• 浮动
• ...

CSS有三种定位机制：普通流，浮动，绝对定位，如无特别提及，下文中都是针对普通流中的

Containing Block 包含块

一个元素的 box 的定位和尺寸，会与某一矩形框有关，这个框就称之为包含块。元素会为它的子孙元素创建包含块，但是，并不是说元素的包含块就是它的父元素，元素的包含块与它的祖先元素的样式等有关系。

• 根元素是最顶端的元素，它没有父节点，它的包含块就是初始包含块
• static 和 relative 的包含块由它最近的块级、单元格或者行内块祖先元素的内容框(content)创建
• fixed的包含块是当前可视窗口
• absolute 的包含块由它最近的 position 属性为 absolute、relative 或者 fixed 的祖先元素创建
  
  • 如果其祖先元素是行内元素，则包含块取决于其祖先元素的 direction 特性
  • 如果祖先元素不是行内元素，那么包含块的区域应该是祖先元素的内边距边界

Controlling Box 控制框

块级元素和块框以及行内元素和行框的相关概念。

如果一个框里，有一个块级元素，那么这个框里的内容都会被当作块框来进行格式化，因为只要出现了块级元素，就会将里面的内容分块几块，每一块独占一行。出现行内可以用匿名块框解决。

如果一个框里，没有任何块级元素，那么这个框里的内容会被当成行内框来格式化，因为里面的内容是按照顺序成行的排列。

块框

• 块级元素会生成一个块框 Block Box，块框会占据一整行，用来包含子 box 和生成的内容
• 块框同时也是一个块包含框 Containing Box，里面要么只包含块框，要么只包含行内框(不能混杂)，如果块框内部有块级元素也有行内元素，那么行内元素会被匿名块框包围

匿名块框

<DIV>
Some text
<P>More text</P>
</DIV>
<div class="md-section-divider"></div>

如果一个块框在其中包含另外一个块框，那么我们强迫它只能包含块框，因此其它文本内容生成出来的都是匿名块框(而不是匿名行内框)

行内框

• 一个行内元素生成一个行内框
• 行内元素能排在一行，允许左右有其它元素

匿名行内框

<P>Some <EM>emphasized</EM> text</P>
<div class="md-section-divider"></div>

display 属性对不同框的影响

• block，元素生成一个块框
• inline，元素产生一个或多个的行内框
• inline-block，元素产生一个行内级块框，行内块框的内部会被当作块块来格式化，而此元素本身会被当作行内级框来格式化(这也是为什么会产生BFC)
• none，不生成框，不再格式化结构中，当然了，另一个 visibility: hidden 则会产生一个不可见的框

FC 格式化上下文

FC 即格式化上下文，它定义框内部的元素渲染规则，比较抽象，譬如：

• FC 像是一个大箱子，里面装有很多元素
• 箱子可以隔开里面的元素和外面的元素(所以外部不会影响 FC 内部渲染)
• 内部的规则可以是：如何定位，宽高计算，margin 折叠等

不同类型的框参与的 FC 类型不同，譬如块级框对应 BFC，行内框对应 IFC。并不是所有框都会产生 FC，而需符合特定条件。

BFC 块格式化上下文

在 BFC 中，每一个元素左外边与包含块的左边相接触(对于从右到左的格式化，右外边接触包含块的右边)，即使清除浮动也是如此，除非这个元素也创建了一个新的 BFC。浮动元素一般会直接贴近它的包含块的左边，与普通元素重合。

BFC 特点：

• 内部 box 在垂直方向，一个接一个的放置
• box 的垂直方向由 margin 决定，属于同一个 BFC 的两个 box 间的 margin 会重叠
• BFC 区域不会与 float box 重叠（可用于排版)
• BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此
• 计算 BFC 的高度时，浮动元素也参与计算(不会浮动坍塌)

如何触发 BFC：

• 根元素
• float 属性不为 none
• position 为 absolute 或 fixed
• display 为 inline-block, flex, inline-flex，table，table-cell，table-caption
• overflow 不为 visible

注：display: table 本身不产生 BFC，但是会产生匿名框，而这个匿名框产生 BFC。匿名框包含 display: table-cell 的框

IFC 行内格式化上下文

IFC 规则：

• 在行内格式化上下文中
• 框一个接一个地水平排列，起点是包含块的顶部。
• 水平方向上的 margin，border 和 padding 在框之间得到保留
• 框在垂直方向上可以以不同的方式对齐：它们的顶部或底部对齐，或根据其中文字的基线对齐

行框的宽度由它的包含块和其中的浮动元素决定，高度的确定由行高度计算规则决定。行框的规则：

• 如果几个行内框在水平方向无法放入一个行框内，它们可以分配在两个或多个垂直堆叠的行框中(即行内框的分割)
• 行框在堆叠时没有垂直方向上的分割且永不重叠
• 行框的高度总是足够容纳所包含的所有框。不过，它可能高于它包含的最高的框(例如，框对齐会引起基线对齐)
• 行框的左边接触到其包含块的左边，右边接触到其包含块的右边。

相比 BFC 规则来说，IFC 可能更加抽象——IFC 没有那么条理清晰的规则和触发条件。但总的来说，它就是行内元素自身如何显示以及在框内如何摆放的渲染规则，这样描述应该更容易理解。

行内元素与 IFC

• 行内元素总是会应用 IFC 渲染规则
• 行内元素会应用 IFC 规则渲染，譬如 text-align 可以用来居中等
• 块框内部，对于文本这类的匿名元素，会产生匿名行框包围，而行框内部就应用 IFC 渲染规则
• 行内框内部，对于那些行内元素，一样应用IFC渲染规则
• inline-block，会在元素外层产生 IFC(所以这个元素是可以通过 text-align 水平居中的)，当然，它内部则按照 BFC 规则渲染

CSS BEM 规范

BEM(Block Element Modifier)原则上建议为独立的 CSS 类命名，并且在需要层级关系时，将关系也体现在命名中，这自然会使选择器高效且易于覆盖。

CSS BNF 规范(待做)

Resetting(重置) CSS 和 Normalizing(标准化) CSS

• 重置，Resetting：意味着出去所有的浏览器默认样式，对于页面所有元素必须重新定义各种元素的样式。可用在非常个性化的网页设计上。
• 标准化，Normalizing：标准化没有去掉所有的默认样式，而是保留了有用的一部分，同时还纠正了一些常见的错误。

CSS 隐藏内容的技巧

这些与元素的可访问性有关。

• visibility: hidden：元素仍然在页面流中，并占用空间。
• width: 0; height: 0：使元素不占用屏幕上的任何空间，导致不显示它。
• position: absolute; left: -99999px： 将它置于屏幕之外。
• text-indent: -9999px：这只适用于 block 元素中的文本。
• Metadata： 例如通过使用 Schema.org，RDF 和 JSON-LD。
• WAI-ARIA：如何增加网页可访问性的 W3C 技术规范。
  即使 WAI-ARIA 是理想的解决方案，我也会采用绝对定位方法，因为它具有最少的注意事项，适用于大多数元素，而且使用起来非常简单。

触发浏览器重新布局(reflow)、重绘(repaint)、合成(compositing)的 CSS 属性及其机制(待做)

响应式设计与自适应设计

响应式设计和自适应设计都以提高不同设备间的用户体验为目标，根据视窗大小、分辨率、使用环境和控制方式等参数进行优化调整。

• 响应式设计的适应性原则：网站应该凭借一份代码，在各种设备上都有良好的显示和使用效果。响应式网站通过使用媒体查询，自适应栅格和响应式图片，基于多种因素进行变化，创造出优良的用户体验。就像一个球通过膨胀和收缩，来适应不同大小的篮圈。
• 自适应设计更像是渐进式增强的现代解释。与响应式设计单一地去适配不同，自适应设计通过检测设备和其他特征，从早已定义好的一系列视窗大小和其他特性中，选出最恰当的功能和布局。与使用一个球去穿过各种的篮筐不同，自适应设计允许使用多个球，然后根据不同的篮筐大小，去选择最合适的一个。

CSS 预处理器优缺点

优点：

• 提高 CSS 可维护性。
• 易于编写嵌套选择器。
• 引入变量，增添主题功能。可以在不同的项目中共享主题文件。
• 通过混合(Mixins)生成重复的 CSS。
• 将代码分割成多个文件。不进行预处理的 CSS，虽然也可以分割成多个文件，但需要建立多个 HTTP 请求加载这些文件。

缺点：

• 需要预处理工具。
• 重新编译的时间可能会很慢。

CSS 自动化兼容工具 autoprefixer (待做)

响应式的分辨率切割点

BootStrap

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
<div class="md-section-divider"></div>

Material Design Viewport Breakpoints

备注: * -16px on Desktop

CSS sprites，雪碧图

HTTP 2.0 不需要

雪碧图是把多张图片整合到一张上的图片。它被运用在众多使用了很多小图标的网站上。实现方法：

• 使用生成器将多张图片打包成一张雪碧图，并为其生成合适的 CSS。
• 每张图片都有相应的 CSS 类，该类定义了 background-image、background-position 和 background-size 属性。
• 使用图片时，将相应的类添加到你的元素中。

好处：

• 减少加载多张图片的 HTTP 请求数。但是对于 HTTP2.0 而言，加载多张图片不再是问题。
• 提前加载资源，防止在需要时才在开始下载引发的问题，比如只出现在 :hover 伪类中的图片，不会出现闪烁。

JavaScript

ECMAScript 标准(待做)

• ECMAScript3
• ECMAScript4

ECMAScript5(待做)

'use strict'

'use strict' 是用于对整个脚本或单个函数启用严格模式的语句。严格模式是可选择的一个限制 JavaScript 的变体的一种方式。

优点：

• 无法再意外创建全局变量。
• 会引起静默失效(即不报错也没有任何效果)的赋值抛出异常。
• 试图删除不可删除的属性时会抛出异常(之前的操作不会产生任何效果)。
• 要求函数的参数名唯一。
• 全局作用域下，this 的值为 undefined。
• 捕获了一些常见的编码错误，并抛出异常。
• 禁用令人困惑或欠佳的功能。

缺点：

• 缺失许多开发人员已经习惯的功能。
• 无法访问 function.caller 和 function.arguments。
• 以不同严格模式编写的脚本合并后可能导致问题。

缺点：

ECMAScript6(待做)

• ECMAScript7
• ECMAScript8

JavaScript 关键字与保留字

关键字与保留字列表

ECMA-262 定义了 ECMAScript 支持的一套关键字和一套保留字。如果把关键字用作变量名或函数名，可能得到诸如 "Identifier Expected"（应该有标识符、期望标识符）这样的错误消息。其中，关键字标识了 ECMAScript 语句的开头和/或结尾，保留字在某种意思上是为将来的关键字而保留的单词，因此关键字与保留字军不能被用作变量名或函数名。

typeof

constructor 与 instanceof

只要一个对象 a 的内部 prototype 属性或者它的原型链上的任意对象与 b.prototype 是同一个对象,那么 a instanceof b 就返回true。

Array instanceof Object // true
Object instanceof Object // true
Array instanceof Array // false
null instanceof Object // false
NaN instanceof Number // false
'str' instanceof String // false
new String('str') instanceof String // true
<div class="md-section-divider"></div>

对象字面量 vs 构造函数创建对象对比

在 JavaScript 中，我们可以通过 new 关键字、Object.create() 函数创建一个对象，或者使用字面量记法(也称对象初始化器材——object initializer)。字面量记法使用花括号定义对象，对象的 Property 与值以名称 - 值对的方式组织，用冒号分隔。我们还需要在每个名称 - 值对的最后加上逗号(除了最后一个名称 - 值对)。值可以包含变量、函数，或者其他对象。
—— 《 SPA 设计与架构 》

字面量的优势：

• 它的代码量更少，更易读；
• 它可以强调对象就是一个简单的可变的散列表，而不必一定派生自某个类；
• 对象字面量运行速度更快，因为它们可以在解析的时候被优化：它们不需要"作用域解析(scope resolution)"；因为存在我们创建了一个同名的构造函数 Object() 的可能，当我们调用 Object() 的时候，解析器需要顺着作用域链从当前作用域开始查找，如果在当前作用域找到了名为Object()的函数就执行，如果没找到，就继续顺着作用域链往上照，直到找到全局 Object() 构造函数为止
• Object() 构造函数可以接收参数，通过这个参数可以把对象实例的创建过程委托给另一个内置构造函数，并返回另外一个对象实例，而这往往不是你想要的。

关键字与保留字逐个深入(待做)

with 关键字(待做)

其它标识符命名避免原则

• 避免使用一些 Java 对象和属性作为 JavaScript 标识符。

• 避免使用 HTML 和 Windows 对象属性和名称作为 JavaScript 标识符。

• 避免使用 HTML 事件句柄作为 JavaScript 标识符。

• 避免使用非标准 JavaScript 的关键字

一个实例是 const 关键字，用于定义变量。一些 JavaScript 引擎把 const 当作 var 的同义词。另一些引擎则把 const 当作只读变量的定义。Const 是 JavaScript 的扩展。JavaScript 引擎支持它用在 Firefox 和 Chrome 中。但是它并不是 JavaScript 标准 ES3 或 ES5 的组成部分。建议：不要使用它。

关键字与保留字参考链接

• JavaScript 保留关键字
• ECMAScript 关键字
• ECMAScript 保留字

JavaScript 内置对象

• 原生对象是由 ECMAScript 规范定义的 JavaScript 内置对象，比如 String、Math、RegExp、Object、Function 等等。
• 宿主对象是由运行时环境(浏览器或 Node 提供，比如 Window、XMLHttpRequest 等等)。

不建议拓展内置对象，唯一使用场景是创建 polyfill，为老版本浏览器缺失的方法提供自己的实现。

JavaScript 面向对象

JavaScript 函数重载

方法一

function overLoading() {
　　// 根据 arguments.length，对不同的值进行不同的操作
　　switch(arguments.length) {
　　　　case 0:
　　　　　　/*操作1的代码写在这里*/
　　　　　　break;
　　　　case 1:
　　　　　　/*操作2的代码写在这里*/
　　　　　　break;
　　　　default:
　　　　    break;
    }
}
<div class="md-section-divider"></div>

方法二

// addMethod
function addMethod(object, name, fn) {
　　var old = object[name]; // 把前一次添加的方法存在一个临时变量 old 里面
　　object[name] = function() { // 重写了 object[name] 的方法
　　　　// 如果调用 object[name] 方法时，传入的参数个数跟预期的一致，则直接调用
　　　　if(fn.length === arguments.length) {
　　　　　　return fn.apply(this, arguments);
　　　　// 否则，判断 old 是否是函数，如果是，就调用 old
　　　　} else if(typeof old === "function") {
　　　　　　return old.apply(this, arguments);
　　　　}
　　}
}
var people = {
　　values: ["Dean Edwards", "Alex Russell", "Dean Tom"]
};
/* 下面开始通过 addMethod 来实现对 people.find 方法的重载 */
// 不传参数时，返回 peopld.values 里面的所有元素
addMethod(people, "find", function() {
　　return this.values;
});
// 传一个参数时，按 first-name 的匹配进行返回
addMethod(people, "find", function(firstName) {
　　var ret = [];
　　for(var i = 0; i < this.values.length; i++) {
　　　　if(this.values[i].indexOf(firstName) === 0) {
　　　　　　ret.push(this.values[i]);
　　　　}
　　}
　　return ret;
});
// 传两个参数时，返回 first-name 和 last-name 都匹配的元素
addMethod(people, "find", function(firstName, lastName) {
　　var ret = [];
　　for(var i = 0; i < this.values.length; i++) {
　　　　if(this.values[i] === (firstName + " " + lastName)) {
　　　　　　ret.push(this.values[i]);
　　　　}
　　}
　　return ret;
});
// 测试：
console.log(people.find()); //["Dean Edwards", "Alex Russell", "Dean Tom"]
console.log(people.find("Dean")); //["Dean Edwards", "Dean Tom"]
console.log(people.find("Dean Edwards")); //["Dean Edwards"]
<div class="md-section-divider"></div>

JavaScript this 指针(待做)

this 是 JavaScript 语言的一个关键字，函数调用的方式决定了 this 的值，this 取值符合以下标准：

1. 在调用函数时使用 new 关键字，函数内的 this 是一个全新的对象。
2. 如果 apply、call 或 bind 方法用于调用、创建一个函数，函数内的 this 就是作为参数传入这些方法的对象。
3. 当函数作为对象里的方法被调用时，函数内的 this 时调用该函数的对象。比如当 obj.method() 被调用时，函数内的 this 将绑定到 obj 对象。
4. 如果调用函数不符合上述规则，那么 this 的值指向全局对象。浏览器环境下 this 的值指向 window 对象，但是在严格模式下('use strict')，this 的值为 undefined。
5. 如果符合上述多个规则，则较高的规则(1 号最高，4 号最低)将决定 this 的值。
6. 如果该函数是 ES2015 中的箭头函数，将忽略上面的所有规则，this 被设置为它被创建时的上下文。

JavaScript 高阶函数

高阶函数是将一个或多个函数作为参数的函数，它用于数据处理，也可能将函数作为返回结果。高阶函数是为了抽象一些重复执行的操作。如 map、forEach、filter、reduce 等。

.apply()、.bind()、.call()

.apply() 和 .call() 都用于调用函数，第一个参数将用作函数内 this 的值。然而 .call 接受逗号分隔的参数作为后面的参数，而 .apply 接受一个参数数组作为后面的参数。

function add (a, b) {
    return a + b;
}
console.log(add.call(null, 1, 2)) // 3
console.log(add.apply(null, [1, 2])) // 3
<div class="md-section-divider"></div>

.bind() 方法创建一个新的函数，当被调用时，将其 this 关键字设置为提供的值，在调用新函数时，在任何提供之前提供一个给定的参数序列。这种将 this 的值绑定到想要传递给其他函数的类的方法中是非常有用的。

JavaScript 原型链

所有 JavaScript 对象都有一个 prototype 属性，指向它的原型对象。当试图访问一个对象的属性时，如果没有在该对象上找到，它还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。这种行为是在模拟经典的继承，与其说是继承，不如说是委托。

• 每个对象都有 __proto__ 属性。
• 函数有 prototype，定义在 ES 规范里。
• 实例继承构造函数 prototype 的所有属性和方法
  
  • 实例的 __proto__ 指向构造函数的 prototype
  • 对象具有属性 __proto__，可称为隐式原型，一个对象的隐式原型指向构造该对象的构造函数的原型，这也保证了实例能够访问在构造函数原型中定义的属性和方法。
• 几乎所有的 JavaScript 对象都是 Object 的实例。
  
  • 一个典型的对象继承了 Object.prototype 的属性（包括方法），尽管这些属性可能被遮蔽（也被称为覆盖）。
  • 但是有时候可能故意创建不具有典型原型链继承的对象，比如通过 Object.create(null) 创建的对象，或者通过 Object.setPrototypeOf 方法改变原型链。
  • 改变 Object 原型，会通过原型链，而改变所有对象；除非这些属性和方法被其他对原型链更里层的改动所覆盖。这提供了一个非常强大的、但有潜在危险的机制，来覆盖或扩展对象行为。

Function instanceof Object; // true
Object instanceof Function; // true
//①构造器Function的构造器是它自身
Function.constructor=== Function;//true
//②构造器Object的构造器是Function（由此可知所有构造器的constructor都指向Function）
Object.constructor === Function;//true
//③构造器Function的__proto__是一个特殊的匿名函数function() {}
console.log(Function.__proto__);//function() {}
//④这个特殊的匿名函数的__proto__指向Object的prototype原型。
Function.__proto__.__proto__ === Object.prototype//true
//⑤Object的__proto__指向Function的prototype，也就是上面③中所述的特殊匿名函数
Object.__proto__ === Function.prototype;//true
Function.prototype === Function.__proto__;//true
<div class="md-section-divider"></div>

1、所有的构造器的constructor都指向Function
2、Function的prototype指向一个特殊匿名函数，而这个特殊匿名函数的 __proto__ 指向Object.prototype

JavaScript 闭包(待做)

能够在 IIFE 完成执行后任维系着内部功能的生存期。

闭包，closure，概念最早提出在 1964 年，1975 年最早实现，是函数和声明该函数的词法环境的组合。词法作用域中使用的域，是变量在代码中声明的位置所决定的。

闭包就是能够读取其他函数内部变量的函数。

为什么使用闭包：

• 利用闭包实现数据私有化或模拟私有方法，这个方式也称为模块模式。
• 部分参数函数柯里化。

Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。另一方面，在函数外部自然无法读取函数内的局部变量。本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

如何从外部读取局部变量？

那就是在函数的内部，再定义一个函数。这就是 JavaScript 语言特有的"链式作用域"结构(chain scop)，子对象会一级一级地向上寻找所有父对象的变量。

使用闭包的注意点

1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

JavaScript IIFE 立即执行函数

IIFE，Immediately Invoked Function Expressions，代表立即执行函数。

IIFE 的外层括号不是必须的，因为 IIFE 是一个函数表达式。

JavaScript 函数式

柯里化函数

柯里化，currying，是一种模式，其中具有多个参数的函数被分解为多个函数，当被串联调用时，将一次一个地累积所有需要的参数。这种技术帮助编写函数式风格的代码，使代码更易读、紧凑。值得注意的是，对于需要被 curry 的函数，它需要从一个函数开始，然后分解成一系列函数，每个函数都需要一个参数。

JavaScript 数据类型

• 基本类型 (primitive values) - 包括 Undefined, Null, Boolean, Number 和 String 五种基本数据类型
• 引用类型 (reference values) - 保存在内存中的对象们，不能直接操作，只能通过保存在变量中的地址引用对其进行操作。

JavaScript 全局对象

根据 JavaScript 的运行环境，在 JavaScript 中存在两种全局对象：JavaScript 内置全局对象和 JavaScript 宿主全局对象，后者依赖运行环境。

JavaScript 内置全局对象

参考：http://mm.devhints.cn/

没有 Web 浏览器宿主环境的条件下，对于任何 JavaScript 程序，在程序开始之前，JavaScript 解释器都会初始化一个全局对象供程序使用，通过使用该 JavaScript 全局对象，可以访问所有预定义的全局属性、全局普通函数、全局构造函数和全局对象。这些预定义的全局 XX 都是“JS全局对象”的属性。此“JS全局对象”没有名称，可以在全局作用域内使用 this 关键字或引用“JavaScript 全局对象”。

• 基本对象
  
  • 内置异常：EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIErro
  • Object
  • Function
  • Boolean
• 反射
  
  • Proxy
  • Reflect
• 控制对象
  
  • Generator
  • GeneratorFunction
  • Iterable
  • Promise
• 数值和时间
  
  • Date
  • Math
  • Number
• 文本处理
  
  • RegExp
  • String
• 结构化数据
  
  • ArrayBuffer
  • DataView
  • JSON
• 键值对集合
  
  • Map
  • Set
  • WeakMap
  • WeakSet
• 索引集合
  
  • Array
  • TypedArray：Float32Array、Float64Array、Int16Array、Int32Array、Int8Array、Uint16Array、Uint32Array、Uint8Array、Uint8ClampedArray
• 全局对象
  
  • 全局对象的值属性：Infinity、NaN、undefined
  • 全局对象的其它属性：JSON、Math、Reflect
  • 全局对象的构造器属性：Array、ArrayBuffer、Boolean、DataView、Date、Error、EvalError、Float32Array、Float64Array、Function、Int16Array、Int32Array、Int8Array、Map、Number、Object、Promise、Proxy、RangeError、ReferenceError、RegExp、Set、String、Symbol、SyntaxError、TypeError、Uint16Array、Uint32Array、Uint8Array、Uint8ClampedArray、URIError、WeakMap、WeakSet

JavaScript 宿主全局对象 - 浏览器宿主

Web 浏览器这个宿主环境中特有的 JavaScript 全局对象为“window 全局对象”，“window 全局对象” 提供了与当前窗口、页面有关的诸多属性与方法。除了这些与浏览器有关的全局属性和方法，window 对象还封装了“JavaScript 内置全局对象”，并向外暴露“JavaScript 内置全局对象的属性与接口”。因此，当进行浏览器端 JavaScript 编程时，只需关心“window 全局对象”即可。

JavaScript 宿主全局对象 - Node.js 宿主(待做)

JSON 本质

• JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
• JSON 是轻量级的文本数据交换格式
• JSON 独立于语言，JSON 解析器和 JSON 库支持许多不同的编程语言。
• JSON 具有自我描述性，更易理解

JSON 对象包含两个方法: 用于解析 JavaScript Object Notation (JSON) 的 parse() 方法，以及将对象/值转换为 JSON 字符串的 stringify() 方法。除了这两个方法, JSON 这个对象本身并没有其他作用，也不能被调用或者作为构造函数调用。

• 把数据结构或者对象转换成某种格式的过程称为「序列化」
• 而将序列化过程的结果反向转换回某种数据结构或对象的过程称为「反序列化」。

JSON 风格指南

• 所有的属性名必须在双引号内。
• JSON对象中不包含注释。
• JSON中的数据元素应以扁平化方式呈现。不能为了方便而将数据任意分组。
• 选择有意义的属性名。
  
  • 属性名应该是具有定义语义的有意义的名称。
  • 属性名必须是驼峰式的，ASCII 码字符串。
  • 首字符必须是字母，下划线(_)或美元符号($)。 * 随后的其他字符可以是字母，数字，下划线(_)或美元符号($)。
  • 应该避免使用 Javascript 中的保留关键字
• 在 JSON Map 中键名可以使用任意 Unicode 字符。

JavaScript 与 JSON 的区别

let code = '"\u2028\u2029"';
JSON.parse(code);  // 正常
eval(code);  // 错误
<div class="md-section-divider"></div>

JSON.parse()

解析 JSON 字符串并返回对应的值，可以额外传入一个转换函数，用来将生成的值和其属性, 在返回之前进行某些修改。

JSON.stringify()

返回与指定值对应的JSON字符串，可以通过额外的参数, 控制仅包含某些属性, 或者以自定义方法来替换某些 key 对应的属性值。

JSON Polyfill

JSON对象可能不被老版本的浏览器支持。可以将下面的代码放到JS脚本最开始的位置，这样就可以在没有原生支持 JSON 对象的浏览器（如IE6）中使用 JSON对象。

以下算法是对原生JSON对象的模仿：

if (!window.JSON) {
  window.JSON = {
    parse: function(sJSON) { return eval('(' + sJSON + ')'); },
    stringify: (function () {
      var toString = Object.prototype.toString;
      var isArray = Array.isArray || function (a) { return toString.call(a) === '[object Array]'; };
      var escMap = {'"': '\\"', '\\': '\\\\', '\b': '\\b', '\f': '\\f', '\n': '\\n', '\r': '\\r', '\t': '\\t'};
      var escFunc = function (m) { return escMap[m] || '\\u' + (m.charCodeAt(0) + 0x10000).toString(16).substr(1); };
      var escRE = /[\\"\u0000-\u001F\u2028\u2029]/g;
      return function stringify(value) {
        if (value == null) {
          return 'null';
        } else if (typeof value === 'number') {
          return isFinite(value) ? value.toString() : 'null';
        } else if (typeof value === 'boolean') {
          return value.toString();
        } else if (typeof value === 'object') {
          if (typeof value.toJSON === 'function') {
            return stringify(value.toJSON());
          } else if (isArray(value)) {
            var res = '[';
            for (var i = 0; i < value.length; i++)
              res += (i ? ', ' : '') + stringify(value[i]);
            return res + ']';
          } else if (toString.call(value) === '[object Object]') {
            var tmp = [];
            for (var k in value) {
              if (value.hasOwnProperty(k))
                tmp.push(stringify(k) + ': ' + stringify(value[k]));
            }
            return '{' + tmp.join(', ') + '}';
          }
        }
        return '"' + value.toString().replace(escRE, escFunc) + '"';
      };
    })()
  };
}
<div class="md-section-divider"></div>

JavaScript 关联数组(Map)

其它多数语言里，数组分为索引数组和关联数组，索引数组又分为一维数组、二维数组和多维数组。
引用：“JavaScript 里面没有关联数组和索引数组这两种不同的区分，一切对象都是键值对，数组也是对象，数组也可以看作是键值对。”
自我感悟，存疑：JavaScript 还是有索引数组和关联数组的微小差异。索引数组和 length 属性直接挂钩，关联数组其实访问的是数组上的属性及其值，length 一般都是 0(没有真正的数据内容)。

在计算机科学中，关联数组（英语：Associative Array），又称映射（Map）、字典（Dictionary）是一个抽象的数据结构，它包含着类似于（键，值）的有序对。一个关联数组中的有序对可以重复（如C++中的 multimap）也可以不重复（如 C++ 中的 map）。这种数据结构包含以下几种常见的操作：

• 向关联数组添加配对
• 从关联数组内删除配对
• 修改关联数组内的配对
• 根据已知的键寻找配对

字典问题是设计一种能够具备关联数组特性的数据结构。解决字典问题的常用方法，是利用散列表，但有些情况下，也可以直接使用二叉查找树或其他结构。
许多程序设计语言内置基本的数据类型，提供对关联数组的支持。而内容定址存储器则是硬件层面上实现对关联数组的支持。

属性值和键值的异同

• 属性和键值不一样，给数组新增一个属性，其依然为数组，length 不变，新增的被读取时将是属性值，而非键值。

var a = [1,2,3]; // 定义一个数组
console.log(a);
console.log(a.length); // 结果为3
a["name"] = "xiaoming"; // 我们再给它赋值，这是给 a 数组增加了一个属性叫 name，而不是在数组里添加数据。
console.log(a); // [1, 2, 3, aaa: 1]，a 依然是数组
console.log(a.length); // 结果还是为 3
a.push(4);
console.log(a) // [1, 2, 3, 4, aaa: 1]，a 依然是数组
console.log(a.length); // 结果为4
<div class="md-section-divider"></div>

• 以下两种写法效果是一样的，但 j2 符合 JSON 风格，当 JSON 对象作为 Map(映射、关联数组) 时使用。
  
  • JSON 对象和 JSON Map 在运行时看起来是一样的；这个特性与 API 设计相关。当 JSON 对象被当作 Map 使用时，API 文件应当做出说明。
  • Map 的键名不一定要遵循属性名称的命名准则。键名可以包含任意的 Unicode 字符。客户端可使用 Map 熟悉的方括号来访问这些属性。

var j1 = {
    name: 'j1',
    age: 18,
    fun: function () {
        console.log(1)
    }
}
var j2 = {
    "name": "j2",
    "age": 18,
    "fun": function () {
        console.log(1)
    }
}
<div class="md-section-divider"></div>

遍历关联数组

for (var key in array){  
    console.log("键:",key);  
    console.log("值:",array[key]); 
}
<div class="md-section-divider"></div>

遍历对象

区分 Object 和 Array

• 利用 toString() 方法

function isArrayOne (arr) {  
    return Object.prototype.toString.call(arr) === "[object Array]"
}  
var obj = {"k1":"v1"};  
var arr = [1,2];  
console.log("对象的结果："+isArrayOne(obj));  // false
console.log("数组的结果："+isArrayOne(arr));  // true
<div class="md-section-divider"></div>

• 利用 isArray，使用 Javascript 1.8.5(ECMAScript 5)，变量名字.isArray( ) 可以实现这个目的，前提是支持这一函数。其实 isArray() 就是利用 toString() 方法的封装使用。

function isArray(obj) {  //obj 是待检测的对象，如果返回 true 则为数组
    if (Array.isArray) {  
        return Array.isArray(obj);  
    } else {  
     return Object.prototype.toString.call(obj)==="[object Array]";  
    }  
}
<div class="md-section-divider"></div>

• 通过 instanceof 运算符来判断(instanceof运算符左边是子对象，即待测对象，右边是父构造函数，这里是 Array)。instance 实例：凡是用 new 构造函数创建出的对象，都称为是构造函数的实例。

var obj = {"k1":"v1"};  
var arr = [1,2];
console.log("Instanceof处理对象的结果："+(obj instanceof Array));  
console.log("Instanceof处理数组的结果："+(arr instanceof Array));  
<div class="md-section-divider"></div>

• 使用 isPrototypeOf() 函数检测一个对象是否是 Array 的原型，或处于原型链中。不但可检测直接父对象，还可检测整个原型链上的所有父对象。

Array.prototype.isPrototypeOf(arr) // true 表示是数组，false 不是数组
<div class="md-section-divider"></div>

• 利用构造函数 constructor

var obj = {'k':'v'};  
var t1 = new Array(1);  
var t2 = t1;  
console.log(obj.constructor == Array);  // false
console.log(t1.constructor == Array);  // true
console.log(t2.constructor == Array);  // true
<div class="md-section-divider"></div>

• 使用 typeof + arr.concat 结合判断，局限性在于如果开发者定义了 concat 属性，便会引起冲突

function isArrayFour (arr) {  
    if (typeof(arr)==="object") {  
        if (arr.concat) {  
            return "This is Array";  
        } else {  
            return "This Not Array";  
        }  
    }  
}  
var arr = [1];  
var obj = {'k':'v'};  
console.log(typeof(arr));  
console.log(typeof(obj));  
console.log(isArrayFour(arr));  
console.log(isArrayFour(obj));
<div class="md-section-divider"></div>

关联数组和索引数组的遍历效率问题

遍历赋值以下数组时，第一次耗费时间差不多，浏览器默认优化之后，arr2 作为 Array 而非 Object 存取速度更快。

var arr = new Array(50000000);
var arr2 = {};
<div class="md-section-divider"></div>

JavaScript 数据类型操作

对象遍历

• for in 循环：for (var property in obj) { console.log(property); }。但这会遍历到它的继承属性，在使用前需要加入 obj.hasOwnProperty(property) 检查。
• Object.keys()：Object.keys(obj).forEach(function (property) { ... })。
• Object.getOwnPropertyNames()：Object.getOwnPropertyNames(obj).forEach(function (property) { ... })。Object.getOwnPropertyNames() 方法返回一个由指定对象的所有自身属性的属性名(包括不可枚举属性但不包括 Symbol 值作为名称的属性)组成的数组。

数组遍历

• for loop：for (var i = 0; i < arr.length; i++)。这里的常见错误是 var 是函数作用域而不是块级作用域。ES2015 引入了块级作用域 let，建议使用。
• forEach：arr.forEach(function (el, index) { ... })。这个语句结构有时会更精简，不必使用 index。还有 every 和 some 方法可以提前终止遍历。

数组浅拷贝与深拷贝

• 浅拷贝

var a = [1, 1],
    b = a;
console.log(a === b) // true
<div class="md-section-divider"></div>