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(会话存储)