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應用會有更多的可能。