Web性能优化：21种优化CSS和加快网站速度的方法

知识汇报我们，六位数的颜色描写符是表达颜色最有用的方法。究竟并非云云——在某些环境下，速记描写或颜色名称可以更短。

target { background-color: #ffffff; }  
target { background: #fff; } 

09. 删除不须要的零和单元

CSS 支持多种单元和数字名目。它们是一个值得感激的优化方针——可以删除尾随和跟从的零，如下面的代码片断所示。另外，请记着，零始终是零，添加维度不会为包括的信息附带代价。

padding: 0.2em;  
margin: 20.0em;  
avalue: 0px;  
padding: .2em;  
margin: 20em;  
avalue: 0; 

10. 消除过多分号

这种优化必要审慎，由于它会影响代码的变动。CSS的类型应承省略属性组中的最后一个分号。因为这种优化要领所节减的本钱很小，以是我们首要针对那些正在开拓自动优化的措施员声名这一点。

p {  
. . .  
    font-size: 1.33em  
} 

11.行使纹理图集

因为协议开销的缘故起因，加载多个小图片的服从很低。CSS 精灵将一系列小图片组合成一个大的PNG 文件，然后通过 CSS 法则将其解析。TexturePacker 等措施大大简化了建设进程。

.download {  
  width:80px;   
  height:31px;   
  background-position: -160px -160px  
}  
.download:hover {  
  width:80px;   
  height:32px;   
  background-position: -80px -160px  
} 

12. 省略 px

进步机能的一个简朴要领是行使CSS尺度的一个特征。为 0 的数值默认单元是 px—— 删除 px 可觉得每个数字节减两个字节。

h2 {padding:0px; margin:0px;}  
h2 {padding:0; margin:0} 

13. 停止必要机能要求的属性

说明表白，一些标签比其他标签更昂贵。以下这些理会会影响机能—假如在没有须要的环境，只管不要行使它们。

border-radius  
box-shadow  
transform  
filter  
:nth-child  
position: fixed; 

14. 删除空格

空格——思量制表符、回车符和空格——使代码更轻易阅读，但从理会器的角度看，它没有什么用处。在宣布前删除它们，更好的要领是将此使命委托给 shell 剧本或相同的器材。

15. 删除注释

注释对编译器也没有任何浸染。建设一个自界说理会器，以便在宣布之前删除它们。这不只节减了带宽，并且还确保进攻者和克隆者更难领略手头代码背后的头脑。

16. 行使自动压缩

Yahoo　的用户体验团队建设了一个处理赏罚很多压缩使命的应用措施。它以　JAR　文件的情势宣布，在这里可用，而且可以行使所选的JVM运行。

java -jar yuicompressor-x.y.z.jar  
Usage: java -jar yuicompressor-x.y.z.jar  
 [options] [input file]  
Global Options  
    -h, --help                Displays this  
 information  
    --type <js|css>           Specifies the  
 type of the input file 

17. 在 NPM 运行它

假如你但愿将产物集成到 Node.JS 中，请会见 npmjs.com/package/yuicompressor。维护不良的存储库包括一组包装器文件和JavaScript API。

var compressor = require('yuicompressor');  
 compressor.compress('/path/to/  
file or String of JS', {  
    //Compressor Options:  
    charset: 'utf8',  
    type: 'js', 

18. 保持 Sass 的搜查

固然 CSS 选择器的机能不像几年前那么重要(请参阅参考资料)，可是像 Sass 这样的框架偶然会发生很是伟大的代，不时查察输出文件，并思量优化功效的要领。

19. 配置缓存

有句老话说，最快的文件永久不会通过收集发送。让赏识器缓存哀求有用地实现这一点。遗憾的是，缓存头的配置必需在处事器长举办。充实上面讲的的两个 Chrome 器材，它们提供了一种快速说明变动功效的要领。

20. 冲破缓存

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!