Chrome 84 正式發(fā)布，支持私有方法、用戶空閑檢測(cè)！

速覽

• SameSite Cookie 恢復(fù)強(qiáng)制開(kāi)啟
• 棄用 TLS1.0 和 TLS1.1
• Web animations API 更新
• 支持網(wǎng)頁(yè)離線加載數(shù)據(jù)
• 支持喚醒鎖
• Web Assembly SIMD 進(jìn)入實(shí)驗(yàn)階段
• DevTools 新增 Issues 選項(xiàng)卡
• JavaScript 支持私有方法
• JavaScript 支持弱引用

安全更新

恢復(fù) SameSite Cookie 的更改

在4月，Chrome 暫時(shí)推遲了 SameSite Cookie 屬性的推行，以確保在 COVID-19 響應(yīng)的關(guān)鍵初始階段提供基本服務(wù)的網(wǎng)站的穩(wěn)定性。

這幾個(gè)月，Chrome 一直在關(guān)注這些網(wǎng)站的準(zhǔn)備情況，Chrome 84 會(huì)同時(shí)恢復(fù)對(duì) SameSite cookie 的強(qiáng)制開(kāi)啟，同時(shí)對(duì) Chrome 80+ 啟用強(qiáng)制開(kāi)啟。

棄用 TLS1.0 和 TLS1.1

TLS（傳輸層安全性）是保護(hù) HTTPS 的協(xié)議。它的歷史可以追溯到將近20年的 TLS1.0 及其更早的前身SSL，TLS1.0和1.1都有許多缺點(diǎn)：

• TLS 1.0和1.1在完成計(jì)算哈希中使用均為弱哈希的MD5和SHA-1。
• TLS 1.0和1.1在服務(wù)器簽名中使用MD5和SHA-1。
• TLS 1.0和1.1僅支持RC4和CBC密碼。RC4已損壞，此后會(huì)刪除。TLS的CBC模式構(gòu)造存在缺陷，容易受到攻擊。
• TLS 1.0的 CBC 密碼還會(huì)錯(cuò)誤地構(gòu)造其初始化向量。
• TLS 1.0不再符合 PCI-DSS。

支持 TLS1.2 是避免上述問(wèn)題的先決條件。TLS工作組已棄用TLS 1.0和1.1。Chrome 現(xiàn)在也已棄用這些協(xié)議。

Web animations API

Chrome 84 為 Web animations API 添加了大量以前不支持的特性。

Promise 支持

animation.ready 和 animation.finished 支持 Promise 調(diào)用：

const?transformAnimation?=?modal.animate(openModal,?openModalSettings);
transformAnimation.finished.then(()?=>?{?text.animate(fadeIn,?fadeInSettings)});

性能提升

在基于事件（例如mousemove）創(chuàng)建動(dòng)畫(huà)時(shí)，每次都會(huì)創(chuàng)建一個(gè)新的動(dòng)畫(huà)，這會(huì)快速消耗內(nèi)存并降低性能。為了解決此問(wèn)題，瀏覽器中引入了可替換動(dòng)畫(huà)，實(shí)現(xiàn)了自動(dòng)清理，將完成的動(dòng)畫(huà)標(biāo)記為可替換，如果被另一個(gè)完成的動(dòng)畫(huà)替換，則將其自動(dòng)刪除。

elem.addEventListener('mousemove',?evt?=>?{
?rectangle.animate(
???{?transform:?translate(${evt.clientX}px,?${evt.clientY}px)?},
???{?duration:?500,?fill:?'forwards'?}
?);
});

每次鼠標(biāo)移動(dòng)時(shí)，瀏覽器都會(huì)重新計(jì)算中每個(gè)球的位置，并為該新點(diǎn)創(chuàng)建一個(gè)動(dòng)畫(huà)。瀏覽器現(xiàn)在知道在以下情況下刪除舊動(dòng)畫(huà)：

