如何在使用JavaScript小部件时减少页面重构？
如何在使用JavaScript小部件时减少页面重构？
提问于 2009-08-14 15:26:42
很多JavaScript库都有用户界面小部件。
通常它们是在加载页面之后创建的。用户看到一个页面的重新流和部分页面的移动或改变外观。
如何减少页面加载时发生的重构量，特别是当我使用多个小部件时？
下面是一些例子。这些都是基本的，因此回流并不是那么糟糕，但它确实存在，特别是在清除缓存和缓慢的Internet连接的情况下：
- 粤3：主段落在菜单导航元素加载后向下移动。
- BBC萤火虫：将徽标加载为垂直列表，然后更改为Carousel控件。
- 粤2：表看起来很简单，然后突然改变了外观。
- jQuery DataTables插件：在重新设计和分页之前，整个表都会出现。
回答 3
Stack Overflow用户
回答已采纳
发布于 2009-08-15 03:52:50
使用大多数第三方脚本的问题是，它们将在JavaScript代码中为您完成添加类或重新格式化HTML的所有脏/忙工作。
绕过页面重绘的唯一方法是，要么按照其他人的建议来隐藏或显示，要么您必须让HTMLfor、控件和已启用的css类以及适当标记的HTML。
当我对小部件进行编码时，我将该功能构建在。我对开发人员说，如果他们不关心内容的闪光灯，或者他们可以编写后端代码，将小部件需要的特定HTML标记出来，他们就可以做简约主义的标记。
我不认为您列出的脚本有能力让代码已经标记，所以您可能被困在闪光灯的内容或进行隐藏。隐藏甚至可能会破坏脚本，这些脚本在呈现时依赖于定位数据！
Stack Overflow用户
发布于 2009-08-14 18:24:11
您可以：
( a)隐藏构成小部件的元素的可见性(例如，将“隐藏”值应用于其“可见性”)，直到它被完全初始化。
( b)在窗口的“加载”事件发生之前初始化小部件，例如在支持客户端的"DOMContentLoaded“事件上。这可能会减少任何闪烁。
Stack Overflow用户
发布于 2009-08-15 01:37:25
将所有内容封装到不可见的<div>中。然后在页面完全加载(使用onLoad事件)时使其可见。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1280658
复制相关文章
相似问题
腾讯云开发者
