静态资源的渲染阻塞

在页面加载过程中，当客户端请求服务端获取页面代码后是如何解析的呢？

分为以下五个步骤：

第一步 ：构建DOM树，其中包括语法解析、词法解析，最后构成节点相连的树

第二步：构建CSSOM树，对每个节点添加样式

第三步：合并DOM树和CSSOM树形成渲染树

　　　　其中需要过滤不可见的节点、样式隐藏的节点

第四步：根据渲染树来计算节点的几何信息

第五步：将节点在页面正确的位置渲染

从以上步骤可以看出，DOM和CSS是阻塞页面渲染的主要部分，而DOM是必须的，没有DOM也就没有内容可渲染，而CSS并不是完全必须的。

对CSS加载进行优化：

1.对CSS进行媒体查询加载，如

<link href="style.css" rel="stylesheet" media='print'> 

就表示在打印时才加载此处的css

2.对必要的CSS进行提前加载（文件靠前、减小文件体积），减少对页面首次渲染的阻塞

然而我们必须知道的是：

　　无论css是阻塞还是不阻塞的，浏览器都会下载所有css

　　

JS加载优化：

js文件加载也会阻塞页面渲染，会延迟DOMContentLoaded事件的触发，解决方法主要有

1.将js文件的导入置于html底部

2.使用defer或async异步加载

而js文件的加载也会被css文件的加载而阻塞

只有页面中不含有js文件或只有异步加载的js文件时，css加载与js加载才互不影响