WebKit 3 中的十大新功能

2007年11月14日

作者：Maciej Stachowiak

最近我们一直在讨论 WebKit 最新开发分支中的许多出色新功能——例如网页字体、客户端数据库存储、CSS 转换和CSS 动画。这些功能很可能会在某天进入官方发布版本。但我想退一步，谈谈一些较旧的功能，即我们最近稳定版本中的所有出色内容。

苹果最近发布了Mac OS X 10.5 “Leopard”，其中包括Safari 3。最新的 Safari 也包含在 Tiger 的最新更新Mac OS X 10.4.11中。相应的版本作为最新的Windows 版 Safari Beta提供，其中包括新功能以及大量稳定性与可用性改进。

苹果网站可以告诉您很多关于 Safari 3 的新最终用户功能。但很多优点在于内部，即驱动 Safari 的 WebKit 引擎。以下是自 Safari 2 版 WebKit 以来十大最激动人心的引擎增强功能列表，附有详细信息和演示。这些功能都包含在 Safari 3 附带的 WebKit 中——您无需下载 nightly 版本或其他任何东西即可获得它们。

1. 增强的富文本编辑

当您使用基于 WebKit 3 的浏览器浏览网页时，您将在新的可读写网络上获得完整且功能丰富的富文本编辑体验。这是一个关于我们改进的编辑支持的精彩演示，只需点击文本，编辑控件就会出现。

具体来说，我们与 RTE 库和应用程序的开发人员合作，以提高兼容性。WebKit 3 修复了许多错误，并支持附加的文本编辑功能，如链接和列表。我们现在得到了 WordPress、Google Docs、GMail、Blogger 等众多网络应用程序的支持。我们还改进了编辑功能，以支持 TinyMCE 和 FCKeditor 等库。我们预计未来会有更多的网络应用程序和工具包增加支持。

2. 更快的 JavaScript 和 DOM

我们极大地提高了 JavaScript 和 DOM 操作的速度，这两者对于当今丰富的网络应用程序的性能至关重要。您可以在许多基准测试中看到这一点。为了收集以下结果，我在 MacBook Pro (2 GHz Core Duo, 1 GB RAM) 上进行了测试。对于 WebKit 2 的结果，我使用了 Mac OS X 10.4 Tiger 上的 Safari 2.0.4。对于 WebKit 3 的结果，我使用了 Mac OS X 10.5 Leopard 上的 Safari 3.0.4。

  • i-Bench JavaScript 处理 – 苹果营销主要使用的基准测试是 JavaScript i-Bench。虽然您可以自行下载，但设置起来有点麻烦。下面列出的其他大多数基准测试都更容易自行运行，但其覆盖范围不如此测试真实和全面。
    WebKit 2 – 1.99 秒
    WebKit 3 – 0.87 秒
    WebKit 3 快了 2.3 倍！
  • Celtic Kane Javascript 速度测试 2007 – 这个流行的基准测试很容易在浏览器中尝试，涵盖了各种 JavaScript 和 DOM 处理任务。
    WebKit 2 – 1276 毫秒
    WebKit 3 – 624 毫秒
    WebKit 3 快了 2 倍！
  • pentestmonkey MD5 测试 – 这个测试计时了用纯 JavaScript 编写的各种加密校验和。在此运行。。我只报告 MD5 数字——其他变化也类似。
    WebKit 2 – 8.352 秒
    WebKit 3 – 3.794 秒
    WebKit 3 快了 2.2 倍！
  • JavaScript 光线追踪器 – 这个JavaScript 光线追踪器的完整模式是对浏览器许多部分（包括 JavaScript、DOM 和布局）的测试。
    WebKit 2 – 853.594 秒
    WebKit 3 – 48.48 秒
    WebKit 3 快了 17.6 倍！

如果您尝试网络上其他的 JavaScript 和 DOM 基准测试，您会看到类似的结果——速度提升 2 倍或更多。这些速度提升在高级网络应用程序上将真正感受到。

3. 更快的页面加载

WebKit 3 还显著提升了原始页面加载速度。不幸的是，在这方面很难找到好的基准测试。我们所知的最佳测试是 HTML i-Bench，它对于普通用户来说设置起来很麻烦，但它是基于真实网页内容的。

有人认为页面加载基准测试不公平，因为浏览器在绘制之前会发送 `load` 事件，而 Safari 有时甚至在第一次布局之前就发送。但 HTML i-Bench 是少数能排除这个因素的测试之一——它强制进行布局和滚动以确保绘制。以下是数据：

WebKit 2 – 2.95 秒
WebKit 3 – 2.06 秒
WebKit 3 快了 1.4 倍！

此外，独立研究人员证实Safari 3 的页面加载速度确实很快。

4. SVG

