2017-05-03 59 views
0

我有一個頁面,其中我使用morris.js插件顯示23個甜甜圈圖表。在性能分析期間,我遇到了這個問題: enter image description heredevtools警告 - 強制迴流是一個可能的性能瓶頸 - morris.js

當然還有22個這些警告。結果時間是401ms。
我的每一個圓環圖的執行情況如下:

Morris.Donut({ 
 
        element: 'element1', 
 
        resize: false, 
 
        data: [{ 
 
          label: "temp1", 
 
          value: temp1Value 
 
         }, 
 
         { 
 
          label: "temp2", 
 
          value: temp2Value 
 
         }, 
 
         { 
 
          label: "temp3", 
 
          value: temp3Value 
 
         } 
 

 
        ], 
 
        colors: ["#46BFBD", "#993366", "#993366"] 
 
       });

我的一些帖子,我應該分開寫入的讀取讀取。任何指針如何實現這個?考慮到所有23個圖表?

+0

我不熟悉這個特定的庫,但我看到相同的行爲在[morris.js主頁](http://morrisjs.github.io/morris.js/)上,它很可能沒有辦法解決這個問題:庫需要強制迴流來計算座標。 – wOxxOm

+0

非常感謝您的回答!我也檢查了morris.js網站,並在分析中發現了相同的警告。我用chart.js替換了morris.js用於我的甜甜圈圖表,並且我的頁面超級快捷! – novembersky

回答

1

的問題的意見概括起來相當不錯,但我只是記錄本更全面,更一般爲別人,在這個

強制同步佈局發生AKA強制迴流絆倒當一個頁面設置CSS屬性影響元素的佈局,然後一些JS查詢元素的佈局位置。由於佈局位置可能已經改變,瀏覽器需要重新計算位置。

您可以在https://csstriggers.com/

檢查什麼性質的事業佈局。如果碰巧是你的代碼是造成佈局,那麼你要重構它避免設置佈局然後查詢位置

但它可能不會您的代碼導致強制同步佈局。在重新計算強制您可以看到導致FSL的代碼行。點擊鏈接將您帶到該行代碼。

你可以學習使用診斷FSL DevTools的基礎知識Get Started With Analyzing Runtime Performance

而且你可以瞭解更多有關FSL的理論​​