jQuery Mobile 在多大的 DOM 大小时会开始变得迟缓？添加数千个 LI 会损害性能吗？

Posted 2023-05-09

【中文标题】jQuery Mobile 在多大的 DOM 大小时会开始变得迟缓？添加数千个 LI 会损害性能吗？

【英文标题】：At what DOM size will jQuery Mobile start to get sluggish? Would adding thousands of LIs harm performance?

【发布时间】：2011-12-30 21:46:57

【问题描述】：

我们正在讨论在由 jQuery Mobile 提供支持的移动应用上显示设备联系人的两种方法。

我们正在为 iPhone 构建。

1) 在每次击键时，过滤原生代码中的联系人（通过 PhoneGap），并仅将匹配的联系人传递给 UIWebView。

2) 在加载时，将所有联系人传递给 UIWebView 并使用 jQuery 在 Web 应用程序中执行击键过滤。

#2 的优点是在初始延迟之后，每次搜索联系人的响应速度更快。缺点是加载所有联系人，这似乎很浪费。

更广泛的问题是：jQuery Mobile 会在多大的 DOM 大小时开始减速？例如，创建 2000 个 LI 元素（字符串长度约为 20 个字符）会显着降低性能吗？

【问题讨论】：

每个设备、每个浏览器引擎、每个代码实现都是不同的。您必须在相关设备上设计自己的测试并查看事情的执行情况——这不是我们也可以“知道”答案的事情。另一方面，我不知道您为什么将所有联系人都放在 DOM 中？这永远不会是最快或最节省内存的选项。您可以将它们全部放在 javascript 中并使用 JS 过滤它们，然后在 DOM 中显示相关的。

是的，您对 JS 的看法是正确的……所有的操作都应该发生在 JS 对象上，但更广泛的问题仍然存在：是否有关于维护 DOM 大小的粗略指南？

【参考方案1】：

最终，我认为您会发现在本机代码中进行过滤（选项 2）将比 ios 中的 Nitro 引擎提供的速度快得多。 jQuery Mobile 一直使用 400 个列表项作为他们的测试平台。 Release Candidate 3 已采取大量措施来提高列表项的性能。 iOS 和 android 都将在大约 1.5 秒内呈现 400 个列表。您可以在JQMs blog entry about RC3 上查看相关统计数据和细分

让我提出另一个建议。调用它，选项 3。在本机代码中执行所有过滤，它可能在几何上更快。然后，当您渲染列表视图时，将其渲染为预渲染列表视图。利用 jquery 移动 CSS，但不要使用 javascript 库呈现列表。只需预渲染内容，您就不必担心大量的 DOM 操作。

所以，与其渲染...

<ul data-role="listview">
     <li><a href="tel:[phone]">Lastname, Firstname</a></li>
     <li><a href="tel:[phone]">Lastname, Firstname</a></li>
<ul>

尝试直接渲染出来...

<ul data-role="listview" class="ui-listview">
    <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-hover-c ui-btn-up-c"><div class="ui-btn-inner ui-li" aria-hidden="true"><div class="ui-btn-text"><a href="index.html" class="ui-link-inherit">Acura</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li>
    <li data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li"><div class="ui-btn-inner ui-li" aria-hidden="true"><div class="ui-btn-text"><a href="index.html" class="ui-link-inherit">Audi</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li>
</ul>