javascript - 显示隐藏的 DIV 与通过 AJAX 获取内容

Question

我正在使用fancyBox向我正在构建的应用程序的用户显示菜单/对话。框中显示的内容是 HTML - 我可以全部在 JS 中生成，并在需要时将其放入隐藏的 div 中显示，或者在打开 fancyBox 时进行 AJAX 调用以获取内容。

在一个页面中有一堆隐藏的 div 有什么缺点吗（移动浏览器上的性能问题等）？我更喜欢这样做，因为用户体验显然会更快。

Answer 1

一般来说，您应该尽快加载信息，因为完成请求的时间是大多数 Web 应用程序的主要瓶颈。这里的问题不是 html，而是除了 html 之外还请求的资产（例如图像、视频等）。这些会占用内存，并且可能会减慢初始页面加载时间，因为您可能会通过加载（尚）不可见的图像来阻止可见的图像加载。要确定这些问题中的任何一个是否存在问题，您实际上别无选择，只能在目标设备上进行测试。但是，在您的情况下，您实际上并没有通过稍后获取资产来节省任何内存，因为它们最终仍会在某个时候被获取，因此浏览器必须能够处理最终加载的所有内容 - 因此你不妨一开始就拥有它们。如果页面加载时间是一个问题，您仍然可以推迟加载资产，但只能在 dom 呈现之前，而不是等到需要隐藏的 div。这样您就不会阻止页面加载，但在需要时仍然拥有资产。例如在 JQuery 中：

$(function() {
  $('#hiddenDiv').html(hiddenContent);
});

在将引用它们的 html 添加到 dom 之前，不会请求资产（图像等）。