devtools警告 - 強制リフローがパフォーマンスのボトルネックになる可能性があります - morris.js

Question

morris.jsプラグインを使用して23のドーナツチャートを表示しているページがあります。パフォーマンス分析中、私はこれを見つけました：

もちろん、これらの警告がさらに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のチャートをすべて検討していますか？ページのCSSプロパティを設定するとき

Answer 1

質問へのコメントはかなりよく、それをまとめるが、私はAKA強制リフローが発生し、この

強制同期のレイアウトにつまずく誰のためにこれより包括的かつ一般的に文書化するだけでしょうこれは要素のレイアウトに影響を与え、次にいくつかのJSは要素のレイアウト位置を問い合わせます。レイアウトの位置が変更されている可能性があるため、ブラウザは位置を再計算する必要があります。

その後、位置

を照会して、レイアウトを引き起こしているあなたのコードであることを起こる場合は、あなたがレイアウトを設定しないように、それをリファクタリングするプロパティがhttps://csstriggers.com/

でレイアウトを引き起こすかどうか確認することができますしかし、それはそうではありませんあなたのコードは、強制的な同期レイアウトを引き起こしています。 再計算強制の下に、FSLの原因となるコード行が表示されます。リンクをクリックすると、そのコード行に移動します。

あなたはGet Started With Analyzing Runtime Performance

でデベロッパーツールを使用してFSLの診断の基礎を学ぶことができますし、私は、この特定のライブラリに慣れていないよ​​