浏览器呈现引擎及阻塞过程(Webkit)

2021-02-01 14:15

阅读:687

标签:png   you   cti   block   lazy   tor   界面   网络   页面   

呈现

浏览器是如何将从网络层获取请求文档呈现到页面上的

技术图片

  • 呈现引擎将开始解析 HTML 文档,并将各标记逐个转化成“内容树”上的 DOM 节点。同时也会解析外部 CSS 文件以及样式元素中的样式数据。HTML 中这些带有视觉指令的样式信息将用于创建另一个树结构:呈现树。
  • 呈现树构建完毕之后,进入“布局”处理阶段,也就是为每个节点分配一个应出现在屏幕上的确切坐标。下一个阶段是绘制 - 呈现引擎会遍历呈现树,由用户界面后端层将每个节点绘制出来。

这是一个渐进的过程。为达到更好的用户体验,呈现引擎会力求尽快将内容显示在屏幕上。它不必等到整个 HTML 文档解析完毕之后,就会开始构建呈现树和设置布局。在不断接收和处理来自网络的其余内容的同时,呈现引擎会将部分内容解析并显示出来。

阻塞

  1. css 文件的下载和解析不会影响 DOM 的解析,但是会阻塞 DOM 的渲染
  2. css 文件没下载并解析完成之前,后续的 js 脚本不能执行
  3. css 文件的下载不会阻塞前面的 js 脚本执行
  4. js 文件没下载并解析完成之前,后续的 HTML 和 CSS 无法解析
  5. js 文件的下载不会阻塞前面 HTML 和 CSS 的解析

浏览器呈现引擎及阻塞过程(Webkit)

标签:png   you   cti   block   lazy   tor   界面   网络   页面   

原文地址:https://www.cnblogs.com/wangxirui/p/13153128.html


评论


亲,登录后才可以留言!