[JavaScript知识库]CSS构建

渲染流水线

请求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中，以加快处理文档的速度。这样浏览器就知道可以安全读取文档剩余部分而不执行脚本，直到文档已经显示给用户。