WebKit/EFL · Embedded Software Lab. @ SKKU 28!3 • WebKit – 于渲染页的布局引擎 • 使于 Tizen的WebKit – Web 浏览器 – Web 应 WebKit in Tizen v2.3

Embedded Software Lab. @ SKKU

28

!1

WebKit/EFL


28

!2

• WebKit • Parsing • Layout and Painting • WebKit and EFL

内容


28

!3

• WebKit – ⽤用于渲染⽹网页的布局引擎

• 使⽤用于Tizen的WebKit – Web 浏览器

– Web 应⽤用

WebKit in Tizen v2.3

V8


28

!4

• ⽤用户接⼜⼝口– 包括地址栏，向后/向前按钮等

• 浏览器引擎– 在⽤用户界⾯面和渲染引擎之间的操作

• 渲染引擎– 显⽰示所需内容

– WebKit 是⼀一个渲染引擎

Web 浏览器架构


28

!5WebKit引擎流

1. 资源加载和解析2. 制作渲染数

3. 渲染


28

!6

解析


28

!7

• HTML and CSS ⽂文件被WebKit加载和解析• HTML/CSS → DOM Tree/Style Rules →渲染树

解析

1. 资源加载和解析


28

!8

• 处理HTML解析分为两步 – 标记化

• HTML⽂文件被分成HTML标记

• HTML标记：开始标签，标签，属性名和属性值

– 树结构 • 基于HTML标记构造DOM树

• HTML⽂文档和HTML元素接⼜⼝口的对象呈现像 JavaScript⼀一样呈现给外部

HTML解析器

script tags containing "document.write" can add extra tokens


28

!9HTML 解析器:例⼦子

1.标记化

2. 树结构

HTML 标记

DOM Tree


28

!10

• 在HTML⽹网页中绝对不对有“⽆无效语法”错误• WebKit 修复所有的⽆无效内容• 例如:

– “mytag” 不是标准的标签

– 错误的“p” and “div” 元素的嵌套

– ⼤大量的解释器代码正在修复HTML作者的错误

HTML 解析器: 容错


28

!11

• CSS 是⼀一个上下⽂文⽆无关的语法规则 • CSS grammar进⾏行简单解析

CSS 解析器

CSS syntax grammar


28

!12

• 渲染树– ⽂文档的可视化表⽰示

– 由渲染对象（渲染器）组成

– WebKit layouts and renders each objects in the tree在树中每⼀一个对象（WbrKit布局和渲染器）

• 渲染树建⽴立– 当DOM树在建⽴立时，渲染树也同时在建⽴立

– DOM元素的样式表规则⽤用于构建渲染树。

渲染树

