Safari 14 中的新 WebKit 功能

随着适用于 macOS Big Sur、iPadOS 14、iOS 14 和 watchOS 7 的 Safari 14 的发布，WebKit 在性能和隐私方面带来了显著改进，并为网页开发者提供了大量新功能。

了解 WebKit 随 Safari 14 发布而新增的所有改进。

Safari 网页扩展

此版本支持 Safari 网页扩展。它们是一种主要使用 JavaScript、HTML 和 CSS 构建并与原生应用打包的扩展类型。这使得扩展开发者能够维护一个可打包用于其他浏览器的单一代码库。

这也意味着拥有其他浏览器扩展的开发者可以通过一个命令行工具轻松地将其项目引入 Safari。它通过将您的网页扩展转换为 Xcode 项目，立即开始您的开发，随时可以构建和测试。测试后，您可以将其提交到 App Store。

您可以通过观看 WWDC 2020 的“认识 Safari 网页扩展”会话，了解更多关于 Safari 网页扩展支持的信息。

网页翻译

在 macOS Big Sur、iOS 14 和 iPadOS 14 上，WebKit 配合 Safari 14 允许用户在英语、西班牙语、简体中文、法语、德语、俄语和巴西葡萄牙语之间翻译网页。Safari 会自动检测网页语言，并根据用户的首选语言列表提供翻译。

内容作者可以指示 Safari 哪些特定元素应该或不应该被翻译。可以使用空的 translate 属性或 translate="yes" 来启用元素内容的翻译，或使用 translate="no" 来禁用。最好标记特定元素，避免在整个文档的单个容器上使用该属性。

性能改进

WebKit 的一个重点领域是性能。显著的性能提升改善了页面的加载性能和开发者的页面性能。加载一个以前未访问过的页面速度提高了 13%，加载最近访问过的页面速度提高了 42-52%。标签页关闭性能从 3.5 秒提升到 50 毫秒。WebKit 还增加了对增量加载 PDF 文件的支持，现在首屏渲染速度提高了 60 倍。

对于网页开发者来说，WebKit 改进了 macOS 上 iframe 和 overflow: scroll 容器的异步滚动。更快的 IndexedDB 操作、for-of 循环、JavaScript Promises、JavaScript cookie 访问以及 JavaScript 删除操作提高了网页开发者和用户的页面性能。

WebKit 和 Safari 现在可以利用平台对 HTTP/3 的支持，以提高网络效率和缩短加载时间。HTTP/3 利用 UDP 上的多路复用连接来减少拥塞和传输延迟。所有这些都为您的网页应用带来了更好的感知性能。

欲了解更多详情，请观看 WWDC 2020 的“网页开发者新特性”会话。

改进的兼容性

另一个重点领域是提高 WebKit 的互操作性。衡量这一点的一个标准是通过 Web 平台测试。这是一套浏览器开发者用于确保实现跨浏览器兼容的测试集，有助于开发者拥有更具互操作性的代码。在这些版本中，WebKit 提高了 Service Workers、SVG、CSS、XHR+Fetch 等超过 140,000 项测试的通过率。

您可以通过观看 WWDC 2020 的“网页开发者新特性”会话了解更多信息。

隐私更新

每个版本发布，WebKit 都会为其用户完善隐私保护。今年，WebKit 启用了完全的第三方 cookie 阻止，并增加了在 Safari 私密浏览模式下对存储访问 API 的支持。此外，Safari 还添加了隐私报告，向用户展示智能跟踪预防功能阻止了哪些跟踪器访问识别信息。

在“CNAME 伪装和跳过跟踪防御”和“完全第三方 Cookie 阻止及更多”博客文章中了解更多关于 WebKit 隐私增强功能的信息。

网页版触控 ID 和面容 ID

网页开发者现在可以支持使用面容 ID 和触控 ID 登录网站。WebKit 的网页身份验证实现中新增的平台验证器支持为用户名和密码提供了高度安全的替代方案。对 WebAuthn 的支持已在 macOS 的 Safari 13 和 iOS 13.3 中引入，并支持硬件安全密钥。此版本的新增功能包括对外部网页身份验证安全密钥的 PIN 输入和帐户选择的支持。

欲了解更多信息，请阅读博客文章“认识网页版面容 ID 和触控 ID”。

WebP 支持

WebKit 中对媒体的改进包括对新图像格式和新视频播放功能的支持。Safari 14 中的此 WebKit 版本增加了对 WebP 开源图像格式的支持。它为内容作者提供了更小的有损和无损格式文件大小，并具备高级功能，如 Alpha 通道透明度和动画。

您可以通过观看 WWDC 2020 的“网页开发者新特性”演讲，了解更多关于 WebP 支持的信息。

为图片预留布局空间

另一个与图像相关的改进消除了布局偏移。它源于 WebKit 推导图像宽高比方式的改变。网页作者只需为 <img> 元素添加带有数字值的 width 和 height 属性，即可告知 WebKit 在从 CSS 计算图像大小时需要预留的图像比例。这是一个简单但显著改善用户体验的改变。

要查看其效果，请观看 WWDC 2020 的“网页开发者新特性”会话。

新 CSS 功能

Safari 14 支持 CSS 中的 image-orientation 属性，以覆盖 WebKit 基于图像 EXIF 数据旋转的默认行为。默认的 image-orientation: from-image 可以设置为 image-orientation: none 来覆盖该行为并忽略 EXIF 方向标志。

对 :is() 伪选择器的新支持可以作为先前支持的 :matches() 的同义词。它可用于匹配具有最高特异性选择器特异性的一组选择器。

