使用JavaScript小部件时如何减少页面回流?

当您使用大多数第三方脚本时,问题是它们会在添加类或重新格式化HTML的JavaScript代码中为您完成所有脏/忙的工作。

当我编写小部件时,我会在中构建该功能。我告诉开发人员,如果他们不关心内容的闪现,他们可以做最低限度的标记,或者他们可以编写他们的后端,以吐出小部件需要的特定HTML标记。

我不认为您列出的脚本已经能够标记代码,所以您可能会被内容的闪现所困扰,或者被隐藏。[隐藏甚至可能会破坏渲染时依赖定位数据的脚本!]

你可以:

a) 隐藏构成小部件的元素的可见性(例如,将“隐藏”值应用于其“可见性”),直到完全初始化为止。

b) 在窗口的“加载”事件发生之前初始化小部件,例如在支持客户端的“DOMContentLoaded”事件上。这可能会最小化任何闪烁。

把一切都包装成看不见的东西 <div> . 然后使其在页面完全加载时可见(使用 onLoad 事件)。