开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 13 天，点击查看活动详情

一、开篇

1、常见的用户体验指标：

• 当用户请求一个网站时，如果在 1 秒内看不到关键内容，用户会产生任务被中断的感觉。
• 当用户点击某些按钮时，如果 100ms 内无法响应，用户会感受到延迟。
• 如果 Web 中的动画没有达到 60fps，用户会感受到动画的卡顿。

2、首屏的显示涉及

• DNS解析
• HTTP解析
• DOM 解析
• CSS 阻塞
• JavaScript 阻塞

3、前端技术核心诉求演进

**脚本执行速度问题 **

• 不断修订和更新语言本身，这样你就应该知道 ES6、ES7、ES8，或者 TypeScript 出现的必要性。对生态环境的改动是最小的，推行起来会比较容易
• 颠覆性地使用新的语言，这就是 WebAssembly 出现的原因。WebAssembly 需要经过编译器编译，所以体积小、执行速度快，使用它能大幅提升语言的执行效率，但是语言本身的完善，和生态的构建需要花很长时间来打造的。

前端模块化开发

• WebComponents标准：React 和 Vue都在渐进地适应 WebComponents 标准

渲染效率问题（）

• Chrome 团队正在开发的下一代布局方案 LayoutNG
• 渲染瘦身方案 Slim Paint

二、宏观视角下浏览器

1、Chrome浏览器的多进程架构

线程 VS 进程

• 一个进程就是一个程序的运行实例。启动一个程序的时候，操作系统会为该程序创建一块内存，用来存放代码、运行中的数据和一个执行任务的主线程，我们把这样的一个运行环境叫进程。

• 线程是依附于进程的，而进程中使用多线程并行处理能提升运算效率
• 进程中的任意一线程执行出错，都会导致整个进程的崩溃。
• 线程之间共享进程中的数据

• 当一个进程关闭之后，操作系统会回收进程所占用的内存。
• 进程之间的内容相互隔离

早期多进程架构

2008 年 Chrome 发布时的进程架构

• Chrome 的页面是运行在单独的渲染进程中的，同时页面里的插件也是运行在单独的插件进程之中，而进程之间是通过 IPC 机制进行通信（如图中虚线部分）
• 解决不稳定：进程是相互隔离的，所以当一个页面或者插件崩溃时，影响到的仅仅是当前的页面进程或者插件进程，并不会影响到浏览器和其他页面，这就完美地解决了页面或者插件的崩溃会导致整个浏览器崩溃。
• 解决不流畅：JavaScript 也是运行在渲染进程中的，所以即使 JavaScript 阻塞了渲染进程，影响到的也只是当前的渲染页面，而并不会影响浏览器和其他页面，因为其他页面的脚本是运行在它们自己的渲染进程中的。
• 解决安全问题：沙箱机制（沙箱里面的程序可以运行，但是不能在硬盘上写入任何数据，也不能在敏感位置读取任何数据）Chrome 把插件进程和渲染进程锁在沙箱里面，这样即使在渲染进程或者插件进程里面执行了恶意程序，恶意程序也无法突破沙箱去获取系统权限。

目前多进程架构

最新的 Chrome 进程架构图

• 浏览器进程：负责界面显示、用户交互、子进程管理，同时提供存储等功能
• 渲染进程：核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页，排版引擎 Blink 和 JavaScript 引擎 V8 都是运行在该进程中，默认情况下，Chrome 会为每个 Tab 标签创建一个渲染进程。出于安全考虑，渲染进程都是运行在沙箱模式下。
• GPU 进程：Chrome 刚开始发布的时候是没有 GPU 进程的。而 GPU 的使用初衷是为了实现 3D CSS 的效果，只是随后网页、Chrome 的 UI 界面都选择采用 GPU 来绘制，这使得 GPU 成为浏览器普遍的需求。最后，Chrome 在其多进程架构上也引入了 GPU 进程。
• 网络进程：负责页面的网络资源加载，之前是作为一个模块运行在浏览器进程里面的，直至最近才独立出来，成为一个单独的进程。
• 插件进程：负责插件的运行，因插件易崩溃，所以需要通过插件进程来隔离，以保证插件进程崩溃不会对浏览器和页面造成影响。（运行在沙箱中）

