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个图表？

Answer 1

对问题的评论很好地总结了一下，但是我将更全面地记录下来，通常供那些偶然发现此问题的其他人参考

强制同步布局当页面设置影响元素布局的CSS属性，然后某些JS查询元素的布局位置时，就会发生AKA强制重排。由于布局位置可能已更改，因此浏览器需要重新计算位置。

您可以在https://csstriggers.com/检查哪些属性导致布局

如果恰好是导致布局的代码，那么您希望对其进行重构，以避免设置布局然后查询位置

但是可能不是您的代码导致了强制同步布局。在“ 强制重新计算”下，您可以看到导致FSL的代码行。单击链接会将您带到该行代码。

您可以在分析运行时性能入门中学习使用DevTools诊断FSL的基础知识。

您可以在“ 避免强制同步布局”中了解有关FSL理论的更多信息。