如何减少使用JavaScript小部件时的页面重排？

Question

很多JavaScript库都有用户界面小部件。

通常它们是在被加载后创建的。用户看到页面重新流动，页面的一部分转向或改变外观。

如何减少页面加载时发生的回流量，特别是如果我使用多个小部件？

下面是一些例子。这些都是很基本的，因此回流并没有那么糟糕，但它的存在，尤其是具有清除缓存和互联网连接速度较慢：

• YUI 3：主要段落菜单导航元素加载后转移下来。
• BBC Glow：徽标加载为垂直列表，然后更改为Carousel控件。
• YUI 2：表格显得平淡无奇，然后突然改变外观。
• jQuery DataTables Plugin：整个表格在重新分页和分页之前显示为纯文本。

Answer 1

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

解决页面重绘的唯一方法是执行其他人对隐藏和显示的建议，或者您必须具有已启用css类和正确标记HTML的控件的HTML。

当我编写小部件时，我在其中构建了这个功能。我向开发人员说，如果他们不关心内容的闪光，或者他们可以编写后端以便将spefic小部件需要HTML标记。

我不认为你列出的脚本有能力让代码被标记出来，所以你可能被卡住或者隐藏内容。 [隐藏甚至可能搞砸了渲染时依赖于定位数据的脚本！]

Answer 2

用户可以：

一个）构成一个部件，直到它被完全初始化的元件（例如施加“隐藏”值到它的“可见性”）的隐藏可视性。

b）在窗口的“加载”事件发生之前初始化窗口小部件，例如支持客户端的“DOMContentLoaded”事件。这可以最大限度地减少闪烁。

Answer 3

将所有东西都包裹成隐形<div>。然后使其在页面完成加载时显示（使用onLoad事件）。