渲染过程中遇到 JS 文件怎么处理

最新推荐文章于 2023-09-08 14:17:40 发布

原创

最新推荐文章于 2023-09-08 14:17:40 发布 · 963 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #js

JavaScript的加载和执行会阻塞文档解析，而CSS则不会。为了优化首屏渲染速度，通常建议将JavaScript放在body底部，CSS放在顶部。CSS资源加载不会阻塞DOM解析，但JavaScript会。理解CSS和JS的加载顺序有助于提高页面加载速度和用户体验。

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

JavaScript的加载、解析与执行会阻塞文档的解析，也就是说，在构造DOM时，HTML解析器若是遇到了JavaScript，那么它会暂停文档的解析，将控制权交给JavaScript引擎，等JavaScript引擎运行完毕，浏览器再从中断的地方恢复继续解析文档。

也就是说，如果我们想首屏渲染的越快，就越不应该在首屏就加载js文件，这也是建议将script标签放在body标签底部的原因。当然，并不说script标签必需放在底部，因为可以给script标签添加defer或者async属性。

CSS 阻塞文档解析

理论上，既然样式表不改变 DOM 树，也就没有必要停下文档的解析等待它们，
然而，存在一个问题，JavaScript 脚本执行时可能在文档的解析过程中请求样式信息，
如果样式还没有加载和解析，脚本将得到错误的值，显然这将会导致很多问题。

所以如果浏览器尚未完成 CSSOM 的下载和构建，
而我们却想在此时运行脚本，那么浏览器将延迟 JavaScript 脚本执行和文档的解析，直至其完成 CSSOM 的下载和构建。
也就是说，在这种情况下，浏览器会先下载和构建 CSSOM，然后再执行 JavaScript，最后再继续文档的解析。

为什么js放在底部，css放在顶部

浏览器会在下载完成全部css之后才对整个页面进行渲染，因此最好的方式是将css放在页面最上面，让浏览器尽快启动下载css。

JavaScript则相反，浏览器在加载JavaScript后立即执行，有可能会阻塞整个页面，造成页面显示缓慢，因此JavaScript最好放在页面最下面。但如果页面解析时就需要用到JavaScript，这是放在最底部就不合适了。

CSS和JS引入位置说明

1、CSS资源尽量放在head部分

因为CSS解析和DOM解析可以同时进行，所以CSS资源放在头部不会影响DOM解析，而且放在头部也会优先开始加载CSS样式，在渲染DOM的时候也已经知道了自己的样式，所以一次就可渲染成功。如果将CSS放在底部，那么会优先渲染DOM，而浏览器为了更好的用户体验，渲染引擎会尝试尽