前端性能优化：2.前端页面的生命周期

2.1 一道题

经典问题：从浏览器地址栏输入URL后，到页面渲染出来，整个过程发生了什么？
前端阶段作答：

1. 浏览器接收到URL，到网络请求线程的开启。
2. 一个完整的HTTP请求发出。
3. 服务器接收到请求并转到具体的处理后台。
4. 前后台之间的HTTP交互和涉及的缓存机制。
5. 浏览器接收到数据包后的关键渲染路径。
6. JS引擎的解析过程。

2.2 网络请求线程开启
URL结构：Protocol://Host:port/Path?Query#Fragment

标识	名称	备注
Protocol	协议头	说明浏览器如何处理要打开的文件，常见的有HTTP、FTP、Telnet等
Host	主机域名/IP地址	所访问资源在互联网上的地址，主机域名或经过DNS解析为IP地址
Port	端口号	请求程序和响应程序之间连接用的标识
Path	目录路径	请求的目录或者文件名
Query	查询参数	请求所传递的参数
Fragment	片段	次级资源信息，通常可作为前端路由或锚点

2.2.1 进程与线程
进程是一个程序运行的实例，操作系统会为进程创建独立的内存，用来存放运行所需的代码和数据；而线程是进程的组成部分，每个进程至少有一个主线程及可能的若干子线程，由所属的进程进行启动和管理。
四个特点:

1. 只要某个线程出错，将会导致整个进程崩溃。
2. 进程与进程之间相互隔离。虽然每个进程只能访问自己的资源，但可以用过IPC机制进行进程间通信。
3. 进程所占用的资源会在其关闭后由操作系统回收。
4. 线程之间可以共享所属进程的数据。

2.2.2 单进程浏览器
代表：Chrome之前的浏览器
隐患：

1. 流畅性：页面内存泄漏，单进程浏览器打开再关闭一个页面的操作，通常会有一些内存不能完全回收；其次由于很多模块运行在同一个线程中，执行某个循环任务的模块就会阻塞其他模块的任务执行，难免会卡顿。
2. 安全性：由于插件的存在，不免有些恶意脚本会利用浏览器漏洞来获取系统权限，进行引发安全问题的行为。
3. 稳定性：所有模块都运行在同一个进程中，稍复杂的JS代码运行崩溃就会导致整个浏览器运行崩溃。

2.2.3 多进程浏览器
代表：Chrome
把原先单进程内功能相对独立的模块抽离为单个进程处理对应的任务。
主要进程：

1. 浏览器主进程：一个浏览器只有一个主进程，负责如菜单栏、标题栏等界面显示，文件访问，前进后退，以及子进程管理等。
2. GPU进程：最初是为了实现3D的CSS效果引进。
3. 插件进程：主进程会为每个插件开独立的子进程防止插件崩溃引起浏览器崩溃。采用沙箱模式：不能读敏感位置的数据，也不能在硬盘上写入数据。
4. 网络进程：负责网络资源加载。
5. 渲染进程：也称为浏览器内核，默认会为每个标签窗口开辟一个独立进程。同样为沙箱模式。

2.3 建立http请求

2.3.1 DNS解析
浏览器自身的DNS缓存==>系统自身的DNS缓存==>系统的hosts文件==>本地域名服务器==>根域名服务器==>COM顶级域名服务器和权限服务器等
最终将所要访问的目标服务器IP地址返回本地主机，若查询不到则返回报错信息。
2.3.2 网络模型

2.3.3 TCP连接
三次握手:

四次挥手：

2.4 前后端交互

实际的网络访问中，并非浏览器与确定IP地址的服务器之间直接通信，往往会在中间加入反向代理服务器。
2.4.1 反向代理服务器
根据客户的请求，从后端服务器上获取资源后提供给客户端。
作用：

1. 负载均衡
2. 安全防火墙
3. 加密及SSL加速
4. 数据压缩
5. 解决跨域
6. 对静态资源缓存

常见的反向代理服务器：Nginx、IIS、Apache
2.4.2 后端处理流程

1. 验证环节：如跨域验证、安全校验拦截等。如果发现是不和规则的请求，则直接返回响应的拒绝报文。
2. 执行阶段：通过验证后才会进入具体的后台程序代码执行阶段。
3. 完成计算：后台会以一个HTTP响应数据包的形式发送回请求的前端，结束本次请求。

2.4.3 HTTP相关协议特性
HTTP是建立在传输层TCP协议之上的应用层协议，存在长连接和短连接的区别------长连接就是可以连续发送多个数据包，但需要双方发送心跳检查包来维持；短连接就是需要时建立一个TCP连接，请求发送并受到响应后就断开。
HTTP 1.0时，默认使用短连接。
HTTP 1.1时，默认使用长连接。
HTTP 2.0新特性：

1. 二进制分帧(在应用层和传输层之间加入一个二进制分帧层，以实现低延迟和高吞吐量)
2. 服务器端推送(一个请求可以发出多个响应)
3. 设置请求优先级
4. HTTP头部压缩(减少报文传输体积)
5. 多路复用(一个连接可请求多个资源)

2.4.4 浏览器缓存
具体缓存策略分为强缓存和协商缓存。
强缓存：
当浏览器判断出本地缓存未过期时，直接读取本地缓存，无需发起HTTP请求。
协商缓存：
需要向服务器发起HTTP请求，来判断浏览器本地缓存的文件是否仍未修改，若未修改则从缓存中读取。

2.5 关键渲染路径

2.5.1 构建对象模型
首先浏览器会通过解析HTML和CSS文件，来构建DOM和CSSOM。
可以通过打开Chrome浏览器的开发者工具的性能选项卡，查看到对应进程的耗时情况。
2.5.2 渲染绘制
完成DOM和CSSOM的构建后，得到的其实是描述最终渲染页面两个不同方面信息的对象：一个是展示的文档内容，一个是文档对象对应的样式规则，还需要合并为渲染树。
渲染绘制的步骤：

1. 从DOM树的根节点向下遍历每个子节点，忽略不可见的节点(脚本标记不可见、CSS隐藏不可见)。
2. 在CSSOM中为每个可见的子节点找到对应的规则并应用。
3. 布局阶段，根据得到的渲染树，计算它们在设备试图中的具体位置和大小，输出一个“盒模型”。
4. 绘制阶段，将每个节点的具体绘制方式转化为屏幕上的实际像素

当首屏渲染完成后，在用户与网站的交互过程中，有可能通过JavaScript提供的用户操作接口更改渲染树的结构，一旦DOM结构发生改变，这个渲染过程就会重新执行一次。

2.6 小结

前端性能优化需要从整个访问网页的过程中整体看待，每一环都可能影响网页整体性能和用户的操作体验。
故此前端工程师需要掌握整个页面的生命周期来把握其中每一个环节的性能问题，更快的找出问题所在并优化。

前端性能优化系列：
前端性能优化：1.什么是前端性能优化
前端性能优化：2.前端页面的生命周期
前端性能优化：3.图像资源优化
前端性能优化：4.资源加载优化
前端性能优化：5.高性能的JavaScript代码
前端性能优化：6.项目构建优化
前端性能优化：7.页面渲染优化