- Chrome 63 可讓您以動態方式匯入 JavaScript 模組。
- 我最喜愛的訪談程式設計問題變成了使用非同步疊代器和產生器的蛋糕。
- 您可使用 CSS
overscroll-behavior
屬性覆寫瀏覽器的預設溢位捲動行為。 - 此外,我們變更了使用者要求權限要求的方式
還有許多功能!
我是 Pete LePage。讓我們深入探索 Chrome 63 為開發人員提供的新功能!
需要完整的變更清單嗎?詳情請參閱 Chromium 原始碼存放區變更清單。
動態模組匯入
匯入 JavaScript 模組非常實用,但這是靜態性質,您無法根據執行階段條件匯入模組。
幸好,Chrome 63 會使用新的動態匯入語法來進行變更。可讓您在執行階段的模組和指令碼動態載入程式碼。因此,只有在必要時,它才能延遲載入指令碼,改善應用程式效能。
button.addEventListener('click', event => {
import('./dialogBox.js')
.then(dialogBox => {
dialogBox.open();
})
.catch(error => {
/* Error handling */
});
});
您可以在使用者首次到達頁面時載入整個應用程式,而不用載入需要登入的資源。初始載入量很小,而且速度飛快然後,使用者登入並載入其餘項目即可進行遷移。
非同步疊代器和產生器
使用 async
函式編寫程式碼來執行任何疊代作業的程式碼可能不太容易。事實上,這是我最喜愛的訪談程式設計問題中核心的部分。
現在,有了async generator functions和非同步疊代 通訊協定,串流資料來源的耗用或實作也變得輕鬆許多,而我的程式設計問題也變得更加容易。
async function* getChunkSizes(url) {
const response = await fetch(url);
const b = response.body;
for await (const chunk of magic(b)) {
yield chunk.length;
}
}
非同步疊代器可用於 for-of
迴圈,也可以透過非同步疊代器工廠建立自訂非同步疊代器。
過度捲動行為
捲動是與頁面互動最基本的方法之一,但某些模式較難處理。例如,如果瀏覽器使用提取重新整理功能,在頁面頂端向下滑動時,瀏覽器就會執行強制重新載入。
之前,請重新整理完整頁面。
之後,請只重新整理內容。
在某些情況下,您可能希望覆寫該行為,並提供自己的使用體驗。Twitter 的漸進式網頁應用程式就是當您下拉時 (而非重新載入整個頁面) 時,只會將任何新的 Tweet 新增至目前的檢視畫面。
Chrome 63 現在支援 CSS overscroll-behavior
屬性,方便您覆寫瀏覽器的預設溢位捲動行為。
用途如下:
- 取消捲動鏈結
- 停用或自訂下拉即可重新整理動作
- 在 iOS 上停用橡膠錶帶效果
- 新增滑動導覽功能
- 以及更多應用程式...
最棒的是,overscroll-behavior
不會對網頁效能造成負面影響!
權限 UI 變更
我很喜歡網頁推播通知,但因為載入頁面時,無任何背景資訊的網站數量很多,我真的很失望。
系統會忽略或暫時封鎖 90% 的所有權限要求。
在 Chrome 59 版中,我們開始解決這項問題,是在使用者關閉要求三次時,暫時封鎖權限。現在,在 m63 中,Chrome for Android 會提出權限要求強制回應對話方塊。
請注意,這不只適用於推播通知,也適用於「所有權限要求」。如果您在適當時機和情境上提出權限要求,我們發現使用者授予權限的可能性會高出 2.5 倍!
還有更多獎品等著您!
以上只是 Chrome 63 中專為開發人員設計的其中幾項變更,當然還有許多其他異動。
finally
現在可用於Promise
執行個體,並在滿足或拒絕Promise
後叫用。- 新的 Device Memory JavaScript API 會提供使用者裝置上的 RAM 總量提示,協助您瞭解效能限制。您可以打造專屬的執行階段體驗,減少低階裝置的複雜性,讓使用者能更安心地享有更優質的體驗。
Intl.PluralRules
API 可讓您藉由指出特定數字和語言適用的複數形式,建構可瞭解特定語言的複數形式的應用程式。對序數有所幫助。
請務必訂閱我們的 YouTube 頻道。每當我們推出新影片,您就會收到電子郵件通知。
我是 Pete LePage,當 Chrome 64 推出後,我會馬上說明 Chrome 的新功能!