Question

我希望我的html页面加载得更快。所以我试图将所有CSS样式放入相同的.css文件和所有JavaScript代码到一个.js文件。我的同事告诉我它如何使网页加载更快。我想问一些关于它的问题。

只是为了确定：我的同事是对的吗？在哪些情况下，最好将CSS或JS代码分解为单独的文件？
问题是：如果我的页面上有很多小图标，例如“删除，编辑，添加”，我应该一次加载所有图标的图像还是分别加载每个图标？如果我一次性加载所有图标，如果图标的大小为40x40px，如何选择所需的图标？

谢谢！

Answer 1

我的同事是对的吗？

可以使用单个HTTP请求（使用单组HTTP标头等）下载单个文件，并且可以比多个文件更有效地压缩文件。因此，从性能角度来看，如果您需要所有内容，最好将它们放在一个文件中。

在哪些情况下最好将CSS或JS代码分解为单独的文件？

如果您需要特定页面加载速度非常快（例如主页），或者当网站的某些部分使用了大量未在其他地方使用过的脚本时，那么打破文件会很有用

如果我的页面上有很多小图标，例如“删除，编辑，添加”，我应该一次加载所有图标的图像还是分别加载每个图标？

从性能角度来看，适用相同的规则。但是，无法指定内容图像（以及不装饰文本的图标是内容图像）只是较大文件的一部分。你必须使用涉及背景图像的黑客。这打破了围绕内容和样式的关注点的分离，并且通常涉及使用语义上不正确的元素，然后需要进一步的hackery为无法看到图像的用户提供替代内容，并且hackery很少像alt属性那样做得好。

如果我一次性加载所有图标，如果图标的大小为40x40像素，如何选择所需的图标？

您有一个具有特定尺寸的元素和一个背景位置设置的背景图像，以便只显示您想要的图像部分。

Answer 2

只要浏览器在其缓存中使用文件版本而不是再次下载，就可以将CSS和JS代码整合到共享文件中，从而缩短第一次加载后所有加载的加载时间。有许多因素可以影响这一点，但在正常情况下它应该有效。

此外，请确保您的图像文件的存储分辨率与显示的分辨率相同。以20 x 20像素显示40 x 40像素的文件意味着您必须下载所需图像大小的四倍。如果在HTML文档中引用了相同的图标文件，那么该图标文件只会下载一次，因此对页面加载时间影响不大。

Answer 3

要将所有图标放入一个文件并选择哪个图标，请参阅： http://cssglobe.com/post/3028/creating-easy-and-useful-css-sprites

Answer 4

你可以使用他们所谓的CSS精灵。

想到的事情很简单，但使用起来可能有点棘手。这是想法。

您将所有图像合并到大图像上，使其成为一次加载。无论在网站上使用这些图像，您都可以使用css类替换它，该类使用大图像作为背景和特定定位。

假设您将4个图像合并在一起：delete.png，add.png，edit.png，share.png。您为这些人创建了一个css类，如下所示：

.delete{ background-image:url('../img/icons.png');
         background-position:0px 0px;
 }
.add {background-image:url('../img/icons.png');
         background-position:0px 40px; 
}
.share {background-image:url('../img/icons.png');
         background-position:40px 0px; 
}
.edit { background-image:url('../img/icons.png');
         background-position:40px 40px;
}

这样，您可以减少请求数量，因为您使用单个图像随处显示。代码是动态编写的，告诉我是否有问题。

另请参阅性能大师工具：Page Speed

Answer 5

考虑到浏览器缓存，打破CSS文件并不是一个真正的问题。

分解JS文件是可以的。您可以使用一个JS来处理页面加载<head>标记所需的内容。还有一个js在</body>之后为你提供了互动。通过这样做，您将无法获得各种效果，但您可以确保用户看到您的文字内容。

关于您的图片，有一种名为CSS Sprites的做法。您可以使用它为您的小图像制作一个大文件，并使用CSS背景位置仅显示您想要的部分。这就像基于css类裁剪图像文件一样。

