当前位置：首页 > news >正文

js和css阻塞问题

news 2025/8/3 22:15:55

面试常见问题

css 加载会不会阻塞 js 的加载？（不会）
css 加载会不会阻塞 js 的执行？（会）
css 加载会不会阻塞 DOM 的解析？（不会）
css 加载会不会阻塞 DOM 的渲染？（会）
js 加载会不会阻塞 DOM 的解析？（会）
js 加载会不会阻塞 DOM 的渲染？（会）
js 执行会不会阻塞 DOM 的解析？（会）
js 执行会不会阻塞 DOM 的渲染？（会）

浏览器工作原理

JS 引擎线程（单线程）：负责解析 Javascript 脚本，运行代码
GUI 渲染线程：负责渲染浏览器界面，解析 HTML，CSS，构建 DOM Tree，Style Tree 和 Render Tree，布局和绘制等

注意：GUI 渲染线程与 JS 引擎线程是互斥的，当 JS 引擎执行时 GUI 线程会被挂起，所以当 JS 加载和执行时，会阻塞住 DOM 的解析和渲染，导致白屏时间很长

浏览器渲染过程

1.解析 HTML 生成 DOM Tree
2.解析 CSS 生成 Style Tree
3.将 DOM Tree 与 Style Tree 合并在一起生成 Render Tree
4.遍历 Render Tree 开始布局，计算每个节点的位置大小信息（Layout）
5.绘制 Render Tree，绘制页面的像素信息（Painting），显示到屏幕上（Display）

DOM Tree 和 Style Tree 是并行构建的，所以 CSS 加载不会阻塞 DOM 的解析
由于 Render Tree 是依赖于 DOM Tree 和 Style Tree 的，因此，css 加载会阻塞 Dom 的渲染
GUI 渲染线程与 JS 引擎线程是互斥的，加载解析 css 时，JS 引擎会被挂起，所以 css 会阻塞 js 的执行