大家好，我是卡頌。

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

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

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

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

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

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

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

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

邏輯要順

這里的邏輯是這樣的：

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

更好的開源工具帶來更好的web體驗(yàn)

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

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

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

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

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

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

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

與Babel合作

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

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

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

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

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

經(jīng)過@babel/preset-env編譯后的輸出包含了解構(gòu)、參數(shù)默認(rèn)值、剩余參數(shù)這3個(gè)特性的實(shí)現(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]; 
}; 

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

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

所以，一個(gè)更好的思路是：

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

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

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

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

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

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

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

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

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

與React合作

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

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

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

比如如下例子，當(dāng)有鼠標(biāo)、鍵盤事件在調(diào)度時(shí)，暫停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)項(xiàng)目發(fā)展到一定時(shí)期，沒有多少內(nèi)部可優(yōu)化空間時(shí)，需要主動(dòng)出擊，賦能其他垂直領(lǐng)域，聚焦用戶感知賽道，采用復(fù)用打法達(dá)成持久收益!

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

你，學(xué)會(huì)了么?