最近在看《WebKit技术内幕》这本书，这本书讲述了Webkit项目和Chromium项目，HTML5原理,Webkit工作原理，Chromium机制等。顺便记录下笔记。

2003年，苹果发布了Safari浏览器， 在2005年将该浏览器的部分源代码开源，发起了一个新的开源项目—WebKit，也就是Safari浏览器的内核。
之后2008年Google以WebKit作为内核，创建了一个新的项目——Chromium，在此基础上，发布了自己的浏览器产品——Chrome。Chromium不是内核，而本身就是一个浏览器，Chromium会把最新的创新大胆技术进行实验，所以Chrome版本落后于Chromium的版本。
2013年，Google宣布了Blink内核，也是从WebKit复制出去的。

浏览器内核

浏览器中有一个重要的模块，可以将我们的HTML/CSS/JavaScript模块转换为可视化的页面，这个模块就是浏览器内核，也被称之为渲染引擎
渲染引擎

渲染引擎

渲染引擎包含

  • HTML解释器：将HTML文本解释为DOM树
  • CSS解释器：级联样式表的解释器，对DOM各个元素对象计算样式信息
  • **布局(layout)**：DOM创建完成，需要对元素对象同样式信息结合起来，计算位置大小布局信息
  • JavaScript引擎：可以执行JavaScript代码并通过DOM接口和CSSOM接口修改网页内容和样式信息，改变渲染结果
  • 绘图：将布局计算后的网页节点绘制成图像
  • 网络存储模块等等

    WebKit

    最早来源于1998年，苹果公司参与了KDE开源社区发起的网页渲染引擎KHTML，之后由于存在分歧意见，2001年，苹果公司从KHTML源代码复制出来成立了一个新的项目——WebKit,2005年WebKit开源
    image

Webkit和Webkit2

Webkit2是狭义上的绑定和接口层，是支持新架构的全新绑定层和接口层。2010年4月，苹果宣布了Webkit2
image

同样，发生在KHTML项目身上的事情也发生在WebKit项目上，苹果公司和Google存在分歧，2013年4月，Google从Webkit复制出来并独立运作Blink

HTML和三种特征

HTML网页是利用HTML语言编写的文档，是一种半结构化的数据表现方式，主要有三种特征

  • 树状结构
  • 层次结构
  • 框结构

树结构

整体网页是树状结构，根节点为html标签，元素组成的树状结构，就是HTML文档的树状结构，在Webkit中，这些文档树会构成一个DOM树

1
2
3
4
5
6
7
8
<html>
    <head></head>
    <body>
        <div>
            <img/>
        </div>
    </body>
</html>

层次结构

理解层次结构有助于撰写高效的HTML5代码。
可以简单理解为ps中的图层一样，有些元素分布在不同的层次，某些原因会导致建立新的层，谷歌浏览器中可以通过layer查看层信息，CSS样式也会引起分层。

image

最大的层被称为“根层”，如果在你的HTML结构中有video标签，那么也会创建一个新的层，原因是播放视频时候，创建一个新的层可以有效处理视频解码器和浏览器之间的交互和渲染问题，还有canvas等元素，CSS 3D变换等，哪些情况下会产生新的层？对于不同的浏览器没有，策略都不相同，但是最终的目的就是为了渲染引擎的高效

框结构

框结构主要对网页布局进行分割，将网页分为几个框，同时也可以嵌入其他网页，比如iframe,frame嵌入其他网页就是一个框结构
框结构