Question

我正在从零开始创建一个网站，我在90年代后期真正进入了这个网站，但从那时起网络已经发生了很大变化！而且我更像是一名设计师，所以当我开始把这个网站放在一起时，我基本上做了一个php系统，包括让网站更“动态”

当您第一次访问该网站时，如果您尚未登录（cookies），您将被显示在登录屏幕上。如果您未登录，则会引入名为access.php的页面。我以为我会预先加载最重的图像。因此，当用户完成登录时，图像已经被缓存。这是我想要的。但我仍然注意到最大的图像仍然无法立即呈现。所以这看起来有点毫无意义。

所有这一切使我重新思考网站的结构以及脚本和css文件的加载方式。使用FireBug和YSlow与Firefox我看到一些指针，如expires标头和减少每个脚本的大小。但这真的是罪魁祸首吗？

例如，这在主index.php中真的非常愚蠢吗？整个网站基本上都是这样构建的

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

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

以下基本上只是网站的正文和内容。然而，Head.php包括doctype，head部分，两个css样式表的链接，jQuery库，jQuery验证引擎，Cufon和Cufon字体文件，然后是小的Cufon.Replace片段。

身体的其余部分附带了index.php文件，但在此底部再次包含一个名为“footer.php”的文件，该文件基本上包括加载一些jsLoader脚本和一个幻灯片面板，然后是一个js函数。所有这些使得最终页面源看起来像一个典型的完整网页，但我想知道你们中是否有人能立即看到“这真的很愚蠢”和“不要那样做，反而做”等等：）包括不好的方法吗？

这个网站也是图像密集型的，我可以做一些更优化。但我不认为这是它的罪魁祸首。 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

我在外联网项目中使用了以下方法：

使用jQuery和文件名数组，我在所有图像，.js和.css文件中ajax，以便它们被预加载到缓存中。当我遍历数组时，我在屏幕上更新了一个进度条，指示该网站正在加载 - 就像一个Flash加载器。

效果很好。

Answer 2

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

另一个看起来有点愚蠢的答案，但我想在制作一个网站时想到这个：Just Keep It Simple。我的意思是你所有的JS都添加了真正的价值，所有这些图像都很好，你能少显示，做一个更轻的设计吗？我根本不批评你的工作，只是建议你......

Answer 3

我要做的是默认显示带有纯CSS和HTML的加载页面，然后等待jQuery加载并使用ImageLoader预加载图像。一旦完成重定向到普通网站，因为图像已经在缓存中，它们将不会再次加载。

您可以做的另一个优化是缩小所有JS文件并组合除jquery.js之外的所有文件。首先将jquery.js放入HTML中，然后首先加载。同时将您的SCRIPT标记放在HTML的底部。

Answer 4

听起来你几乎已经预先加载了预加载，如果你已经加载了一次，并且正确设置了expiry标头，那么无论它是什么类型的内容，你都预装了它。

文件组合可以是快速网站的关键，每个额外的文件都会增加加载时间，在最糟糕的网络和服务器延迟情况下，您可能会为每个单独的文件添加额外的第二个额外文件。更常见的是，每个文件大约需要100到200毫秒。

如果尚未缩小，请缩小脚本并将它们放在同一个文件中，只需记住保留顺序即可。我不知道为什么Ivo Sabev不会包含jQuery。

与CSS文件相同。

您在测试图像压缩方面做了多少工作？尝试不同的压缩设置并比较尺寸与质量，确实可以获得收益。对于PNG图像，带有PNGOUT的IrfanView通常可以使文件比其他程序小25％，最重要的是，通过将图像缩小到8位颜色可以实现非常大的尺寸减小，你可以使用很多图形元素告诉我们区别。就在Stack Overflow上，在编辑器控件按钮中有一个很好的压缩和堆叠图像示例：http://sstatic.net/so/Img/wmd-buttons.png

如何正确预加载图像，js和css文件？

4 个答案: