Css 是否有一个合理的“限制”；显示：无“；预加载？

我正在设计一个单页网站。站点的所有部分都以DIV元素的形式弹出，因此它永远不会离开实际的浏览器页面。最初，我使用“display:none”使用css隐藏所有部分，导航会相应地显示和隐藏它们

现在我来整理公文包部分，我开始怀疑是否最好对每个公文包项目使用AJAX，因为它们包括较大的图像。对于预加载的合理极限有什么粗略的指导吗？如果所有项目都已预加载，HTML文件将看起来非常可怕

我意识到这是一个有点笼统的问题，感觉预装所有东西是个坏主意，但我不想凭直觉。我不太确定当元素设置为“显示：无”时，用户的计算机占用了哪些资源（例如，这是RAM问题吗？）

---

干杯！：）

将所有元素硬编码到HTML中的问题主要是文件的大小，以及用户下载HTML页面所需的时间。这取决于你的读者是谁，以及你希望他们如何访问页面。例如，大型HTML页面不适合移动设备

---

但是，您需要权衡AJAX脚本所需的文件大小是否大于实际硬编码HTML。

首先，现代浏览器（如Firefox、Chrome、IE等）内存巨大。用户可以越来越容易地设置它

---

在移动浏览器中，他们限制了大约10MB。您可以在此处阅读有关限制内存的更多信息：

正如@Digbyswift所提到的，拥有一个包含大量元素的大型HTML文件会增加页面大小，从而影响总体加载时间

对于较旧的浏览器，页面上的元素数量有着更为显著的影响，但你必须进入10到数千个元素的范围，才能开始达到上限

对于现代浏览器，元素数量上限并没有那么低，所以在这方面应该没有问题，但同样，如果您与元素进行大量javascript交互，则会降低功能较弱的客户端（如移动设备）的速度

在我看来，您正在处理的最大权衡是，通过使用一个大得多的页面而不是一堆单独的调用，您实际上是在用所需的较小响应的数量来交换单个服务器响应的大小。根据你的具体情况，这可能是一个有益的整体贸易，也可能不是

我想说的是，你需要测试它带来的差异，并以此为基础做出决定。影响这一点的一件事是对响应使用压缩（aka.GZip或Deflate）

---

另外，对于“公文包”，您提到有很多大图像。就个人而言，我可能不会在HTML中为该部分设置实际的

标记，以防止浏览器最初加载所有内容，而是根据需要加载图像，方法是在需要显示图像时使用javascript编写元素。有许多技术可以做到这一点，任何你可以在图像加载时添加更多的智能，但减少那些大型服务器调用将大大加快页面速度。甚至有可能，拥有一个庞大的HTML页面不会对性能造成影响，而且可能会使其速度更快。

感谢您的回复。那么你会说这是专门针对浏览器缓存的吗？因为所有的文件都保存在文档中而不是缓存中，这不是有点不同吗？没有。许多代码和许多不可冻结的变量会导致移动浏览器内存泄漏……感谢您如此深入的响应。根据您所说的，我认为我的直觉是正确的，最好使用AJAX加载公文包项目（因为图像），同时将所有其他项目保留在原始HTML文件中。我也很喜欢你的想法，分别为文件夹项目加载图像，这很可能是一个选择。为响应干杯，我没有真正考虑移动设备，因为设计的复杂性，它可能需要一个完全不同的移动模板。