ANKG

【前端理论】前端性能优化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，异步（推荐），按依赖顺序执行；
script async，异步，多个请求发完，谁先来就执行谁，不管依赖关系；

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

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

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

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

预编译期less、sass虽好，但层级嵌套少用；
减少@import的使用，因为它在style标签内，不管是通过