没有插件的情况下 打开一个页面 至少4个进程：网络进程、浏览器进程、渲染进程、GPU进程

缺点：

• 更高的资源占用：每个进程都会包含公共基础结构的副本（如 JavaScript 运行环境），这就意味着浏览器会消耗更多的内存资源。
• 更复杂的体系架构：浏览器各模块之间耦合性高、扩展性差等问题

未来面向服务的架构（更像操作系统）

• 原来的各种模块会被重构成独立的服务（Service），每个服务（Service）都可以在独立的进程中运行，访问服务（Service）必须使用定义好的接口，通过 IPC 来通信，从而构建一个更内聚、松耦合、易于维护和扩展的系统，最终要把 UI、数据库、文件、设备、网络等模块重构为基础服务，类似操作系统底层服务

• 灵活的弹性架构：资源受限的设备上，将很多服务整合到一个进程中，从而节省内存占用。

即使是如今的多进程架构，还会碰到一些由于单个页面卡死最终崩溃导致所有页面崩溃的情况

通常情况下是一个页面使用一个进程，但是，有一种情况，叫"同一站点(same-site)"，具体地讲，将“同一站点”定义为根域名，还包含了该根域名下的所有子域名和不同的端口，比如下面这三个：
time.geekbang.org
www.geekbang.org
www.geekbang.org:8080
都是属于同一站点，因为它们的协议都是https，而根域名也都是geekbang.org。也许了解同源策略，但是同一站点和同源策略还是存在一些不同地方，在这里你需要了解它们不是同一件事就行了。

Chrome的默认策略是，每个标签对应一个渲染进程。但是如果从一个页面打开了新页面，而新页面和当前页面属于同一站点时，那么新页面会复用父页面的渲染进程。官方把这个默认策略叫process-per-site-instance。

直白的讲，就是如果几个页面符合同一站点，那么他们将被分配到一个渲染进程里面去。

所以，这种情况下，一个页面崩溃了，会导致同一站点的页面同时崩溃，因为他们使用了同一个渲染进程。

为什么要让他们跑在一个进程里面呢？

因为在一个渲染进程里面，他们就会共享JS的执行环境，也就是说A页面可以直接在B页面中执行脚本。因为是同一家的站点，所以是有这个需求的。

2、TCP协议

网络加载速度是影响首屏绘制时间【FP（First Paint）】的重要的因素

【1】、IP协议：把数据包送达目的主机

计算机的地址就称为 IP 地址，访问任何网站实际上只是你的计算机向另外一台计算机请求信息
想把一个数据包从主机 A 发送给主机 B，那么在传输之前，数据包上会被附加上主机 B 的 IP 地址信息，这样在传输过程中才能正确寻址。额外地，数据包上还会附加上主机 A 本身的 IP 地址，有了这些信息主机 B 才可以回复信息给主机 A。这些附加的信息会被装进一个叫** IP 头的数据结构里。IP 头是 IP 数据包开头的信息，包含 IP 版本**、源 IP 地址、**目标 IP **地址、生存时间等信息

从数据主机A到数据B 具体过程

• 上层将数据处理成数据包交给网络层；
• 网络层再将 IP 头附加到数据包上，组成新的 IP 数据包，并交给底层
• 底层通过物理网络将数据包传输给主机 B；
• 数据包被传输到主机 B 的网络层，在这里主机 B 拆开数据包的 IP 头信息，并将拆开来的数据部分交给上层；
• 最终，含有所传数据的数据包就到达了主机 B 的上层了。

【2】、UDP协议：把数据包送达给应用程序

IP 是非常底层的协议，只负责把数据包传送到对方电脑，但是对方电脑并不知道把数据包交给哪个程序。
需要基于 IP 之上开发能和应用打交道的协议，最常见的是“用户数据包协议（User Datagram Protocol）”，简称 UDP。

UDP 中一个最重要的信息是端口号，每个想访问网络的程序都需要绑定一个端口号。**IP 通过 IP 地址信息把数据包发送给指定的电脑，而 UDP 通过端口号把数据包分发给正确的程序。**和 IP 头一样，端口号会被装进 UDP 头里面，UDP 头再和原始数据包合并组成新的 UDP 数据包。UDP 头中除了目的端口，还有源端口号等信息。
简化的 UDP 网络四层传输模型

