Chrome 63 新功能

還有許多功能

我是 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 屬性,方便您覆寫瀏覽器的預設溢位捲動行為。

用途如下:

最棒的是,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 的新功能!