css 加载阻塞问题，无废话
一、问题 & 结论
1. css 加载会阻塞 DOM 树的解析渲染吗 ？
- css 并不会阻塞 dom 树的解析
- css 会阻塞 dom 树的渲染
2. css 加载会阻塞 js 运行吗 ？
- css 加载会阻塞后面 js 语句的执行
二、造成的结果以及优化方案
1. 造成的结果
- css 加载缓慢会造成长时间的白屏
2. 优化方案
- CDN 加速：CDN 会根据网络状况，挑选一个最近的具有缓存内容的节点提供资源，减少加载时间
- 对 css 进行压缩：使用打包工具 webpack、gulp 等，开启 gzip 压缩
- 合理的使用缓存：强缓存、协商缓存等策略
- 减少 http 请求次数，合并 css 文件，或者干脆写成内联样式(缺点：不能缓存)
三、原理解析
1. 浏览器的渲染过程如下图所示：
2. 结论如下：
- DOM 解析和 css 解析是两个独立并行的进行，所以 css 的加载不会阻塞 DOM 的解析
- 由于 Render Tree 是依赖于 DOM Tree 和 CSSOM Tree 的，所以他必须等待到 CSSOM Tree 构建完成，也就是 CSS 资源加载完成(或者 CSS 资源加载失败)后，才能开始渲染。因此，CSS 加载是会阻塞 Dom 的渲染的
- 由于 js 可能会操作之前的 Dom 节点和 css 样式，因此浏览器会维持 html 中 css 和 js 的顺序。因此，样式表会在后面的 js 执行前先加载执行完毕。所以 css 会阻塞后面 js 的执行
四、实际场景
1. 页面加载的两个事件
- onLoad：等待页面的所有资源都加载完成才会触发，这些资源包括 css、js、图片视频等
- DOMContentLoaded：就是当页面的内容解析完成后，则触发该事件
2. css 加载的影响
- 如果页面中同时存在 css 和 js，并且存在 js 在 css 后面，则 DOMContentLoaded 事件会在 css 加载完后才执行
- 其他情况下，DOMContentLoaded 都不会等待 css 加载，并且 DOMContentLoaded 事件也不会等待图片、视频等其他资源加载
链接：https://juejin.cn/post/6967530166520119332
