我目前正在使用 PHP + MySQL 和 jQuery 开发一个网站。到目前为止，我一直在我的本地机器上做这件事。我注意到，当我看到页面时，页面上的图像需要一些时间才能加载（时间很少但可见）。所有图像都很小（小于 3 KB 的 PNG）。现在，当我加载页面时，会发生一些数据库连接，以便获取一些我将显示的数据。
我不确定这个加载时间问题是否与图像数量有关，或者与 PHP 脚本 + 数据库连接执行所需的时间有关。（我的数据库中的数据很少，所以我不会假设这种情况。）
我的问题是：在每个页面的开头预加载所有图像是一种好方法吗？我用 jQuery 试了一下，效果很好。我只是不确定我能得到哪些缺点。例如，要这样做，我需要在页面的开头包含 jQuery 库吗？我认为这是一种不好的做法。
如果这些 PNG 作为 BLOB 存储在数据库中——从你的问题中不清楚——不要这样做。通过 PHP 从数据库提供图像不如让 Web 服务器直接从文件系统提供图像那么有效。如果图像与特定记录相关联，只需在行 ID 之后命名 PNG，这样您就可以在专门用于存储这些图像的目录中找到它。然后 PHP 代码只生成指向磁盘上 PNG 文件的 URL，因此 Web 服务器可以静态发送它们。
我不认为在同一页面内预加载图像会为您购买任何东西。如果有的话，它可能会减慢整个页面加载时间，因为浏览器只能同时检索固定数量的资源，通常是 2-4。在顶部加载图像<body>意味着页面顶部“首屏”还有其他内容必须等待一些 HTTP 连接插槽释放。最好让图像按自然顺序加载。
预加载在两种情况下有意义：
默认情况下不显示图像，但预计在用户与页面交互时需要。很好的例子是悬停和单击状态图像的翻转。
该图像未在此页面上使用，但将在下一个页面中使用。这方面的一个很好的例子是任何从一个页面到下一个页面都有明显进展的网站，比如在购物车中。
无论哪种方式，在 的最底部进行预加载<body>，所以其他所有内容都首先加载。
解决了这两个问题后，在您的站点上运行YSlow 。它最初是作为Firebug的插件开始的，而 Firebug 又是 Firefox 的插件，但后来被移植到除 IE 之外的所有主要浏览器。
YSlow 的美妙之处在于它会自动检测常见的减速，只需在扩展程序处于活动状态时加载页面即可。然后它会给你一个明确的页面评分，这样你就可以判断你什么时候“完成”了优化。如果你低于A，你还没有完成。:) 网站评级为D或更差的情况并不少见，因为 Web 服务器的默认配置是保守的以避免引起问题。修复 YSlow 警告通常很容易，但您必须小心避免创建缓存和其他问题，这就是默认服务器配置不做这些事情的原因。
另一个答案推荐了Google PageSpeed产品。它可以作为 Chrome 和 Firefox 的插件、服务器端 Apache 模块以及 Google 托管的服务使用。我不知道它与 YSlow 相比如何，但它看起来很有趣。
还可以考虑使用浏览器的调试器来获取资源加载时间的瀑布图：
在 Firebug 中，您可以在 Net 选项卡中获得它。
在 Safari 中，您可以通过“开发”菜单访问它，该菜单通常在“首选项”中被禁用。如果需要，将其打开，然后说“开发”>“开始时间线录制”。这将使您进入网络请求工具。您也可以通过 Develop > Show Web Inspector 获得它。
在 Chrome 中，说查看 > 开发人员 > 开发人员工具，然后转到网络选项卡。
IE 有一个非常弱的形式，通过工具 > 开发人员工具 > 探查器。它只是给出了一个数字表，而不是瀑布图，所以信息就在那里，但你不能只是直观地扫描长条来找到最慢的资源。
您应该使用谷歌的页面速度插件来检查哪些数据需要大部分时间来加载。它还将显示图像的单独加载时间。
如果您使用大量的小 png，我建议您将它们组合成一张图像并通过 css 背景属性操纵显示，因为它们是样式的一部分而不是信息。在这种情况下 - 而不是几个图像，只有一个将被加载并通过所有元素重用。在这种情况下，即使预加载一张图片也非常容易。
您是否考虑过使用CSS Sprites将所有图像组合到一个下载中？有许多在线工具可以帮助您做到这一点，它将显着减少您的页面所需的 HTTP 请求数量。
确保您在图像上设置了正确的 Expires 标头以允许缓存它们。
最后，看看YSlow，它可以为您提供进一步的优化技巧。