Answer 6

如果速度最重要，那么你被告知的是正确的。

较少的CSS和JS文件意味着对服务器的HTTP请求较少。如果您有特定需求作为项目的一部分，我只会将文件分开（例如，它们需要以不同的方式进行维护）

对于JS，我总是从Google CDN加载JQuery和其他库 - 这可以提高性能，将库合并到您的代码中，因为用户可能拥有Googles代码的缓存版本。

对于图标我会使用CSS sprites（这意味着对服务器的请求更少）或者如果你真的想尽可能地去 - 请看看在CSS中嵌入数据URI。

进一步阅读

Googles Page Speed tool

Data URI in CSS

Answer 7

如果您想要更好的关于页面的效果报告，可以查看这些工具

YSlow：http://developer.yahoo.com/yslow/

PageSpeed：http://code.google.com/intl/es-ES/speed/page-speed/docs/overview.html

两者都可以添加到FireBug插件（Mozilla Firefox）中。

来自YSlow文档：

缩小JavaScript和CSS   tag：javascript，css

缩小是从代码中删除不必要的字符以减少其＆gt;大小从而改善加载时间的做法。当代码缩小时，所有注释都将被删除，因为＆gt;以及不需要的空格字符（空格，换行符和制表符）。在＆gt; JavaScript的情况下，这改善了响应时间性能，因为下载的＆gt;文件的大小减小了。用于缩小JavaScript代码的两种流行工具是JSMin和YUI＆gt; Compressor。 YUI压缩器也可以缩小CSS。

混淆是可以应用于源代码的替代优化。它比复杂化更复杂，因此更有可能因为＆gt;混淆步骤本身而产生错误。在对美国十大顶级网站的调查中，缩小规模缩小了21％，而混淆则缩小了25％。虽然混淆具有更高的大小＆gt;减少，但缩小JavaScript的风险较小。

除了缩小外部脚本和样式外，内联和块＆gt;还可以并且也应该缩小。即使你gzip你的脚本和样式，缩小它们＆gt;仍然会减小5％或更多的大小。随着JavaScript和CSS的使用和大小的增加，缩小代码所带来的节省也会增加。

预加载组件   tag：content

预加载可能看起来与后加载相反，但它实际上有不同的目标。通过＆gt;预加载组件，您可以利用浏览器闲置的时间并请求将来需要的＆gt;组件（如图像，样式和脚本）。这样，当＆gt;用户访问下一页时，您可以将大部分组件放在缓存中，并且＆gt;您的页面将为用户加载更快。

实际上有几种类型的预加载：

•无条件预加载 - 只要onload触发，您就可以继续获取一些额外的＆gt;组件。请访问google.com，了解如何请求加载精灵图像。＆gt; google.com主页上不需要此精灵图片，但在＆gt;连续搜索结果页面上需要此精灵图片。   •条件预加载 - 基于用户操作，您可以进行有根据的猜测，其中用户＆gt;接下来将进行相应的预加载。在search.yahoo.com上，您可以看到在开始在输入框中输入后如何请求一些额外的＆gt;组件。   •预期预加载 - 在启动重新设计之前提前预加载。它经常发生在重新设计之后，您听到：“新网站很酷，但比以前慢”。问题的部分＆gt;可能是用户使用完整缓存访问您的旧网站，但＆gt;新的用户始终是空缓存体验。您可以在启动重新设计之前通过＆gt;预加载某些组件来缓解此副作用。您的旧网站可以使用＆gt;浏览器空闲时间并请求新＆gt;网站
使用的图片和脚本

如果您使用的是JQuery，那么您可以看一下：Preloading images with jQuery

Answer 8

提高下载速度，感知速度和实际速度的有趣概念：

大多数解释的原则仍然普遍适用。

如果HTML页面包含图像图标，请将其最小化

8 个答案: