CSS阻塞渲染，怎么防止css阻塞

html-css020

CSS阻塞渲染，怎么防止css阻塞,第1张

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

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

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

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

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

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