WebKit 3 引入了一项重要的全新技术——SVG (可伸缩矢量图形)。SVG 是一种用于图形的 XML 标记语言，允许丰富的交互，并且可以直接与 XHTML 混合。以下是一些酷炫的演示：

我们尚未像引擎的其他部分那样对 SVG 进行分析和优化，但早期测试似乎表明它已经具备惊人的性能。随着 WebKit、Firefox 内核 Gecko 和 Opera 内核 Presto 对它的支持，这项激动人心的新技术将在未来得到更多的应用。

5. XPath

WebKit 3 中的另一项全新重要技术是XPath，即 XML 路径语言。XPath 是 W3C 标准查询语言，它允许网页开发者高效地查找文档中的特定元素。由于 XPath 是一种编程语言，很难展示一个漂亮的演示，但本教程深入介绍了它并提供了一些示例。XPath 用于 AJAX 工具包，如TIBCO General Interface，并且可以被 CSS 查询引擎用于提高性能，例如在dojo.query中。

6. 新的和改进的 XML 技术

除了 XPath 和 XVG 这些重大新功能，我们还有许多新的和改进的 XML 技术：

  • 用于 XSLT 的 XSLTProcessor JavaScript API，以及许多 XSLT 修复和改进，包括对外部实体的支持。
  • DOMParser API。
  • XMLSerializer API。
  • XML 的增量渲染支持。
  • XHTML 中对命名字符引用的正确支持。
  • 更完整、兼容性更好的XMLHttpRequest，包括对事件监听器、持久服务器连接的增量更新、解析更多 XML MIME 类型、支持更多 HTTP 方法等。

7. 可样式化的表单控件

WebKit 3 引入了使用 CSS 自定义表单控件外观的功能。当没有应用自定义样式时，我们仍然使用标准的原生表单外观，但我们能够自定义外观以更好地支持具有强烈视觉识别的网站。以下是一些简单的示例：



以下是一些针对可样式化文本字段的旧的、更高级的示例。在其他网站上，您可以找到各种表单控件样式化的演示页面。

8. 高级 CSS 样式

我们添加了许多高级 CSS 功能，让内容作者能够更轻松地创建更美观的网站。其中包括实验性的 WebKit 功能或 CSS3 的早期实现。以下是其中一些功能的快速演示（只有使用基于 WebKit 3 的浏览器才能看到这些炫酷效果）

文本描边和文本阴影

WebKit 支持多列。这是一个多列测试，所以它应该真正地分成两列。多列布局是 CSS3 模块。另外，作为额外的奖励，为什么不使用文本描边/填充（WebKit 扩展）和文本阴影呢？它们能做出一个漂亮的炫酷标题。顺便说一句，还有用于盒子装饰的 border-radius 和 box-shadow。

除了此处显示的功能外，还包括更多 CSS 2.1、CSS 3 和 WebKit 实验性功能。我们支持CSS Media queries，以及许多背景改进，如background-origin 和 background-clip、多重背景（自 Safari 2 以来，但仍仅由 WebKit 支持）、box-sizing 等。另一个很酷的新功能是 border-image，它允许您使用单个图像制作可调整大小的控件背景——在 iPhone 的此示例代码的按钮部分中，有一些演示。

请参阅此Safari CSS 参考文档以获取完整列表。

9. 内存使用量减少

与 Safari 2 版本相比，最新的稳定版 WebKit 显著降低了内存使用量。我们进行了多种改进。包含大量文本的页面存储效率更高。JavaScript 代码生成的数据结构更小。最重要的是，我们彻底改进了内存缓存的处理方式。现在，缓存更好地保存了对加快页面加载真正关键的数据，而更少地保存可以轻松重新计算的数据，例如解码后的图像数据。

内存使用是一个出了名的难以衡量的问题。浏览器有许多缓存，以及实时网络服务器上的许多网站。我能找到的最可重复的衡量方法是在运行 HTML i-Bench 后查看内存使用情况，但您在其他网站上的结果可能会有所不同。以下是我看到的结果：

WebKit 2 – 26.7M RPRVT 内存
WebKit 3 – 23M RPRVT 内存
WebKit 3 使用的内存减少了 14%！

改进内存使用将仍然是未来版本的重要关注点。

10. Web 开发者工具

WebKit 最好的改进之一是提供了 Web 开发者工具、Web Inspector 和 Drosera JavaScript 调试器。我无法比原始博客文章更好地描述这些工具，所以这里是一些屏幕截图和原始文章的链接：

Web Inspector


Web Inspector screenshot

Drosera



结论

WebKit 3 的十大重要新功能就是这些。获取Mac OS X Leopard，Mac OS X Tiger 的 10.4.11 更新，Windows 版 Safari 3.0.4 Beta，或您最喜欢的其他基于 WebKit 的浏览器，亲自体验这些功能，以及数千个更小的功能和错误修复。