它可用于避免重复选择器。比较以下示例：

/* Removing margins from any subsequent headings */
h1, h2, h3, h4, h5, h6 {
    margin-top: 3em;
}

h1 + h2, h1 + h3, h1 + h4, h1 + h5, h1 + h6,
h2 + h3, h2 + h3, h2 + h4, h2 + h5, h2 + h6,
h3 + h4, h3 + h3, h3 + h4, h3 + h5, h3 + h6,
h4 + h5, h4 + h3, h4 + h4, h4 + h5, h4 + h6,
h5 + h6, h5 + h3, h5 + h4, h5 + h5, h5 + h6 {
    margin-top: 0;
}

覆盖可以改为使用 :is() 伪选择器这样编写：

:is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) {
    margin-top: 0;
}

:where() 伪选择器也受支持，其工作方式与 :is() 类似，不同之处在于它将特异性重置为 0，从而使得覆盖复杂匹配变得容易。

其他值得注意的 CSS 新增功能包括支持 line-break: anywhere 以在内容溢出容器之前进行换行，以及 image-set() 对所有其他图像函数（包括 image()、-webkit-canvas()、-webkit-cross-fade() 和 -webkit-*-gradient()）的支持。

您可以通过观看 WWDC 2020 的“网页开发者新特性”了解更多关于这些 CSS 功能的信息。

媒体增强功能

对于视频，iOS 14 上的 Safari 增加了对 iPhone 画中画 API 的支持。在 macOS 上，新增了对高动态范围 (HDR) 视频播放的支持。内容作者可以使用媒体查询或 JavaScript 中的 matchMedia 方法来检测高动态范围显示功能，并为拥有 HDR 显示器的用户提供渐进式增强体验。

<style>
    @media only screen (dynamic-range: high) {
        /* HDR-only CSS rules */
    }
</style>

<script>
    if (window.matchMedia("dynamic-range: high")) {
        // HDR-specific JavaScript
    }
</script>

您可以通过观看 WWDC 2020 的“网页开发者新特性”了解更多关于这些媒体增强功能的信息。

JavaScript 改进

除了性能改进之外，WebKit 还为其 JavaScript 引擎添加了多项新功能。此版本包括对 BigInt 的支持，这是一种用于表示大于 MAX_SAFE_INTEGER 的整数的新数据类型。

let bigInt = BigInt(Number.MAX_SAFE_INTEGER) + 2n;

提供了三种新的逻辑赋值运算符：AND、OR 和 nullish。使用这些运算符只会评估表达式的左侧一次，并且在赋值时可以非破坏性地使用。

let foo = null;

foo ??= 1; // nullish assignment operator
> 1

foo &&= 2; // AND assignment operator
> 2

foo ||= 3; // OR assignment operator
> 2

foo ??= 4; // nullish assignment operator
> 2

WebKit 还引入了对可选链运算符的支持，它为您安全地访问对象属性提供了快捷方式。

function optionalChaining(object) {
    return object?.foo;
}

function optionalChainingTranspiled(object) {
    if (object !== null && object !== undefined)
        return object.foo;
    return undefined;
}

还增加了对 EventTarget 构造函数的支持，这意味着开发者可以创建自己设计的 EventTarget 自定义实例，而无需重用 DOM 元素的开销，从而为非 DOM 对象提供了一个用于分派自定义事件的接口。

您可以通过观看 WWDC 2020 的“网页开发者新特性”了解更多关于 JavaScript 改进的信息。

网页检查器更新

macOS Safari 14 中的网页检查器新增了“来源”标签页，将“资源”标签页和“调试器”标签页结合在一起。它列出了自网页检查器打开以来，被检查页面加载的所有资源，以及 XHR+Fetch 资源和长期存在的 WebSockets。网页检查器的 JavaScript 调试工具也在此处，包括所有步进和断点控制，以更紧凑和统一的方式与被检查页面的资源一起组织。来源标签页还提供了新功能，例如按文件路径而不是文件类型组织，用于完全替换通过网络加载的响应内容和标头的本地覆盖，以及在页面中任何其他内容之前评估 JavaScript 的检查器引导脚本。

在“时间轴”标签页中，新增了“媒体与动画”时间轴，用于捕获与媒体元素、CSS 动画和 CSS 过渡相关的事件。它使得将其他时间轴中捕获的活动与媒体元素（例如暂停或恢复播放）或 CSS 动画或过渡（例如何时创建以及每次迭代）的状态变化进行关联变得容易。

在增强功能中，网页检查器提供了改进的画外音支持和新的 HSL 颜色选择器，支持 Display-P3 颜色。

您可以通过观看 WWDC 2020 的“网页检查器新特性”视频会话或参考网页检查器参考文档了解更多信息。

反馈

这些改进适用于运行 watchOS 7、iOS 14 和 iPadOS 14、macOS Big Sur、macOS Catalina 和 macOS Mojave 的用户。这些功能也通过 Safari 技术预览版向网页开发者提供。此 Safari 版本中的更改已包含在以下 Safari 技术预览版中：99、100、101、102、103、104、105、106、107、108、109。请下载最新的 Safari 技术预览版，以保持对未来网页平台和网页检查器功能的领先。您还可以使用WebKit 功能状态页面来关注您喜欢的网页平台功能的变化。

向 @webkit 或 @jonathandavis 发送推文，分享您对此版本的看法。如果您遇到任何问题，欢迎提交 Safari 的错误报告，或针对网页内容问题提交 WebKit 错误。