• 上层将含有“极客时间”的数据包交给传输层
• 传输层会在数据包前面附加上 UDP 头，组成新的 UDP 数据包，再将新的 UDP 数据包交给网络层；
• 网络层再将 IP 头附加到数据包上，组成新的 IP 数据包，并交给底层；
• 数据包被传输到主机 B 的网络层，在这里主机 B 拆开 IP 头信息，并将拆开来的数据部分交给传输层；
• 在传输层，数据包中的 UDP 头会被拆开，并根据 UDP 中所提供的端口号，把数据部分交给上层的应用程序；
• 最终，含有“极客时间”信息的数据包就旅行到了主机 B 上层应用程序这里。

UDP 不能保证数据可靠性，但是传输速度却非常快，所以 UDP 会应用在一些关注速度、但不那么严格要求数据完整性的领域，如在线视频、互动游戏等

【3】、TCP协议：把数据完整地送达应用程序

对于浏览器请求，或者邮件这类要求数据传输可靠性（reliability）的应用，如果使用 UDP 来传输会存在两个问题：

• 数据包在传输过程中容易丢失
• 大文件会被拆分成很多小的数据包来传输，这些小的数据包会经过不同的路由，并在不同的时间到达接收端，而 UDP 协议并不知道如何组装这些数据包，从而把这些数据包还原成完整的文件。

TCP（Transmission Control Protocol，传输控制协议）是一种面向连接的、可靠的、基于字节流的传输层通信协议。相对于 UDP，TCP 有下面两个特点:

• 对于数据包丢失的情况，TCP 提供重传机制
• TCP 引入了数据包排序机制，用来保证把乱序的数据包组合成一个完整的文件

TCP 下的单个数据包的传输流程

一个完整的 TCP 连接的生命周期包括了“建立连接”“传输数据”和“断开连接”三个阶段。

• **建立连接阶段：**通过“三次握手”来建立客户端和服务器之间的连接。TCP 提供面向连接的通信传输。面向连接是指在数据通信开始之前先做好两端之间的准备工作。

三次握手：

• 第一次：客户端给服务端发送一个带有SYN标志的数据包

• 第二次：服务端给客户端发送带有SYN和ACK标志得数据包

• 第三次：客户端给服务端发送带有ACK标志的数据包

  为什么是三次？ 一次肯定不行，客户端发过去之后服务端无响应，客户端就不知道是否可以进行数据数据传 递 两个也不行，比如客户端给服务端说我要进行传递数据，服务端说可以传递，两个握手完成。如果没有第三次客户端的确认，服务端不知道客户端是否收到它允许传递的信号。

• 传输数据阶段：接收端需要对每个数据包进行确认操作，也就是接收端在接收到数据包之后，需要发送确认数据包给发送端。所以当发送端发送了一个数据包之后，在规定时间内没有接收到接收端反馈的确认消息，则判断为数据包丢失，并触发发送端的重发机制。同样，一个大的文件在传输过程中会被拆分成很多小的数据包，这些数据包到达接收端后，接收端会按照 TCP 头中的序号为其排序，从而保证组成完整的数据。

• 断开连接阶段：数据传输完毕之后，就要终止连接了，涉及到最后一个阶段“四次挥手”来保证双方都能断开连接。

TCP 为了保证数据传输的可靠性，牺牲了数据包的传输速度，因为“三次握手”和“数据包校验机制”等把传输过程中的数据包的数量提高了一倍。

总结

• 互联网中的数据是通过数据包来传输的，数据包在传输过程中容易丢失或出错
• IP 负责把数据包送达目的主机。
• UDP 负责把数据包送达具体应用。
• 而 TCP 保证了数据完整地传输，它的连接可分为三个阶段：建立连接、传输数据和断开连接。

HTTP 和 TCP 的关系

• HTTP协议和TCP协议都是TCP/IP协议簇的子集。
• HTTP协议属于应用层，TCP协议属于传输层，HTTP协议位于TCP协议的上层。
• 请求方要发送的数据包，在应用层加上HTTP头以后会交给传输层的TCP协议处理，应答方接收到的数据包，在传输层拆掉TCP头以后交给应用层的HTTP协议处理。建立 TCP 连接后会顺序收发数据，请求方和应答方都必须依据 HTTP 规范构建和解析HTTP报文。

