渲染流水线
请求HTML文件-响应HTML文件-解析HTML构建DOM树-请求CSS文件-响应CSS文件-构建CSSOM树(即document.stylesheets)-执行JS代码继续构建DOM树-构建布局树-渲染
CSSOM树
CSSOM树有两个作用:
● 提供给JS操作样式表的能力
● 为布局树的合成提供基础的样式信息
解析白屏
在前一个页面提交数据之后跳转页面,渲染进程会创建一个空白页面,我们通常把这段时间称为解析白屏
缩短白屏策略
● 通过内联JS和CSS来避免下载这两种文件,获取HTML即可开始渲染
● 通过webpack等工具移除一些不必要的注释,压缩JS文件
● 将一些不需要在解析HTML阶段使用的JS标记上async或者defer
● 对于文本量较大的CSS文件,可以拆分为多个CSS来加载特定场景
defer
defer 属性规定是否对脚本执行进行延迟,直到页面加载为止。
如果脚本不会改变文档内容,可以将defer加入到script中,以加快处理文档的速度。这样浏览器就知道可以安全读取文档剩余部分而不执行脚本,直到文档已经显示给用户。