Stories

Detail Return Return

2020 年 Chrome 開發者峯會的亮點 - Stories Detail

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

所有的回放在這裏：https://developer.chrome.com/...

通過“Core Web Vitals”簡化了性能指標

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

為了解決這個問題，Chrome 小組稱提供了名為“Core Web Vitals”的解決方案。下面是三個性能指標，它們是跟蹤以下關鍵要素：

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

image.png

展望未來，Lighthouse 性能得分將會更看重這些指標，所以非常值得關注。

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

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

新CSS屬性的性能

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

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

為了防止潛在的“累積佈局偏移”的問題， content-visibility 屬性需要與 contain-intrinsic-size 屬性協同工作。由於瀏覽器並未完全加載元素，因此在需要渲染元素時可能會發生一些變化。為了最大程度地減少頁面上發生的移位，即使沒有渲染內容，也可以用 contain-intrinsic-size屬性指定元素的尺寸。

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

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

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

image.png

發佈現代 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，這將會是一項關鍵功能。

image.png

另一個有意思的新 API 可以使我們在登錄設備時啓動桌面 PWA。

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

即將推出的新 API 還有：

  • 文件處理 API
  • 通知觸發器 API
  • 數字商品 API
  • 本地字體API

PJ Mclachlan 在演講桌面上的下一代Web應用程序中進一步探討了這些功能。

173382ede7319973.gif

本文首發微信公眾號：前端先鋒

歡迎掃描二維碼關注公眾號，每天都給你推送新鮮的前端技術文章

歡迎掃描二維碼關注公眾號，每天都給你推送新鮮的前端技術文章

歡迎繼續閲讀本專欄其它高贊文章：

  • 深入理解Shadow DOM v1
  • 一步步教你用 WebVR 實現虛擬現實遊戲
  • 13個幫你提高開發效率的現代CSS框架
  • 快速上手BootstrapVue
  • JavaScript引擎是如何工作的？從調用棧到Promise你需要知道的一切
  • WebSocket實戰：在 Node 和 React 之間進行實時通信
  • 關於 Git 的 20 個面試題
  • 深入解析 Node.js 的 console.log
  • Node.js 究竟是什麼？
  • 30分鐘用Node.js構建一個API服務器
  • Javascript的對象拷貝
  • 程序員30歲前月薪達不到30K，該何去何從
  • 14個最好的 JavaScript 數據可視化庫
  • 8 個給前端的頂級 VS Code 擴展插件
  • Node.js 多線程完全指南
  • 把HTML轉成PDF的4個方案及實現
  • 更多文章...
Javascript , 前端 , chrome , Css , pwa
Favorites

Add a new Comments

Some HTML is okay.