转载自:https://www.cnblogs.com/xiaoloulan/p/5801663.html

前端性能优化一直是一个比较热门的话题,我们总是在尽我们最大的努力去,提高我们的页面性能,比如减少HTTP请求利用工具对资源进行合并压缩,脚本置底,避免重复请求,css sprite等等。其实大量的方法都是在减少文件大小,减少请求,优化JS,很少有人对css十分关注,甚至有人都不对css进行压缩。

其实,不规范的css会导致很多性能问题,这些问题可能在一些小的项目中不够明显,但是在大型项目中就会显现出来。

css匹配原理

在优化css之前我们需要了解下css是怎么进行工作的,我们都知道css是由选择器,属性和属性值构成的。

我们可能会这样写上一行代码

//css
.con .loulan1 p span{ display: block; } //html
<div class="con">
<div class="loulan">
<p><span>文字</span></p>
</div>
</div>

在这里我们对con类里面的loulan类里的p标签里面的span标签进行样式定义。我说出来都嫌累更别说写起来了,其实你可以把浏览器看作一个人,它渲染起来肯定也会浪费性能。

而且css的匹配原理不是从左到右的,而是从右到左的,也就是说我们的这行代码里面,先查找到页面里面所有的span元素形成一个集合,再在所有的span元素往上查找,看看有多span的父元素是p元素或者父元素的父元素是p元素或者......慢慢寻找,把父元素不是p元素的删去,再往上查找看集合里的有p元素又多少它的父元素的类是loulan...浏览器说:我好累...

其实呢浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。并且Firefox 称这种查找方式为 keyselector(关键字查询),所谓的关键字就是样式规则中最后(最右边)的规则,上面的 key 就是 span。人家本来是为了能尽快过滤到一些无关样式规则的,我们这里缺一层套一层,层层不停歇。所以只是想定义一个span的样式在span上加个类岂不是更好。有人这时要说了,那样是需要在每个元素上都加上类吗?那肯定不是必须的,只不过我们要了解浏览器是怎么查找匹配的,然后结合现在的结构来做出一个最好的最方便的写法。

//css
.loulanSpan{ display: block; } //html
<div class="con">
<div class="loulan">
<p><span class="loulanSpan">文字</span></p>
</div>
</div>

css选择器权值

这里说下CSS的 ID Class Tag选择器的权值,也就是他们的优先级,权值越大,优先级越高

ID:100

Class:10

Tag:1

有了上面两个的基础我们再详细说下应该怎样来优化css提高性能

1,减少css嵌套,最好不要套三层以上,一般情况下块级元素加上类,里面的内联元素不用加,css写的时候块级class套内联tag,这样不仅可以减少css文件大小,还能减少性能浪费。

2,不要在ID选择器前面进行嵌套,ID本来就是唯一的而且人家权值那么大,前方嵌套完全是浪费性能。

3,建立公共样式类,把长段相同样式提取出来作为公共类使用,比如我们常用的清除浮动,单行超出显示省略号等等等,当然如果你使用sass,继承会让你更加方便,同时我是比较提倡使用sass的,之后肯定也会写一篇sass的博客。

4,缩写css,其中包括缩写maigin,padding,颜色值等等,要是有两个或者两个以上的margin-****,写成margin: * * * *有助于文件大小。

5,减少通配符*或者类似[hidden="true"]这类选择器的使用,挨个查找所有...这性能能好吗?当然重置样式这些必须的东西是不能少的。

6,有些人喜欢在类名前面加上标签名:p.ty_p 来进行更加精确的定位,但是这样往往效率更差,类名应该在全局范围除非公用是唯一的,所以这种做法是应该便面的。

7,巧妙运用css的继承机制,在css中很多属性是可以继承的比如颜色字体等等,父节点定义了,子节点就无需定义。

8,拆分出公共css文件,对于比较大的项目我们可以将大部分页面的公共结构的样式提取出来放到单独css文件里,这样一次下载后就放到缓存里,当然这种做法会增加请求,具体做法应以实际情况而定。

9,不用css表达式,可能大家接触比较少,但是要记住的是无论我们怎么炫酷,到了最后都是静态的,所以表达式只是让你的代码显得更加炫酷,但是他对性能的浪费可能是超乎你的想象的,因为它并不只是计算一次,一些小的事件可能都会增加它为了有效准确而进行计算求值的次数。

10,少用css rest,可能你会觉得重置样式是规范,但是其实其中有很多的操作是不必要不友好的,有需求有兴趣的朋友可以选择normolize.css

11,cssSprite,合成所有icon图片,用宽高加上bacgroud-position的背景图方式显现出我们要的icon图,这是一种十分实用的技巧,极大减少了http请求。