• 動(dòng)畫(huà)完成后。
• 在合成順序中還有一個(gè)或多個(gè)動(dòng)畫(huà)也已完成。
• 新的動(dòng)畫(huà)是動(dòng)畫(huà)相同的屬性。

更加平滑的動(dòng)畫(huà)復(fù)合模式

你現(xiàn)在可以設(shè)置動(dòng)畫(huà)的合成模式，這意味著除了默認(rèn)的 replace 模式之外，動(dòng)畫(huà)可以是累加的。合成模式使開(kāi)發(fā)人員可以編寫(xiě)不同的動(dòng)畫(huà)，并可以控制效果的組合方式?，F(xiàn)在支持三種復(fù)合模式：'replace'（默認(rèn)模式）'add'、和 'accumulate'。

在默認(rèn)的 'replace' 復(fù)合模式下，最終動(dòng)畫(huà)將替換 transform 屬性并最終顯示為 rotate(360deg) scale(1.4)。對(duì)于 'add'，Composite 添加旋轉(zhuǎn)并乘以比例，最終狀態(tài)為 rotate(720deg) scale(1.96)。'accumulate' 合并轉(zhuǎn)換，結(jié)果為 rotate(720deg) scale(1.8)。

Content indexing API

使用新添加的 Content Indexing API 你可以為可脫機(jī)使用的內(nèi)容添加 URL 和元數(shù)據(jù)。然后通過(guò)這些元數(shù)據(jù)將內(nèi)容呈現(xiàn)給用戶，從而提高可發(fā)現(xiàn)性。

這樣，你的網(wǎng)站在沒(méi)有網(wǎng)絡(luò)鏈接的時(shí)候也是可用的。

下面是一個(gè)調(diào)用示例子：

const?registration?=?await?navigator.serviceWorker.ready;
await?registration.index.add({
??//?Required;?set?to?something?unique?within?your?web?app.
??id:?'article-123',
??//?Required;?url?needs?to?be?an?offline-capable?HTML?page.
??//?For?compatibility?during?the?Origin?Trial,?include?launchUrl?as?well.
??url:?'/articles/123',
??launchUrl:?'/articles/123',
??//?Required;?used?in?user-visible?lists?of?content.
??title:?'Article?title',
??//?Required;?used?in?user-visible?lists?of?content.
??description:?'Amazing?article?about?things!',
??//?Required;?used?in?user-visible?lists?of?content.
??icons:?[{
????src:?'/img/article-123.png',
????sizes:?'64x64',
????type:?'image/png',
??}],
??//?Optional;?valid?categories?are?currently:
??//?'homepage',?'article',?'video',?'audio',?or?''?(default).
??category:?'article',
});

Wake lock API

你是否曾經(jīng)有過(guò)這樣的困擾：一邊看電腦屏幕一邊在做其他事情，然后電腦很長(zhǎng)時(shí)間沒(méi)有響應(yīng)就進(jìn)入屏幕保護(hù)了。

通過(guò) Wake lock API 可以讓網(wǎng)頁(yè)請(qǐng)求喚醒鎖，以防止屏幕變暗或者進(jìn)入屏幕保護(hù)。

可以使用 navigator.wakeLock.request() 調(diào)起喚醒鎖，并且結(jié)合 setTimeout 在一段時(shí)間后自動(dòng)釋放：

//?The?wake?lock?sentinel.
let?wakeLock?=?null;

//?Function?that?attempts?to?request?a?screen?wake?lock.
const?requestWakeLock?=?async?()?=>?{
??try?{
????wakeLock?=?await?navigator.wakeLock.request('screen');
????wakeLock.addEventListener('release',?()?=>?{
??????console.log('Screen?Wake?Lock?was?released');
????});
????console.log('Screen?Wake?Lock?is?active');
??}?catch?(err)?{
????console.error(`${err.name},?${err.message}`);
??}
};

//?Request?a?screen?wake?lock…
await?requestWakeLock();
//?…and?release?it?again?after?5s.
window.setTimeout(()?=>?{
??wakeLock.release();
??wakeLock?=?null;
},?5000);

