美文网首页
读书笔记-Webkit技术内幕-第二章

读书笔记-Webkit技术内幕-第二章

作者: wo不是黄蓉 | 来源:发表于2021-12-12 22:04 被阅读0次

我只是一个搬运工,写的很好的一篇文章,可以说是对这本书的一个总结。
一篇读懂浏览器技术架构:链接

第二章

WebKit的网页渲染过程

根据数据的流向,渲染过程大概分为三个阶段:

  • 从网页的url到构建完DOM树
    • 从网页url到构建完DOM树这个过程,这个过程可能重复并且可能交叉
      • 当用户输入网页URL时,Webkit调用其资源加载器加载该URL对应的网页
      • 加载器依赖网络模块建立连接,发送请求并接收应答
      • Webkit接收到各种网页或资源的数据,其中某些资源可能是同步或异步获取的
      • 网页被交给HTML解释器转变成一系列的词语
      • 解释器根据词语构建节点,形成DOM树
      • 如果节点是js,调用js引擎解释并执行
      • js代码可能会修改DOM结构
      • 如果节点需要依赖其他资源,例如图片,css,视频等,调用资源加载器来加载他们,但是他们是异步的,不会阻碍当前DOM树的继续创建;如果是JS资源URL,则需要停止当前DOM树的创建,直到JS的资源加载并被JS引擎执行后才继续DOM树的创建
    • 网页在加载和渲染过程中会发出“DOMConent”事件和DOM的“onload”事件,分别在DOM树构建完成后,以及DOM树构建完并且网页所依赖的资源都加载完之后发生。
  • 从DOM树到构建完Webkit的绘图上下文
    • Webkit利用CSS和DOM树构建RenderObject树直到绘图上下文
      • CSS文件被CSS解释器解释成内部表示结构
      • CSS解释器工作完之后,在DOM树上附加解释后的样式信息,这就是RenderObject树
      • RenderObject节点在创建的同时,Webkit会根据网页的层次结构创建RenderLayout树,同时构建一个虚拟的绘图上下文。
    • RenderObject树的建立并不标识DOM树会被销毁,事实上,上述图中的四个内部表示结构一直存在,知道网页被销毁,因为他们对于网页的渲染起到了非常大的作用。
  • 从绘图上下文到生成最终的图像
    • 主要依赖2D和3D图形库
      • 绘图上下文是一个与平台无关的抽象类,它将每个绘图操作桥接到不同的具体实现类,也就是会如图具体实现类
      • 绘图实现类也可能有简单的实现,也可能有复杂的实现。
      • 绘图实现类将2D图形库或3D图形库绘制的结果保存下来,交给浏览器来同浏览器界面一起显示。

相关文章

网友评论

      本文标题:读书笔记-Webkit技术内幕-第二章

      本文链接:https://www.haomeiwen.com/subject/fxedfrtx.html