3、HTTP的请求流程

HTTP 协议，正是建立在 TCP 连接基础之上的。HTTP 是一种允许浏览器向服务器获取资源的协议，是 Web 的基础。

浏览器端发起 HTTP 请求流程：

1. 构建请求

浏览器构建请求行信息（如下所示），构建好后，浏览器准备发起网络请求。

GET /index.html HTTP1.1

2. 查找缓存

在真正发起网络请求之前，浏览器会先在浏览器缓存中查询是否有要请求的文件
当浏览器发现请求的资源已经在浏览器缓存中存有副本，它会拦截请求，返回该资源的副本，并直接结束请求，而不会再去源服务器重新下载。这样做的好处有：

• 缓解服务器端压力，提升性能（获取资源的耗时更短了）；
• 对于网站来说，缓存是实现快速资源加载的重要组成部分。

3. 准备 IP 地址和端口

HTTP 和 TCP 的关系:因为浏览器使用 HTTP 协议作为应用层协议，用来封装请求的文本信息；并使用 TCP/IP 作传输层协议将它发到网络上，所以在 HTTP 工作开始之前，浏览器需要通过 TCP 与服务器建立连接。也就是说 HTTP 的内容是通过 TCP 的传输数据阶段来实现的，

1、浏览器会请求 DNS （IP 的系统就叫做“域名系统”，简称 DNS）返回域名对应的 IP。当然浏览器还提供了 DNS 数据缓存服务，如果某个域名已经解析过了，那么浏览器会缓存解析的结果，以供下次查询时直接使用，这样也会减少一次网络请求。
2、拿到 IP 之后，接下来就需要获取端口号了。通常情况下，如果 URL 没有特别指明端口号，那么 HTTP 协议默认是 80 端口。

4. 等待 TCP 队列

Chrome 有个机制，同一个域名同时最多只能建立 6 个 TCP 连接，如果在同一个域名下同时有 10 个请求发生，那么其中 4 个请求会进入排队等待状态，直至进行中的请求完成。

如果当前请求数量少于 6，会直接进入下一步，建立 TCP 连接。

5. 建立 TCP 连接

排队等待结束之后，终于可以快乐地和服务器握手了，在 HTTP 工作开始之前，浏览器通过 TCP 与服务器建立连接。

6. 发送 HTTP 请求

一旦建立了 TCP 连接，浏览器就可以和服务器进行通信了。而 HTTP 中的数据正是在这个通信过程中传输的。

请求行：包括了请求方法、请求 URI（Uniform Resource Identifier）和 HTTP 版本协议。
请求头：包含了浏览器所使用的操作系统、浏览器内核等信息，以及当前请求的域名信息、浏览器端的 **Cookie **信息，等等
**请求体：**如果使用 POST 方法，那么浏览器还要准备数据给服务器，这里准备的数据是通过请求体来发送。

7. 服务器端处理 HTTP 请求流程

1、返回请求：响应行、响应头、响应体

2、断开连接：

• 通常情况下，一旦服务器向客户端返回了请求数据，它就要关闭 TCP 连接。
• 浏览器或者服务器在其头信息中加入了：Connection:Keep-Alive 那么 TCP 连接在发送后将仍然保持打开状态，这样浏览器就可以继续通过同一个 TCP 连接发送请求。保持 TCP 连接可以省去下次请求时需要建立连接的时间，提升资源加载速度。比如，一个 Web 页面中内嵌的图片就都来自同一个 Web 站点，如果初始化了一个持久连接，你就可以复用该连接，以请求其他资源，而不需要重新再建立新的 TCP 连接。

3. 重定向
响应行返回的状态码是 301，状态 301 就是告诉浏览器，我需要重定向到另外一个网址，而需要重定向的网址正是包含在响应头的 Location 字段中，接下来，浏览器获取 Location 字段中的地址，并使用该地址重新导航，这就是一个完整重定向的执行流程。

4、导航流程：从输入URL到页面展示，这中间发生了什么？

输入 URL 到页面展示完整流程示意图

整个过程需要各个进程之间的配合：

