css性能优化

1.前端

1.1.减少http请求次数：

1.1.1先了解下HTTP对性能的影响，HTTP是浏览器和服务器通过Interet进行相互通信的协议。HTTP是一种客服端/服务器协议，有请求和响应构成。浏览器向一个特定的URL发送HTTP请求，URL对应的宿主服务器发回HTTP响应。

1.1.2css Sprites将多幅图片合并为单独一张图片，如果需要在页面中为背景、按钮、导航栏、链接等提供大量图片，css Sprites绝对是一种优秀的解决
方案--干净的标签、很少的图片和很短的时间。

1.1.3我们都很熟悉包含HTTP：模式的URL。其它类式的模式包括ftp:、file:、和mailto:。但除此之外还有很多模式，如smtp：、pop：、dns：、whois：、daytime：、news：和 urn：。这其中一些是官方注册，还有一些被广泛关注而被接受。

data：URL模式在1995年被首次提议，规范（http：//tools.ietf.org/html/rfc2397）对他的描述为：“允许将小块数据内联为：‘立即（immediate）’数“。数据就在其URL自身之中，其格式如下：
data:[<mediatype>][;base64],<data>
一张内联图片我们可以定义为：
<imgsrc="data:image/png;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgN DRgy IRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjTjbmm5NGaBjv4aP4qb/Ok+lUA80nI5pMndRzt+tSA6m0UVQDvp+VN9qKP+A1>
我们见过的data：都是用于内联图片的，但它可以用在任何需要指定的地方，包括SCRIPT和A标签。
由于data：URL是内联在页面中的，在跨越不同页面是不会被缓存。不要去内联公司Logo，因为编码过的Logo会导致页面变大。
合并脚本和样式表会缩短最终用户响应时间的。使用了合并脚本的页面在加载时块了38%。合并样式表可以带来类似的性能改进。
http缓存http1.0的缓存是：Expires:缓存时间。http1.1的是：Cache-Control:max-age=缓存时间 no-cache 无缓存。

1.2代码位置优化
为了加快css加载速度我们一般把css放在顶部，将样式表含在文档中有两种方式：使用liik和@import规则。使用link放是如下：
     <link rel:"stylesheet" href="css.css">
下面是使用带有@import的样式：
  <style>
  @import url("css.css")
  </style>
对响应时间影响最大的是页面中组件的数量。当缓存空间为空时，每个组件都会产生一个http请求，有时即便缓存是完整的亦是如此。对此的解释要回到http1.1的规范，该规范建议  浏览器从每个主机名并行在下载两个组件。很多web页面需要从一个主机下载所有的组件。放置脚本的最好地方是页面的底部。这不会阻止页面内容的呈现，而且页面中的可视组件可  以尽早下载。

1.3避免使用css表达式
css表达式是动态设置css属性的一种强大（并且危险）的方式。他受到Interet Explorer版本5和之后版本的支持。我们从一个传统的背景色开始：
background—color：#000；
对于很多动态页面，可以使用css表达式将背景色设置为每小时变化一次
background—color：expression（（new Date（）.getHours（）%2？“#000”：“#fff”）；
有些规则用于处理页面加载之后的性能问题，这通常是由css表达式引起的问题，然而，有的时候，css表达式也会影响页面的加载时间。

1.4尽量外部样式表和外部js
在对内联和使用外部文件对比分析时，关键点在于HTML文档请求数量相关的、外部javascrip和css组件被缓存的频率。

1.5如果CSS可以做到，就不要使用JS
让CSS做更多的事，减轻JS开发量。
        用CSS控制交互或视觉的变化，JS只需要更改className。
        利用CSS一次性更改多个节点样式，避免多次渲染，提高渲染效率。
        如果你的产品允许不兼容低版本浏览器，那么动画实现可以交给CSS.

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

1.7利用继承
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

1.8 避免层级过度限制的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性能优化

最新文章

热门文章