Chrome團隊：如何曲線拯救KPI

你們好，我是卡頌。

當聊到Chrome，你第一反應是啥？

市佔率第一的瀏覽器？鼎鼎大名的V8引擎？瀏覽器調試的標配——DevTools？

對於Chrome團隊成員來講，第一反應極可能是這兩個指標（KPI）：

• UX（user experience）用戶體驗

• DX（developer experience）開發者體驗

做爲開發者，相信你能感覺到諸多圍繞這兩個指標的改進：

• 底層V8、webassembly引擎的迭代

• lighthouse工具對UX、DX指標的定量分析

• Chrome對ES標準新特性的快速支持

當一切都作到極致後，圍繞這兩個指標還有什麼可挖掘的呢（KPI能寫啥呢）？

讓咱們一塊兒看看Chrome團隊爲了更好的web體驗，作了哪些曲線救國的努力。

邏輯要順

這裏的邏輯是這樣的：

1. 當今世界大部分web項目依賴開源工具

2. 更好的開源工具帶來更好的web體驗

按照這個邏輯，只要咱們（Chrome團隊）與開源項目合做，讓他們變得更好，那就是爲更好的web體驗作貢獻（也就能拯救KPI了）。

因此，只須要挑選合適的項目，根據其適合的優化類型（UX、DX），展開深度合做就行。

接下來，讓咱們看看一些與Chrome團隊合做的項目。

與Next.js合做

Next.js做爲基於React的全功能生產可用框架，其SSR功能一直與React團隊深度合做。

Chrome團隊基於SSR這一場景，爲Next.js定製了一系列Timing API。

新Timing API將SSR相關指標歸入統計（好比hydrate時間）。

同時，LightHouse工具能夠收集更多SSR相關數據供參考：

與Babel合做

咱們經常使用@babel/preset-env根據目標瀏覽器版本將高級ES語法編譯爲ES5語法。

這種降級編譯的實現思路爲：每一個高級語法能夠看做一或多個語法轉換的集合。

在遇到高級語法時，將其替換爲這些語法轉換的實現。

舉個例子：函數參數能夠做爲解構、參數默認值、剩餘參數這3個特性的集合。對於以下源代碼：

const foo = ({ a = 1 }, b = 2, ...args) => [a,b,args];
複製代碼

通過@babel/preset-env編譯後的輸出包含了解構、參數默認值、剩餘參數這3個特性的實現：

const foo = function foo(_ref, b) {
 let { a = 1 } = _ref;

 if (b === void 0) { b = 2; }

 for (
   var _len = arguments.length,
     args = new Array(_len > 2 ? _len - 2 : 0),
     _key = 2;  _key < _len; _key++
 ) {
   args[_key - 2] = arguments[_key];
 }

 return [a, b, args];
};
複製代碼

能夠看到，編譯後整體代碼量激增！

某些高級語法，現代瀏覽器可能或多或少已經支持了，只是支持度很差。

因此，一個更好的思路是：

將不支持的語法替換爲已支持的語法

這樣就能省去特性實現這部分代碼。

對於以上例子中的語法，只有一款現代瀏覽器因爲自身bug致使不支持。

解決辦法是：將{ a = 1 }替換爲{ a: a = 1 }。

因此，以上代碼只需編譯爲以下形式在現代瀏覽器都能運行：

const foo = ({ a: a = 1 }, b = 2, ...args) => [a,b,args];
複製代碼

對比兩種編譯結果，後者較前者代碼量減小80%！

這種瀏覽器間差別帶來的優化空間，Babel團隊很難獨自完成。

因此，Chrome團隊與其合做開發了@babel/preset-modules，而且已經做爲bugfixes參數集成到@babel/preset-env中。

與React合做

做爲前端領域運行時最重的視圖庫，React一直在尋找運行時的優化空間。

navigator.scheduling.isInputPending API就是其與Chrome團隊合做的產物。

該API返回一個函數，調用該函數後若是當前有input事件正在調度，則返回true。

好比以下例子，當有鼠標、鍵盤事件在調度時，暫停JS線程執行：

while (workQueue.length > 0) {
  if (navigator.scheduling.isInputPending(['mousedown', 'mouseup', 'keydown', 'keyup'])) {
    break;
  }
  let job = workQueue.shift();
  job.execute();
}
複製代碼

輸入框的輸入可以更快被瀏覽器渲染，顯著減小瀏覽器調幀（表現爲輸入框輸入內容卡頓）。

總結

樹挪死，人挪活。

當項目發展到必定時期，沒有多少內部可優化空間時，須要主動出擊，賦能其餘垂直領域，聚焦用戶感知賽道，採用複用打法達成持久收益!

說人話就是：多去其餘團隊蹭蹭，KPI會有的。

你，學會了麼？