css优化总结——网络性能与语法性能建议

《css优化总结——网络性能与语法性能建议》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、css优化总结一一网络性能与语法性能建议在前端面试中最常见的问题就是页面优化和缓存(貌似也是页面优化)，被问了几次后心虚的不行，平然平时多少会用到一些，但突然问我，很难把自己知道的都说出来。页面优化明显不是一两句能够说完的，这两天总结了一下css相关的优化知识，写篇博客梳理一下，还望大家多多指教关于CSS的优化工作主要从两个方面着手网络性能：把CSS写到字节数最少，加快下载速度，自然可以让页面渲染的更快一些语法性能：同样都能实现某些效果，但并不是所有的方式效果都相同，我们看过不少关于JavaScript方面的语法优化知识，

2、其实CSS里面也有一些CSS压缩CSS压缩并不是什么高端的姿势，但却很有用，其原理很简单，就是把我们CSS中没用的空白符等删去，达到缩减字符个数的目的我们有这样一段CSS脚本.test{background-color:#ffffff:background-image:url(a.jpg);}经过压缩后会变成这样.test{background-color:#fff:background-image:url（a.jpg）}当然高级些的压缩工具也会帮我们优化一些语法，提供很多选项，让我们的压缩更有控制，之前在的公司不采用CS

3、S压缩，所以我没有什么实践经验，自己写东西常用的是YUICompressor，有很多在线版的很方便YUICompressorCSSCompressorCSSdriveCleanCSS大家有什么好的资源希望也推荐一下gzip压缩Gzip是一种流行的文件压缩算法，现在的应用十分广泛，尤其是在Linux平台，这个不止是对CSS,当应用Gzip压缩到一个纯文本文件时，效果是非常明显的，大约可以减少70%以上的文件大小（这取决于文件中的内容）。想进一步了解gzip看看维基百科。在没有gzip压缩的情况下，Web服务器直接把html页

4、面、CSS脚本、js脚本发送给浏览器，而支持gzip的Web服务器将把文件压缩后再发给浏览器，浏览器（支持gzip）在本地进行解压和解码，并显示原文件。这样我们传输的文件字节数减少了，自然可以达到网络性能优化的目的。gziP压缩需要服务器的支持，所以我们需要在服务器端进行配置在IIS上启用Gzip压缩(HTTP压缩)apache启用gzip压缩方法NginxGzip压缩配置当然除了gzip压缩，缓存也是我们需要注意的，这和CSS优化关系不大了，在说web优化的时候再说合写CSS除了压缩的方式，我们还可以通过少写cSS属性来

5、达到减少CSS字节的目的，拿个最常见的例子.test{background-color:#000;background-image:url(image,jpg);background-position:lefttop;background-repeat:no-repeat:}我们可以改写一下上面的css,达到同样的效果.test{background:#000url(image.jpg)topleftno-repeat:}在css中还有很多类似的属性可以合写font{font-style:oblique:font~weig

6、ht:bold;font-size:16px;font-family:Helvetica,Arial,Sans-Serif;}{font:obliqueboldl6pxHelvetica,Arial，Sans-Serif;}margin/padding{margin~top:5px;margin-right:10px;margin-bottom:20px;margin-left:15px;}{margin:5pxl0px20px15px;}{padding-top:5px;padding-right:lOpx;paddin

7、g-bottom:5px;padding-left:1Opx:}{padding:5pxl0px}{padding-top:5px;padding-right:5px;padding-bottom:5px;padding-left:5px;}{padding:5px;}background{background-color:#000;background-image:url(image,jpg):ba.ckground-position:lefttop:background-repeat:no-repeat;}{backg

8、round:#000url(image,jpg)topleftno-repeat;}border{border-width:2px;border-style:solid;border~color:#000;}{border:2pxsolid#000;}{border-top:2px;border-rig