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

and*_*riy 1 html css

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

  • 只是为了确定:我的同事是对的吗?在哪些情况下,最好将CSS或JS代码分解为单独的文件?

  • 问题是:如果我的页面上有很多小图标,例如"删除,编辑,添加",我应该一次加载所有图标的图像还是分别加载每个图标?如果我一次性加载所有图标,如果图标的大小是40x40px,我该如何选择所需的图标?

谢谢!

Que*_*tin 5

我的同事是对的吗?

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

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

当您需要非常快速地加载特定页面时(例如主页)或者当站点的某些部分使用其他地方未使用的大块脚本时,那么打破文件会很有用.

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

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

如果我一次性加载所有图标,如果图标的大小是40x40px,我该如何选择所需的图标?

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