Chrome团队:如何曲线拯救KPI

系统 浏览器
当聊到Chrome,你第一反应是啥?市占率第一的浏览器?鼎鼎大名的V8引擎?浏览器调试的标配——DevTools?

大家好,我是卡颂。

当聊到Chrome,你第一反应是啥?

市占率第一的浏览器?鼎鼎大名的V8引擎?浏览器调试的标配——DevTools?

对于Chrome团队成员来说,第一反应很可能是这两个指标(KPI):

  • UX(user experience)用户体验
  • DX(developer experience)开发者体验

作为开发者,相信你能感受到诸多围绕这两个指标的改进:

  • 底层V8、webassembly引擎的迭代
  • lighthouse工具对UX、DX指标的定量分析
  • Chrome对ES标准新特性的快速支持

当一切都做到极致后,围绕这两个指标还有什么可挖掘的呢(KPI能写啥呢)?

[[413378]]

让我们一起看看Chrome团队为了更好的web体验,做了哪些曲线救国的努力。

逻辑要顺

这里的逻辑是这样的:

当今世界大部分web项目依赖开源工具

更好的开源工具带来更好的web体验

按照这个逻辑,只要我们(Chrome团队)与开源项目合作,让他们变得更好,那就是为更好的web体验做贡献(也就能拯救KPI了)。

[[413379]]

所以,只需要挑选合适的项目,根据其适合的优化类型(UX、DX),展开深度合作就行。

接下来,让我们看看一些与Chrome团队合作的项目。

[[413380]]

与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个特性的集合。对于如下源代码:

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

经过@babel/preset-env编译后的输出包含了解构、参数默认值、剩余参数这3个特性的实现:

  1. const foo = function foo(_ref, b) { 
  2.  let { a = 1 } = _ref; 
  3.  
  4.  if (b === void 0) { b = 2; } 
  5.  
  6.  for ( 
  7.    var _len = arguments.length, 
  8.      args = new Array(_len > 2 ? _len - 2 : 0), 
  9.      _key = 2;  _key < _len; _key++ 
  10.  ) { 
  11.    args[_key - 2] = arguments[_key]; 
  12.  } 
  13.  
  14.  return [a, b, args]; 
  15. }; 

可以看到,编译后总体代码量激增!

某些高级语法,现代浏览器可能或多或少已经支持了,只是支持度不好。

所以,一个更好的思路是:

将不支持的语法替换为已支持的语法

这样就能省去「特性实现」这部分代码。

对于以上例子中的语法,只有一款现代浏览器由于自身bug导致不支持。

解决办法是:将{ a = 1 }替换为{ a: a = 1 }。

所以,以上代码只需编译为如下形式在现代浏览器都能运行:

  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线程执行:

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

输入框的输入能够更快被浏览器渲染,显著减少浏览器调帧(表现为输入框输入内容卡顿)。

总结

树挪死,人挪活。

当项目发展到一定时期,没有多少内部可优化空间时,需要主动出击,赋能其他垂直领域,聚焦用户感知赛道,采用复用打法达成持久收益!

说人话就是:多去其他团队蹭蹭,KPI会有的。

你,学会了么?

 

责任编辑:姜华 来源: 魔术师卡颂
相关推荐

2017-07-25 13:16:15

Linux负载经验

2022-11-07 16:42:35

KPI软件开发团队

2019-11-19 15:39:13

云计算数据中心KPI

2016-09-02 16:24:30

2018-08-27 16:41:07

KPI技术人

2009-11-23 09:12:32

Chrome OS台湾团队

2022-11-10 10:29:07

KPI软件开发

2010-02-06 09:36:46

gPadChrome

2009-11-25 11:13:56

Chrome OS开发

2013-03-16 14:20:24

Windows RT

2021-12-05 22:32:13

人工智能机器人技术

2023-08-01 08:26:32

2011-06-22 10:02:41

2023-06-02 22:36:02

鸿蒙弹簧动画曲线

2019-04-11 08:32:54

物联网工人安全IOT

2012-01-16 11:16:05

比尔·盖茨微软

2010-04-20 21:55:36

2020-07-31 17:08:12

物联网航空技术

2020-01-14 17:25:58

人工智能机器学习数据目录

2020-07-01 15:46:44

物联网航空业传感器
点赞
收藏

51CTO技术栈公众号