利用Chrome的Performance工具排查頁面性能問題（原叫timeline）
阿新 • • 發佈：2017-10-27
item 定位 query 瀏覽器 1.7 spa 最簡 就是 一定的
當頁面中發生卡頓，最先考慮的是swf文件造成的卡頓，經過排查發現不是swf造成的影響，利用Chrome的Performance工具發現頁面中的一些元素不斷在重新布局，造成潛在的性能瓶頸。
-
首先在Chrome中進入隱身模式，然後再在Chrome中打開開發者調試窗口，切換至Performance標簽進行性能排查（它相當於一些IDE中的Profile）
-
當采樣至一定的時間段後，點擊暫停，瀏覽器會生成如下的圖表，發現，圖表最上層有大量的紅點，這是Chrome給出的可能的性能瓶頸點，在它下面綠色的起伏狀線條則是瀏覽器在那時的幀頻(fps)，可見非常之低，點擊任意紅點，發現造成性能瓶頸的原因主要就是layout(重新布局)，而可能的代碼問題則定位到了JQuery，假設JQuery沒有問題，那很有可能就是調用JQuery的代碼有問題，排查後發現是前端使用jQuery在不斷滾動一個含有1000條list item的容器，而實際顯示的只是10條左右的list item（原因是後端返回了1000條數據，這裏的問題在於前端直接按照一條數據對應一條實際的元素的操作方式有問題。）
- 最簡單的處理方式，是減少返回的數據量，當減少至100條時，幾乎就沒有什麽瓶頸點了，代表綠色的幀頻線恢復了。
//在頁面中的Console控制臺查看JQuery版本
console.log(jQuery.fn.jquery); //1.7.1利用Chrome的Performance工具排查頁面性能問題（原叫timeline）