CSS和JS加载对HTML解析有什么影响
@import和link标签有什么区别
在解释文章开头这个问题之前,我们先来了解一下@import和link标签有什么区别。
- @import只能加载CSS文件,而link标签除了加载CSS文件,还可以加载其他脚本文件,比如JS脚本文件。
- link标签加载文件和页面加息是同时进行的,而@import加载CSS文件却是要等页面解析完才会加载。
CSS文件和JS脚本对DOM解析的影响
-
CSS文件加载不会阻塞DOM解析,但是会阻塞DOM渲染
这里解释一下为什么CSS文件要阻塞DOM渲染不阻塞DOM解析:
如果CSS不阻塞DOM渲染,那么当DOM解析完后会立即渲染出一个页面样式,当CSS加载完后,页面就会重新渲染成CSS样式,如此就造成用户体验差,渲染次数增加而导致开销大。
-
JS脚本加载会阻塞DOM解析,但浏览器会”偷看“DOM,预先下载相关资源
同样的,也解释一下为什么JS文件要阻塞DOM解析:
如果不阻塞,浏览器先解析后面的DOM,当加载完JS后,JS脚本里的内容会删后面的DOM,那么先前的解析就是无用功,所以JS文件会阻塞解析。
但是在实际开发中,我们本不想加载JS脚本的时阻塞DOM解析,因为这会使得用户体验差。那么有没有解决方法呢?
首先是在script标签中加入async属性或者defer属性,也就是异步加载或者延迟