WebKit技术内幕 第二章学习笔记

WebKit技术内幕 第二章学习笔记

网络上每个资源都是由URL标记的，它是URI的一种实现。

URI，是uniform resource identifier，统一资源标识符，用来唯一的标识一个资源。

而URL是uniform resource locator，统一资源定位器，它是一种具体的URI，即URL可以用来标识一个资源，而且还指明了如何locate这个资源。

而URN，uniform resource name，统一资源命名，是通过名字来标识资源，比如mailto:java-net@java.sun.com。

也就是说，URI是以一种抽象的，高层次概念定义统一资源标识，而URL和URN则是具体的资源标识的方式。

URL和URN都是一种URI。

网页结构分几种：

框结构，层次结构

每一个框结构包含一个HTML文档

video会创建一个div，不同渲染引擎，分层策略不一样。（第七章分层策略）

浏览器主要作用：

用户输入的URL转化成可视化的图像。

网页当前可视区域，成为视图（viewport）

渲染的三个阶段：

从数据流向，可讲渲染分为三个阶段：

• URL到构建DOM树
• DOM树到构建完webkit绘图上下文
• 绘图上下文 -> 最终图像

第一阶段：

网页加载和渲染过程会发出DOMContent事件和onload事件，分别在DOM树构建完之后，以及DOM树建完并且网页所以来资源都加载完你之后发生。这两个事件不是同时发生的。

onload和DOMContentLoaded

当 onload 事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了。

当 DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash。

DOMContentLoaded相当于jQuery的$(document).ready

问题：

• 加载样式表会阻塞外链脚本的执行
• 各大javascript框架式如何实现自己的dom ready事件的？

第二阶段：

WebKit利用CSS和DOM树构建RenderObject树直到绘图上下文。

整个过程中DOM树一直存在，只有网页被销毁DOM树才会消失。

第三阶段：

桥接（Bridging），是指依据OSI网络模型的链路层的地址，对网络数据包进行转发的过程，工作在OSI的第二层。一般的交换机，网桥就有桥接作用。

图形处理器（Graphics Processing Unit，缩写：GPU）

webkit渲染过程：

左边蓝线是DOMContentLoad触发，红线是onload触发。

总结：

什么是RenderObject树？

什么是RenderLayer树

不过浏览器渲染引擎并不是直接使用 Render 树进行绘制，为了方便处理 Positioning（定位），Clipping（裁剪），Overflow-scroll（页內滚动），CSS Transform/Opacity/Animation/Filter，Mask or Reflection，Z-indexing（Z排序）等，浏览器需要生成另外一棵树 – Layer 树。

浏览器渲染引擎遍历 Layer 树，访问每一个 RenderLayer，再遍历从属于这个 RenderLayer 的 RenderObject，将每一个 RenderObject 绘制出来。

读者可以认为，Layer 树决定了网页绘制的层次顺序，而从属于 RenderLayer 的 RenderObject 决定了这个 Layer 的内容，所有的 RenderLayer 和 RenderObject 一起就决定了网页在屏幕上最终呈现出来的内容。