静态资源的渲染阻塞

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

分为以下五个步骤:

第一步 :构建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加载才互不影响

 

猜你喜欢

转载自www.cnblogs.com/ashen1999/p/12809395.html
今日推荐