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