- 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 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 的漸進式網頁應用程式的運作方式,當您向下滑動時,系統不會重新載入整個網頁,而是直接將任何新推文新增至目前的檢視畫面。
Chrome 63 現已支援 CSS overscroll-behavior
屬性,可輕鬆覆寫瀏覽器的預設溢位捲動行為。
您可以使用這項功能來:
- 取消捲動連結
- 停用或自訂「拉動更新」動作
- 在 iOS 上停用橡皮筋效果
- 新增滑動導覽功能
- 以及更多應用程式...
最棒的是,overscroll-behavior
不會對網頁成效造成負面影響!
權限 UI 變更
我很喜歡網頁推播通知,但許多網站在載入網頁時要求使用者授權,卻未提供任何相關資訊,這讓我感到非常困擾,而且我並非唯一有這種感受的人。
90% 的權限要求都會遭到忽略或暫時封鎖。
在 Chrome 59 中,我們開始解決這個問題,只要使用者拒絕要求三次,就會暫時封鎖權限。在 m63 中,Android 版 Chrome 會建立權限要求的對話方塊。
請注意,這項功能不僅適用於推播通知,也適用於所有權限要求。我們發現,如果您在適當時間點和情境下要求權限,使用者授予權限的可能性會增加兩倍半!
還有更多獎品等著您!
當然,這只是 Chrome 63 中針對開發人員所做的部分變更,還有更多變更。
finally
現在可在Promise
例項上使用,並在Promise
已完成或遭到拒絕後叫用。- 新的 Device Memory JavaScript API 可提供使用者裝置的 RAM 總量提示,協助您瞭解效能限制。您可以在執行階段調整體驗,減少低階裝置的複雜度,為使用者提供更優質的體驗,減少挫折感。
Intl.PluralRules
API 可讓您建構應用程式,藉此瞭解特定語言的複數形式,並指出哪種複數形式適用於特定數字和語言。並可協助處理序數。
請務必訂閱我們的 YouTube 頻道,這樣一來,我們發布新影片時,你就會收到電子郵件通知。
我是 Pete LePage,Chrome 64 一推出,我就會在這裡告訴你 Chrome 的新功能!