从CSS与JS方面优化性能

浏览器渲染过程

浏览器内核（渲染进程）拿到静态资源后，渲染大概可以划分成以下几个步骤：[1]

·解析HTML构建DOM树

·解析CSS构建render树（将CSS代码解析成树形的数据结构，然后结合DOM合并成render树）

·布局render树（Layout/reflow），负责各元素尺寸、位置的计算

·绘制render树（paint），绘制页面像素信息

·浏览器会将各层的信息发送给GPU，GPU会将各层合成，显示在屏幕上

可能的阻塞

CSS阻塞页面渲染

Link外部CSS，会阻塞原本的CSS样式渲染，即页面有空白期

改进：

使用内联CSS，这样获取到HTML文件之后就可以直接开始渲染流程了

使用CDN节点进行外部资源加速

JS阻塞页面解析

JS阻塞页面渲染：

改进：[2]

1.利用浏览器按顺序解析文档并执行脚本代码的特点，将JS相关代码放在

HTML文档体的最后

2.当JS文件没有操作DOM时，可以将JS脚本设置为异步加载，通过

async/defer标记，这样就不会阻塞页面解析

3.可以利用加载事件，如document的DOMContentLoaded事件或

window的load事件（脚本的执行不会阻塞DOM解析了（脚本的加载仍然会阻塞在其后的DOM解析））

结论[1][3][4]

1.HTML和CSS的加载和解析是异步的，不会互相干扰
2.只有等DOM树和CSSom树构建完成并且合并成render树之后，页面才开始渲染，所以CSS的加载不会影响DOM的解析，但CSS会阻塞render树的生成，进而会阻塞DOM的渲染

3.JS执行时会暂停解析DOM，等到JS执行完成再继续解析，所以JS会阻塞DOM解析；JS执行与「渲染相关任务」都在争夺主线程有限的资源，所以JS也会阻塞DOM渲染

4.浏览器的渲染和 JavaScript 的执行是异步进行的，它们不会相互阻塞。

在浏览器解析HTML文档时，如果遇到外部样式表或嵌入式样式表，会首先加载并解析 CSS，而不会等到整个文档解析完再去渲染，这被称为“CSS的阻塞特性”。当CSS资源下载、解析完成后，浏览器才开始渲染页面，在此过程中JavaScript始终可以执行。

因此，CSS不会直接阻塞JS加载，但是在DOM元素需要通过CSS样式计算后才能确定位置和大小的情况下，会阻塞DOM的构建过程，导致JavaScript无法访问尚未创建的DOM元素。

参考资料

[1]CSS、JS的加载是否阻塞DOM的解析与渲染

css、js的加载是否阻塞DOM的解析与渲染_Kobe_G的博客-CSDN博客_加载css的是否会阻塞浏览器的解析和渲染

[2]在JS引入时如何避免阻塞DOM解析

https://blog.csdn.net/angry_rooster/article/details/118887184

[3]关于JS与CSS是否阻塞DOM的渲染和解析

关于 JS 与 CSS 是否阻塞 DOM 的渲染和解析 - 掘金

[4]JS阻塞渲染，这么多年我理解错啦？

http://www.sanhaostreet.com/guonei/202204/2118913.HTML