CSS和图片优化（将样式表置顶、避免使用CSS表达式、用＜link＞代替@import、GPU加速、优化图像、不在HTML中缩放图片等）

本文链接：https://blog.csdn.net/AIWWY/article/details/120398388

CSS

将样式表置顶

经样式表(css)放在网页的HEAD中会让网页显得加载速度更快，因为这样做可以使浏览器逐步加载已将下载的网页内容。这对内容比较多的网页尤其重要，用户不用一直等待在一个白屏上，而是可以先看已经下载的内容。

如果将样式表放在底部，浏览器会拒绝渲染已经下载的网页，因为大多数浏览器在实现时都努力避免重绘，样式表中的内容是绘制网页的关键信息，没有下载下来之前只好对不起观众了。

避免CSS表达式

CSS表达式可以动态的设置CSS属性，在IE5-IE8中支持，其他浏览器中表达式会被忽略。例如下面表达式在不同时间设置不同的背景颜色。

{
    background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
}

CSS表达式的问题在于它被重新计算的次数远比我们想象的要多，不仅在网页绘制或大小改变时计算，即使我们滚动屏幕或者移动鼠标的时候也在计算，因此我们还是尽量避免使用它来防止使用不当而造成的性能损耗。

如果想达到类似的效果我们可以通过简单的脚本做到。

var currentTime = new Date().getHours();
if (currentTime%2) {
    if (document.body) {
        document.body.style.background = "#B8D4FF";
    }
}
else {
    if (document.body) {
        document.body.style.background = "#F08A00";
    }
}

用<link>代替@import

避免使用@import的原因很简单，因为它相当于将css放在网页内容底部。

避免在HTML标签中写样式

写在HTML头部的JavaScript（无异步），和写在HTML标签中的Style会阻塞页面的渲染，因此CSS放在页面头部并使用Link方式引入，避免在HTML标签中写Style，

避免使用Filters

AlphaImageLoad也是IE5.5 - IE8中支持，这种滤镜的使用会导致图片在下载的时候阻塞网页绘制，另外使用这种滤镜会导致内存使用量的问题。IE9中已经不再支持。

GPU加速

CSS中以下属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）可以触发GPU渲染，请合理使用，过渡使用会引发手机过耗电增加。

值为0时不需要任何单位

为了浏览器的兼容性和性能，值为0时不要带单位

不声明过多的Font-size

过多的Font-size引发CSS树的效率。

不滥用Float

Float在渲染时计算量比较大，尽量减少使用

移除空的CSS规则

空的CSS规则增加了CSS文件的大小，且影响CSS树的执行，所以需移除空的CSS规则

正确使用Display的属性

Display属性会影响页面的渲染，因此请合理使用

a) display:inline后不应该再使用width、height、margin、padding以及float

b) display:inline-block后不应该再使用float

c) display:block后不应该再使用vertical-align

d) display:table-*后不应该再使用margin或者float

图片

优化图像

当美工完成了网站的图片设计后，我们可以在上传图片之前对其做以下优化

检查GIF图片中图像颜色的数量是否和调色板规格一致。如果你发现图片中只用到了4种颜色，而在调色板的中显示的256色的颜色槽，那么这张图片就还有压缩的空间。可以使用imagemagick检查：
identify -verbose image.gif
尝试把GIF格式转换成PNG格式，看看是否节省空间。大多数情况下是可以压缩的。下面这条简单的命令可以安全地把GIF格式转换为PNG格式：
convert image.gif image.png
在所有的PNG图片上运行pngcrush（或者其它PNG优化工具）。例如：
pngcrush image.png -rem alla -reduce -brute result.png
在所有的JPEG图片上运行jpegtran。这个工具可以对图片中的出现的锯齿等做无损操作，同时它还可以用于优化和清除图片中的注释以及其它无用信息
jpegtran -copy none -optimize -perfect src.jpg dest.jpg

优化CSS Sprite

Spirite中水平排列图片，垂直排列会增加文件大小；
Spirite中把颜色较近的组合在一起可以降低颜色数，理想状况是低于256色以便适用PNG8格式；
不要在Spirite的图像中间留有较大空隙。这虽然不大会增加文件大小,但对于用户代理来说它需要更少的内存来把图片解压为像素地图。100×100的图片为1万像素，1000×1000就是100万像素。