前端浏览器渲染原理--什么情况阻塞渲染

最新推荐文章于 2024-07-12 19:59:08 发布

LuckXinXin

最新推荐文章于 2024-07-12 19:59:08 发布

阅读量1.4k

点赞数

分类专栏：前端面试题文章标签：前端面试题

本文链接：https://blog.youkuaiyun.com/LuckXinXin/article/details/109449871

版权

前端面试题专栏收录该内容

64 篇文章

订阅专栏

本文阐述了如何通过优化HTML结构、CSS选择器和合理放置script标签，以提高网页首屏渲染速度。重点讲解了避免阻塞渲染的方法，如扁平化DOM和使用defer或async属性来控制JS加载时机。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

                    
                    首先渲染的前提是生成渲染树，所以 HTML 和 CSS 肯定会阻塞渲染。如果你想渲染的越快，你越应该降低一开始需要渲染的文件大小，并且扁平层级，优化选择器。
然后当浏览器在解析到 script 标签时，会暂停构建 DOM，完成后才会从暂停的地方重新开始。也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载 JS文件，这也是都建议将 script 标签放在 body 标签底部的原因。
当然在当下，并不是说 script 标签必须放在底部，因为你可以给 script 标签添加 defer 或者 async 属性。
当 script 标签加上 defer 属性以后，表示该 JS 文件会并行下载，但是会放到 HTML 解析完成后顺序执行，所以对于这种情况你可以把 script标签放在任意位置。
对于没有任何依赖的 JS 文件可以加上 async 属性，表示 JS 文件下载和解析不会阻塞渲染。