以下是一些注意事項:
- 有新的 HTTP 103 狀態碼,可協助瀏覽器在網頁尚未開始的情況下,判斷要預先載入的內容。
- Local Font Access API 可讓網頁應用程式列舉及使用使用者電腦上安裝的字型。
AbortSignal.timeout()
是針對非同步 API 實作逾時的更簡單方法。- 還有更多應用程式。
我是 Pete LePage。我們來深入說明 瞭解 Chrome 103 版開發人員推出的新功能
HTTP 103 狀態碼 103 - 早期提示
使用資源提示可以提高網頁效能。這些提示會給瀏覽器「提示」,說明稍後可能會用到的資訊。例如,預先載入檔案或連線至其他伺服器。
<link as="font" crossorigin="anonymous"
href="..." rel="preload">
<link as="font" crossorigin="anonymous"
href="..." rel="preload">
<link href="cdn.example.com"
rel="preconnect">
但瀏覽器必須傳送頁面以上的部分資訊,瀏覽器才能對這些提示執行操作。
假設瀏覽器要求一個網頁,但伺服器需要幾百毫秒的時間才能產生網頁。瀏覽器開始接收網頁之前 只是處於就緒狀態並等待。不過,如果伺服器知道網頁一律需要一組子資源,例如 CSS 檔案、一些 JavaScript 和幾張圖片,就能立即以新的 HTTP 103 早期提示狀態碼回應,並要求瀏覽器預先載入這些子資源。
接著,伺服器產生網頁後,便可透過一般 HTTP 200 回應傳送該網頁。進入頁面後,瀏覽器已經開始載入必要資源。
由於這是新的 HTTP 狀態碼,因此必須更新伺服器才能使用。
開始使用 HTTP 103 早期提示:
本機字型存取 API
網路字型一直以來都是一大挑戰,對於讓使用者自行建立圖像和設計的應用程式更是一大挑戰。截至目前為止,網頁應用程式 只能使用網路字型無法取得使用者在電腦上安裝的字型清單。此外,無法存取完整字型表資料,如果您需要實作自訂文字堆疊,這一點十分重要。
新的 Local Font Access API 可讓網頁應用程式列舉使用者裝置上的本機字型,並提供字型資料表資料的存取權。
如要取得裝置上安裝的字型清單,您需要先要求權限。
// Ask for permission to use the API
try {
const status = await navigator.permissions.request({
name: 'local-fonts',
});
if (status.state !== 'granted') {
throw new Error('No Permission.');
}
} catch (err) {
if (err.name !== 'TypeError') {
throw err;
}
}
接著,呼叫 window.queryLocalFonts()
。此方法會傳回使用者裝置上安裝的所有字型陣列。
const opts = {};
const pickedFonts = await self.queryLocalFonts();
for (const fontData of pickedFonts) {
console.log(fontData.postscriptName);
console.log(fontData.fullName);
console.log(fontData.family);
console.log(fontData.style);
}
如果只對部分字型感興趣,您可以新增 postscriptNames
參數來篩選字型。
const opts = {
postscriptNames: [
'Verdana',
'Verdana-Bold',
'Verdana-Italic',
],
};
const pickedFonts = await self.queryLocalFonts(opts);
如需完整資訊,請參閱 Tom 的「使用進階字體排版搭配本機字型」一文。
使用 AbortSignal.timeout() 簡化逾時時間
在 JavaScript 中,AbortController
和 AbortSignal
會用於取消非同步呼叫。
舉例來說,提出 fetch()
要求時,您可以建立 AbortSignal
並傳送至 fetch()
。如要在傳回前取消 fetch()
,請在 AbortSignal
例項上呼叫 abort()
。直到目前為止,如果您想在一段時間後取消,需要將其納入 setTimeout()
中。
const controller = new AbortController();
const signal = controller.signal;
const resp = fetch(url, { signal });
setTimeout(() => {
// abort the fetch after 6 seconds
controller.abort();
}, 6000);
幸好,在 AbortSignal
上使用新的 timeout()
靜態方法現在變得更容易了。此方法會傳回 AbortSignal
物件,並在指定毫秒數後自動取消。過去只有幾行程式碼,現在只是單行程式碼而已。
const signal = AbortSignal.timeout(6000);
const resp = fetch(url, { signal });
Chrome 103 支援 AbortSignal.timeout()
,且已在 Firefox 和 Safari 中。
還有更多獎品等著您!
當然還有許多其他東西。
avif
圖片檔案格式現可透過網路分享功能分享- Chromium 現在會在網址變更後立即觸發
popstate
,藉此與 Firefox 比對。事件的順序現在為:popstate
,然後在兩個平台上為hashchange
。 Element.isVisible()
則會指出元素是否可見。
其他資訊
這僅涵蓋部分重點功能。如要瞭解 Chrome 103 的其他變更,請點選下方連結。
- Chrome 開發人員工具新功能 (103)
- Chrome 103 淘汰和移除內容
- 適用於 Chrome 103 的 ChromeStatus.com 更新
- Chromium 原始碼存放區變更清單
- Chrome 發布時間表
訂閱
如要隨時掌握最新資訊,請訂閱 Chrome Developers YouTube 頻道,每當我們推出新影片時,您就會收到電子郵件通知。
我是 Pete LePage。Chrome 104 推出後,我很樂意告訴您 Chrome 有什麼新功能!