建议购买原文，前端性能优化原理与实践，本文学习总结用。如有侵权，感谢联系，删除。

1、性能检测篇

性能监测方案主要有两种：可视化方案、可编程方案

1)、 Performance 面板

Performance 是 Chrome 提供给我们的开发者工具，用于记录和分析我们的应用在运行时的所有活动。它呈现的数据具有实时性、多维度的特点，可以帮助我们很好地定位性能问题。

当我们选中图中所标示的实心圆按钮，Performance会开始帮我们记录我们后续的交互操作；
当我们选中圆箭头按钮，Performance会将页面重新加载，计算加载过程中的性能表现。

详细内容见原文，有详细介绍参数
tips：使用 Performance 工具时，为了规避其它 Chrome 插件对页面的性能影响，我们最好在无痕 模式下打开页面

2)、可视化监测：更加聪明的 LightHouse

Lighthouse 是一个开源的自动化工具，用于改进网络应用的质量。你可以将其作为一个 Chrome 扩展程序运行，或从命令行运行。为 Lighthouse 提供一个需要审查的网址，它将针对此页面运行一连串的测试，然后生成一个有关页面性能的报告。

Chrome 60 开始，DevTools 中直接加入了基于 LightHouse 的 Audits 面板：

3)、可编程的性能上报方案： W3C 性能 API

此外，Performance提供的可视化结果并不一定能够满足我们实际的业务需求，只有拿到了真实的数据，我们才可以对它进行二次处理，去做一个更加深层次的可视化。

访问 performance 对象

performance 是一个全局对象。我们在控制台里输入window.performance，就可一窥其全貌

performance 的 timing 属性

时间戳与页面整个加载流程中的关键时间节点有着一一对应的关系

const timing = window.performance.timing 
// DNS查询耗时
timing.domainLookupEnd - timing.domainLookupStart 
// TCP连接耗时
timing.connectEnd - timing.connectStart
// 内容加载耗时 
timing.responseEnd - timing.requestStart
···

除了这些常见的耗时情况，我们更应该去关注一些关键性能指标：ﬁrstbyte、fpt、tti、ready 和 load 时间。这些指标数据与真实的用户体验息息相关，是我们日常业务性能监测中不可或缺的一部分

// firstbyte：首包时间  
timing.responseStart – timing.domainLookupStart 
// fpt：First Paint Time, 首次渲染时间 / 白屏时间
timing.responseEnd – timing.fetchStart
// tti：Time to Interact，首次可交互时间 
timing.domInteractive – timing.fetchStart
// ready：HTML 加载完成时间，即 DOM 就位的时间 
timing.domContentLoaded – timing.fetchStart
// load：页面完全加载时间
timing.loadEventStart – timing.fetchStart

此外，通过访问 performance 的 memory 属性，我们还可以获取到内存占用相关的数据

笔记--性能优化--性能检测篇