css和js的加载执行是否会阻塞Dom

html-css013

css和js的加载执行是否会阻塞Dom,第1张

1.都没有配置:立即执行,阻塞DOM的解析

2.<srcript async />: Dom加载和渲染后续文档与js的加载和执行异步关系

3.<srcript defer />: Dom加载和渲染后续文档与js的加载异步关系, js的加载要在dom解析之前完成(DOMContentLoaded)

所以js不同情况下会阻塞Dom的解析和渲染,需要放置尾部;

页面渲染需要css解析生成的cssom再和dom生成renderTree,才能交给渲染引擎进行计算渲染

防止css阻塞可将<link></link>标签置于<body></body>标签内,但为避免dom加载完毕而样式表未加载完成而出现丑陋的"内容闪现"的状况,建议首次渲染内容阻塞渲染(包括但不限于导航条的样式、超大屏幕样式、按钮样式、其他布局和字体的公用样式),而不需要立即显示在页面中的样式我们可以将它们放于<body></body>标签内,以减少css的响应时间