大家好，我是卡頌。

當(dāng)聊到Chrome，你第一反應(yīng)是啥?

市占率第一的瀏覽器?鼎鼎大名的V8引擎?瀏覽器調(diào)試的標(biāo)配——DevTools?

對于Chrome團(tuán)隊成員來說，第一反應(yīng)很可能是這兩個指標(biāo)(KPI)：

• UX(user experience)用戶體驗
• DX(developer experience)開發(fā)者體驗

作為開發(fā)者，相信你能感受到諸多圍繞這兩個指標(biāo)的改進(jìn)：

• 底層V8、webassembly引擎的迭代
• lighthouse工具對UX、DX指標(biāo)的定量分析
• Chrome對ES標(biāo)準(zhǔn)新特性的快速支持

當(dāng)一切都做到極致后，圍繞這兩個指標(biāo)還有什么可挖掘的呢(KPI能寫啥呢)?

讓我們一起看看Chrome團(tuán)隊為了更好的web體驗，做了哪些曲線救國的努力。

邏輯要順

這里的邏輯是這樣的：

當(dāng)今世界大部分web項目依賴開源工具

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

按照這個邏輯，只要我們(Chrome團(tuán)隊)與開源項目合作，讓他們變得更好，那就是為更好的web體驗做貢獻(xiàn)(也就能拯救KPI了)。

所以，只需要挑選合適的項目，根據(jù)其適合的優(yōu)化類型(UX、DX)，展開深度合作就行。

接下來，讓我們看看一些與Chrome團(tuán)隊合作的項目。

與Next.js合作Next.js作為基于React的全功能生產(chǎn)可用框架，其SSR功能一直與React團(tuán)隊深度合作。

Chrome團(tuán)隊基于SSR這一場景，為Next.js定制了一系列Timing API。

新Timing API將SSR相關(guān)指標(biāo)納入統(tǒng)計(比如hydrate時間)。

同時，LightHouse工具可以收集更多SSR相關(guān)數(shù)據(jù)供參考：

與Babel合作

我們常用@babel/preset-env根據(jù)目標(biāo)瀏覽器版本將高級ES語法編譯為ES5語法。

這種降級編譯的實現(xiàn)思路為：每個高級語法可以看作一或多個語法轉(zhuǎn)換的集合。

在遇到高級語法時，將其替換為這些語法轉(zhuǎn)換的實現(xiàn)。

舉個例子：函數(shù)參數(shù)可以作為解構(gòu)、參數(shù)默認(rèn)值、剩余參數(shù)這3個特性的集合。對于如下源代碼：

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

經(jīng)過@babel/preset-env編譯后的輸出包含了解構(gòu)、參數(shù)默認(rèn)值、剩余參數(shù)這3個特性的實現(xiàn)：

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]; 
}; 

可以看到，編譯后總體代碼量激增!

某些高級語法，現(xiàn)代瀏覽器可能或多或少已經(jīng)支持了，只是支持度不好。

所以，一個更好的思路是：

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

這樣就能省去「特性實現(xiàn)」這部分代碼。

對于以上例子中的語法，只有一款現(xiàn)代瀏覽器由于自身bug導(dǎo)致不支持。

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

所以，以上代碼只需編譯為如下形式在現(xiàn)代瀏覽器都能運行：

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

對比兩種編譯結(jié)果，后者較前者代碼量減少80%!

這種瀏覽器間差異帶來的優(yōu)化空間，Babel團(tuán)隊很難獨自完成。

所以，Chrome團(tuán)隊與其合作開發(fā)了@babel/preset-modules，并且已經(jīng)作為bugfixes參數(shù)集成到@babel/preset-env中。

與React合作

作為前端領(lǐng)域運行時最重的視圖庫，React一直在尋找運行時的優(yōu)化空間。

navigator.scheduling.isInputPending API就是其與Chrome團(tuán)隊合作的產(chǎn)物。

該API返回一個函數(shù)，調(diào)用該函數(shù)后如果當(dāng)前有input事件正在調(diào)度，則返回true。

比如如下例子，當(dāng)有鼠標(biāo)、鍵盤事件在調(diào)度時，暫停JS線程執(zhí)行：

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

輸入框的輸入能夠更快被瀏覽器渲染，顯著減少瀏覽器調(diào)幀(表現(xiàn)為輸入框輸入內(nèi)容卡頓)。

總結(jié)

樹挪死，人挪活。

當(dāng)項目發(fā)展到一定時期，沒有多少內(nèi)部可優(yōu)化空間時，需要主動出擊，賦能其他垂直領(lǐng)域，聚焦用戶感知賽道，采用復(fù)用打法達(dá)成持久收益!

說人話就是：多去其他團(tuán)隊蹭蹭，KPI會有的。

你，學(xué)會了么?