WebKit技术内幕（笔记）

一：浏览器

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]