优化css,增加性能的更多相关文章

  1. CSS性能分析,如何优化CSS提高性能

    不负十年后的自己,共勉! 前端性能优化一直是一个比较热门的话题,我们总是在尽我们最大的努力去,提高我们的页面性能,比如减少HTTP请求,利用工具对资源进行合并压缩,脚本置底,避免重复请求,css sp ...

  2. css,html性能优化

    css性能优化 CSS是负责布局和渲染的重要角色,漂亮的页面当然能够吸引用户.本文是自己在开发过程中总结的关于CSS与性能的关系,可能有不对之处,希望能够指出. ? 1.所有的样式尽量放在css文件中 ...

  3. JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能

    摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...

  4. [转]关于浏览器css选择器性能优化

    作为一个前端开发, 我觉得很有必要了解浏览器对css选择器的解析,因为这个关系到页面的渲染,高效的方式.避开开销大的方式这些无疑为网站加载缩短了时间. 最近在新的项目中陷入了一个误区,也是出于对jqu ...

  5. 如果要做优化,CSS提高性能的方法有哪些?

    一.前言 每一个网页都离不开css,但是很多人又认为,css主要是用来完成页面布局的,像一些细节或者优化,就不需要怎么考虑,实际上这种想法是不正确的 作为页面渲染和内容展现的重要环节,css影响着用户 ...

  6. 常用CSS优化总结——网络性能与语法性能建议

    在前端面试中最常见的问题就是页面优化和缓存(貌似也是页面优化),被问了几次后心虚的不行,平然平时多少会用到一些,但突然问我,很难把自己知道的都说出来.页面优化明显不是一两句能够说完的,这两天总结了一下 ...

  7. (转)常用CSS优化总结——网络性能与语法性能建议

    原文地址:http://www.cnblogs.com/dolphinX/p/3508657.html 在前端面试中最常见的问题就是页面优化和缓存(貌似也是页面优化),被问了几次后心虚的不行,平然平时 ...

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

    这是 Web 性能优化的第 4 篇,上一篇在下面看点击查看: Web 性能优化:使用 Webpack 分离数据的正确方法 Web 性能优化:图片优化让网站大小减少 62% Web 性能优化:缓存 Re ...

  9. 性能优化-css,js的加载与执行

    前端性能优化 css,js的加载与执行 javascript是单线程的 一个网站在浏览器是如何进行渲染的呢? html页面加载渲染的过程 html渲染过程的一些特点 顺序执行,并发加载 词法分析 并发 ...

随机推荐

  1. C# 重命名文件

    在vb下,有一个方法可以对文件进行重命名,所以,我们只要引用到这种方法进行应用即可. 1.添加引用Microsoft.VisualBasic 2.添加命名空间using Microsoft.Visua ...

  2. iOS开发之--MVC 架构模式

    随着项目开发时间的增加,从刚开始那种很随意的代码风格,逐渐会改变,现在就介绍下MVC的架构模式,MVC的架构模式,从字面意思上讲,即:MVC 即 Modal View Controller(模型 视图 ...

  3. tcp断开时分几步

    连接时是三次握手 断开时是四次握手,因为它是半关闭造成的

  4. Popwindow系列

    一系列干货等你来拿 关于我:http://www.cnblogs.com/dubo-/ 项目中也有很多实用的事例,等待录入中...

  5. 为什么Objective-C很难

    转自:http://mobile.51cto.com/hot-322261.htm   2012-03-07 13:43 junwong 开源中国社区 字号:T | T 作为一个Objective-C ...

  6. SpringMVC的解释与搭建Maven私有代理服务器

    SpringMVC静态资源处理 通常会配置SpringMVC拦截所有请求 即将DisptcherServlet的url-pattern设置为 / 此时会导致SpringMVC同时拦截.css   .j ...

  7. C# 一、语法结构、注释、命名空间、Main入口点、变量与常量、运算符、流程控制(循环)

    一.代码结构 1)一个 C# 程序主要包括以下部分: 命名空间声明(Namespace declaration) 一个 class Class 方法 Class 属性 一个 Main 方法 语句(St ...

  8. http协议----->http请求方式,post,get

    4.http请求方式有七种(http请求是想web资源请求数据) Post get head options delete trace put 常用:GET POST POST例如form表单提交,G ...

  9. Dealing with a Stream-based Transport 处理一个基于流的传输 粘包 即使关闭nagle算法,也不能解决粘包问题

    即使关闭nagle算法,也不能解决粘包问题 https://waylau.com/netty-4-user-guide/Getting%20Started/Dealing%20with%20a%20S ...

  10. mysql备份总结

    w汇总对比. mysqldump -u user -p wdbname > /www/wbak.sql pwd CREATE TABLE wbak_w_02071349 LIKE w; INSE ...