共计 1934 个字符，预计需要花费 5 分钟才能阅读完成。
大家好，我是卡颂。
当聊到Chrome，你第一反馈是啥？
市占率第一的浏览器？鼎鼎大名的 V8 引擎？浏览器调试的标配——DevTools？
对于 Chrome 团队成员来说，第一反馈很可能是这两个指标（KPI）：
- UX（user experience）用户体验
- DX（developer experience）开发者体验
作为开发者，置信你能感触到诸多围绕这两个指标的改良：
- 底层
V8、webassembly引擎的迭代 lighthouse工具对UX、DX指标的定量分析Chrome对ES规范新个性的疾速反对
当所有都做到极致后，围绕这两个指标还有什么可开掘的呢（KPI能写啥呢）？
让咱们一起看看 Chrome 团队为了更好的 web 体验，做了哪些曲线救国的致力。
逻辑要顺
这里的逻辑是这样的：
- 当今世界大部分
web我的项目依赖开源工具 - 更好的开源工具带来更好的
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会有的。
你，学会了么？
