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属性时会发生AKA强制回流，然后某些JS会查询元素的布局位置。由于布局位置可能已更改，因此浏览器需要重新计算位置。

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

查看哪些属性导致布局

如果恰好是您的代码导致布局，那么您想重构它以避免设置布局然后查询位置

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

您可以在Get Started With Analyzing Runtime Performance

中学习使用DevTools诊断FSL的基础知识

您可以在Avoid Forced Synchronous Layouts

中了解有关FSL理论的更多信息

devtools警告 - 强制回流可能是性能瓶颈 - morris.js

1 个答案: