CSS优化总结——互联网性能与语法性能建议

admin 2025-02-21 15:33 www.heersuo.com

在前端面试中最容易见到的问题就是页面优化和缓存（貌似也是页面优化），被问了几次后心虚的不可以，平然平常多少会用到一些，但忽然问我，非常难把自己了解的都讲出。页面优化明显不是一两句可以说完的，这两天汇总了一下CSS有关的优化常识，写篇博客梳理一下，还望大伙多多指教

关于CSS的优化工作主要从两个方面着手

互联网性能：把CSS写到字节数最少，加快下载速度，自然可以让页面渲染的更快一些

语法性能：同样都能达成某些成效，但并非所有些方法成效都相同，大家看过不少关于JavaScript方面的语法优化常识，其实CSS里面也有一些

CSS压缩

CSS压缩并非什么高档的姿势，但却非常有用，其原理非常简单，就是把大家CSS中没用的空白符等删去，达到缩减字符个数的目的

大家有如此一段CSS脚本

.test{ background-color:#ffffff; background-image:url; }

经过压缩后会变成如此

.test{ background-color:#fff; background-image:url}

当然高级些的压缩工具也会帮大家优化一些语法，提供不少选项，让大家的压缩更有控制，之前在的公司不使用CSS压缩，所以我没什么实践经验，自己写东西常见的是YUI Compressor，有不少在线版的很便捷

YUI Compressor

CSSCompressor

CSS drive

Clean CSS

大伙有哪些好的资源期望也推荐一下

gzip压缩

Gzip是一种时尚的文件压缩算法，目前的应用十分广泛，特别是在Linux平台，这个不止是对CSS，当应用Gzip压缩到一个纯文本文件时，成效是很明显的，大约可以降低70％以上的文件大小（这取决于文件中的内容）。想进一步知道gzip看看维基百科。

在没gzip压缩的状况下，Web服务器直接把html页面、CSS脚本、js脚本发送给浏览器，而支持gzip的Web服务器将把文件压缩后再发给浏览器，浏览器（支持gzip）在当地进行解压和解码，并显示原文件。如此大家传输的文件字节数降低了，自然能达到互联网性能优化的目的。gzip压缩需要服务器的支持，所以大家需要在服务器端进行配置

在IIS上启用Gzip压缩

apache启用gzip压缩办法

Nginx Gzip 压缩配置

当然除去gzip压缩，缓存也是大家应该注意的，这和CSS优化关系不大了，在说web优化的时候再说

合写CSS

除去压缩的方法，大家还可以通过少写CSS属性来达到降低CSS字节的目的，拿个最容易见到的例子

.test{ background-color: #000; background-image: url; background-position: left TOP; background-repeat: no-repeat; }

大家可以改写一下上面的CSS，达到同样的成效

.test{background: #000 url TOP left no-repeat; }

在CSS中还有不少类似的属性可以合写

font

{font-style: oblique; font-weight: bold; font-size: 16px; font-family: Helvetica, Arial, Sans-Serif;} {font: oblique bold 16px Helvetica, Arial, Sans-Serif;}

margin/padding

{margin-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: 5px; padding-left: 5px;} {padding:5px;}

background

{background-color: #000; background-image: url; background-position: left TOP; background-repeat: no-repeat;} {background: #000 url TOP left no-repeat;}

border

{border-width: 2px; border-style: solid; border-color: #000;} {border: 2px solid #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属性在可能的状况下提到父容器是可以帮大家节省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、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

css中可以和不能继承的属性

抽离、拆分CSS，不加载所有CSS

抽离CSS是指把一些通用的CSS放到一个文件内，而不是写道每个页面，如此一次下载后，其它页面用到的时候就能借助缓存了，降低非必须的重复下载。

应用抽离原则，在有时候大家把页面通用的CSS写到了一个文件，如此加载一次后就能借助缓存，但如此做并不合适所有场景，以前我写CSS把一些前端插件用的CSS全写到了一个页面，但有时页面只能用一个Dialog、有些页面只用到了一个TreeView，但却把十多个插件的CSS都下载到了页面，这就是问题了，所以虽然把CSS写道一个文件可以降低http请求，但像刚刚的这样的情况是不应该如此做的，对一些所有页面都会用到的大家可以如此做，所以大家在抽离和拆分的时候可要想好了。

CSS sprites

这个其实算不上是CSS优化，应该说是web优化用到了CSS的方法，顺便提一下，感兴趣同学可以看看用CSS sprites降低HTTP请求。

互联网性能方面能想到的就暂时这么多了，期望大伙帮忙指正和补充，看一些语法上的性能优化

CSS放在head中，降低repaint和reflow

相信做web的同学都了解这条建议，但为何CSS放在页面顶部有益于网页优化呢？浏览器渲染页面大概是如此的，当浏览器从上到下一边下载html生成DOM tree一边依据浏览器默认及现有CSS生成render tree来渲染页面，当遇见新的CSS的时候下载并结合现有CSS重新生成render tree，刚刚的渲染工作就白费了，假如大家把所有CSS都放到页面顶部，如此就没重新渲染的过程了。对浏览器工作原理感兴趣的同学可以看看神文

浏览器的工作原理：新式互联网浏览器幕后曝光，相信会对浏览器工作原理有深入的认识。

类似的大家了解了这个也应该在脚本中注意尽可能降低repaint和reflow，那种情况会致使这两种状况呢

reflow：当DOM元素出现隐藏／显示、尺寸变化、地方变化的时候都会让浏览器重新渲染页面，之前渲染工作白费了

repaint：当元素的背景颜色、边框颜色不引起reflow的变化是会让浏览器重新渲染该元素。貌似还可以同意，但假如大家在开始就概念好了，不让浏览器重复工作就更好了。

不需要CSS表达式

无论如何生成的CSS，最后大家放到页面上得是静态普通文本，没变量、计算神马的，CSS表达式是一种动态设置CSS属性的东东，被IE5-IE8支持，看一个大伙常见的例子

body {background-color: expression).getHours%2?#B8D4FF:#F08A00); }

如此大家赋予了CSS类似JavaScript的功能，CSS表达式很强大，甚至可以用CSS表达式达成 min-width 属性，隔行换色，模拟 :hover, :before, :after 等伪类，看着能解决不少IE下的浏览器兼容性等问题，但其带来的不良反应超出大家的想象，这条CSS规则并非只运行一次，为了确保有效性，CSS表达式会进行频繁的求值，当改变窗口大小，滚动页面甚至移动鼠标都会触发表达式进行求值，这样频繁的求值以至于浏览器的性能收到紧急的影响。据《高性能网站制作建议》中的测试其实行次数远远超出大家想象，有兴趣同学可以进来看看，大家的建议就试尽可能防止甚至不要用CSS表达式。

不乱用CSS reset或属性设置

在网站制作中大家常常用一些CSS reset，达到跨浏览器统一的目的，但有时候大家的CSS reset过于臃肿，主要有两个问题

把不少浏览器对元素的默认属性有设置了一边，譬如div的padding和margin为0啊什么的，这是没必要的

把一些非常不常见的元素的设置也写进了CSS reset，如 ruby如此的元素

不久前写了篇关于CSS reset的博客容易见到标签的默认属性值及相互用途——关于CSS reset的考虑，都是一些个人认识，期望大伙批评指正

防止适用通配符或隐式通配符

CSS中的*代表通配符，虽然好使但使用方法不对这也是一个恶魔，譬如

body * {padding:0;margin:0;}

大家以为这是对body的子结点都设置一些属性，但由于CSS继承特质是什么原因，页面所有元素都会同意这个规则，对于复杂的页面在性能上的影响还是非常大的，这并非说不可以用通配符，而是说用的时候应该注意范围。相信这个规则大伙都了解，但有一些隐式的通配符也需要大家的注意，譬如

:visible{padding:0; }

如此的几乎就和通配符一样，在用的时候必须要注意范围限制问题

防止层级或过度限制的CSS

估计web开发的同学都看过MDN上Writing efficient CSS或者其各种翻译版本，文中汇总了什么时间在书写CSS selector的建议，搞了解文中建议的一个首要条件是得了解CSS是从右到左分析的，而不是大家觉得的从左到右，关于为何如此做一定是由于高效，不明就里的同学可以上网搜一下有关常识。

不要用标签或 class 来限制 ID 规则

这个应该是个知识，但不少同学都会误用，写出#test.info或者div#test如此的选择器，这个只能说是多此一举，id已经可以唯一而且最快的定位一个元素了

不要用标签名限制 class 规则

这个估计被误用的更多，如div.info如此的写法，其实大家可以直接写为.info，从右到左分析是什么原因可以了解为何其低效，假如直接用class不可以达到目的，通常情况下应该是class设计的有问题，CSS需要重构了

尽可能用最具体的类别、防止后代选择器、是标签类别的规则永远不要包括子选择器

这三条规则是想通的，由于从左到右分析关系，在CSS选择器中后代选择器非但没帮大家加快CSS查找，反而后代选择器是 CSS 中耗费最昂贵的选择器。它的耗费是极其昂贵的—尤其是当选择器在标签或通用类别中，作者给的建议是当用子选择器时要十分小心，能免则免。其开销可见一斑了。

对此大家可以通过具体类别——用单一或尽可能少的class解决。

最后

平时用到和知道的关于优化CSS达到页面优化的方法就这类了，期望大伙给出建议和补充。

TAG标签：CSS(2)

转载请说明来源于当下软件园（https://www.gpsdan.com）

本文地址：https://www.gpsdan.com/news/4104.html