2020 年 Chrome 開發者峯會的亮點

時間 2020-12-31

標籤 javascript css html 前端 java 程序員 web 面試 chrome json 欄目 Chrome 简体版

原文原文鏈接

2020 年的Chrome 開發者峯會和往年有所不一樣，今年是在線上召開的，每次談話大約十分鐘，討論規模更大。雖然我沒有在第一時間觀看會議的直播，可是看回放也不會錯過這些亮點。javascript

全部的回放在這裏：https://developer.chrome.com/...css

經過「Core Web Vitals」簡化了性能指標

咱們都知道 Chrome 有大量的性能指標，能夠用它們來跟蹤關於網站性能的全部內容。儘管劃分的粒度使咱們可以深刻研究咱們可能須要跟蹤的特定區域，這樣是很是好的，但有時這些性能指標有些使人望而卻步。html

爲了解決這個問題，Chrome 小組稱提供了名爲「Core Web Vitals」的解決方案。下面是三個性能指標，它們是跟蹤如下關鍵要素：前端

首次內容繪製（FCP）：衡量加載體驗
首次輸入延遲（FID）：衡量互動體驗
累積版式移位（CLS）：衡量視覺穩定性

展望將來，Lighthouse 性能得分將會更看重這些指標，因此很是值得關注。java

第一天 CDS 的大部分時間都是圍繞着這些指標進行討論的，主要內容是如何跟蹤並解決常見問題。若是想了解更多細節能夠看這兩個視頻：程序員

State of speed tooling (by Elizabeth Sweeny and Paul Irish)
Fixing common Web Vitals issues (by Katie Hempenius)

新CSS屬性的性能

繼續以性能爲主題，還有能給你網頁提供更好性能的新 CSS 功能。web

content-visibility 屬性容許咱們告訴瀏覽器應該在什麼時候去渲染元素。若是值是 auto，它就告訴瀏覽器在視口可見以前先不要渲染元素。這意味着若是瀏覽器最開始只須要渲染首屏的內容，那麼將會將大大加快頁面加載的速度。在 Jake Archibald 的演講 Beyond fast 中，他提到僅經過這個屬性，就把 HTML Standard 佈局時間從 50秒變爲 400 毫秒！面試

爲了防止潛在的「累積佈局偏移」的問題， content-visibility 屬性須要與 contain-intrinsic-size 屬性協同工做。因爲瀏覽器並未徹底加載元素，所以在須要渲染元素時可能會發生一些變化。爲了最大程度地減小頁面上發生的移位，即便沒有渲染內容，也能夠用 contain-intrinsic-size屬性指定元素的尺寸。chrome

.below-fold-element { 
    content-visibility: auto; 
    contain-intrinsic-size: 0 500px; /* set height to 500px */ 
}

你能夠把這個屬性想像成經過爲媒體元素添加 width 或 height 的方式來保留空間，以便在最終加載媒體時頁面不會發生位移。json

這些屬性已經在最新的 Chrome 以及 Edge 中提供支持了。

發佈現代 Javascript 代碼

根據Houssein Djirdeh 和 Jason Miller 在過渡到現代 JavaScript（Transitioning to modern JavaScript）的演講中的觀點，超過 90％的網絡流量來自支持 ES2017 的瀏覽器。這意味着從技術上講，咱們能夠將類、箭頭函數和async/await 之類的功能直接傳送到不須要進行代碼轉換的瀏覽器。

也就是說，咱們仍然須要找出一種方法來同時處理這 90％和剩下 10％的狀況。並且鑑於大多數瀏覽器都支持現代 javascript，所以解決方案不僅是將已轉換的代碼發送給全部瀏覽器，咱們應該同時擁有程序文件的現代版和舊版，並用如下的支持爲他們提供服務：

`type = module`

這不徹底是新東西，有一種基於瀏覽器支持來提供不一樣文件的方法，在現代文件的腳本標籤上使用 type = "module"，併爲舊文件指定 nomodule 屬性。

<script type="module" src="modern.js"></script> 
<script nomodule src="legacy.js"></script>

支持 type = "module" 的瀏覽器將會加載該文件，而舊版瀏覽器則忽略這個文件。

Package `exports`

如今能夠在 package.json 文件中用 exports 鍵定義另外一個「主」腳本文件了。

{ 
    "name": "my-package", 
    "exports": "./modern.js", 
    "main": "./legacy.js" 
}

Node 12.8 及更高版本中支持這個 exports 字段，這意味着它支持 ES2019 及以後的語法。

選項卡式桌面 PWA

在臺式機上的 PWA 中添加了許多新功能。其中最實用的一個是能夠將這些應用程序集中到選項卡化中了。

這是經過 Web manifest 中的 display_override 字段實現的，咱們能夠按優先級指定要使用的顯示模式的列表。

{ 
    "display": "standalone", 
    "display_override": ["tabbed", "minimal-ui"], 
}

這樣以來就能在 PWA 中建立選項卡了，對於臺式機 PWA，這將會是一項關鍵功能。

另外一個有意思的新 API 可使咱們在登陸設備時啓動桌面 PWA。

if (navigator.runOnOsLogin) { 
 
    navigator.runOnOsLogin.set({ mode: "windowed" }) 
        .then(() => { 
            // Permission approved 
        }); 
 
}

即將推出的新 API 還有：