javascript - 我是否应该延迟加载DOM中包含大量数据会影响性能?

原文 标签 javascript jquery dom lazy-loading jtemplates

我在小型Web应用程序中大量使用了出色的jTemplates插件。

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

随着应用程序的增长,加班时间我已经获得了越来越多的模板-目前价值约100kb。

因为我的应用程序都是基于Ajax的,所以在初始页面加载后就无需刷新页面。当所有模板都加载到DOM时,开始时会有几秒钟的延迟,但是此后应用程序的响应速度非常快。

我想知道:在这种情况下,使用jTemplates processTemplateURL方法按需延迟加载模板有什么显着的优势,而不是仅在初始页面加载时批量加载所有模板?

(我不介意初始页面加载会花费额外的2或3秒-所以我想我想知道-除了初始页面加载延迟外,是否有任何理由不将大量html模板数据加载到DOM中?DOM中包含大量数据是否以任何方式影响性能?)

在此先感谢您的帮助。

最佳答案

您确实应该优化DOM,以节省内存并提高速度。但是,关键是要避免过早的优化。

您的目标平台是什么?您的用户最有可能使用哪种浏览器?

例如,如果您主要针对台式机,而您的用户正在运行现代浏览器,那么您可能应该更喜欢代码的简洁性。

例如,如果您的目标是台式机但必须支持IE6,则DOM元素过多会影响性能,因此您应该考虑优化。

但是,如果您定位的是现代浏览器,但在带宽较差的区域(例如在游轮上),则带宽方面的考虑可能会超过DOM注意事项。

如果您以iPhone,iPad等为目标,那么内存是一种稀缺资源(与CPU一样),因此您绝对应该优化DOM。此外,在移动设备上,由于带宽问题,与其他任何事情相比,您将在优化AJAX有效负载方面给予更多的重视。与节省DOM元素相比,您将在减少AJAX调用次数上有更多的权重。例如,出于带宽考虑,您可能只想加载更多DOM元素,以减少AJAX调用的次数-同样,只有您可以决定适当的平衡。

因此,答案确实是:取决于。在快速连接的现代浏览器环境中,除非DOM变得非常庞大,否则不需要过早优化。在慢速连接或移动环境中,带宽优化优先于DOM优化,但是也会对DOM节点数进行优化。

关于javascript - 我是否应该延迟加载DOM中包含大量数据会影响性能?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5400589/

相关文章:

javascript - Javascript遍历对象并从数组中创建丢失的对象

javascript - Froala编辑器-自定义对话框

php - 如何解析部分 HTML?

javascript - 如何更改搜索栏的表单操作属性

javascript - 手动设置event.target

javascript - jQuery函数只能在Internet Explorer中正常工作

javascript - 使用JavaScript显示和隐藏div,并使用AJAX附加到URL

javascript - 需要时水平滚动列表中心

javascript - Vanilla JavaScript中的滚动动画仅适用于导航链接

javascript - 使用Javascript window.open和jQuery提交表单