Idle Detection API

空閑檢測(cè)（Idle Detection API）會(huì)在用戶閑置時(shí)通知開(kāi)發(fā)人員，指示諸如與鍵盤(pán)，鼠標(biāo)，屏幕長(zhǎng)時(shí)間沒(méi)有交互，屏幕保護(hù)程序激活，屏幕鎖定或移動(dòng)到其他屏幕之類(lèi)的事情。開(kāi)發(fā)人員可以自定義的閾值來(lái)觸發(fā)通知。

下面這些場(chǎng)景很適合使用空閑檢測(cè)：

• 聊天軟件或在線社交網(wǎng)站可以使用此API來(lái)通知用戶當(dāng)前是否可以聯(lián)系他們的聯(lián)系人。
• 例如博物館展示程序類(lèi)的應(yīng)用可以通過(guò)這個(gè)API來(lái)在沒(méi)有交互后返回首頁(yè)。
• 需要復(fù)雜計(jì)算（例如繪制圖表）的應(yīng)用程序可以將這些計(jì)算限制在用戶與其設(shè)備進(jìn)行交互的時(shí)候。

檢測(cè)空閑檢測(cè)是否可用：

if?('IdleDetector'?in?window)?{
??//?Idle?Detector?API?supported
}

調(diào)用示例：

//?Create?the?idle?detector
const?idleDetector?=?new?IdleDetector();

//?Set?up?an?event?listener?that?fires?when?idle?state?changes.
idleDetector.addEventListener('change',?()?=>?{
??const?uState?=?idleDetector.userState;
??const?sState?=?idleDetector.screenState;
??console.log(`Idle?change:?${uState},?${sState}.`);
});

//?Start?the?idle?detector.
await?idleDetector.start({
??threshold:?60000,
??signal,
});

Web Assembly SIMD

SIMD(Single Instruction Multiple Data)即單指令流多數(shù)據(jù)流，是一種采用一個(gè)控制器來(lái)控制多個(gè)處理器，同時(shí)對(duì)一組數(shù)據(jù)（又稱“數(shù)據(jù)向量”）中的每一個(gè)分別執(zhí)行相同的操作從而實(shí)現(xiàn)空間上的并行性的技術(shù)。簡(jiǎn)單來(lái)說(shuō)就是一個(gè)指令能夠同時(shí)處理多個(gè)數(shù)據(jù)。

WebAssembly SIMD 提議的最終目標(biāo)是將向量運(yùn)算引入 WebAssembly 規(guī)范中，這可以大大加速音頻/視頻編解碼、圖像處理應(yīng)用程序、密碼應(yīng)用程序等高級(jí)計(jì)算應(yīng)用程序。雖然還在實(shí)驗(yàn)階段，現(xiàn)在已經(jīng)被開(kāi)源程序廣泛使用了（如 Halide、OpenCV.js、XNNPACK）都支持 WebAssembly SIMD 。

我們能很明顯的看到 SIMD 的性能差異。如果沒(méi)有 SIMD，則現(xiàn)代筆記本電腦每秒只能獲得3幀左右的圖像，而啟用 SIMD 時(shí)，可以獲得 15-16 幀/秒的平滑體驗(yàn)。

下面是一個(gè)更有趣的 "隱身" 例子：

WebAssembly SIMD 原始版本試用版可在 Chrome 84-86 版中進(jìn)行實(shí)驗(yàn)。

DevTools 更新

issues 選項(xiàng)卡

抽屜中新增來(lái) issues 選項(xiàng)卡，目的是幫助減控制臺(tái)輸出的混亂。

