WebKit/EFL · Embedded Software Lab. @ SKKU 28!3 • WebKit – 于渲染页的布局引擎 •...
Transcript of WebKit/EFL · Embedded Software Lab. @ SKKU 28!3 • WebKit – 于渲染页的布局引擎 •...
Embedded Software Lab. @ SKKU
28
!3
• WebKit – ⽤用于渲染⽹网页的布局引擎
• 使⽤用于Tizen的WebKit – Web 浏览器
– Web 应⽤用
WebKit in Tizen v2.3
V8
Embedded Software Lab. @ SKKU
28
!4
• ⽤用户接⼜⼝口– 包括地址栏,向后/向前按钮 等
• 浏览器引擎– 在⽤用户界⾯面和渲染引擎之间的操作
• 渲染引擎– 显⽰示所需内容
– WebKit 是⼀一个渲染引擎
Web 浏览器架构
Embedded Software Lab. @ SKKU
28
!7
• HTML and CSS ⽂文件被WebKit加载和解析• HTML/CSS → DOM Tree/Style Rules →渲染树
解析
1. 资源加载和解析
Embedded Software Lab. @ SKKU
28
!8
• 处理HTML解析分为两步 – 标记化
• HTML⽂文件被分成HTML标记
• HTML标记:开始标签,标签,属性名和属性值
– 树结构 • 基于HTML标记构造DOM树
• HTML⽂文档和HTML元素接⼜⼝口的对象呈现像 JavaScript⼀一样呈现给外部
HTML解析器
script tags containing "document.write" can add extra tokens
Embedded Software Lab. @ SKKU
28
!10
• 在HTML⽹网页中绝对不对有“⽆无效语法”错误• WebKit 修复所有的⽆无效内容• 例如:
– “mytag” 不是标准的标签
– 错误的“p” and “div” 元素的嵌套
– ⼤大量的解释器代码正在修复HTML作者的错误
HTML 解析器: 容错
Embedded Software Lab. @ SKKU
28
!11
• CSS 是⼀一个上下⽂文⽆无关的语法规则 • CSS grammar进⾏行简单解析
CSS 解析器
CSS syntax grammar
Embedded Software Lab. @ SKKU
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}
Embedded Software Lab. @ SKKU
28
!13
• 只有视觉的DOM元素会被插⼊入渲染对象
• ⾮非视觉的DOM元素将不会被插在渲染树如头元素 – 如头元素
• 在Webkit中将是“RenderView” 对象
DOM树和渲染树
DOM Tree Render Tree
Embedded Software Lab. @ SKKU
28
!15
• 计算位置和尺⼨寸– 渲染器没有位置和⼤大⼩小
– 所有的渲染器都有布局或回流法。
– 每个布局或回流法calls child’s one(调⽤用⼦子布局或回流法).
布局
Viewport
Scroll
Block
Block Block
Text Text
Embedded Software Lab. @ SKKU
28
!16
• HTML : 基于流的布局模式 – 布局沿着⼀一条从左到右,⾃自上⽽而下路径除了表的布局,等等。
– (0, 0) : 根渲染器(RenderObject)
– 区域: 浏览器窗⼜⼝口可见部分
– ⼀一般来说,布局会从根渲染器被重复
布局
Viewport
Scroll
Block
Block Block
Text Text
X-axis(0,0)
Y-axis
Embedded Software Lab. @ SKKU
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
布局:布局流程
Embedded Software Lab. @ SKKU
28
!18
• 通过下⾯面两点计算渲染器的宽度: – 容器块的宽度
• 渲染器的指定宽度属性
– 渲染器的borders, margins and paddings
布局:宽度计算
Embedded Software Lab. @ SKKU
28
!19
• 创建新的渲染器at line breaking
布局: Line Breaking
<html><p style="background-color:yellow; width:450px">1398년 조선이 유교 건국이념에 따라 숭교방(崇敎坊)에 설립한 국립최고학부 성균관(成均館)의 전통을 계승하였다. 그 후 1895년 고종의 칙령에 따라 성균관에 3년제 경학과(經學科)를 설치하였으며, 이 경학과는 성균관의 고전적 대학에서 근대적 대학으로의 변혁을 상징한다.</p></html>
Renderer 2Renderer 1
Embedded Software Lab. @ SKKU
28
!21
• CSS2规范化(Cascading Style Sheet 2; May 1998)
1.背景⾊色2.背景图⽚片3.边框4.Children5.轮廓
绘制:绘制的顺序
Embedded Software Lab. @ SKKU
28
!22
• WebKit 矩形存储– 将已经存在的矩形存到bitmaps
– 只有不同的地⽅方需要重新绘制
绘制:优化
Viewport
Scroll
Block
Block Block
Text Text
Embedded Software Lab. @ SKKU
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>
Embedded Software Lab. @ SKKU
28
!25
• 基于浏览器和WRT的 Webkit2• ⾃自 2.0版本, WebKit2 使⽤用tizen
• 为了没有blockingAPI的⽹网络内容和⽤用户界⾯面的分裂过程模型 • ⽹网络内容和⽤用户界⾯面的分裂过程模型UI的响应性,健壮性,安全性,和更好的利⽤用多核CPU
WebKit1 vs WebKit2
Source: Tizen Overview & Architecture, Alvin Kim, SOSCON 2013
Embedded Software Lab. @ SKKU
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 移植
Embedded Software Lab. @ SKKU
28
!27
• WebKit2/EFL基于浏览器的架构
Source: Ming Jin , WebKit/EFL & WebKit2/EFL. Tizen Developer Conference 2012.
WebKit2/EFL
SFX (SquirrelFishExtreme) - native code JIT