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

Question

我有一个页面，其中我使用 morris.js 插件显示 23 个 donut chart 。在性能分析期间，我遇到了这个:


当然还有 22 个以上的警告。结果时间为 401 毫秒。
我对每个 donut chart 的实现如下:

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

对这个问题的评论总结得很好，但我只会更全面、更普遍地为其他任何偶然发现这个问题的人记录这一点

强制同步布局 AKA 强制重排发生在页面设置了影响元素布局的 CSS 属性，然后一些 JS 查询元素的布局位置。由于布局位置可能已经改变，浏览器需要重新计算位置。

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

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

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

您可以在 Get Started With Analyzing Runtime Performance 中学习使用 DevTools 诊断 FSL 的基础知识。

您可以在 Avoid Forced Synchronous Layouts 中了解有关 FSL 理论的更多信息。