网站开发技术选型,品牌设计作品,北京装修公司前20名,wordpress 分类目录 不显示面试常见问题
css 加载会不会阻塞 js 的加载#xff1f;#xff08;不会#xff09;css 加载会不会阻塞 js 的执行#xff1f;#xff08;会#xff09;css 加载会不会阻塞 DOM 的解析#xff1f;#xff08;不会#xff09;css 加载会不会阻塞 DOM 的渲染#xff1…面试常见问题
css 加载会不会阻塞 js 的加载不会css 加载会不会阻塞 js 的执行会css 加载会不会阻塞 DOM 的解析不会css 加载会不会阻塞 DOM 的渲染会js 加载会不会阻塞 DOM 的解析会js 加载会不会阻塞 DOM 的渲染会js 执行会不会阻塞 DOM 的解析会js 执行会不会阻塞 DOM 的渲染会
浏览器工作原理
JS 引擎线程单线程负责解析 Javascript 脚本运行代码GUI 渲染线程负责渲染浏览器界面解析 HTMLCSS构建 DOM TreeStyle 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.接着是图片、语音、视频
