Chrome 63 Beta新特性介紹

谷歌開發者_發表於2017-11-14

640?wx_fmt=png&wxfrom=5&wx_lazy=1

除非另外註明,否則,下面介紹的更改均適用於最新 Chrome Beta 渠道版(Android、Chrome 作業系統、Linux、Mac 和 Windows)。



動態模組匯入

目前,匯入 JavaScript 模組是完全靜態的,開發者無法根據執行時條件(例如使用者是否登入)匯入模組。從這個版本開始,開發者可以利用 import(specifier) 語法在執行時動態載入程式碼到模組和指令碼中。這一功能可用於僅在需要時延遲載入指令碼,從而提升應用的效能。


button.addEventListener('click', event => {
   import('./dialogBox.js')
   .then(dialogBox => {
       dialogBox.open();
   })
   .catch(error => {
       /* Error handling */
   });
});


上面的程式碼示例顯示瞭如何在某個事件後使用 import(specifier) 函式匯入 JavaScript。



非同步迭代器和生成器

編寫通過非同步函式執行任何迭代的程式碼不是很好的做法。現在,我們推出使用非同步迭代協議的非同步生成器函式,幫助開發者簡化流式傳輸資料來源的消耗或實現。非同步迭代器可用於 for 迴圈以及通過非同步迭代器工廠建立自定義非同步迭代器。


async function* getChunkSizes(url) {
 const response = await fetch(url);

 for await (const chunk of streamAsyncIterator(response.body)) {
   yield chunk.length;
 }
}


上面的程式碼示例顯示瞭如何使用非同步迭代器通過 streamAsyncIterator 函式編寫更簡潔的程式碼來流式傳輸提取的資料。



Device Memory API

由於裝置的能力不同,開發者要想打造一種適合所有裝置的使用者體驗困難重重。全新的 Device Memory JavaScript API 可以通過使用者裝置上的總記憶體來詳細瞭解裝置限制,從而幫助開發者應對這個挑戰。開發者可以利用這一資料分析按照硬體限制在執行時定製內容。例如,開發者可以向使用低端裝置的使用者提供精簡版應用,從而改進使用者體驗和降低使用者的失望感。Device Memory API 也可用於向指標新增環境資訊,例如從裝置記憶體的角度來顯示某個任務在 JavaScript 中完成所需的時間。



許可權介面更改

在網站需要使用者提供特殊許可權時,它們可以觸發許可權請求。目前,這些許可權請求在 Chrome(Android 版)中以可忽略的橫幅形式顯示在螢幕底部,開發者在呈現這些請求時通常沒有考慮使用者是否有合適的環境來授予許可權。這會影響使用者體驗,使用者在超過 90% 的情況下都會忽略或暫時拒絕這些許可權請求。


在 Chrome 59 中,我們著手解決這個問題,如果使用者忽略某個許可權請求達到三次,我們會暫時遮蔽這一許可權。作為跟進,在這個版本中,Chrome(Android 版)現在以模態對話方塊形式呈現許可權請求。這一變化可以將整體的許可權提示次數減少 50%。它也將使用者接受或拒絕請求的可能性提高了 5 倍,而不是讓他們暫時拒絕或重複忽略請求。為了確保使用者理解許可權請求,開發者應在適當的時間向使用者呈現許可權請求,因為我們發現,如果網站在一定環境下要求許可權,使用者授予相關許可權的可能性要高 2.5 倍。


檢視此版本中的其他特性,請點選文末“閱讀原文”。


0?wx_fmt=gif

相關文章