设为首页收藏本站

LUPA开源社区

 找回密码
 注册
文章 帖子 博客
LUPA开源社区 首页 业界资讯 技术文摘 查看内容

开发者应当了解的WebKit知识

2013-5-20 15:27| 发布者: 红黑魂| 查看: 10500| 评论: 2|来自: CSDN

摘要: 对一些开发者而言,WebKit就是一个黑盒子。丢进去HTML、CSS、JS等一连串的东西,而WebKit就能变魔术一般显示出一个很棒的网页出来。实际上,正我的同事IlyaGroriks提到的: WebKit不但是白盒,而且是一个开放的白盒。 ...

 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.      基础是相同的。

 

就像FlickrGithub透过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 storageWeb 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 SecurityPublic Key Pins)

 

下图是2D graphics 在不同port中的依赖关系,几乎是各自使用了完全不同的库来实现绘制操作:

       


举一个更细节的例子,一个刚被引入的特性CSS.supports()只有winwincairo两个移植版本没有支持,因为它们并没有启用css3特性。


 


酷毙
1

雷人

鲜花

鸡蛋
1

漂亮

刚表态过的朋友 (2 人)

  • 快毕业了,没工作经验,
    找份工作好难啊?
    赶紧去人才芯片公司磨练吧!!

最新评论

关于LUPA|人才芯片工程|人才招聘|LUPA认证|LUPA教育|LUPA开源社区 ( 浙B2-20090187 浙公网安备 33010602006705号   

返回顶部