各區域內容說明
Performance選項卡可以用於分析頁面效能。
最上方紅框區域內出現紅色塊的代表該時間段幀率不足60幀。
往下是cpu佔用率。
卡頓原因主要耗時根據以下該圖進行分析。
問題分析
由此可見本次分析主要導致卡頓的原因是因為js的執行所導致的。
可以選擇時間區域進一步方法分析的時間段，從而分析更詳細的資訊。
該段區域表示渲染幀率的情況。
綠色是正常的，黃色是表示這一幀本來應該渲染的，但是沒有得到完整的渲染。部分渲染幀撒大聲地
可以透過該區域看到本段時間內所執行的任務。
透過Call Tree小選項卡從而進一步分析呼叫情況。
透過點選此處可以調到對應source選項卡，即可看到哪行程式碼所導致的執行時間。
從該呼叫樹可以看到大概是因為事件高頻觸發導致資料變更引起響應式資料進行多次的渲染，引起了卡頓現象。
解決方案
該段程式碼主要是實現一個拖拽div進入一個vue-grid-layout區域，那麼我猜測是因為drag事件觸發頻率太高所導致，所以在觸發的事件加上一個節流函式(useThrottleFn)，降低觸發頻率來解決卡頓現象。
使用節流函式後卡頓現象明顯大幅下降。
最佳化前後對比
- 最佳化前
- 最佳化後
