我正在设计一个单页网站。该站点的所有部分都以模态方式在 DIV 元素中弹出，因此它永远不会离开实际的浏览器页面。最初，我使用“display：none”将所有部分隐藏在 css 中，导航会相应地显示和隐藏它们。
现在我开始整理投资组合部分，我开始怀疑是否最好对每个投资组合项目使用 AJAX，因为它们包含更大的图像。对于预加载的合理限制是否有任何粗略指南？如果所有项目都已预加载，那么 HTML 文件看起来会很怪异。
我意识到这是一个普遍的问题，感觉预加载所有内容是个坏主意，但我不想有预感。我不太确定当元素设置为“display:none”时用户计算机占用了哪些资源（例如，这是 RAM 问题吗？）。
干杯! :)
正如@Digbyswift 提到的，拥有一个包含大量元素的大型 HTML 文件会增加页面大小，这会影响整体加载时间。
对于较旧的浏览器，页面上的元素数量会产生 _much_more 明显的影响，但您必须进入成千上万的元素范围才能开始达到上限。
对于现代浏览器，元素计数上限没有那么低，所以在那里应该没问题，但同样，如果你与元素进行大量 javascript 交互，它会减慢功能较弱的客户端，例如作为移动设备。
在我看来，您正在处理的最大权衡是，通过拥有一个更大的页面而不是一堆单独的调用，您实际上是在用所需的较小响应数量来交换单个服务器响应的大小。根据您的具体情况，这可能是有益的整体交易，也可能不是。
我会说你需要测试它产生的差异并以此为基础做出决定。会影响这一点的一件事是对响应使用压缩（又名 GZip 或 Deflate）。
此外，对于“作品集”，您提到有很多大图像。就个人而言，我可能不会在该部分的 HTML 中包含实际<img />标签，以防止浏览器最初加载所有这些标签，而是根据需要通过使用 javascript 写入元素来加载图像，因为这些图像需要显示。有许多技术可以做到这一点，任何你都可以在图像加载时添加更多智能，但是减少那些大型服务器调用将大大加快页面速度。甚至有可能拥有一个庞大的 HTML 页面不会对性能造成影响，并且可能会使其更快。
将所有元素硬编码到 HTML 中的问题主要是文件的大小以及用户下载该 HTML 页面需要多长时间。这取决于您的受众是谁以及您希望他们如何访问该页面。例如，大型 HTML 页面不适合移动设备。
但是，您需要权衡 AJAX 脚本所需的文件大小是否比实际的硬编码 HTML 更大。
首先，现代浏览器（如 Firefox、Chrome、IE 等）有巨大的内存。用户可以越来越容易地设置它...
在移动浏览器中，它们限制在 10MB 左右。您可以在此处阅读有关限制内存的更多信息：http ://www.yuiblog.com/blog/2010/06/28/mobile-browser-cache-limits/