实际环境【chrome develop tool】

参考学习的资料时50 个 Chrome Developer Tools 必备技巧

移动端的抓包工具有

1. windows 推荐使用【fiddler】
2. mac推荐使用【charles,相关的教程推荐Charles 从入门到精通】

平时收藏的性能小案例

google的性能要点小知识JavaScript API

谷歌性能小案例

前端性能优化の备忘录（2018版)

小结

1. 使用网路分析工具找出加载脚本和页面中其他资源的瓶颈，这会帮助你决定哪些脚本需要延迟加载，或者需要进一步分析；

2. 尽管传统的经验告诉我们要尽量减少HTTP请求数，但把脚本尽可能延迟加载可以加快页面渲染速度，给用户带来更好的体验；

3. 使用性能分析工具找出脚本运行过程中速度慢的地方，检查每个函数所消耗的时间，以及函数被调用的次数，通过调用栈自身提供的一些线索找出需要集中精力优化的地方；

4. 尽管耗费的时间和调用次数通常是数据中最有价值的部分，但仔细颜观察函数的调用过程，就会找到更过的优化目标。