Sometimes persuade customer care under the front end performance, in order to develop in more plenty of time to do optimization, time difficult thing, after all, sometimes it’s hard to tell what did and do not optimize the differences in where, so literally, if performance quantitative done well, then the performance of work has been done more than half.

When we used to add new features to our customers, it would take weeks to get improved data, which was too long and made our revenue risk too high

Our need was to find a way to focus on the performance of each customer within the page’s head TAB, and not talk about “I think”, but to provide real data, quantifiable and intuitive data to make users recognize performance improvements.

Obtaining Performance Data

The first thing we can do is create a snapshot so that we can easily compare the difference before and after performance optimization. Chrome’s developer tool, the Performance TAB, provides a lot of useful information, but a graph like the one below is difficult for the uninitiated to understand.

Therefore, we decided to ditch Chrome DevTools’ Performance and instead use the browser’s Performance API to capture the underlying Performance information.

We need to take advantage of Chrome’s Overrides feature to inject snippets of JavaScript code into the target page

Here, we use two simple functions: performance.mark() and performance.measure(), which are also very simple to use

// Start your measure
performance.mark('begin');
// Put everything you want to measure between the marks
// Stop your measure
performance.mark('end');
// Calculate the time difference between your 2 marks
performance.measure('diff'.'begin'.'end');
// View the results in the Performance tab
// or output the results in the console using:
console.log(performance.getEntriesByType("measure"));
Copy the code

When we run performance. GetEntriesByType (” measure “), will get a similar result, can know time consuming information

More importantly, we can see the specific data in Timings of Chrome DevTools’ Performance

Where and are custom measures, we can see that Chrome has integrated performance. Measure.

conclusion

We can obtain performance data by performance. Mark and performance. Measure, and record the degree of performance optimization based on it.