我正在创建一个应用程序，当单击选项卡时，它的内容是通过 ajax 加载的。这样做的原因是为了加快初始页面加载，而不是加载不必要的选项卡内容。选项卡包含可以更改值的表单项。
为了防止数据丢失，当一个标签被加载时，我给它一个额外的“ajaxed”类。如果“ajaxed”类不存在，则单击选项卡时，将通过 ajax 加载内容，否则将先前加载的内容简单地呈现给用户。
问题：在 dom 中缓存大量 HTML 会降低性能吗？这是不好的做法吗？这适用于无限滚动和其他类型的页面，您只需不断地附加越来越多的 html。这种方法的缺点是什么？
提前致谢。
这取决于您的应用领域。在 DOM中缓存某些选项卡的内容肯定不会有什么坏处，前提是这些选项卡中的 dom 元素的数量是有限的。
事实上，使用选择器在 DOM 中查找元素的脚本会越慢，元素越多。当您的访问者使用带有蹩脚 JavaScript 引擎的浏览器（如旧版本的 Internet Explorer）时，这对您的访问者来说会更加明显。此外，内存消耗会随着 DOM 元素的数量而增加。因此，您不想向 DOM 添加无限数量的项目。
对于无限滚动，一个好的做法是在向下滚动太远时卸载/删除项目，并在再次向上滚动时重新添加它们。
你的方法没问题。您不能最小化附加 dom 的内存使用量，除非将其从父元素中删除。
您关心的第二部分，关于无限滚动，有很多理念，但重点是只缓存足够的数据以提供完美的滚动体验。但是您需要“销毁”先前创建的用于数据表示的 dom 元素，例如“太远”。
像这样的一般性问题的明显答案是“视情况而定”。如果您正在尝试解决已知的性能问题，这可能是一个合适的解决方案。延迟内容的加载可以使网站对用户的响应更快。但是加载到页面中的内容越多，dom 自然就会越慢。因此，一个明显的替代方法是为每个选项卡使用单独的页面（或页面“部分”）。这样，一次只加载可见内容。Ajax 可用于呈现部分内容。请记住，浏览器和服务器也会缓存内容，因此可能不需要额外的缓存或延迟加载策略。但总会有取舍，因此这取决于您要解决的问题的性质（在不同的网站场景中将需要不同的解决方案）。可维护性可能是决定如何分区/加载页面内容的另一个因素。
虽然与您的问题无关，但您使用这种方法会失去 SEO，因为您没有每个内容的唯一网址。如果您的站点是内部站点，则这可能不是问题。