利用Chrome的Performance工具排查页面性能问题（原叫timeline）

Posted 2020-10-12

当页面中发生卡顿，最先考虑的是swf文件造成的卡顿，经过排查发现不是swf造成的影响，利用Chrome的Performance工具发现页面中的一些元素不断在重新布局，造成潜在的性能瓶颈。

1. 首先在Chrome中进入隐身模式，然后再在Chrome中打开开发者调试窗口，切换至Performance标签进行性能排查（它相当于一些IDE中的Profile）

2. 当采样至一定的时间段后，点击暂停，浏览器会生成如下的图表，发现，图表最上层有大量的红点，这是Chrome给出的可能的性能瓶颈点，在它下面绿色的起伏状线条则是浏览器在那时的帧频(fps)，可见非常之低，点击任意红点，发现造成性能瓶颈的原因主要就是layout(重新布局)，而可能的代码问题则定位到了JQuery，假设JQuery没有问题，那很有可能就是调用JQuery的代码有问题，排查后发现是前端使用jQuery在不断滚动一个含有1000条list item的容器，而实际显示的只是10条左右的list item（原因是后端返回了1000条数据，这里的问题在于前端直接按照一条数据对应一条实际的元素的操作方式有问题。）

3. 最简单的处理方式，是减少返回的数据量，当减少至100条时，几乎就没有什么瓶颈点了，代表绿色的帧频线恢复了。

//在页面中的Console控制台查看JQuery版本
console.log(jQuery.fn.jquery); //1.7.1