网站建设上传文件,wordpress啥意思,搭建一个公司网站,山东济南网站建设公司渲染阻塞
1.DOM 的解析
html 文档 边加载边解析 的#xff1b;网络进程和渲染进程之间会建立一个共享数据的管道#xff0c;网络进程接收到数据实时传递给渲染进程#xff0c;渲染进程的 HTML 解析器#xff0c;它会动态接收字节流#xff0c;并将其解析为 DOM
2.字节流…渲染阻塞
1.DOM 的解析
html 文档 边加载边解析 的网络进程和渲染进程之间会建立一个共享数据的管道网络进程接收到数据实时传递给渲染进程渲染进程的 HTML 解析器它会动态接收字节流并将其解析为 DOM
2.字节流转换为 DOM 需要三个阶段
0字节流转 tokens tokens 生成节点 node最后生成 DOM 最关键是第一点 1通过分词器将字节流转换为 Token。 Tag Token 又分 StartTag EndTag文本 token 分别对应下图的蓝、红、绿 靠一个 栈结构 来维护 注意文本 Token 是不需要压入到栈
3.JS 影响
1script 脚本
会暂停 DOM 解析 因为接下来的 JavaScript 可能要修改当前已经生成的 DOM 结构
2引入外部 JS 文件
会阻塞 DOM 解析需要等待下载完成才行 浏览器有个优化渲染进程有个预解析线程提前下载 JS 和 css 文件 所以不用操作 dom 的 js 文件可以设置为异步加载 async 和 defer async 加载完立即执行还是会阻塞渲染最好用 defer
3JS 代码上面的 CSS 文件
因为不知道 JS 是否要处理 CSS所以不管怎样都会等待 CSS 文件加载好再继续执行 JS
4script 放在页面底部的影响
不影响 DOM 解析但会影响渲染
4.CSS 加载
1CSS 加载
CSS 代码下面如果没有 script 代码段就不会影响 DOMContentLoaded 如果有 JS 代码会等待 CSS 加载完成会阻塞 DOM 解析
2含有 JavaScript 文件和 CSS 文件页面的渲染流水线
预解析器同时发出两个文件请求不管 CSS 文件和 JavaScript 文件谁先到达都要先等到 CSS 文件下载完成并生成 CSSOM然后再执行 JavaScript 脚本最后再继续构建 DOM构建布局树绘制页面 预解析 WebKit 和 Firefox 都进行了这项优化。在执行脚本时其他线程会解析文档的其余部分找出并加载需要通过网络加载的其他资源。通过这种方式资源可以在并行连接上加载从而提高总体速度。请注意预解析器不会修改 DOM 树而是将这项工作交由主解析器处理预解析器只会解析外部资源例如外部脚本、样式表和图片的引用。
