二学一做专题网站百度代运营公司
面试常见问题
- 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.接着是图片、语音、视频