我大量使用优秀的 jTemplates 插件来开发一个小型 Web 应用程序。
目前，我在初始页面加载时将所有模板加载到 DOM 中。
随着应用程序的增长，我得到了越来越多的模板——目前大约有 100kb 的价值。
因为我的应用程序都是基于 ajax 的，所以在初始页面加载后永远不需要刷新页面。在所有模板加载到 DOM 时，一开始会有几秒钟的延迟，但在那之后，应用程序的响应速度非常快。
我想知道：在这种情况下，使用 jTemplates processTemplateURL 方法根据需要延迟加载模板有什么显着优势，而不是在初始页面加载时批量加载所有模板？
（我不介意初始页面加载需要额外的 2 或 3 秒 - 所以我想我想知道 - 除了初始页面加载延迟之外，是否有任何理由不将大量 html 模板数据加载到 DOM 中? 在 DOM 中拥有大量数据是否会以任何方式影响性能？）
在此先感谢您的帮助。
根据 yahoo Best Practices for Speeding Up Your Web Site 文章，他们建议在 DOM 中不要有超过 500-700 个元素。
DOM 元素的数量很容易测试，只需在 Firebug 的控制台中输入：
document.getElementsByTagName('*').length
阅读更多http://developer.yahoo.com/performance/rules.html
就像一个装有 100 个弹珠的罐子，其中 10 个是红色的。从一罐 100 颗红色弹珠中很容易发现和挑选出 10 颗红色弹珠，但是如果那个罐子里有 1000 颗弹珠，则需要更多时间才能找到红色弹珠。将此与 DOM 元素进行比较，您选择的速度越慢，这将影响性能。
拥有一大堆额外的 DOM 元素不仅会影响您的初始加载时间，还会或多或少地影响页面上的所有内容。JavaScript DOM 查询会运行得更慢，插入会运行得更慢，CSS 会应用得更慢等等，因为整个标签汤被浏览器解析成 DOM 树，任何遍历该树都会受到影响。要衡量它会使您的页面变慢多少，您可以使用 DynaTrace AJAX 之类的工具，并使用当前代码运行一次，然后使用没有模板的代码运行一次。如果您注意到这两次运行在 JavaScipt 执行或渲染方面的巨大差异，您可能应该延迟加载（尽管 100kb 并没有那么多，所以您可能看不到显着差异）。
您确实应该优化 DOM 以节省内存并提高速度。但是，关键是要避免过早的优化。
你的目标平台是什么？您的用户最有可能使用哪些浏览器？
例如，如果您主要针对台式 PC 并且您的用户正在运行现代浏览器，那么您可能应该更喜欢代码的清晰和简单。
例如，如果您的目标是台式电脑但必须支持 IE6，那么 DOM 元素过多会影响您的性能，您应该考虑优化。
但是，如果您的目标是现代浏览器，但在带宽较差的区域（例如在游轮上等），那么您的带宽考虑可能会超过您的 DOM 考虑。
如果你的目标是 iPhone、iPad 等，那么内存是一种稀缺资源（就像 CPU 一样），所以你绝对应该优化 DOM。此外，在移动设备上，由于带宽问题，您将更加重视优化 AJAX 有效负载，而不是其他任何事情。您将更加重视减少AJAX 调用的数量而不是节省 DOM 元素。例如，出于带宽考虑，您可能只想加载更多的 DOM 元素以减少 AJAX 调用的数量——同样，只有您可以决定正确的平衡。
所以答案真的是：取决于。在快速连接的现代浏览器环境中，除非您的 DOM 变得非常庞大，否则没有真正需要过早优化。在慢速连接或移动环境中，在 DOM 优化之前过度重视带宽优化，但也要优化 DOM 节点数。