【前端理论】前端性能优化CRP

CRP：（Critical Rendering Path）关键渲染路径

《知识补充》

一、从url出入到最终页面渲染：

第一步：URI解析

目的：也叫URL解析，让浏览器自身能看懂；
主要是浏览器自身操作，一般前端优化不在这一步操作。

• 地址解析和编码
• HSTS：（HTTP Strict Transport Security）HTTP严格传输安全协议；网站可以选择使用HSTS策略，来让浏览器强制使用HTTPS与网站进行通信，以减少会话劫持风险。
• 缓存检查：有缓存就不用发请求了

第二步：DNS解析（可优化）

目的：将域名解析为ip地址。

• 怎么解析？（优先级依次降低）
  • 通过浏览器DNS缓存
  • 通过系统DNS缓存
  • 通过路由器DNS缓存
  • 通过网络运营商DNS缓存
  • 递归搜索：.com域名、.baidu域名、blog域名；
  • 都没查到，就报错了

第三步：找到IP，进行TCP连接（优化：减少请求次数）

三次握手

• 第一次握手：浏览器发起，告知服务器要发送请求；
• 第二次握手：服务器发起，回应浏览器我准备接收；
• 第三次握手：浏览器发起，告知服务器要准备发了；

第四步：发送请求（优化：减少请求内容）

• 请求报文：http协议的通信内容

第五步： 服务器处理并响应（后端优化）

• 响应报文

第六步：四次挥手

关闭客户端和服务器端的链接通道

• 第一次挥手：浏览器告知服务器请求已发完；
• 第二次挥手：服务器告诉浏览器，请求已经接受完；
  第三次挥手：服务器告知浏览器响应已经发完；
  第四次挥手：浏览器告知服务器，响应已经接收完毕。

第七步：浏览器渲染页面渲染过程（可优化）

• 遇见html标记，调用html解析器解析成token并构建dom树；
• 遇见style/link，调用css解析器，处理css标记并构建cssom树；
• 遇见script标记，调用js解析器，处理js代码；
• 将dom树与cssom树合并成渲染树；
• 根据渲染树来计算布局，计算每个节点的几何信息；
• 将各个节点颜色绘制到屏幕上，渲染

---

一、CRP优化（关键渲染路径）

概念：就是在以上七个关键步骤中进行优化；

主要优化点一：DNS解析

目的：将域名解析为ip地址。

先本地DNS服务器找，没有再去外部（根域名-顶级域名-权威域名中找）
优化点：

• 减少DNS请求次数（需要服务器的数量）
• DNS预获取（通过link请求，DNS-prefetch，为页面中其他请求可能用到的服务器域名提前解析出对应ip）
  

---

主要优化点二：减少http请求和请求资源大小

• 资源合并压缩
• 字体图标（推荐，雪碧图用的少了）
• Base64
• GZIP（一般的文件能压缩60%）
• 图片懒加载（原理类似骨架图，先加载主要页面）
• 数据延迟分批加载（首屏先加载）
• CDN资源（请求最近的资源）

---

主要优化点三：浏览器解析渲染

DOM、CSSOM、Render-Tree的形成，回流与绘制；

1、DOM树

• 转换（bytes-characters）：将服务器传来的字节编码转为浏览器能识别的字符串
• 令牌（tokens）：通过w3c规范，对字符串解析，分析区分出里面的html元素和内容，形成最终代码结构；
• 词法分析（nodes）：分析代码中节点嵌套关系
• DOM构建：通过节点嵌套关系，构建DOM树；

优化点：加快DOM树构建；

• 标签语义化
• 避免深层嵌套（三、四级即可）
• script，默认同步阻塞页面加载，遇到就会拉取/渲染，避免阻塞的JS加载，放到body元素底部；
• script defer，推迟（也是异步不影响页面加载），等页面加载完以后，一般js文件都下载完成了，html5规范要求是按js文件次序来执行，跟谁先下载完无关，但实际情况中不一定这样；
• script async，异步，多个请求发完，也是谁先下载完了就执行谁，【与defer的不同：不能保证按照js文件的次序执行】；
  
  

2、CSSOM树
通过link（异步请求）、@import（导致同步效果）请求来的css文件，类似DOM树；style标签里的在DOM树中就有了；

优化点：加快CSSOM树构建；（选择器是从右到左找）

• 选择器渲染是从右到左，所以减少不必要的嵌套；

（.box a{}比a{}要慢，因为从右到左，先找完a元素再找box类，所以权重越大越慢，可以覆盖前面的）

• 预编译期less、sass虽好，但层级嵌套少用；
• 减少@import的使用，因为它在style标签内，不管是通过<style>还是<link>加载过来css样式，都会在DOM树加载完后通过事件循环执行后才解析，这样就导致解析到以后才会加载@import中的文件，破坏了css文件的异步加载（使用link在DOM加载时就异步加载更省时）；
• 尽快将CSS下载到客户端，充分利用HTTP多请求并发机制（一次可发6~7个请求），将link、style放在顶部；
• style样式不多时直接写，多的话用link，因为style太多，html文件请求就慢了；

3、Render-tree渲染树

• 将DOM和CSSOM树都形成后，融合成渲染树；
• 计算它们在设备视口的确切位置和大小–回流（Layout）或重排（reflow）
• 根据渲染树和回流后的几何信息，得到节点的绝对像素，进行绘制（painting）或栅格化（rasterizing）

优化点：减少DOM的回流和重绘；

主要优化点四：应用缓存

第一步URI解析时会检查是否有缓存；

1、缓存位置
Service Worker：浏览器独立线程进行缓存（少了）
Memory Cache：内存缓存
Disk Cache：硬盘缓存
Push Cache：推送缓存（http/2的）（少了）

内存缓存：读取速度快，空间小
硬盘缓存：读取速度慢，空间大

2、查找缓存

• 第一次打开页面时，从硬盘缓存中找缓存；
• 普通刷新F5（页面已经打开过），从内存缓存中找，没有再硬盘缓存；
• 强制刷新Ctrl+F5，浏览器就不适用缓存了，从服务器获取最新的；

3、强缓存、协商缓存都是文件缓存；数据缓存有localStorage（本地存储）、sessionStorage（会话存储）