The Chrome team: how to save KPI curve

Hi everyone, this is Kasong.

When talking about Chrome , what was your first reaction?

The browser with the largest market share? The famous V8 engine? DevTools browser debugging-060ff76be85b74?

For the Chrome team members, the first reaction is likely to be these two indicators (KPI):

• UX (user experience) user experience
• DX (developer experience) developer experience

As a developer, I believe you can feel many improvements around these two indicators:

• The iteration of the underlying V8 and webassembly
• Quantitative analysis of UX and DX lighthouse
• Chrome rapid support for the new features of the ES

When everything is done to the extreme, what else can be mined around these two indicators ( KPI can be written in 060ff76be85e9e)?

Let's take a look at what the Chrome team has done to save the country in order to have a better web

Logically

The logic here is this:

1. Most of the web projects in the world today rely on open source tools
2. Better open source tools bring better web experience

According to this logic, as long as we (the Chrome team) cooperate with open source projects to make them better, that is to web experience (which can also save KPI ).

Therefore, you only need to select the right project and start in-depth cooperation UX , DX

Next, let's take a look at some projects that work Chrome

Cooperation with Next.js

Next.js a full-featured production framework based on React SSR function has been in deep cooperation React

Chrome team based SSR this scenario, as Next.js a series of custom Timing API .

The new Timing API will include SSR related indicators into the statistics (such as hydrate time).

At the same time, the LightHouse tool can collect more SSR related data for reference:

Cooperation with Babel

We often use @babel/preset-env ES syntax into ES5 syntax according to the target browser version.

The realization idea of this kind of downgrade compilation is: each high-level grammar can be regarded as a collection of one or more grammar conversions.

When high-level grammars are encountered, they are replaced by implementations of these grammatical conversions.

For example: function parameters as deconstructed, parameter default values, set of remaining three characteristic parameters. For the following source code:

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

The output compiled by @babel/preset-env three features: 160ff76be868b4 deconstruction, parameter default values, and remaining parameters:

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

As you can see, the total amount of code after compilation has surged!

Modern browsers may already support some advanced grammars more or less, but the support is not good.

So, a better idea is:

Replace unsupported grammar with already supported grammar

In this way, the feature can be omitted to implement the part of the code.

For the grammar in the above example, only one modern browser does not support it bug

The solution is: replace { a = 1 } with { a: a = 1 } .

Therefore, the above code only needs to be compiled into the following form to run in modern browsers:

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

Comparing the two compilation results, the latter reduces the amount of code by 80% compared with the former!

The optimization space brought about by this difference between browsers is Babel team to complete alone.

Therefore, the Chrome team developed @babel/preset-modules cooperation with it, and it has been integrated into @babel/preset-env bugfixes parameter.

Cooperation with React

As the most important view library React has been looking for optimization space at runtime.

navigator.scheduling.isInputPending API is the product of its cooperation with the Chrome

The API returns a function. After calling this function, if there is currently a input event being scheduled, it returns true .

For example, in the following example, when there are mouse and keyboard events being dispatched, the execution of the JS

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

The input of the input box can be rendered by the browser faster, which significantly reduces the browser frame adjustment (shown as the input content of the input box is stuck).

Summarize

The tree is moved to die, the man is moved to live.

When the project develops to a certain period and there is not much internal optimization space, it needs to take the initiative. other vertical fields, focuses on the user perception track, and uses multiplexing to achieve lasting benefits!

The human thing is: go to other teams more, KPI will have it.

Have you learned it?