本次分享分为两部分内容：性能指标概念和使用、前端渲染演进

性能指标概念

背景

程序员通过编写代码我们能够将webApp运行上线，我们兴奋之余不禁要思考用户访问我们的服务渲染快不快？如何进一步提升访问速度？如果某些页面渲染缓慢是什么原因造成的？

因此 前端性能监控 是前端进阶必备。性能指标是一块完整的知识体系，本次就简单入门。

什么是性能指标？我们从jQuery时代就了解有两个事件节点关乎页面性能：

  • DOMContentLoaded
  • Load

再比如，我们很容易想到在执行一些操作的时候，通过设置时间戳，执行结束之后对时间戳做减法得出页面渲染时长。

以上这些随着发展，已经有更好、更精确的测量方式。

我们现在谈及性能指标，会关注两部分内容：

  • 从输入完网址到渲染到页面，哪些环节耗时多少？
  • 每一项资源加载耗时多少？

这里自然就会引入 performance 这个全局对象

window.performance

Performance 接口可以获取到当前页面中与性能相关的信息。它是 High Resolution Time API 的一部分，同时也融合了 Performance Timeline API、Navigation Timing API、 User Timing API 和 Resource Timing API。 — 来自 MDN

timing

具体详见
https://www.yuque.com/xinbao37/high_performance/ab5vg9

getEntries

performance.getEntries()