开发者需要了解的WebKit
2013-3-22 22:37| 发布者: sxwgf| 查看: 575| 评论: 0|来自: infoq
摘要: Paul Irish是著名的前端开发工程师,同时他也是Chrome开发者关系团队成员,jQuery团队成员,Modernizr、 Yeoman、CSS3 Please和HTML5 Boilerplate的lead developer。针对大家对WebKit的种种误解,他在自己的博客发表 ...
Paul Irish是著名的前端开发工程师,同时他也是Chrome开发者关系团队成员,jQuery团队成员,Modernizr、 Yeoman、CSS3 Please和HTML5 Boilerplate的lead developer。针对大家对WebKit的种种误解,他在自己的博客发表了《WebKit for Developers》一文,试图为大家解惑。 对许多开发者来说,WebKit就像一个黑盒。我们把HTML、CSS、JS和其他一大堆东西丢进去,然后WebKit魔法般的以某种方式把一个看起来不错的网页展现给我们。但事实上,Paul的同事Ilya Grigorik说:
所以让我们来花些时间了解这些事儿:
现在,特别是Opera宣布将浏览器引擎转换为WebKit之后,我们有很多使用WebKit的浏览器,但是我们很难去界定它们有哪些相同与不同。下面我争取为这个谜团做些解读。而你也将会更懂得判断浏览器的不同,了解如何在正确的地方报告bug,还会了解如何在特定浏览器下高效开发。 标准Web浏览器组件 让我们列举一些现代浏览器的组件:
这里面哪些是WebKit浏览器共享的?差不多只有前两个。其他部分每个WebKit都有各自的实现,所谓的“port”。现在让我们了解一下这是什么意思…… WebKit Ports是什么? 在WebKit中有不同的“port”,但是这里允许我来让WebKit hacker,Sencha的工程主管Ariya Hidayat来解释:
上面已经提到,CoreGraphics只是Mac port的实现。不过Mac Chrome用的是Skia。
……不过Windows版本的Safari现在已经死掉了。
让我们看看其中一些WebKit ports:
不同的port专注于不同的领域。Mac的port注意力集中在浏览器和操作系统的分割上,允许把ObjectC和C++绑定并嵌入原生应用的渲染。Chromium专注在浏览器上。QtWebKit的port在他的跨平台GUI应用架构上给apps提供运行时环境或者渲染引擎。 WebKit浏览器共享了那些东西? 首先,让我们来看看这些WebKit ports的共同之处: (作者注:很有意思,这些内容我写了很多次,每次Chrome团队成员都给我纠正错误,正如你看到的……)
所以,情况很复杂。 就像Flickr和GitHub通过flag标识来实现自己的功能一样,WebKit也有相同处理。这允许各个port自行决定是否启用WebKit编译特性标签的各种功能。通过命令行开关,或者通过about:flags还可以控制是否通过运行时标识来展示功能特性。 好,现在让我们再尝试一次搞清楚WebKit究竟有哪些相同… 每个WebKit port有哪些共同之处
这些领域现在有点儿模糊,让我们尝试把事情弄得更清楚一点。 什么是WebKit port们并没有共享的:
让我们谈谈其中的2D图像部分: 根据port的不同,我们使用完全不同的库来处理图像到屏幕的绘制过程: 更宏观一点来看,一个最近刚添加的功能:CSS.supports()在除了没有css3特性检测功能的win和wincairo这两个port之外,在其它所有port中都可用。 现在到了卖弄学问的技术时间。上面讲的内容其实并不正确。事实上那是WebCore被共享的东西。而WebCore其实是当大家讨论HTML和SVG的布局、渲染和DOM处理时提到的WebKit。技术上讲,WebKit是WebCore和各种ports之间的绑定层,尽管通常来说这个差别并不那么重要。 一个图表应该可以帮助大家理解: WebKit中的许多组件都是可以更换的(图中标灰色的部分)。 举个例子来说,Webkit的JavaScript引擎,JavaScriptCore,是WebKit的默认组件。(它最初是当WebKit从KHTML分支时从KJS演变来的)。同时,Chromium port用V8引擎做了替换,还使用了独特的DOM绑定来映射上面的组件。 字体和文字渲染是平台上的重要部分。在WebKit中有两个独立的文字路径:Fast和Complex。这两者都需要平台特性的支持,但是Fast只需要知道如何传输字型,而Complex实际上需要掌握平台上所有的字符串,并说“请绘制这个吧”。
现在,让我们放宽镜头看看一些port和一些子系统。下面是WebKit的5个port;尽管它们共享了WebCore的大部分,但考虑一下它们的stack有哪些不同。
*iOS Chrome注:你可能知道它使用 UIWebView。由于UIWebView的能力限制。它只能使用移动版Safari的渲染层,JavaScriptCore(而不是V8)和单进程模式。然而,大量的Chromium 代码还是起到了调节作用 ,比如网络层、同步、书签架构、地址栏、度量工具和崩溃报告。(同时,由于JavaScript很少成为移动端的瓶颈,缺少JIT编译器只有很小的影响。) 好吧,那么我们该怎么办? 现在所有WebKit完全不同了,我好怕。 别这样!WebKit的layoutTests覆盖面非常广(据最新统计,有28,000个layoutTests),这些test不仅针对已存在的特性,而且针对任何发现的回归。实际上,每当你探索一些新的或难懂的DOM/CSS/HTML5特性时,在整个web平台上,layoutTests经常已经有了一些奇妙的小demo。 另外,W3C正在努力研究一致性测试套件。这意味着我们可以期待使用同一个测试套件来测试不同的WebKit port和浏览器,以此来获得更少的怪异模式,和一个带来更少的怪癖模式和更具互操作性的web。对所有参加过Test The Web Forward活动的人们……致谢! Opera刚刚迁移到了WebKit了。会怎样? Robert Nyman和 Rob Hawkes也谈到了这个 ,但是我会再补充一些:Opera在公告中明显指出Opera将采用Chromium。这意味着WebGL,Canvas,HTML5 表单,2D图像实现——Chrome和Opera将在所有这些功能上保持一致。API和后端实现也会完全相同。由于Opera是基于 Chromium,你可以有足够的信心去相信你的尖端工作将会在Chrome和Opera上获得兼容。 我还应该指出,所有的Opera浏览器都将采用Chromium:包括他的Windows,Mac、Linux版本,和Opera Mobile(完全成熟的移动浏览器)。甚至Opera Mini都将使用基于Chromium的服务器渲染集群来替换当前的基于Presto的服务器端渲染。 ……那WebKit Nightly是什么? 它是WebKit的mac port ,和Safari运行的二进制文件一样(尽管会替换一些底层库)。因为苹果在项目中起主导地位,所以它的表现和功能与Safari的总是那么一致。在很多情况下,当其它port可能会试验新功能的时候,Apple却显得相对保守。不管怎样,如果你想我用中学一样的类比,想想这个好了:WebKit Nightly对于Safari就像Chromium对于Chrome。 同样的,Chrome Canary 有着最新的WebKit资源。 |
开发者需要了解的WebKit的更多相关文章
- 开发者应当了解的WebKit知识
开发者应当了解的WebKit知识 对一些开发者而言,WebKit就是一个黑盒子.丢进去HTML.CSS.JS等一连串的东西,而WebKit就能变魔术一般显示出一个很棒的网页出来.实际上,正我的同事Il ...
- [转]开发者需要了解的WebKit(mark)
以下内容转自:http://www.infoq.com/cn/articles/webkit-for-developers -------------------------------------- ...
- 谈谈iOS9中的WebKit 与 Safari
每个用过 UIWebView 的iOS开发者对其诸多的限制和有限的功能也深有感触.悻然,自iOS8推出 WebKit 框架后将改变这一窘境.在本文我将会深入WebKit来体验一下它给我们带来的好处,同 ...
- 历史在重演:从KHTML到WebKit,再到Blink
http://36kr.com/p/202396.html 上周四,Google宣布从WebKit 分支出自己的浏览器渲染引擎 Blink.很多人觉得这像是晴天霹雳,或者甚至是迟到的愚人节笑话,但是其 ...
- WebKit HTML、CSS、JS
开发者需要了解的WebKit https://www.infoq.cn/article/webkit-for-developers 开发者需要了解的 WebKit 彭超 2013 年 3 月 18 ...
- 移动端开发概览【webview和touch事件】
作为一个前端,而且作为一个做移动端开发的前端,那意味着你要有三头六臂,跟iOS开发哥哥一起打酱油,跟Android开发哥哥一起修bug... Android vs Ios 我在webkit内核的chr ...
- 关于Google Chrome的使用小技巧!
1 1 http://www.runoob.com/w3cnote/chrome-skip.html Chrome是Google公司开发的一个现代化的网页浏览器,作为三大浏览器之一 它搭载了被称为V8 ...
- 基于Chrome内核(WebKit.net)定制开发DoNet浏览器
1. 源起 a) 定制.Net浏览器 本人是一名C#开发者,而作为C#开发者,做客户端应用中最头痛的一件事就是没有一个好的UI解决方案, WinFrom嘛,效率虽然还不错,但是做一些特殊 ...
- WebKit技术内幕
WebKit技术内幕(浏览器内核|渲染引擎| HTML5| Chromium项目Committer重磅作品) 朱永盛 著 ISBN 978-7-121-22964-0 2014年6月出版 定价:7 ...
随机推荐
- WPF学习(1)WPF概述
WPF(Windows Presentation Foundation)是微软推出的基于Windows Vista的用户界面框架,属于NET Framework 3.0的一部分.它提供了统一的编程模型 ...
- Mesos-error
1,configure: error: cannot find libcurl 解决 yum install curl-devel 版权声明:本文博客原创文章,博客,未经同意,不得转载.
- 解决win10远程桌面没法关机问题
win10远程桌面没法关机问题: 解决方法:alt+f4
- 跑openstack命令错误【You must provide a username via either -...】
openstack设置环境,openstack该服务已经启动.当运行openstack当一个命令,如nova service list例如,下面的错误信息 You must provide a use ...
- Linux 编程学习笔记----动笔makefile档
Befroe Beginning. 在设置暑假的plan ,关于Linux的书籍如今在看的是ALP和Linux高级程序设计(杨宗德)第三版.在计划中的是Linux高级环境编程. 如今開始关于Linux ...
- IIS ASP.NET 版本转换批处理代码
原文 IIS ASP.NET 版本转换批处理代码 用来转换asp.net版本的代码,需要的朋友可以参考下. 标识符的查看方法:iisaspnet.bat代码 复制代码代码如下: @echo off e ...
- UIBarButtonItem 小记边
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWFuZ3poZW4xOTkwMDcwMQ==/font/5a6L5L2T/fontsize/400/ ...
- Java变量参数
Java1.5添加新功能:可变参数:它适用于参数不确定性的数量,判断形势的类型.java变量参数数组操作. 特点: 1.今天的参数列表只能持续. 2.省略号(...)位于变量类型和变量名之间,前后有无 ...
- Atitit.软体guibuttonand面板---通信子系统(范围)-- github 采用....
Atitit.软体guibuttonand面板---通讯子系统(区)-- github 的使用.... 1. 1.注冊账户以及创建仓库 1 2. 二.在GitHub中创建项目(create a new ...
- c#之Async、Await剖析
c#之Async.Await剖析 探索c#之Async.Await剖析 2015-06-15 08:35 by 蘑菇先生, 1429 阅读, 5 评论, 收藏, 编辑 阅读目录: 基本介绍 基本原理剖 ...