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