Safari 14 来了，它还有机会吗？

本文首发于公众号：符合预期的CoyPan

写在前面

前不久，Apple 的 WWDC20给咱们带来了不小的惊喜。Safari 浏览器将迎来大版本更新。做为一个Web Developer，我观看了Apple的官方介绍视频。本文就根据视频，简单说一说Safari 14到底为Web开发者带来了哪些优化和新特性。

What's new for web developers

视频在这里：https://developer.apple.com/v...

本文将从如下几个方面讲起：

一、Performance ；二、Web Api；三、CSS；四、Media；五、JavaScript；六、Platform integration

Performance

性能。

对于用户来讲，Safari 14大幅提升了浏览性能。从下图官方给出的数据能够看到，点击链接跳转、打开页面、回退、关闭未响应的tab等，都有了大幅度的性能提高，反应更快了。

对于开发者来讲，

一、页面滚动时，CPU使用率降低了3倍。这意味着，在实现Safari上的特殊滚动逻辑时，将会更加流畅。

二、IndexedDB的操做快了10倍。

三、for-of循环快了5倍。

四、Promise快了2倍。

五、JS中的delete操做快了12倍。

不看不知道，原来Safari中的for..of..迭代很耗时？咱们使用老的Safari浏览器和Chrome浏览器作一个对比。我使用下面的代码在控制台进行了测试：

var arr = [];
for(var i = 0; i < 100000000; i++) { 
  arr[i]=i; 
}
console.time('test');
for(var j of arr) {}
console.timeEnd('test');

通过几回测试，上面的for...of...迭代，老的Safari（版本号：13.1.1 ）中平均耗时为4000ms往上，而Chrome（版本号：83.0.4103.106）中，这一平均耗时为：1700ms左右。

Web API

视频中提到的API，是对过去一年（Safari 13 - Safari14）的一个总结。

Web Animation API

JavaScript能够直接调用Animation Api很方便的实现动画效果。看官方给出的示例：

借助这个Api，能够直接操做DOM进行运动，而不是像以前的修改DOM的属性、CSS类等方式来实现动画。

Web Animation API 在W3C规范中，目前只是一个草案。Safari 13.1开始支持，Chrome在6年前的36版本实现了这个API。

Resize observer

Resize observer能够监听DOM元素的尺寸改变，窗口大小改变，display属性改变，DOM子元素被添加等。示例代码以下：

这个API，目前只是在一个编者草案阶段。Safari从13.1开始支持，Chrome从64版本开始支持这个API。

Async Clipboard API，异步剪切板API

支持剪切板的读写，支持文件和富文本。可是必需要求上下文安全，以及用户的交互。

这个API处于W3C工做草案阶段，Chrome从66版本开始支持，Safari从13.1开始支持。

更好的支持Web Component

同时，支持了CSS Shadow Part

支持了HTML的enterkeyhint属性

键盘会根据这个属性的值显示不一样的文本。

Web Authentication API

经过这个API能够调用iOS的指纹ID以及Face ID

CSS

下面是CSS方面的更新。

新增字体

新增一个CSS属性，用于截断文本

line-break: anywhere

新增两个CSS伪类选择器—— : is 和 : where

使用:is来减小重复

:where和:is的语法、功能相同，不过:where的优先级为0，能够被其余CSS规则轻易覆盖。

Media

一、支持了webp格式的图片。

二、支持按默认的图片比例占位。

三、设置图片的方向

四、远程播放API

支持远程播放视频

五、画中画 API

支持画中画的形式播放视频

JavaScript

BigInt

Safari 14 支持了BigInt

Nullish coalescing(空值合并)

Optional Chaining（可选链式调用）

logical assignment operator（逻辑赋值运算符）

Public class fields

String ReplaceAll

Platform integration（平台集成）

视频里，这一部分只是简单的提到了Customize AR Quick Look（自定义AR预览），Apple Pay，App Clips（Apple想要创建本身的小程序生态），并无进一步的介绍。想要详细了解相关内容，能够移步到相关的视频。本文也很少作介绍了。

写在后面

本次的WWDC提到的Safari相关的更新还有不少，好比：支持Http3，支持JS插件，全新的Web Inspector，再也不支持Flash等等。

Safari的这一系列更新，只在Apple本身的生态下，能够玩得转。可是对于普通的业务开发者来讲，只是提供了更多的可能，并不会带来太大的影响，该作兼容得作兼容，Babel该用还得用。不过经过这些更新，也能够大概窥探到Web技术发展的一个大体方向：

一、对于语言、接口层面，浏览器在实现更多的新规范，咱们将来的Web开发会愈来愈简单、方便。

二、Web技术和终端、OS的结合愈来愈紧密，将来的Web应用会有更多的可能。