我目前正在开发一个使用PHP + MySQL和jQuery的网站。到目前为止，我一直在我的本地机器上做。我注意到，当我看到页面时，它上面的图像需要一些时间来加载（很少时间但是可见）。所有图像都很小（PNG小于3 KB）。现在，当我加载页面时，会发生一些数据库连接，以便获取我将显示的一些数据。
我不确定这个加载时间问题是否与图像数量有关，或者与PHP脚本+数据库连接执行的时间有关。 （我的数据库中的数据非常少，所以我不会假设这种情况。）
我的问题是：在每页开头预加载所有图像是一种好方法吗？我尝试使用jQuery，它工作正常。我只是不确定我能用它带来哪些缺点。例如，为此，我需要在页面的开头包含jQuery库？我认为这是一种不好的做法。
答案 0 :(得分：2)
如果这些PNG作为BLOB存储在数据库中 - 不清楚您的问题 - 请不要这样做。通过PHP从DB提供图像不如让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中，您可以通过“开发”菜单访问它，该菜单通常在“首选项”中禁用。如果需要，请打开它，然后说开发＆gt;开始时间线录制。这会让您进入网络请求工具。你也可以通过Develop＆gt;来实现它。显示Web Inspector。
在Chrome中，请查看＆gt;开发人员＆gt;开发者工具，然后转到网络选项卡。
通过工具＆gt; IE的形式非常薄弱。开发人员工具＆gt;探查。它只是提供了一个数字表，而不是瀑布图，所以信息就在那里，但你不能直观地扫描长条以找到最慢的资源。
答案 1 :(得分：1)
您应该使用谷歌的页面速度插件来检查大部分时间需要加载的数据。它还将显示图像的单独加载时间。
如果你正在使用许多小png，我建议你将它们组合成一个图像并通过css background属性操作显示，因为它们是样式而不是信息的一部分。在这种情况下 - 只有一个图像将被加载并通过所有元素重用。在这种情况下，即使预加载一张图像也非常容易。
答案 2 :(得分：1)
您是否考虑过使用CSS Sprites将所有图片合并为一次下载？有许多tools online可以帮助您执行此操作，它将显着减少页面所需的HTTP请求数。
确保您的图片上有set the correct Expires header以允许缓存它们。
最后，看看YSlow，它可以为您提供进一步的优化提示。