js和css阻塞问题

面试常见问题

• 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 的执行

资源优先级

1.html 、 css 、 font 这三种类型的资源优先级最高
2.然后 script 、 xhr 请求
3.接着是图片、语音、视频