尽量减少HTML页面加载时间，如果它包含图像图标

我希望我的HTML页面加载得更快，因为它可以。所以我试图把所有的CSS样式放在同一个.css文件中，并把所有的JavaScript代码放到一个.js文件中。我的同事们告诉我，它使网页加载速度更快。我想问一些关于它的问题。尽量减少HTML页面加载时间，如果它包含图像图标

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

谢谢！

来源

2011-04-11 andriy

我的同事们对吗？

可以通过单个HTTP请求下载单个文件（具有单套HTTP头等，等等），并且可以更有效地压缩多个文件。所以从性能的角度来看，如果你需要所有的内容，最好把它们放在一个文件中。

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

当你需要一个特定的页面很快（例如网页），或者还有一些采用脚本的一大块未在其他地方使用该网站的部分则是有益的突破加载档案然后。

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

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

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

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

来源

2011-04-11 19:11:50 Quentin

只要浏览器在其缓存中使用文件的版本而不是再次下载文件，将CSS和JS代码整合到共享文件中将提高所有负载的加载时间。有很多因素会影响到这一点，但在正常情况下它应该起作用。

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

来源

2011-04-11 19:12:35

良好的高速缓存规则可以提高后续页面的性能，无论数据在多少个文件之间传播。 – Quentin 2011-04-11 19:14:00

@David Dorward - 起初，我将OP理解为询问每个页面是否应该有自己的CSS文件，或者是否应该在所有页面之间共享一个CSS文件。我现在看到，解释可能不正确。 – 2011-04-11 19:17:13

我发现有关图像大小的有用信息。谢谢 – andriy 2011-04-11 19:21:49

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

打破JS文件是好的。你可以有一个JS来处理页面加载<head>标签所需的东西。还有一个js在</body>之后为您提供了互动。通过这样做你不会有各种各样的效果，但你确保你的用户看到你的文字内容。

关于你的图片，有一种练习叫做CSS Sprites。您可以使用它为您的小图片制作一个大文件，并使用CSS background-position仅显示您想要的部分。这就像裁剪基于css类的图像文件。

来源

2011-04-11 19:12:55 Khez

为了把所有的图标为一个文件，并选择其中的一个，看到这一点： http://cssglobe.com/post/3028/creating-easy-and-useful-css-sprites

来源

2011-04-11 19:13:04 penguinrob

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

减少CSS和JS文件意味着对服务器的HTTP请求减少。我只会分开文件，如果你有一个特定的需求作为项目的一部分（例如他们需要维护在不同的方式）

对于JS我总是从谷歌CDN加载JQuery和其他库 - 这有一个更大性能提升，将库合并到代码中，因为用户很可能拥有缓存的Google代码版本。

对于图标，我会使用CSS sprites（这意味着对服务器的请求较少），或者如果您真的想尽可能多 - 请研究将数据URI嵌入到CSS中。

延伸阅读

Googles Page Speed tool

Data URI in CSS

来源

2011-04-11 19:14:32 isNaN1247

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

这件事很简单，但可以使用一点棘手。这是主意。

将所有图像合并到大图像上，使其成为单一负载。无论在网站上使用这些图像，您都可以用一个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

来源

2011-04-11 19:17:20 David

如果你想了解你的页面更好的业绩报告，你可以看看这些工具

的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 标签：的JavaScript，CSS

缩小是从代码去除不必要的字符，以减少其>大小从而提高加载时间的做法。当代码缩小时，所有注释都会被移除，就像不需要的空白字符（空格，换行符和制表符）一样。在> JavaScript的情况下，这会提高响应时间性能，因为下载的文件的大小会减小。两种用于缩小JavaScript代码的流行工具是JSMin和YUI> Compressor。 YUI压缩机还可以缩小CSS。

混淆是可应用于源代码的替代优化。它比缩小更复杂，因此更容易由于模糊步骤本身而产生错误。在对美国十大网站的调查中，缩小比缩小了21％，而混淆则缩小了25％。尽管模糊处理的缩小程度更高，但缩小JavaScript风险较小。

除了缩小外部脚本和样式之外，内嵌和块>可以也应该缩小。即使你使用gzip脚本和样式，缩小它们仍然会减小5％或更多。随着JavaScript和CSS>的使用和大小的增加，通过缩小代码所获得的节省量也会增加。

预紧组件标签：内容

预紧可能看起来像负荷后的对立面，但它实际上有不同的目标。通过>预加载组件，您可以充分利用浏览器空闲时间和请求将来需要的组件（如图像，样式和脚本）。当用户访问下一页时，这种方式可以使大多数组件已经存在于缓存中，并且>您的页面将为用户加载得更快。

其实有几种类型的预加载的：

•无条件预紧 - 尽快的onload火灾，你继续前进，获取一些额外>组件。请查阅google.com了解如何请求加载精灵图像的示例。 >此精灵图片在google.com主页上不是必需的，但它在连续的搜索结果页面上是必需的。 •有条件预加载 - 根据用户操作，您可以猜测用户>下一个将要前进的位置并相应地进行预加载。在search.yahoo.com上，您可以看到在开始在输入框中输入内容后，如何请求一些额外>组件。 •预期的预加载 - 在启动重新设计之前提前预加载。在重新设计之后，您经常会听到：“新网站很酷，但速度比以前慢”。问题的一部分可能是用户使用完全缓存访问您的旧网站，但>新的缓存经验总是空的。您可以通过在甚至启动重新设计之前预先加载一些组件来减轻这种副作用。旧网站可以使用>的时候，浏览器处于闲置状态，这将通过新>网站

如果您正在使用JQuery的使用要求图像和脚本，那么你可以看看这个：Preloading images with jQuery

来源

2011-04-11 19:27:20

有趣的概念，以提高下载速度，知觉速度与实际速度：

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

来源

2011-04-11 19:49:29 mousio

尽量减少HTML页面加载时间，如果它包含图像图标

回答

相关问题