浏览器渲染原理及渲染阻塞

目录

• 输入URL到页面加载显示完成发生了什么?
• 渲染过程

输入URL到页面加载显示完成发生了什么?

DNS解析
TCP连接
发送HTTP请求
服务器处理请求并返回HTTP报文
浏览器解析渲染页面
连接结束

渲染过程

阻塞

渲染阻塞

定义：CSSOM负责存储渲染信息，浏览器就必须保证在合成渲染树之前，CSSOM是完备的（指所有的CSS（内联、内部和外部）都已经下载并解析完），只有CSSOM和DOM的解析完全结束，浏览器才会进入下一步的渲染，这就是CSS阻塞渲染，在不完备之前，页面是空白的。

CSS性能优化

首屏关键CSS 内联！

内联CSS样式提前页面渲染时间
首屏关键CSS：https://github.com/filamentgroup/criticalCSS

异步加载CSS

古老方法：

• js动态创建Link标签
• 使用link标签内的media属性，设置为不匹配的媒体类型（print/noexist），降低加载优先级;结束后要设置回来

<link rel="stylesheet" href="mystyles.css" media="noexist" onload="this.media='all'">

• 使用 link 标签内的 rel 属性，设置为可选样式表(alternate stylesheet),结束后设置回来

<link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='stylesheet'">

一般：
用 rel="preload" 进行异步加载

<link rel="preload" href="mystyles.css" as="style" onload="this.rel='stylesheet'">

文件压缩

去除无用的CSS

1. 提取公共类
2. 去除没有用到的CSS

选择器的使用

昂贵属性少用

重绘与重排优化

1. 重排：整个页面重新渲染
   导致重排

• 改变font-size/font-family
• 改变元素尺寸或位置
• 通过js改变css类
• 通过js获取dom元素的位置属性（width/height/top/left等等）
• css伪类激活
• 窗口大小改变或者滚动条滚动

！ Flex重排快

2. 重绘：元素外观属性变化时，重新绘制元素
   避免不必要的重绘

优化：

1. 批量修改属性
2. 批量修改DOM——将元素脱离文档流进行系列修改，然后放回去
   • display:none
   • document fragment构建子树
   • cloneNode，然后替换
3. 设置position脱离文档流

不用@import

js阻塞