目前，控制臺(tái)是網(wǎng)站開(kāi)發(fā)者、庫(kù)、框架和 Chrome 本身記錄消息、警告和錯(cuò)誤的中心位置。Issues 選項(xiàng)卡以結(jié)構(gòu)化的、聚合的、可操作的方式顯示來(lái)自瀏覽器的警告，鏈接到 DevTools 中受影響的資源，并提供如何修復(fù)這些問(wèn)題的指導(dǎo)。隨著時(shí)間的推移，越來(lái)越多的 Chrome 警告將出現(xiàn)在 Issues 標(biāo)簽而不是控制臺(tái)，這將有助于減少控制臺(tái)的混亂。

性能面板更新

“性能” 面板現(xiàn)在在頁(yè)腳中顯示 “總阻塞時(shí)間（TBT）” 信息。TBT是一種負(fù)載性能指標(biāo)，可幫助量化頁(yè)面到達(dá)可用花了多長(zhǎng)時(shí)間。它實(shí)質(zhì)上測(cè)量的是頁(yè)面看起來(lái)可用的時(shí)間（因?yàn)槠鋬?nèi)容已呈現(xiàn)到屏幕上），但實(shí)際上不可用， 因?yàn)?JavaScript 阻止了主線程，因此頁(yè)面無(wú)法響應(yīng)用戶輸入。TBT 是近似于首次輸入延遲的主要實(shí)驗(yàn)室指標(biāo)，它是 Google 的新 Core Web Vitals 之一。

要獲取 TBT ，請(qǐng)不要使用 Reload Page 重新載入頁(yè)面工作流來(lái)記錄頁(yè)面加載性能。而是單擊 Record 記錄，手動(dòng)重新加載頁(yè)面，等待頁(yè)面加載，然后停止記錄。如果看到， Total Blocking Time: Unavailable 則表示 DevTools無(wú)法從 Chrome 的內(nèi)部配置文件數(shù)據(jù)中獲取所需的信息。

另外，還支持了 CLS：

圖片預(yù)覽

將鼠標(biāo)懸停在 background-image 上可以在提示工具中看到圖片預(yù)覽：

V8 v8.4 - 支持私有方法

在 v7.4 版本中新增加的私有字段進(jìn)一步支持了私有方法和訪問(wèn)器。從語(yǔ)法上講，私有方法和訪問(wèn)器的名稱以#開(kāi)頭，就像私有字段一樣。下面簡(jiǎn)要介紹一下該語(yǔ)法：

class?Component?{
??#privateMethod()?{
????console.log("I'm?only?callable?inside?Component!");
??}
??get?#privateAccessor()?{?return?42;?}
??set?#privateAccessor(x)?{?}
}

私有方法和訪問(wèn)器具有與私有字段相同的作用域規(guī)則和語(yǔ)義。

V8 v8.4 - 弱引用

JavaScript 是一種垃圾回收語(yǔ)言，這意味著當(dāng)垃圾回收器運(yùn)行時(shí)，程序無(wú)法再訪問(wèn)的對(duì)象所占用的內(nèi)存可能會(huì)自動(dòng)回收。除了 WeakMap 和中的 WeakSet 引用之外， JavaScript 中的所有引用都很強(qiáng)大，可以防止對(duì)引用的對(duì)象進(jìn)行垃圾回收。例如下面的代碼：只要 globalRef 通過(guò)全局作用域是可訪問(wèn)的，它和它的回調(diào)屬性中的函數(shù)都不會(huì)被回收。

const?globalRef?=?{
??callback()?{?console.log('foo');?}
};

JavaScript 開(kāi)發(fā)者現(xiàn)在可以通過(guò) WeakRef 功能對(duì)對(duì)象進(jìn)行弱引用。如果弱引用所引用的對(duì)象也未得到強(qiáng)引用，則它們不會(huì)阻止對(duì)其進(jìn)行垃圾回收。

const?globalWeakRef?=?new?WeakRef({
??callback()?{?console.log('foo');?}
});

(async?function()?{
??globalWeakRef.deref().callback();

??await?new?Promise((resolve,?reject)?=>?{
????setTimeout(()?=>?{?resolve('foo');?},?42);
??});

??globalWeakRef.deref()?.callback();
})();