class RenderObject{ virtual void layout(); virtual void paint(PaintInfo); virtual void rect repaintRect(); Node* node; //the DOM node RenderStyle* style; // the computed style RenderLayer* containgLayer; //the containing z-index layer}


28

!13

• 只有视觉的DOM元素会被插⼊入渲染对象

• ⾮非视觉的DOM元素将不会被插在渲染树如头元素 – 如头元素

• 在Webkit中将是“RenderView” 对象

DOM树和渲染树

DOM Tree Render Tree


28

!14

布局与绘画


28

!15

• 计算位置和尺⼨寸– 渲染器没有位置和⼤大⼩小

– 所有的渲染器都有布局或回流法。

– 每个布局或回流法calls child’s one（调⽤用⼦子布局或回流法）.

布局

Viewport

Scroll

Block

Block Block

Text Text


28

!16

• HTML : 基于流的布局模式 – 布局沿着⼀一条从左到右，⾃自上⽽而下路径除了表的布局，等等。

– (0, 0) : 根渲染器(RenderObject)

– 区域: 浏览器窗⼜⼝口可见部分

– ⼀一般来说，布局会从根渲染器被重复

布局

Viewport

Scroll

Block

Block Block

Text Text

X-axis(0,0)

Y-axis


28

!17

1. ⽗父渲染器决定它⾃自⼰己的宽度2. Parent goes over children and:⽗父调⽤用⼦子渲染器

1. Place the child Renderer (sets its x and y)Place⼦子渲染器（设定它的x和y）

2. 调⽤用⼦子布局（如果需要）-它会计算⼦子的⾼高度

3. ⽗父使⽤用⼦子累计⾼高度和margins 、 paddings⾼高度来设置它⾃自⼰己的⾼高度

4. 将⾃自⼰己的dirty位设为false

布局:布局流程


28

!18

• 通过下⾯面两点计算渲染器的宽度: – 容器块的宽度

• 渲染器的指定宽度属性

– 渲染器的borders, margins and paddings

布局:宽度计算


28

!19

• 创建新的渲染器at line breaking

布局: Line Breaking

<html><p style="background-color:yellow; width:450px">1398년 조선이 유교 건국이념에 따라 숭교방(崇敎坊)에 설립한 국립최고학부 성균관(成均館)의 전통을 계승하였다. 그 후 1895년 고종의 칙령에 따라 성균관에 3년제 경학과(經學科)를 설치하였으며, 이 경학과는 성균관의 고전적 대학에서 근대적 대학으로의 변혁을 상징한다.</p></html>

Renderer 2Renderer 1


28

!20

• 调⽤用的绘制⽅方法遍历渲染树• 所有的渲染器都有绘制⽅方法• 绘画使⽤用的界⾯面基础设施组件

绘制


28

!21

• CSS2规范化(Cascading Style Sheet 2; May 1998)

1.背景⾊色2.背景图⽚片3.边框4.Children5.轮廓

绘制:绘制的顺序


28

!22

• WebKit 矩形存储– 将已经存在的矩形存到bitmaps

– 只有不同的地⽅方需要重新绘制

绘制:优化

Viewport

Scroll

Block

Block Block

Text Text


28

!23

• 浏览器试着对动态的变化做尽可能的最⼩小可能的⾏行动。

动态变化中的布局与绘画

<html> <button onclick="myFunction()">Click it</button> <br /> <img id="image" src="smiley.gif"> <script> function myFunction() { document.getElementById("image").src="landscape.jpg";} </script></html>


28

!24

Webkit and EFL


28

!25

• 基于浏览器和WRT的 Webkit2• ⾃自 2.0版本, WebKit2 使⽤用tizen

• 为了没有blockingAPI的⽹网络内容和⽤用户界⾯面的分裂过程模型 • ⽹网络内容和⽤用户界⾯面的分裂过程模型UI的响应性，健壮性，安全性，和更好的利⽤用多核CPU

WebKit1 vs WebKit2

Source: Tizen Overview & Architecture, Alvin Kim, SOSCON 2013


28

!26

• 关于EFL (Enlightenment Foundation Libraries)– ⼀一个图形库的集合

– 为建⽴立基于应⽤用的丰富客户的接⼜⼝口提供易使⽤用的资源

• 关于移植– WebKit/EFL是⼀一个针对将WebKit移植到Enlightenment Foundation Libraries的项⽬目

– 移植与GTK+one分享代码，它也使⽤用Cairo渲染和为HTTP⽹网络的libsoup – http://trac.webkit.org/wiki/EFLWebKit

WebKit的EFL 移植


28

!27

• WebKit2/EFL基于浏览器的架构

Source: Ming Jin , WebKit/EFL & WebKit2/EFL. Tizen Developer Conference 2012.

WebKit2/EFL

SFX (SquirrelFishExtreme) - native code JIT


28

!28

• 跨流程作业分配– 在Uiprocess中敏感的触碰响应

– 在Uiprocess中频繁显⽰示更新 • (1)-(5) 和 (6)两步流⽔水线

WebKit2/EFL

Source: Ming Jin , WebKit/EFL & WebKit2/EFL. Tizen Developer Conference 2012.

Documents

WebKit/EFL · Embedded Software Lab. @ SKKU 28!3 • WebKit – 于渲染页的布局引擎 • 使于 Tizen的WebKit – Web 浏览器 – Web 应 WebKit in Tizen v2.3