php - 如何正确预加载图片、js 和 css 文件？

Question

我正在从头开始创建一个网站，我在 90 年代末就开始真正关注这个网站，但从那时起网络已经发生了很大变化!而且我更像是一名设计师，所以当我开始将这个网站放在一起时，我基本上做了一个 php 系统，使网站更“动态”

当您第一次访问该站点时，如果您尚未登录 (cookie)，您将看到一个登录屏幕。如果您没有登录，则会引入一个名为 access.php 的页面。我想此时我会预加载最重的图像。这样当用户完成登录时，图像就已经被缓存了。这是我想要的。但我仍然注意到最大的图像仍然没有立即渲染。所以这似乎有点毫无意义。

所有这些让我重新思考网站的结构以及脚本和 css 文件的加载方式。在 Firefox 中使用 FireBug 和 YSlow 我看到了一些提示，例如过期 header 和减小每个脚本的大小。但这真的是罪魁祸首吗？

例如，这在主 index.php 中真的很愚蠢吗？整个站点的结构基本是这样的

<?php
require("dbconnect.php");
?>

<?php
include ("head.php");
?>

下面基本上只是网站的正文和内容。然而，Head.php 由文档类型、头部部分、两个 css 样式表的链接、jQuery 库、jQuery 验证引擎、Cufon 和 Cufon 字体文件以及小的 Cufon.Replace 片段组成。

正文的其余部分带有 index.php 文件，但在该文件的底部又包含一个名为“footer.php”的文件，该文件基本上由加载几个 jsLoader 脚本和一个滑动面板组成，然后是一个js函数。所有这一切使得结束页面源看起来像一个典型的完整网页，但我想知道你们中的任何人是否可以立即看到“这真的很愚蠢”和“不要那样做，而是这样做”等等: ) includes 是一条糟糕的路吗？

这个网站的图像也很密集，我可能可以做更多的优化。但我不认为这是罪魁祸首。 YSlow 向我报告了占用最多空间的内容:

doc(1) - 5.8K
js(5) - 198.7K
css(2) - 5.6K
cssimage(8) - 634.7K
image(6) - 110.8K

我知道它看起来像 cssimage(8) 最重，但我已经从之前预加载了这些图像，它并没有真正影响渲染。

Answer 1

为了加快速度，您可以将所有图像组合到同一个图像 Sprite 上，这样您只有 1 个请求来下载所有图像。但这需要您微调您的 css 以仅显示图像的一小部分。要获得更好的解释，请查看:http://css-tricks.com/css-sprites/

另一个答案可能看起来有点愚蠢，但我喜欢在制作网站时想到这一点:保持简单。我的意思是你所有的 JS 是否都增加了真正的值(value)，所有这些图像都很好，你能显示更少，做一个更轻的设计吗？我根本不是批评你的工作，只是建议你......