优化css,增加性能
转载自: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,增加性能的更多相关文章
- CSS性能分析,如何优化CSS提高性能
不负十年后的自己,共勉! 前端性能优化一直是一个比较热门的话题,我们总是在尽我们最大的努力去,提高我们的页面性能,比如减少HTTP请求,利用工具对资源进行合并压缩,脚本置底,避免重复请求,css sp ...
- css,html性能优化
css性能优化 CSS是负责布局和渲染的重要角色,漂亮的页面当然能够吸引用户.本文是自己在开发过程中总结的关于CSS与性能的关系,可能有不对之处,希望能够指出. ? 1.所有的样式尽量放在css文件中 ...
- JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能
摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...
- [转]关于浏览器css选择器性能优化
作为一个前端开发, 我觉得很有必要了解浏览器对css选择器的解析,因为这个关系到页面的渲染,高效的方式.避开开销大的方式这些无疑为网站加载缩短了时间. 最近在新的项目中陷入了一个误区,也是出于对jqu ...
- 如果要做优化,CSS提高性能的方法有哪些?
一.前言 每一个网页都离不开css,但是很多人又认为,css主要是用来完成页面布局的,像一些细节或者优化,就不需要怎么考虑,实际上这种想法是不正确的 作为页面渲染和内容展现的重要环节,css影响着用户 ...
- 常用CSS优化总结——网络性能与语法性能建议
在前端面试中最常见的问题就是页面优化和缓存(貌似也是页面优化),被问了几次后心虚的不行,平然平时多少会用到一些,但突然问我,很难把自己知道的都说出来.页面优化明显不是一两句能够说完的,这两天总结了一下 ...
- (转)常用CSS优化总结——网络性能与语法性能建议
原文地址:http://www.cnblogs.com/dolphinX/p/3508657.html 在前端面试中最常见的问题就是页面优化和缓存(貌似也是页面优化),被问了几次后心虚的不行,平然平时 ...
- Web 性能优化:21 种优化 CSS 和加快网站速度的方法
这是 Web 性能优化的第 4 篇,上一篇在下面看点击查看: Web 性能优化:使用 Webpack 分离数据的正确方法 Web 性能优化:图片优化让网站大小减少 62% Web 性能优化:缓存 Re ...
- 性能优化-css,js的加载与执行
前端性能优化 css,js的加载与执行 javascript是单线程的 一个网站在浏览器是如何进行渲染的呢? html页面加载渲染的过程 html渲染过程的一些特点 顺序执行,并发加载 词法分析 并发 ...
随机推荐
- LoadRunner中的异常处理
在脚本的Run-time Settings中,可以设置在脚本运行过程中发生错误的处理方式.进入到Run-time Settings中,切换到Miscellaneous标签页,可以看到Error Han ...
- WinForm------如何打开子窗体的同时关闭父窗体
方法: 如何打开子窗体的同时关闭父窗体 this.Hide(); new Frm_Management().ShowDialog(); this.Close();
- Struts2_day04--自定义拦截器_Struts2的标签库_表单标签
自定义拦截器 1 在struts2里面有很多的拦截器,这些拦截器是struts2封装的功能,但是在实际开发中,struts2里面的拦截器中可能没有要使用的功能,这个时候需要自己写拦截器实现功能 2 拦 ...
- Docker1.12 + Swarm 构建动态微服务应用
导读 我们在之前提到过一个示例,即一款由前端与多项后端服务共同构成的微服务应用.其中前端为Traefik HTTP代理,负责将各项请求路由至后端服务.而后端则非常简单,是一套基于Go的HTTP Web ...
- Windows 下Hadoop的环境变量配置
一.安装JDK 1.下载路径:http://www.oracle.com/technetwork/java/javase/downloads/index.html 2.安装到C:\Java\jdk1. ...
- 四 Android Studio打包EgretApp (热更新)
官网教程: http://developer.egret.com/cn/github/egret-docs/Native/native/hotUpdate/index.html 和Eclipse一样, ...
- 合并图片、EUI顺序、CacheAsBitmap对drawcall影响的测试
一 什么是DrawCall Draw Call 理解和优化: http://blog.csdn.net/sakyaer/article/details/44459881 draw call是openG ...
- UIWindow和UIScreen
UIWindow和UIScreen 目录 概述 职责 实用操作 概述 UIWindow职责 包含了应用程序的可视化的内容 为视图和其他应用程序对象在触摸事件中提供了关键性的作用 与视图控制器一起协作来 ...
- eclipse控制台不限制显示的行数
在Preferences中搜索Console,设置Limit console output没有限制即可.
- .net应用程序安装部署时异常 Error 1001. 在初始化安装时发生异常 System.BadImageFormatException:未能加载文件或程序集 的解决办法【成功解决】
采用.net 4.0框架开发的一个桌面应用程序在某学校的一体机(Windows7的32位操作系统)上做安装部署时抛出异常,安装程序回滚,多次尝试仍不成功. Error 1001. 在初始化安装时发生异 ...