javascript - DOM 中有大量数据会影响性能吗，我应该延迟加载吗

Question

我大量使用优秀的 jTemplates 插件来开发一个小型网络应用程序。

目前，我在初始页面加载时将所有模板加载到 DOM 中。

随着应用程序的不断发展，我得到了越来越多的模板 - 目前大约值(value) 100kb。

因为我的应用程序都是基于 ajax 的，所以在初始页面加载后永远不需要刷新页面。当所有模板都加载到 DOM 中时，一开始会有几秒钟的延迟，但此后应用程序的行为非常灵敏。

我想知道:在这种情况下，使用 jTemplates processTemplateURL 方法根据需要延迟加载模板，而不是在初始页面加载时批量加载所有模板，是否有任何显着优势？

(我不介意初始页面加载需要额外的 2 或 3 秒 - 所以我想我想知道 - 除了初始页面加载延迟之外，是否有任何理由不加载大量 html 模板数据到 DOM 中？在 DOM 中拥有大量数据是否会以任何方式影响性能？)

(提前)感谢您的帮助。

Answer 1

根据 yahoo Best Practices for Speeding Your Web Site 文章，他们要求 DOM 中的元素不要超过 500-700 个。

DOM元素的数量很容易测试，只需在Firebug的控制台输入:

document.getElementsByTagName('*').length

阅读更多 http://developer.yahoo.com/performance/rules.html

就像一个装有 100 颗弹珠的 jar ，其中 10 颗是红色的。从一 jar 100 颗红色弹珠中找出并挑选 10 颗红色弹珠很容易，但如果那个 jar 里有 1000 颗弹珠，则要花更多时间才能找到红色弹珠。将此与 DOM 元素进行比较，您的选择越多，速度就越慢，这将影响性能。