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

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 

如果你希望将产品集成到 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', 

虽然 CSS 选择器的性能不像几年前那么重要(请参阅参考资料)，但是像 Sass 这样的框架有时会产生非常复杂的代，不时查看输出文件，并考虑优化结果的方法。

有句老话说，最快的文件永远不会通过网络发送。让浏览器缓存请求有效地实现这一点。遗憾的是，缓存头的设置必须在服务器上进行。充分上面讲的的两个 Chrome 工具，它们提供了一种快速分析更改结果的方法。

设计人员通常不喜欢缓存，因为他们担心浏览器会缓存上次的样式表。解决这个问题的一个简单方法是包含带有文件名的标记。遗憾的是，由于一些代理拒绝缓存具有“动态”路径的文件，此步骤所附带的代码中概述的方案并不适用于所有地方。

<Link rel="stylesheet" href="style.css?v=1.2.3"> 

（编辑：衡阳站长网）

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