JS阻塞和CSS阻塞

JS的阻塞

1、所有浏览器在下载JS的时候,会阻止其他的一切活动(比如其他资源的下载,内容的呈现等等)。为了提高用户体验,新一代浏览器都支持并行下载JS,但是JS下载还是会阻止其他资源的性爱在(图片、css文件等等)

2、原因:浏览器为了防止出现JS修改DOM树,需要重构DOM树的情况,就会阻止其他资源的下载和呈现

3、嵌入JS会阻止所有内容呈现,但是外部JSD只会阻止其后内容的显示

CSS阻塞

1、IE6下的CSS都是会阻止加载的

2、当CSS后边跟着嵌入的JS的时候,该CSS就会出现阻止后边资源下载的情况。

解决方法:把嵌入的JS放在CSS前边

3、原因:浏览器会维持html中css和js的顺序,样式表必须在嵌入放入JS执行前先加载、解析完,而嵌入的JS会阻塞后边的资源加载,所以就会出现CSS阻塞

嵌入的JS应该放在什么位置

1、放在底部,只会阻塞所有内容的呈现,但是不会则阻塞资源的下载(js放在</body>前)

2、如果嵌入JS放在head中,则嵌入JS放在css头部

3、使用defer

4、不要在嵌入的JS中调用执行时间较长的函数,如果一定要用,可以用setTimeout来调用

5、动态脚本元素使用js动态创建HTML的几乎全部文档内容


猜你喜欢

转载自blog.csdn.net/qq_34309704/article/details/80307576