jquery - 当 DOM 大小达到多少时，jQuery Mobile 就会开始变得迟缓？添加数千个 LI 会损害性能吗？

Question

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

我们正在为 iPhone 进行构建。

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

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

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

更广泛的问题是:当 DOM 大小达到多大时，jQuery Mobile 会开始变慢？例如，创建 2000 个 LI 元素(字符串长度约为 20 个字符)是否会显着降低性能？

Answer 1

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

让我提出另一个建议。称之为选项 3。在 native 代码中执行所有过滤，这可能会以几何倍数加快。然后，当您渲染 ListView 时，将其渲染为预渲染的 ListView 。利用 jquery mobile CSS，但不要使用 javascript 库呈现列表。只需预渲染内容，这样您就不必担心大量的 DOM 操作。

所以，不是渲染出来......

<ul data-role="listview">
     <li><a href="tel:9999999999">Lastname, Firstname</a></li>
     <li><a href="tel:9999999999">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>