• 浏览器进程主要负责用户交互、子进程管理和文件储存等功能。
• 网络进程是面向渲染进程和浏览器进程等提供网络下载功能。
• 渲染进程的主要职责是把从网络下载的 HTML、JavaScript、CSS、图片等资源解析为可以显示和交互的页面。因为渲染进程所有的内容都是通过网络获取的，会存在一些恶意代码利用浏览器漏洞对系统进行攻击，所以运行在渲染进程里面的代码是不被信任的。这也是为什么 Chrome 会让渲染进程运行在安全沙箱里，就是为了保证系统的安全。

整个过程可以大致描述为如下：

• 浏览器进程接收到用户输入的 URL 请求，浏览器进程便将该 URL 转发给网络进程。
• 在网络进程中发起真正的 URL 请求。
• 接着网络进程接收到了响应头数据，便解析响应头数据，并将数据转发给浏览器进程。
• 浏览器进程接收到网络进程的响应头数据之后，发送“提交导航 (CommitNavigation)”消息到渲染进程
• 渲染进程接收到“提交导航”的消息之后，便开始准备接收 HTML 数据，接收数据的方式是直接和网络进程建立数据管道
• 最后渲染进程会向浏览器进程“确认提交”，这是告诉浏览器进程：“已经准备好接受和解析页面数据了”
• 浏览器进程接收到渲染进程“提交文档”的消息之后，便开始移除之前旧的文档，然后更新浏览器进程中的页面状态。

用户发出 URL 请求到页面开始解析的这个过程，就叫做导航 导航的过程如下：

1. 用户输入

• 如果是搜索内容，地址栏会使用浏览器默认的搜索引擎，来合成新的带搜索关键字的 URL
• 如果判断输入内容符合 URL 规则，比如输入的是 baidu.com，那么地址栏会根据规则，把这段内容加上协议，合成为完整的 URL，www.baidu.com

当用户输入关键字并键入回车之后，这意味着当前页面即将要被替换成新的页面，不过在这个流程继续之前，浏览器还给了当前页面一次**执行 beforeunload **事件的机会，beforeunload 事件允许页面在退出之前执行一些数据清理操作，还可以询问用户是否要离开当前页面，比如当前页面可能有未提交完成的表单等情况，因此用户可以通过 beforeunload 事件来取消导航，让浏览器不再执行任何后续工作。

当前页面没有监听 beforeunload 事件或者同意了继续后续流程，那么浏览器便进入加载状态，此时图中页面显示的依然是之前打开的页面内容，并没立即替换为极客时间的页面。因为需要等待提交文档阶段，页面内容才会被替换。

2. URL 请求过程

这时，ff会通过进程间通信（IPC）把 URL 请求发送至网络进程，网络进程接收到 URL 请求后，会在这里发起真正的 URL 请求流程。

1. 首先，网络进程会查找本地缓存是否缓存了该资源。如果有缓存资源，那么直接返回资源给浏览器进程；
2. 如果在缓存中没有查找到资源，那么直接进入网络请求流程

• DNS解析：有DNS缓存，直接获取域名的服务器 IP 地址，否则请求DNS服务器来获得

• 请求协议是 HTTPS，那么还需要建立 TLS 连接。（如果是http这步没有）

  TLS:在连接中要完成秘钥交换，浏览器与服务器完成密钥交换，以确保安全性

• 利用 IP 地址和服务器建立 TCP 连接（详情看上）

• 连接建立之后，浏览器端会构、请求头等信息，并把和该域名相关的 Cookie 等数据附加到请求头中，然后向服务器发送构建的请求信息。

• 服务器接收到请求信息后，会根据请求信息生成响应数据

• 收到服务器返回的响应头后，网络进程开始解析响应头，如果发现返回的状态码是 301 或者 302，那么说明服务器需要浏览器重定向到其他 URL。这时网络进程会从响应头的 Location 字段里面读取重定向的地址，然后再发起新的 HTTP 或者 HTTPS 请求，从头开始。

• 响应数据类型处理：有时候是一个下载类型，有时候是正常的 HTML 页面，怎么处理？

  浏览器会根据Content-Type 的值来决定如何显示响应体的内容。
  如果 Content-Type 字段的值被浏览器判断为下载类型（application/octet-stream），那么该请求 会被提交给浏览器的下载管理器，同时该 URL 请求的导航流程就此结束。但如果是 HTML，那么浏 览器则会继续进行导航流程。由于 Chrome 的页面渲染是运行在渲染进程中的，所以接下来就需要准 备渲染进程了。

