JQuery在Dom + Performance中缓存Ajax请求

Question

我正在创建一个应用程序，当单击选项卡时，其内容通过ajax加载。 这样做的原因是加快初始页面加载，而不是加载不必要的选项卡内容。 选项卡包含表单项，其中值可以更改。

为了防止数据丢失，当加载一个标签时，我给它一个额外的“ajaxed”类。 如果单击选项卡“ajaxed”类不存在，则通过ajax加载内容，否则先前加载的内容将简单地呈现给用户。

Quesiton：在dom中缓存大量HTML会降低性能吗？ 这是不好的做法吗？ 这适用于无限滚动和其他类型的页面，您只需添加越来越多的html。 这种方法的缺点是什么？

提前致谢。

Answer 1

这取决于您的应用领域。 缓存 DOM 中某些选项卡的内容肯定没有坏处，只要这些选项卡中的dom元素数量有限。

事实上，使用选择器来查找DOM中元素的脚本会随着元素越多而越慢。 当访问者使用带有糟糕的JavaScript引擎的浏览器（如旧版Internet Explorer）时，这将更加明显。 此外，内存消耗将随着DOM元素的数量而增加。 因此，您不希望向DOM添加无限数量的项目。

对于无限滚动，一个好的做法是在向下滚动太远时卸载/删除项目，并在再次向上滚动时重新添加它们。

Answer 2

你的方法还可以。 除了从父元素中删除它之外，您不能最小化附加dom的内存使用量。

关注无限滚动的第二部分，有很多哲学，但重点是只缓存足够的数据，以提供完美的滚动体验。 但是你需要“破坏”以前创建的数据表示的dom elments，比如“太远了”。

Answer 3

像这样的一般性问题的明显答案是“它取决于”。 如果您正在尝试解决已知的性能问题，这可能是一个合适的解决方案。 延迟内容加载可以使网站对用户更敏感。 但是加载到页面中的内容越多，dom就会越慢，自然而然。 因此，一种显而易见的替代方法是为每个选项卡使用单独的页面（或页面“部分”）。 这样，一次只加载可见内容。 Ajax可用于呈现部分内容。 请记住，浏览器和服务器都将缓存内容，因此可能不需要额外的缓存或延迟加载策略。 但总是存在权衡取舍，因此它取决于您尝试解决的问题的性质（在不同的网站场景中将需要不同的解决方案）。 可维护性可能是决定如何分区/加载页面内容的另一个因素。

Answer 4

虽然与您的问题无关，但您使用此方法会丢失SEO，因为您没有针对每个内容的唯一网址。 如果您的网站是内部网站，则可能不是问题。