《css优化总结——网络性能与语法性能建议》由会员分享，可在线阅读，更多相关《css优化总结——网络性能与语法性能建议（10页珍藏版）》请在金锄头文库上搜索。
1、我真正系统地接触和学习党的基本知识是在这次中级党校的培训班上。通过学习，了解了党的发展历程，对党的性质、宗旨、任务等基本知识有了进一步的了解CSS优化总结网络性能与语法性能建议在前端面试中最常见的问题就是页面优化和缓存（貌似也是页面优化），被问了几次后心虚的不行，平然平时多少会用到一些，但突然问我，很难把自己知道的都说出来。页面优化明显不是一两句能够说完的，这两天总结了一下CSS相关的优化知识，写篇博客梳理一下，还望大家多多指教关于CSS的优化工作主要从两个方面着手网络性能：把CSS写到字节数最少，加快下载速度，自然可以让页面渲染的更快一些语法性能：同样都能实现某些效果，但并不是所有的方式效果
2、都相同，我们看过不少关于JavaScript方面的语法优化知识，其实CSS里面也有一些CSS压缩CSS压缩并不是什么高端的姿势，但却很有用，其原理很简单，就是把我们CSS中没用的空白符等删去，达到缩减字符个数的目的我们有这样一段CSS脚本.test background-color:#ffffff; background-image:url(a.jpg); 经过压缩后会变成这样.test background-color:#fff; background-image:url(a.jpg)当然高级些的压缩工具也会帮我们优化一些语法，提供很多选项，让我们的压缩更有控制，之前在的公司不采用CSS压缩
3、，所以我没有什么实践经验，自己写东西常用的是YUI Compressor，有很多在线版的很方便YUI CompressorCSS CompressorCSS driveClean CSS大家有什么好的资源希望也推荐一下gzip压缩Gzip是一种流行的文件压缩算法，现在的应用十分广泛，尤其是在Linux平台，这个不止是对CSS，当应用Gzip压缩到一个纯文本文件时，效果是非常明显的，大约可以减少70以上的文件大小（这取决于文件中的内容）。想进一步了解gzip看看维基百科。在没有gzip压缩的情况下，Web服务器直接把html页面、CSS脚本、js脚本发送给浏览器，而支持gzip的Web服务器将把
4、文件压缩后再发给浏览器，浏览器（支持gzip）在本地进行解压和解码，并显示原文件。这样我们传输的文件字节数减少了，自然可以达到网络性能优化的目的。gzip压缩需要服务器的支持，所以我们需要在服务器端进行配置在IIS上启用Gzip压缩(HTTP压缩)apache启用gzip压缩方法Nginx Gzip 压缩配置当然除了gzip压缩，缓存也是我们需要注意的，这和CSS优化关系不大了，在说web优化的时候再说合写CSS除了压缩的方式，我们还可以通过少写CSS属性来达到减少CSS字节的目的，拿个最常见的例子.test background-color: #000; background-image:
5、url(image.jpg); background-position: left top; background-repeat: no-repeat; 我们可以改写一下上面的CSS，达到同样的效果.test background: #000 url(image.jpg) top left no-repeat; 在CSS中还有很多类似的属性可以合写fontfont-style: oblique; font-weight: bold; font-size: 16px; font-family: Helvetica, Arial, Sans-Serif; font: oblique bold 16
6、px Helvetica, Arial, Sans-Serif;margin/paddingmargin-top: 5px; margin-right: 10px; margin-bottom: 20px; margin-left: 15px; margin: 5px 10px 20px 15px;padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; padding: 5px 10px padding-top: 5px; padding-right: 5px; padding-bottom
7、: 5px; padding-left: 5px; padding:5px;backgroundbackground-color: #000; background-image: url(image.jpg); background-position: left top; background-repeat: no-repeat; background: #000 url(image.jpg) top left no-repeat;borderborder-width: 2px; border-style: solid; border-color: #000; border: 2px soli
8、d #000;border-top: 2px; border-right: 5px; border-left: 10px; border-bottom: 3px; border: 2px 5px 10px 3px;另外CSS3添加的很多属性如transform、animation相关的都可以合写，不一一列举，大家用的时候要注意利用继承CSS的继承机制也可以帮我们再一定程度上缩减字节数，我们知道CSS有很多属性是可以继承的即在父容器设置了默写属性，子容器会默认也使用这些属性，因此如果我们希望全文字体尺寸是14px，大可不必为每个容器设置，只需要在body上设置就可以了。应用这个技巧，把CSS属性
9、在可能的情况下提到父容器是可以帮我们节省CSS字节的，顺便说一下哪些属性可以继承所有元素可继承：visibility和cursor内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction块状元素可继承：text-indent和text-align列表元素可继承：list-style、list-style-type
10、、list-style-position、list-style-image表格元素可继承：border-collapse不可继承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi
11、css中可以和不可以继承的属性抽离、拆分CSS，不加载所有CSS抽离CSS是指把一些通用的CSS放到一个文件内，而不是写道各个页面，这样一次下载后，其它页面用到的时候就可以利用缓存了，减少不必要的重复下载。应用抽离原则，在很多时候我们把页面通用的CSS写到了一个文件，这样加载一次后就可以利用缓存，但这样做并不适合所有场景，以前我写CSS把一些前端插件用的CSS全写到了一个页面，但是有时候页面只会用一个Dialog、有的页面只用到了一个TreeView，但却把十多个插件的CSS都下载到了页面，这就是问题了，所以虽然把CSS写道一个文件可以减少http请求，但像刚才的这种情况是不应该这样做的，对一
12、些所有页面都会用到的我们可以这样做，所以我们在抽离和拆分的时候可要想好了。CSS sprites这个其实算不上是CSS优化，应该说是web优化用到了CSS的技巧，顺便提一下，有兴趣同学可以看看使用CSS sprites减少HTTP请求。网络性能方面能想到的就暂时这么多了，希望大家帮忙指正和补充，看一些语法上的性能优化CSS放在head中，减少repaint和reflow相信做web的同学都知道这条建议，但为什么CSS放在页面顶部有利于网页优化呢？浏览器渲染页面大概是这样的，当浏览器从上到下一边下载html生成DOM tree一边根据浏览器默认及现有CSS生成render tree来渲染页面，当
13、遇到新的CSS的时候下载并结合现有CSS重新生成render tree，刚才的渲染工作就白费了，如果我们把所有CSS都放到页面顶部，这样就没有重新渲染的过程了。对浏览器工作原理有兴趣的同学可以看看神文浏览器的工作原理：新式网络浏览器幕后揭秘，相信会对浏览器工作原理有深入的认识。类似的我们知道了这个也应该在脚本中注意尽量减少repaint和reflow，什么情况会导致这两种情况呢reflow：当DOM元素出现隐藏显示、尺寸变化、位置变化的时候都会让浏览器重新渲染页面，之前渲染工作白费了repaint：当元素的背景颜色、边框颜色不引起reflow的变化是会让浏览器重新渲染该元素。貌似还可以接受，但
14、如果我们在开始就定义好了，不让浏览器重复工作就更好了。不用CSS表达式无论怎样生成的CSS，最终我们放到页面上得是静态普通文本，没有变量、计算神马的，CSS表达式是一种动态设置CSS属性的东东，被IE5-IE8支持，看一个大家常用的例子body background-color: expression(new Date().getHours()%2?#B8D4FF:#F08A00); 这样我们赋予了CSS类似JavaScript的功能，CSS表达式非常强大，甚至可以使用CSS表达式实现 min-width 属性，隔行换色，模拟 :hover, :before, :after 等伪类，看起来能解
15、决很多IE下的浏览器兼容性等问题，但是其带来的副作用超出我们的想象，这条CSS规则并不是只运行一次，为了确保有效性，CSS表达式会进行频繁的求值，当改变窗口大小，滚动页面甚至移动鼠标都会触发表达式进行求值，如此频繁的求值以至于浏览器的性能收到严重的影响。据高性能网站建设建议中的测试其执行次数远远超出我们想象，感兴趣同学可以进去看看，我们的建议就试尽量避免甚至不要使用CSS表达式。不乱用CSS reset或属性设置在网站建设中我们经常使用一些CSS reset，达到跨浏览器统一的目的，但是很多时候我们的CSS reset过于臃肿，主要有两个问题把很多浏览器对元素的默认属性有设置了一边，比如div的padding和margin为0啊什么的，这是没有必要的把一些很不常用的元素的设置也写进了CSS reset，如 ruby这样的元素前几天写了篇关于CSS reset的博客常见标签的默认属性值及相互作用关于CSS reset的思考，都是一些个人认识，希望大家批评指正避免适用通配符或隐式通配符CSS中的*代表通配符，虽然
