JavaScript与CSS加载阻塞现象深度剖析？

本文共计1428个文字，预计阅读时间需要6分钟。

目录 + DOMContentLoaded 和 load + 阻塞了什么 css + 阻塞了什么 + 优化 + 总结 + DOMContentLoaded 和 load + 我们先了解两个事件，有助于后面的分析。load 事件：load + 应该仅用于检测一个完全加载的页面 + 当一个页面或其资源（如图片或脚本）完成加载时触发。

目录

• DOMContentLoaded和load
• js 阻塞了什么
• css 阻塞了什么
• 优化
• 总结

DOMContentLoaded和load

我们先了解两个事件，有助于后面的分析。

load事件：load 应该仅用于检测一个完全加载的页面 当一个资源及其依赖资源已完成加载时，将触发load事件。也就是说，页面的html、css、js、图片等资源都已经加载完之后才会触发 load 事件。

DOMContentLoaded事件：当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。也就是说，DOM 树已经构建完毕就会触发 DOMContentLoaded 事件。

js 阻塞了什么

因为js在执行的过程中可能会操作DOM，发生回流和重绘，所以GUI渲染线程与JS引擎线程是互斥的。

在解析HTML过程中，如果遇到 script 标签，渲染线程会暂停渲染过程，将控制权交给 JS 引擎。