关于babel:Chrome团队如何曲线拯救KPI

大家好，我是卡颂。

当聊到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作为基于 React 的全功能生产可用框架，其 SSR 性能始终与 React 团队深度单干。

Chrome团队基于 SSR 这一场景，为 Next.js 定制了一系列Timing API。

新 Timing API 将SSR相干指标纳入统计（比方 hydrate 工夫）。

同时，LightHouse工具能够收集更多 SSR 相干数据供参考：

咱们罕用 @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始终在寻找运行时的优化空间。

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会有的。

你，学会了么？

关于babel:Chrome团队如何曲线拯救KPI

逻辑要顺

与 Next.js 单干

与 Babel 单干

与 React 单干

总结