CSS性能优化探讨
大部分前端开发人员都不关心CSS性能优化,其实对于一个复杂的页面来说,高效的选择器还是可以带来一定的性能提升的。
1. CSS 选择器
浏览器是“从右往左”来分析 class 的,它的匹配规则是从右向左来进行匹配的,因此最右边的选择符就是关键选择符。
Descendant selector
#toc > li {font-weight: bold}
浏览器首先会查找页面上所有的“li”节点,然后再去做进一步的判断:如果它的父节点的 id 为“toc”,则匹配成功。
Descendant selector
#toc li {font-weight: bold}
这个效率比之前的“child selector”效率更慢,而且要慢很多。浏览器先便利所有的“li”节点,然后步步上溯其父节点,直到 DOM 结构的根节点(document),如果有某个节点的 id 为“toc”,则匹配成功,否则继续查找下一个“li”节点。
尽量避免 universal rules
[hidden="true"] { ... } /* A universal rule */
这里的匹配规则很明显:查找页面上的所有节点,如果有节点存在“hidden”属性,并且其属性值为“true”,则匹配成功。这是最耗时耗力的匹配,页面上的所有节点都需要进行匹配运算,这种规则应尽量避免。
Id-categorized 规则与 tag name 或 class 规则并行
button#goButton {...};----->>#goButton
.fundation#testIcon {...};----->>#testIcon这里,按照我们常规的理解,箭头左边的写法似乎是应该更快的,因为它的限制更多。其实不然,id 是全局唯一的,在匹配 CSS 选择器时浏览器定位到 id 是最快的,如果伴随有其他的非 id 的 selector,反而会影响匹配的效率。
关于 class-categorized 规则
button.indented {...}----->>.button-indented {...}
程序员们经常会给某个 Class 前面加上标签名称(Tag Name),以更精确且快速的定位该节点,但是这样往往效率更差。和清单 8 中的原理一样,页面上的 class 在全局范围内来讲应该是唯一的,用唯一的 Class 名称来定位一个节点往往比组合定位更加快捷。事实上,这种做法也可以避免由于开发修改页面元素的类型(Tag)而导致的样式失效的情况,做到样式与元素的分离,两者独立维护。
尽量减少规则数量
Span[mailfolder="true"] > table > tr > td.columnClass {...}
------------------->>>>>>>
.span-mailfolder-tbl-tdCol {...}规则越多,匹配越慢,上面一种规则需要进行 6 项匹配,先找“columnClass”,再找“td”,然后是“tr”,“table”,最后是符合“mailfolder”为“true”的 span,这种效率是非常慢的。如果用一个比较特殊的 class 替代(span-mailfolder-tbl-tdCol),效率会快上好几倍。
尽量避免使用 descendant selector
treehead treerow treecell {...} ----->> treehead > treerow > treecell {...}
Descendant 选择器是耗时相对高的选择器,通常来讲,它在 CSS 里的使用应该是尽量避免的,如果能用 child 选择器替代就应该尽量这样去做。
利用 CSS 的继承机制
在 CSS 中,有很多 CSS 的属性以可以继承的,如果某个节点的父节点已经设定了上述的 CSS 样式(如:color, font 等 …),并且子节点无需更改该样式,则无需再作相关设定,同时,也可以利用这一点:如果很多子节点都需要设定该 CSS 属性值,可以统一设定其父节点的该 CSS 属性,这样一来,所有的子节点再无需做额外设定,加速了 CSS 的分析效率。
2. 把 Stylesheets 放在 HTML 页面头部
浏览器在所有的 stylesheets 加载完成之后,才会开始渲染整个页面,在此之前,浏览器不会渲染页面里的任何内容,页面会一直呈现空白。这也是为什么要把 stylesheet 放在头部的原因。如果放在 HTML 页面底部,页面渲染就不仅仅是在等待 stylesheet 的加载,还要等待 html 内容加载完成,这样一来,用户看到页面的时间会更晚。
3. 避免使用 CSS Expressions:
font-family: Arial; line-height: 26px;">Expression 只有 IE 支持,而且他的执行比大多数人想象的要频繁的多。不仅页面渲染和改变大小 (resize) 时会执行,页面滚动 (scroll) 时也会执行,甚至连鼠标在页面上滑动时都会执行。在 expression 里面加上一个计数器就会知道,expression 的执行上相当频繁的。鼠标的滚动很容易就会使 expression 的执行次数超过 10000。
4. 避免使用 Filter:
IE 特有的 AlphaImageLoader filter 是为了解决 IE6 及以前版本不支持半透明的 PNG 图片而存在的。但是浏览器在下载 filter 里面的图片时会“冻结”浏览器,停止渲染页面。同时 filter 也会增大内存消耗。最不能忍受的是 filter 样式在每个页面元素(使用到该 filter 样式)渲染时都会被浏览器分析一次,而不是像一般的背景图片渲染模式:使用过该背景图片的所有元素都是被浏览器一次性渲染的。针对这种情况,最好的解决办法就是使用 PNG8。
5. CSS 缩写:
CSS 缩写可以让你用极少的代码定义一系列样式属性,这种做法可以极大程度的缩减代码量以达到提高性能的目的。
参考文档
如需转载,请注明来自: BorisHuai前端修炼 > CSS性能优化探讨
CSS性能优化探讨的更多相关文章
- 第二次讨论——响应式设计、布局技巧、css性能优化、css预处理
第二次讨论 [响应式设计] 集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相对应的布局. 响应式布局: meta标签的实用:设置布局宽度等于 ...
- CSS性能优化的8个技巧
本文作者:高峰,360奇舞团前端工程师,W3C性能工作组成员,同时参与WOT工作组的学习. 我们都知道对于网站来说,性能至关重要,CSS作为页面渲染和内容展现的重要环节,影响着用户对整个网站的第一体验 ...
- 页面中的CSS性能优化
大型网站中会有多个CSS文件,性能优化是不要的.主要有以下几个方法: 一:压缩样式表: 通过构建工具压缩CSS文件,能够减少文件的大小,从而得到更快的下载.解析和执行.对于使用预处理器例如 Sass, ...
- CSS性能优化的几个技巧
前言 随着互联网发展至今,对于网站来说,性能显的越来越重要了,CSS作为页面渲染和内容展现的重要环节,影响着用户对整个网站的第一体验.所以,我们需要重视与CSS相关的性能优化. 项目开发初期我们可能因 ...
- css性能优化
1.前端 1.1.减少http请求次数: 1.1.1先了解下HTTP对性能的影响,HTTP是浏览器和服务器通过Interet进行相互通信的协议.HTTP是一种客服端/服务器协议,有请求和响应构成. 浏 ...
- CSS性能优化新属性:will-change
---恢复内容开始--- will-change属性通过告诉浏览器什么属性.什么元素将会发生变化,可以对这些操作进行可能性的优化,由此提高CSS动画的执行效率. 这个属性可以有4个值: auto: 实 ...
- css 性能优化小结
1.能用css不用js 1.鼠标悬浮展示 2.自定义radio.checkbox的样式 3.巧用css伪类 当input获取焦点时候,把右边的按钮改变样式 检测用户输入:如果 ...
- CSS性能分析,如何优化CSS提高性能
不负十年后的自己,共勉! 前端性能优化一直是一个比较热门的话题,我们总是在尽我们最大的努力去,提高我们的页面性能,比如减少HTTP请求,利用工具对资源进行合并压缩,脚本置底,避免重复请求,css sp ...
- css,html性能优化
css性能优化 CSS是负责布局和渲染的重要角色,漂亮的页面当然能够吸引用户.本文是自己在开发过程中总结的关于CSS与性能的关系,可能有不对之处,希望能够指出. ? 1.所有的样式尽量放在css文件中 ...
随机推荐
- 命令行的操作——cd
初学命令行,总是提示找不到有关的文件,当时的我啥也不知道,最后就很惨,啥也找不到 后来就只好自己上网找资料了 以下博文改编自小佳的博客 在需要处理不同路径下的文件的时候,经常要在命令行模式下切换目录, ...
- Linux用户权限常见命令
01. 用户 和 权限 的基本概念 1.1 基本概念 用户 是 Linux 系统工作中重要的一环,用户管理包括 用户 与 组 管理 在 Linux 系统中,不论是由本机或是远程登录系统,每个系统都必须 ...
- 项目常用JS方法封装--奋斗的IT青年(微信公众号)
...
- JavaScript sort()方法总结
sort() 方法用于对数组的元素进行排序. 语法:arrayObject.sort(sortby):参数sortby可选.规定排序顺序.必须是函数. 注:如果调用该方法时没有使用参数,将按字母顺序对 ...
- dp--01背包--Charm Bracelet
Charm Bracelet Bessie has gone to the mall's jewelry store and spies a charm bracelet. Of course, sh ...
- 题解 P1447 【[NOI2010]能量采集】
题目 这题不要用莫比乌斯反演,用欧拉反演更快 [分析] 设点 \((x,y)\) 的能量损失为 \(f(x,y)\) 则 \(\displaystyle Ans=\sum_{i=1}^n\sum_{j ...
- 微服务项目开发学成在线_day01_CMS服务端开发
05-CMS需求分析-什么是CMS 什么是CMS?CMS (Content Management System)即内容管理系统,不同的项目对CMS的定位不同.CMS有哪些类型? 每个公司对每个项目的C ...
- classification.py
# -*- coding: utf-8 -*-"""View more, visit my tutorial page: https://morvanzhou.githu ...
- 测试mvn -v 时报错,原因
当安装完maven后在cmd命令框通过mvn -v 可以判断maven环境变量是否安装成功,但我安装配置完环境变量后执行报错如图 原因:配置的jdk的环境变量不符合maven最低要求(我配置的是jdk ...
- 学习spring第三天
Spring第三天笔记 今日内容 Spring的核心之一 - AOP思想 (1) 代理模式- 动态代理 ① JDK的动态代理 (Java官方) ② CGLIB 第三方代理 (2) AOP思想在Spr ...