WebKit技术内幕（笔记）

2019独角兽企业重金招聘Python工程师标准>>>

一：浏览器

1.渲染引擎:
    html解释器：主要作用是将HTML文本解释成DOM树
    css解释器 ：为DOM中的各个元素对象计算出样式信息，从而为计算后网页的布局提供基础设施
    布局：在DOM创建之后，Webkit需要将其中的元素对象同样式信息结合起来，计算他们的大小位置等布局信息，形成一个能够表示这所有信息的内部表示模型
    Javascript引擎：解释JS代码并通过DOM结构和CSSOM接口来修改网页内容和样式信息，从而改变渲染的结果
    绘图：使用图形库将布局计算后的各个网页节点绘制成图像结果



二.html网页和结构
     
（1）.webkit渲染过程

    一：从网页URL到构建完DOM树过程
     1）当用户输入URL的时候，webkit调用其资源加载器加载该URL对应的网页
     2）加载器依赖网络模块建立连接，发送请求并接收答复
     3）webkit接收到各种网页或者资源的数据，其中某些资源可能是同步或一步获取的
     4）网页被交给HTML解释器转变成一系列的词语（Token）
     5）解释器根据词语构建节点（Node），形成DOM树
     6）如果接电视js代码的话，调用js引擎解释并执行
     7）js代码可能会修改DOM树的结构
     8）如果节点需要依赖其他资源，列入图片，css，视频等，调用资源加载器来加载它们，但是它们是异步的，不会阻碍当前DOM树的继续创建；
          如果是js资源URL(没有标记异步方式)，则需要停止当前DOM树的创建，直到js的资源加载并被js引擎执行后才继续DOM树的创建。




    二：利用css和DOM树构建RenderObject树知道绘图上下文
      1）css文件被css解释器解释成内部表示结构
      2）css解释器工作完之后，在DOM树上附加解释后的样式信息，这就是RenderObject树。
      3）RenderObject节点在创建的同时webkit会根据网页的层次结构创建RenderLayer树，同时构建一个虚拟的绘图上下文。其实这中间还有复杂的内部过程。

       *RenderObject树的建立并不表示DOM树会被销毁，事实上途中的4个内部表示结构一直存在，知道网页被销毁




     三：最后，依赖2D和3D图形库生成最终的图像
     1）绘图上下文是一个与平台无关的抽象类，它将每个绘图操作桥接到不同的具体实现类，也就是绘图具体实现类
     2）绘图实现类也可能有简单的实现，也可能有复杂的实现。在Chromium中，它的实现相当复制，需要Chromium的合成器来完成复杂的多进程和GPU加速机制
     3）绘图实现类将2D图形库或者3D图形库绘制的结果保存下来，交给浏览器来同浏览器界面一起显示




三.WebKit架构和模块

     1,WebKit架构

       


五.HTML解释器和DOM模型

     

   5.2HTML解释器
      5.2.1解释过程
       

      5.2.2词法分析
      

   5.4 Shadow DOM
         将内部的节点信息封装起来，同时又能够将这些节点渲染出来，如HTML5对视频，音频的支持，由很复杂的控制界面组成（开始/暂停/音量...）但实际html中找不到这些节点，就是引用了shadow dom的思想


六.Css解释器和样式布局
  
     6.3.2 布局计算
     
   

7.渲染基础
     
       7.1.1  RenderObject
                 生成DOM树之后WebKit要为DOM树节点构建RenderObject树，一个RenderObject对象保存了为了绘制DOM节点所需要的各种信息，例如样式布局信息，
           它们也构成一棵树。RenderObject树是基于DOM树建立起来的一棵新树，是为了布局计算和渲染等机制而构建的一种新的内部表示。RederObject树节点和DOM
           树节点不是一一对应关系，一下为会为DOM树节点创建RenderObject对象的规则：
                 1.DOM树的document节点
                 2.DOM树中的可视节点，如html,body,div等。而webkit不会为非可视化几点创建RednerObject节点
                 3.某些情况下webkit需要建立匿名的RednerObject节点，该节点不对应于DOM树中的任何节点，而是webkit处理上的需要，如匿名RenderBlock节点
            
      7.2.1  层次和RenderLayer对象
                网页是可以分层的，一是为了方便网页开发者开发网页并设置网页层次， 而是为了简化渲染的逻辑。webkit会为网页的层次创建相应的RenderLayer对象。
           当某些类型的RenderObject的节点或者具有某些Css样式的RenderObject节点出现的时候，webkit会为这些节点创建RenderLayer对象，一般来说，某个RenderObject
           的节点后代都属于该节点，除非WebKit根据规则为某个后台RenderObject节点创建了一个新的RenderLayer对象

      7.3 渲染方式

      7.3.1绘图上下文
             在webkit中，绘图操作被定义了一个抽象层，即绘图上下文，所有的绘图操作都是在该上下文中来进行的，分为两种类型，2D/3D图形的上下文
    
       渲染方式：
        


9.Javascript引擎/size]

          

转载于:https://my.oschina.net/wsh2016/blog/756442