开发者应当了解的WebKit知识
开发者应当了解的WebKit知识
对一些开发者而言,WebKit就是一个黑盒子。丢进去HTML、CSS、JS等一连串的东西,而WebKit就能变魔术一般显示出一个很棒的网页出来。实际上,正我的同事IlyaGroriks提到的:
WebKit不但是白盒,而且是一个开放的白盒。
让我们花点时间来理解以下这些问题:
什么是WebKit?
什么不是WebKit?
浏览器是如何使用WebKit的?
为什么WebKit分支各不相同?
最近连Opera都转到WebKit平台上。下面的内容可以让你能够识别浏览器间的差异,去到合适的tracker上报Bug, 同时可以了解如何更有效的在各个浏览器上开发。
标准的浏览器组件
以下是现代浏览器的一些组件:
· 解析(Parsing) (HTML, XML, CSS, JavaScript)
· 排版(Layout)
· 渲染(Text and graphics rendering)
· 图片解码(Image decoding)
· 图形加速(GPU interaction)
· 网络访问(Network access)
· 硬件加速(Hardware acceleration)
只有前两项是被所有WebKit浏览器所共享的。其它的部分由不同的WebKit ports来实现。什么意思?
WebKit的移植版本(Ports)
现在有很多WebKit的移植版本,先看一下WebKit hacker(也是Sencha的Director)Ariya
Hidayat的解释:
WebKit最为公认的参考是Apple自己运行在Mac OS X上的分支,也是最初和原装的WebKit库。在Mac
OS X上不,围绕着CoreFundation等不同的原生系统库实现出了不同的接口。比如让WebKit之所以知道如何绘制出一个带有圆角的flat
button,其实最终是由CoreGraphics负责的。
在Mac移值版本上使用的是CoreGraphics(CG),Mac上的Chrome则使用的是Skia。
WebKit不断地被移植到不同的平台上,包括桌面版本和Mobile版本,它们通常被称为一从此WebKit
port。Apple自己也基于CoreFoundation库的Windows版本移植了一份Windows版本的WebKit。
…不过Windows版的Safari已经死去.
除此之外,还有许多其它的ports (完整列表)。Google创建并维护着Chromium
port。还有基于Gtk+的WebKitGtk。Nokia
(实际上是Trolltech)维护着Qt port,就是知名的QtWebKitmodule.
WebKit ports介绍
· Safari
o Safari的OS X版本和Windows版本是两个不同的移植版本。
o WebKitnightly是基于Safari的Mac
OS版本的。稍后详述……
· Mobile Safari
o 是专属维护的分支,但随后就成了主流版本。
o Chrome on iOS(使用的是Apple提供的
WebView,随后会说明它们的不同部分)
· Chrome (Chromium)
o Chrome onAndroid (直接使用Chromiumport)
o Yandex Browser, 360
Browser, Sogou Browser使用Chromium,还有Opera.
· Android Browser
o 紧跟WebKit的最新版本。
· 更多的移值版本: Amazon Silk, Dolphin, Blackberry, QtWebKit,WebKitGTK+, EFL port (Tizen),
wxWebKit, WebKitWinCE等。
不同port的关注不同。Mac port关于于将浏览器从系统中分离,引入Obj-C和C++的绑定(binding)以方便在应用中使用WebKit渲染引擎。Chromium则纯粹关注于浏览器。QtWebKit则为其跨平台应用提供运行时或渲染引擎。
WebKit浏览器的共性
所有WebKit ports的共性包括以下部分。(这段作者写了多次,每次都有Chrome工程加以纠正,各项后面的斜体部分。)
1. WebKit用相同的方式解析HTML。目前只有Chromium支持了多线程的HTML解析(threaded
HTMLparsing) .
2. 使用相同的方式构建DOM Tree. 实际上只有Chromium支持Shadow
DOM。
3. WebKit都会创建一个window 对象和document 对象。 不过可用的属性和建构函数可以通过功能选项来控制。
4. CSS解析。尽管如此,还是应当让你的CSS遵循CSSOM标准。
Chrome接受-webkit-前缀,相对的Apple和其它ports则接受-khtml-或 –apple-前缀.
5. 排版(Layout)和定位(positioning)。 WebKit包括了Sub-pixel排版和对比排版(saturated
layout) 算法但每个port的实现是不同的。
6. 基础是相同的。
就像Flickr和Github透过flags来指定实现的功能,WebKit允许通过指定编译期功能选项(WebKit’scompile-time
Feature Flags)来启用和禁用一系列的功能。还有运行时标志来管理一些功能,通过命令行(command lineswitches (Chromium’s
here) 或配置的方式(如about:flags)指定。
WebKit port共性列表
· DOM, window, document
· CSSOM
· CSS解析, property/value处理
o sans vendorprefix handling
· HTML parsing and DOM construction
o same if wesuspended belief in Web Components
· 排版与定位
o Flexbox,Floats, block formatting contexts… all shared
· Chrome开发工具,也称为WebKit
Inspector.
o 去年四月开始,Safari开始使用自己的Safari Inspector.
· 部分功能,如Content Editable, Push State, File API,大部分SVG
API, CSS Transform math, Web Audio API, Local Storage
o 后台(backend)并不相同.比如不同的port会为local
storage和Web Audio API使用不同的实现方法。
WebKit ports不同的部分
· GPU的运用
o 3D Transforms
o WebGL
o Video解码(decoding)
· 2D绘制
o Anti-aliasing方法
o SVG & CSS梯度渲染(gradientrendering)
· 文本渲染和断字处理(rendering & hyphenation)
· Network stack (SPDY,预读(pre-rendering), WebSocket transport)
· JavaScript引擎
o WebKit中的JSC(也支持V8),以及Chrome中的V8。
· 表格(forms)的渲染
· 音频和视频元素的行为 (包括codec的支持)
· 图片解码(Image decoding)
· 导航(Navigating back/forward)
o pushState()的导航部分
· SSL特性(Strict Transport Security和Public
Key Pins)
下图是2D graphics 在不同port中的依赖关系,几乎是各自使用了完全不同的库来实现绘制操作:
举一个更细节的例子,一个刚被引入的特性CSS.supports()只有win和wincairo两个移植版本没有支持,因为它们并没有启用css3特性。
简单地说共享的组件就是WebCore。它其实就是通常意义上大家所说的WebKit,一个排版、渲染引擎,同时是HTML和SVG解析库。而WebKit是WebCore与ports之间的绑定层(bindinglayer),平时的交流并不太在意它。
如下图所示:
WebKit中的许多元件是可以替换的 (上图中的灰色部分)。
比如WebKit的默认JavaScript引擎JSC(JavaScriptCore,当由KHTML开始创建WebKit的同时基于KDE的KJS实现而来),在Chromium
port由V8替换,并用独特的DOM bindings。(关于DOM
Binding可以参考这里。)
字体和文字的渲染也严重依赖于平台。WebKit中有两种不同Text Path: Fast and Complex。每一项都需要平台(port-side)支持。Fast只需要知道如何贴上位图轮廓(blit
glyphs)就可以了,WebKit会为平台准备数据。而Complex则完全依赖于平台去处理,它仅仅请求:”请画出这个”。
“WebKit就像一个三明治,而 Chromium更像一个墨西哥玉米卷(taco)。” Dimitri
Glazkov, ChromeWebKit hacker. Web Components和Shadow DOM的拥护者。
(为什么是taco,看这里就可以了.)
下表中列出了5个WebKit port的块图,了解一下它们之间的异同。
- |
Chrome (OS X) |
Safari (OS X) |
QtWebKit |
Android Browser |
Chrome for iOS |
Rendering |
Skia |
CoreGraphics |
QtGui |
Android stack/Skia |
CoreGraphics |
Networking |
Chromium network stack |
CFNetwork |
QtNetwork |
Fork of Chromium’s network stack |
Chromium stack |
Fonts |
CoreText via Skia |
CoreText |
Qt internals |
Android stack |
CoreText |
JavaScript |
V8 |
JavaScriptCore |
JSC (V8 is used elsewhere in Qt) |
V8 |
JavaScriptCore (without JITting) * |
*
注意iOS上的Chrome使用的是系统控件UIWebView,因此它只能使用和Mobile
Safari一样的渲染引擎(rendering layers),以及JavaScriptCore和单进程模型(single-process
model)。当然 Chromium还是有它的应用的, 诸如网络层(network
layer),同步和书签的基础组件(sync and bookmarks infrastructure), Omnibox,metrics及崩溃报告(crashreporting).
(之所值得这样做,是因为 JavaScript很少会成为移动端的瓶颈,而带有JIT的编译器的影响也会很小。)
WebKit浏览器间差异之大,何去何从?
大可不必!WebKit中提供了LayoutTest提供了大量的测试用例(28,000),不但针对已存在的功能,还包括回归测试。事实上,无论你何时发现了一些新奇的DOM/CSS/HTML5特性,LayoutTest通常已经提供了一个简化版的演示。(参考:深入分析LayoutTest)
另外W3C也正增加其在页面一致性测试上的投入。这表示不同的WebKit
ports和所有浏览器会针对相同的页面进行测试,将带来更少的私有特性(quirks)和更多可以共同操作的页面。
Opera将如何转换?
Robert Nyman和Rob Hawkes都分析过了,但值得注意的是Opera会采用Chromium。这表示WebGL,
Canvas, HTML5 forms, 2D graphics等实现会和Chrome一样。相同的APIst和相同的后台(backends)实现。所以Opera是Chromium-based,
Opera与Chrome会保持同步兼容。
并且所有Opera浏览器都会采用Chromium,甚至包括Opera
Mini,会将原本Presto实现的在服务器端的渲染方式放弃,转而使用Chromium提供的渲染功能。
什么是WebKit Nightly?
它是WebKit的Mac Port,和Safari内部运行的版本是一致的(除了一小部分的基础库会被替换掉)。所以它的行为和功能是和Safari一致的。你也可以这样理解WebKit
Nightly就是Safari,而Chromium就是Chrome。
Chrome Canary 也会与WebKit保持像是一天内的代码同步。
扩展阅读:
· WebKitinternals technical articles | webkit.org
· WebKit: AnObjective View | Robert Nyman & Rob Hawkes
· Your webkitport is special (just like
every other port) | Ariya Hidayat
· GettingStarted With the WebKit Layout Code
| Adobe Web Platform Blog
· WebKitDocumentation Overview | Arun Patole
· Rendering inWebKit, by Eric Seidel | YouTube
· Webperformance for the curious | Ilya Grigorik
开发者应当了解的WebKit知识的更多相关文章
- [转]开发者需要了解的WebKit(mark)
以下内容转自:http://www.infoq.com/cn/articles/webkit-for-developers -------------------------------------- ...
- 开发者需要了解的WebKit
2013-3-22 22:37| 发布者: sxwgf| 查看: 575| 评论: 0|来自: infoq 摘要: Paul Irish是著名的前端开发工程师,同时他也是Chrome开发者关系团队成员 ...
- Android 开发者文档 -- 应用基础知识
https://developer.android.com/guide/components/fundamentals 应用基础知识 Android 应用采用 Java 编程语言编写.Android ...
- Salesforce开发者学习笔记之一:基本知识
本文介绍了Salesforce开发平台的基本知识, 包括如下内容: Salesforce平台介绍 Salesforce基本术语 定制和扩展Salesforce平台 创建一个简单的应用程序 Salesf ...
- 每一个JavaScript开发者应该了解的浮点知识
在JavaScript开发者的开发生涯中的某些点,总会遇到奇怪的BUG——看似基础的数学问题,但却又觉得有些不对劲.总有一天,你会被告知JavaScript中的数字实际上是浮点数.试图了解浮点数和为什 ...
- Vue开发者必会的基础知识盘点
你会Vue吗,你看以下知识点你掌握了多少?实际工作中是否运用的得心应手?如果是,那么恭喜你! Vue中的数据和DOM已经被关联起来,所有的东西都是响应式的.注意我们不再和HTML直接交互.一个Vue应 ...
- 谈谈iOS9中的WebKit 与 Safari
每个用过 UIWebView 的iOS开发者对其诸多的限制和有限的功能也深有感触.悻然,自iOS8推出 WebKit 框架后将改变这一窘境.在本文我将会深入WebKit来体验一下它给我们带来的好处,同 ...
- Swift给每个开发者赢取500万的机会!不看一生后悔。
[导语] Swift的横空出世,很多有想法的人已经发现其中的蕴含的巨大商机,而很多新手却只是云里雾里,只知道大家最近讨论Swift很欢乐.内行看门道,外行看热闹,说的就是这个理.如果你能把swift用 ...
- 如何使用iOS开发者授权以及如何申请证书
如何使用iOS开发者授权以及如何申请证书 在邮件里有一个Login按钮,点击后可以进入Apple Developer会员中心.点击图中的iOS Provisioning Portal,进入开发者授权设 ...
随机推荐
- Android面试,IntentService的原理及使用
在Android开发中,我们或许会碰到这么一种业务需求,一项任务分成几个子任务,子任务按顺序先后执行,子任务全部执行完后,这项任务才算成功.那么,利用几个子线程顺序执行是可以达到这个目的的,但是每个线 ...
- js函数中变量的作用域
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- linux定时任务2-at命令
定时执行命令: [root@rheltest1 ~]# at now + 1 minute //一分钟后执行下面的任务 at> date >> /tmp/test_date.log ...
- nginx 3.nginx+fastcgi
死磕nginx 3.nginx+fastcgi 互联网服务器有个非常典型的架构lamp(linux+apache+mysql+php),由于其开源和强大的兼容性而风靡一时,不过随着nginx的横空出世 ...
- mongodb地理空间计算逻辑
"1/地球半径"是怎么得出的 参考文档如下: http://janmatuschek.de/LatitudeLongitudeBoundingCoordinates http:// ...
- URI、URL、URN
URI.URL.URN URI(Uniform Resource Identifie):统一资源标识符 URL(Uniform Resource Locator):统一资源定位符 URN(Unifor ...
- mdf导入sqlServer
导入mdf有两种方法: (需要mdf和ldf两个文件) 1. 在SQL企业管理器中,选择左边树型列表,根节点即"数据库"的文件夹图标,右键"所有任务"→ ...
- DeviceToken 获取失败,原因:Error Domain=NSCocoaErrorDomain Code=3000 "未找到应用程序的“aps-environment”的授权字符串"...
apns -> 注册推送功能时发生错误, 错误信息: Error Domain=NSCocoaErrorDomain Code=3000 "未找到应用程序的“aps-environme ...
- 如何实现一个通用的IHttpHandler 万能的IHttpHandler HttpWebRequest文件上传
昨天遇到一个比较奇怪的需求,大致是需要在服务器上部署一个http服务,但是服务的具体功能不知道,以后在客服端实现.这里介绍一下系统背景,有一个系统运(部署在美国)行了很多年了,给系统产生了很多文件,现 ...
- Mysql中的DQL查询语句
----------------1.查询所有列 --查询 学生 表所有记录(行) select *from 学生 --带条件的查询 select *from 学生 where 年龄>19 --- ...