Safari 11.1 中的新 WebKit 特性

2018年4月12日

作者：Jon Davis

更新：本文已更新，删除了 Offscreen Canvas 的内容，该特性在 macOS 上的 Safari 11.1 和 iOS 11.3 上的 Safari 中不可用。Offscreen Canvas 作为实验性特性在 Safari Technology Preview 版本中可用。

最近发布的 macOS High Sierra 中的 Safari 11.1 和 iOS 11.3 上的 Safari 包含了 WebKit 的改进，增加了对许多令人兴奋的 Web 平台技术的支持。这些特性为开发者提供了新的能力，可以提高用户感知到的 Web 内容性能，为离线体验增加了一种新的动态方法，并为 Web 支付带来了一种简化开发的标准方法。它还在 Web Inspector 中提供了重新设计的开发者工具，提高了整体可用性和便利性。

以下是对 Safari 11.1 中所有新特性和改进的简短介绍。

Service Worker API

Service Worker API 支持脚本在后台运行，以处理网页的通用处理任务。Service Worker 脚本通常与此版本中包含的其他互补 API 协同工作，例如 Cache API，用于存储 Fetch 请求和响应，以提高网络性能或提供离线体验。WebKit 的实现尊重用户隐私，根据顶层文档源划分 Service Worker，以帮助防止跨站跟踪。

阅读博文“Workers at Your Service”，了解更多关于 WebKit 实现 Service Workers 的详细信息。

用于 Apple Pay 的 Payment Request API

WebKit 增加了对 Payment Request API 的支持，用于执行 Apple Pay 交易。这使得商家能够使用标准 API 在多个浏览器上提供支付方式，大大减少了在不同浏览器和平台上支持安全支付的工作量。

查看《介绍用于 Apple Pay 的 Payment Request API》了解更多详细信息。

Beacon API

Beacon API 调度异步请求在页面卸载前发送，并在没有阻塞请求的情况下完成。这对于发送有关 Web 应用程序的诊断数据非常有用，而不会影响感知到的页面加载性能。

查看Beacon 规范了解更多信息。

目录上传和 Clipboard API 更新

Clipboard API 有多项改进，重点在于 DataTransfer API 的现代化实现。它增加了对 dataTransfer.items、HTML 内容和自定义 MIME 类型读写的支持，并修复了包括从原生应用程序复制粘贴图像在内的多个 Bug。WebKit 还增加了使用 DataTransfer.webkitGetAsEntry() 和 input.webkitdirectory 进行目录上传的支持，实现了与其他浏览器的互操作性。用户现在可以将整个目录上传到 iCloud 或 Dropbox 等云存储和文件共享服务。

阅读更多关于Clipboard API 和目录上传 API 改进的内容。

将视频用作图像资源

动画图像格式非常流行，但它们很容易变得体积庞大，消耗大量带宽。为了解决性能影响，Safari 中的 WebKit 现在支持使用 HTML 标签加载 H.264 编码的 MP4 视频。这使得内容作者能够替换比 H.264 视频文件大得多且需要更多处理能力来显示的动画 GIF 文件。除了性能提升，这项更改还允许 Web 内容作者将视频用作 CSS 的 background-image。

关于这项更改的一些详细信息可在 Colin Bendell 的博文《的演变：没有 GIF 的 Gif》中找到。

`font-display`

使用新支持的 font-display 描述符，页面作者可以更好地控制字体加载行为。WebKit 的新默认行为是在切换到已安装字体之前，显示不可见的文本长达 3 秒，直到所需的字体下载完成。使用 font-display，页面作者可以使用 swap 值立即显示已安装字体，直到指定的 Web 字体下载完毕。还有 fallback 行为，显示已安装字体长达 3 秒，如果所需的字体在此时间内未加载，则永远不会显示。最后，optional 行为将在字体存在于浏览器缓存中时使用它。如果不存在，则完全跳过使用它。这些提供了丰富的行为集，供 Web 开发者控制加载和显示体验，以最适合其 Web 内容的设计。

在CSS Fonts Module Level 4 规范中查找更多详细信息。

HTML 图像解码

内容作者有时需要一个已加载、完全解码并立即可用的图像。加载和解码大型图像或大量图像可能会导致页面性能下降。新的 HTMLImageElement.decode() 函数异步开始解码图像，并返回一个 Promise，该 Promise 在解码后的图像可用时解析。有了它，开发者现在可以控制加载图像何时被解码，而不会占用主线程。开发者还可以使用元素的 decoding 属性声明性地指示图像应异步加载。

<img decoding="async">

<img decoding="sync">

<img decoding="auto">

更多信息，请阅读WhatWG 提案。

被动事件监听器

为了避免在将事件处理程序附加到 touchstart、touchmove 或 wheel 事件时导致滚动性能不佳，如果监听器不调用 preventDefault()，开发者可以将其事件监听器指定为 passive。这使得 Safari 可以在不等待事件监听器完成的情况下继续提供高性能滚动。

可以在DOM 规范中找到关于被动事件监听器的更多详细信息。

Storage Access API

新的 Storage Access API 提供了一个解决方案，允许第三方嵌入式内容在用户与之交互时，在存在智能跟踪预防 (Intelligent Tracking Prevention) 的环境中请求访问其第一方 cookie。这使得内容提供商能够灵活地提供嵌入式内容，同时向用户提供他们正在与谁共享信息的透明度。

在 WebKit 博客上了解更多关于Storage Access API 的信息。

子资源完整性 (Subresource Integrity)

WebKit 增加了对子资源完整性 (Subresource Integrity) 的支持，这使得网站能够验证资源的完整性，并在网站所有者控制之外发生变化时拒绝它们。完整性检查会将 Web 内容作者在