前端八股文-性能指标和优化（2）目标之：加载，交互，WebPageTest Lighthouse介绍使用Chrome DevTools 分析性能，RAIL 模型测量性能，响应，动画，空闲时间，加载，

性能指标和优化目标之：加载

性能指标：我们在性能优化过程中可以参考的标准。这些标准都是业界或者前人总结出来的指导性经验。我们可以参考这些指标，去指导我们自己的优化。

打开网站的初体验
我们以淘宝网站为例，按下F12打开浏览器的调试模式。
鼠标右键点击“刷新”图标（或者鼠标长按刷新图标，松开鼠标后），会弹出三个选项，我们选择最后一个选项“清空缓存并硬性重新加载”。

补充：这三个选项都是在调试模式下（按下F12弹出调试面板）才会出现的。

浏览器的DevTools初印象：

上图中，打开 chrome 调试工具，点开「设置」icon，下面的四个选项中，除了“Group by frame”之外，其他的三个选项都可以勾选上。

我们可以看到淘宝网站的一些指标：

总资源量是 1.3M。
DOM加载完成时间（DOMContentLoaded）：511ms。这是一个很关键的指标。
其他资源的总加载时间是 1.05秒。

保存快照
network里的信息挺