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

常识告诉我们，六位数的颜色描述符是表达颜色最有效的方式。事实并非如此——在某些情况下，速记描述或颜色名称可以更短。

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

CSS 支持多种单位和数字格式。它们是一个值得感谢的优化目标——可以删除尾随和跟随的零，如下面的代码片段所示。此外，请记住，零始终是零，添加维度不会为包含的信息附带价值。

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

这种优化需要谨慎，因为它会影响代码的更改。CSS的规范允许省略属性组中的最后一个分号。由于这种优化方法所节省的成本很小，所以我们主要针对那些正在开发自动优化的程序员说明这一点。

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

由于协议开销的原因，加载多个小图片的效率很低。CSS 精灵将一系列小图片组合成一个大的PNG 文件，然后通过 CSS 规则将其分解。 TexturePacker 等程序大大简化了创建过程。

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

提高性能的一个简单方法是使用CSS标准的一个特性。为 0 的数值默认单位是 px —— 删除 px 可以为每个数字节省两个字节。

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

分析表明，一些标签比其他标签更昂贵。以下这些解析会影响性能—如果在没有必要的情况，尽量不要使用它们。

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

空格——考虑制表符、回车符和空格——使代码更容易阅读，但从解析器的角度看，它没有什么用处。在发布前删除它们，更好的方法是将此任务委托给 shell 脚本或类似的工具。

注释对编译器也没有任何作用。创建一个自定义解析器，以便在发布之前删除它们。这不仅节省了带宽，而且还确保攻击者和克隆者更难理解手头代码背后的思想。

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 

（编辑：PHP编程网 - 湛江站长网）

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