3. 准备渲染进程

打开一个新页面采用的渲染进程策略是：

• 通常情况下，打开新的页面都会使用单独的渲染进程；
• 如果从 A 页面打开 B 页面，且 A 和 B 都属于同一站点的话，那么 B 页面复用 A 页面的渲染进程；如果是其他情况，浏览器进程则会为 B 创建一个新的渲染进程

渲染进程准备好之后，还不能立即进入文档解析状态，因为此时的文档数据还在网络进程中，并没有提交给渲染进程，所以下一步就进入了提交文档阶段。

4. 提交文档

指浏览器进程将网络进程接收到的 HTML 数据提交给渲染进程：

• 首先当浏览器进程接收到网络进程的响应头数据之后，便向渲染进程发起“提交文档”的消息；
• 渲染进程接收到“提交文档”的消息后，会和网络进程建立传输数据的“管道”；
• 等文档数据传输完成之后，渲染进程会返回“确认提交”的消息给浏览器进程
• 浏览器进程在收到“确认提交”的消息后，会更新浏览器界面状态，包括了安全状态、地址栏的 URL、前进后退的历史状态，并更新 Web 页面。

渲染进程确认提交之后，更新内容如下图所示

5. 渲染阶段

一旦文档被提交，渲染进程便开始页面解析和子资源加载。
渲染模块在执行过程中会被划分为很多子阶段，输入的 HTML 经过这些子阶段，最后输出像素。把这样的一个处理流程叫做渲染流水线，其大致流程如下图所示：

按照渲染的时间顺序，流水线可分为如下几个子阶段：构建 DOM 树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成。

构建 DOM 树：

因为浏览器无法直接理解和使用 HTML，所以需要将 HTML 转换为浏览器能够理解的结构——DOM 树
DOM 树的构建过程图

构建 DOM 树的输入内容是一个简单的 HTML 文件，然后经由 HTML 解析器解析，最终输出树状结构的 DOM。
DOM 和 HTML 内容几乎是一样的，但是和 HTML 不同的是，DOM 是保存在内存中树状结构，可以通过 JavaScript 来查询或修改其内容。

样式计算（Recalculate Style）：

• 把 CSS 转换为浏览器能够理解的结构——styleSheets

  渲染引擎会将link 引用的外部 CSS 文件、标签内的 CSS、**元素的 style 属性内嵌的 CSS **所有接收到的css文本转化为styleSheets对象，控制台打印document.styleSheets ，结构如下：
  

• 转换样式表中的属性值，使其标准化

  CSS 文本中有很多属性值，如 2em、blue、bold，这些类型数值不容易被渲染引擎理解，所以需要将所有值转换为渲染引擎容易理解的、标准化的计算值，这个过程就是属性值标准化。
  

• 计算出 DOM 树中每个节点的具体样式

<style>
      div {
            width: 200;
            height: 200;
            overflow:auto;
            background: gray;
        } 
</style>
<body>
    <div >
        <p>所以元素有了层叠上下文的属性或者需要被剪裁，那么就会被提升成为单独一层，你可以参看下图：</p>
        <p>从上图我们可以看到，document层上有A和B层，而B层之上又有两个图层。这些图层组织在一起也是一颗树状结构。</p>
        <p>图层树是基于布局树来创建的，为了找出哪些元素需要在哪些层中，渲染引擎会遍历布局树来创建层树（Update LayerTree）。</p> 
    </div>
</body>

var myname = '极客时间'

// 这段代码你可以把它看成是两行代码组成的

var myname    //声明部分
myname = '极客时间'  //赋值部分

function foo(){
  console.log('foo')
}

var bar = function(){
  console.log('bar')
}

VariableEnvironment:
     myname -> undefined, 
     showName ->function : {console.log(myname)

showName()
console.log(myname)
var myname = '极客时间'
function showName() {
    console.log('函数showName被执行');
}

VariableEnvironment:
     myname -> "极客时间", 
     showName ->function : {console.log(myname)

function showName() {
    console.log('极客邦');
}
showName();
function showName() {
    console.log('极客时间');
}
showName();