CSS选择器 - 性能的探究及提升

[本博客为原创:http://www.cnblogs.com/HeavenBin/] 前言: 在工作中编写CSS样式表时随着选择器层数的增加总会看到选择器又丑又长的情况,利用工作之余研究从其命名再到如何提高其性能.本博客将以"通俗易懂"."简洁""的方式来探究CSS选择器的性能,以及叙述总结如何提升CSS选择器的性能.(2017-8-20) 一. CSS选择器性能是如何消耗的? 工作原理:浏览器利用CSS选择器来匹配文档元素. 工作流程:例如 #hd .…

如何提升 CSS 选择器性能

CSS 选择器性能损耗来自? CSS选择器对性能的影响源于浏览器匹配选择器和文档元素时所消耗的时间,所以优化选择器的原则是应尽量避免使用消耗更多匹配时间的选择器.而在这之前我们需要了解CSS选择器匹配的机制, 如子选择器规则: #header > a {font-weight:blod;} 我们中的大多数人都是从左到右的阅读习惯,会习惯性的设定浏览器也是从左到右的方式进行匹配规则,推测这条规则的开销并不高. 我们会假设浏览器以这样的方式工作:寻找 id 为 header 的元素,然后将样式规则应…

提升 CSS 选择器性能的方法

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

作为一个前端开发, 我觉得很有必要了解浏览器对css选择器的解析,因为这个关系到页面的渲染,高效的方式.避开开销大的方式这些无疑为网站加载缩短了时间. 最近在新的项目中陷入了一个误区,也是出于对jquery使用的了解,于是把jquery中选择器的优化放到了写css上面,但是发现其实这两者是不一样的,浏览器解析css是本身默认的规则,而jquery是模拟出来的规则为了用户更好的使用.后面去查找这方面的资料,于是发现自己的错误是那么的可笑. 找到了阿里前端的一篇文章http://www.aliued…

CSS选择器性能分析

写了几篇关于js的博客,也是关于性能的,现在,我觉得有必要那css来认真分析一下了.之前只是看别人这么写就跟着写,但是没有去研究这样写或者是不是正确的写法,性价比怎么样,渲染的效率好么!这些都没有考虑. 那么,现在,我提出css的一些选择器的性能分析. .wrapper ul li a{color:red;--} .wrapper .list p.name{margin:10px ;--} * {margin:;padding:} -- 这样写完了以后,渲染的效果至少呈现出来了,可是,要想到 …

网站CSS选择器性能讨论

CSS选择符由一些初始化参数组成,这些参数指明了要应用这个CSS规则的页面元素.作为一个网站的前端开发工程师,应该避免编写一些常见的开销很大的CSS选择符模式,尽量编写高效的CSS选择符,从而加快页面的渲染速度,缩短页面呈现时间. 我们先来看一下safari和webkit的架构师David Hyatt的两段话: 样式系统从最右边的选择符开始向左进行匹配规则.只要当前选择符的左边还有其他选择符,样式系统就会继续向左移动,直到找到和规则匹配的元素,或者因为不匹配而退出. 如果你非常在意页面的性能那千…

看这一篇就够了,css选择器知识汇总

对大多技术人员来说都比较熟悉CSS选择器,举一例子来说,假设给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通过Firebug查看,发现没有起作用的属性被覆盖了,这个时候突然意识到了CSS选择器的优先级问题.严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和ID选择器.而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用.而在标签内写入style=""的方式,应该是CSS的一种引入方式,而不是选择器,因为根本就没有用到选择器.而…

编写高效的CSS选择器

高效的CSS已经不是一个新话题,也不是一个我非得重拾的话题,但是,它却是自我在SKY工作以后,真正感兴趣并始终关注的一个话题. 很多人或者忘记了,或者仅仅是没有意识到,CSS可以是高效的也可能导致低能.然而,我们可以不考虑当你自认为会的太少而使用了低效的CSS这种情况. 这些规则只真正用在性能要求很高的网站上,这些网站对速度要求很高,任何一个页面可能含有成百上千个DOM元素.但是实践出真理,不管你是在打造下一个facebook 还是在开发一个本地的展示网页,多学点总是好的.... CSS 选择器…

css选择器的性能

性能排序: 1.id选择器(#myid) 2.类选择器(.myclassname) 3.标签选择器(div,h1,p) 4.相邻选择器(h1+p) 5.子选择器(ul < li) 6.后代选择器(li a) 7.通配符选择器(*) 8.属性选择器(a[rel="external"]) 9.伪类选择器(a:hover,li:nth-child) 在编写css时,应该首先考虑使用性能好的选择器. 大家一般会关心js的性能,很少去考虑css对性能的影响,为什么?因为css对性能的影响可…

CSS选择器从右向左的匹配规则

CSS选择器从右向左的匹配规则下面这个栗子,CSS选择器它是如何工作的? .mod-nav h3 span {font-size: 16px;} 如果不知道匹配规则,可能的理解是从左向右匹配:先找到.mod-nav,然后逐级匹配h3.span,在这个过程中如果遍历到叶子节点都没有匹配就需要回溯,继续寻找下一个分支. 但事实上,CSS选择器的读取顺序是从右向左. 还是上面的选择器,它的读取顺序变成:先找到所有的span,沿着span的父元素查找h3,中途找到了符合匹配规则的节点就加入结果集:如果…

CSS选择器学习小结

关于CSS选择器的问题,在实际项目中,以及一般的前端面试中会经常遇到.下面对此做一小结,梳理和巩固相关方面知识.(如有不妥之处,还望大家及时批评指正,以免误导他人) 一.选择器种类 1.id选择器(#myid):2.类选择器(.myclass):3.标签选择器(div,ul,span):4.相邻兄弟选择器(h1+p):5.子选择器(div>span):6.后代选择器(div span,div.myclass):7.通配符选择器(*):8.属性选择器(input[type="text&quo…

CSS性能分析，如何优化CSS提高性能

不负十年后的自己,共勉! 前端性能优化一直是一个比较热门的话题,我们总是在尽我们最大的努力去,提高我们的页面性能,比如减少HTTP请求,利用工具对资源进行合并压缩,脚本置底,避免重复请求,css sprite等等.其实大量的方法都是在减少文件大小,减少请求,优化JS,很少有人对css十分关注,甚至有人都不对css进行压缩. 其实,不规范的css会导致很多性能问题,这些问题可能在一些小的项目中不够明显,但是在大型项目中就会显现出来. css匹配原理在优化css之前我们需要了解下css是怎么进行工…

总结30个CSS选择器

或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * { margin:0; padding:0; } *选择器是选择页面上的全部元素,上面的代码作用是把全部元素的margin和padding设为0,最基本的清除浏览器默认样式的方法. *选择器也可以应用到子选择器中,例如下面的代码: #container * { border:1px solid bl…

CSS选择器、CSS hack及CSS执行效率

主要内容: 1.CSS选择器.优先级与匹配原理 2. CSS 引入的方式有哪些 ? link 和 @import 的区别是 ? 3.CSS hack 4.如何书高效CSS 一.CSS选择器.优先级与匹配原理 CSS选择器大概可以分为:1.id选择器(#myid) 2.类选择器(.myclassname) 3.标签选择器(div,h1,p) 4.相邻选择(h1+p)6.后代选择器(li a)7.通配符选择器(*) 8.属性选择器(a[rel='externaml']) 9.伪类选…

CSS选择器优先级 CSS权值

计算指定选择器的优先级:重新认识CSS的权重标签的权值为 0,0,0,1 类的权值为 0,0,1,0 属性选择的权值为 0,0,1,1 ID的权值为 0,1,0,0 important的权值为最高 1,0,0,0 使用的规则也很简单,就是选择器的权值加到一起,大的优先:如果权值相同,后定义的优先 .虽然很简单,但如果书写的时候没有注意,很容易就会导致CSS的重复定义,代码冗余. 从上面我们可以得出两个关键的因素: 权值的大小跟选择器的类型和数量有关样式的优先级跟样式的定义顺序有关总结:…

CSS选择器、优先级与匹配原理

为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好废话就不多说了 CSS 2.1 selectors, Part 1 计算指定选择器的优先级:重新认识CSS的权重标签的权值为 0,0,0,1 类的权值为 0,0,1,0 属性选择的权值为 0,0,1,1 ID的权值为 0,1,0,0 important的权值为最高 1,0,0,0 使用的规则也很简单,就是选择器的权值加到一起,大的优先:如果权值相同,后定义的优先 .虽然很简单,但如果书写的时候没有注意,很容易就会导致C…

CSS选择器及其优先级

一:一些普通的选择器 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link href="MyCss.css" type="text/css" rel="stylesheet"> </head> &l…

css选择器选择顺序是从右往左的，为什么？

https://segmentfault.com/q/1010000000713509 为什么 CSS 选择器解析的时候是从右往左? CSS 的后代选择器本身就是一种在标准里面不那么推荐的方式. 首先,对浏览器来说,ID 选择器 #xx 是最快的,其次是 class 选择器.html 元素选择器等. 那为什么从右向左的规则要比从左向右的高效? 如图: 假如 DOM 的结构如上图,匹配规则是 .mod-nav h3 span.若从左向右的匹配,过程是:从 .mod-nav 开始,遍历子节点 hea…

CSS选择器、优先级与匹配原理（转）

CSS选择器.优先级与匹配原理导航为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好废话就不多说了 CSS 2.1 selectors, Part 1 计算指定选择器的优先级:重新认识CSS的权重标签的权值为 0,0,0,1 类的权值为 0,0,1,0 属性选择的权值为 0,0,1,1 ID的权值为 0,1,0,0 important的权值为最高 1,0,0,0 使用的规则也很简单,就是选择器的权值加到一起,大的优先:如果权值相同,后定义的优先 .虽然很简单,但如…

30类css选择器

大概大家都知道id,class以及descendant选择器,并且整体都在使用它们,那么你正在错误拥有更大级别的灵活性的选择方式.这篇文章里面提到的大部分选择器都是在CSS3标准下的,所以它们只能在相应最新版本的浏览器中才能生效,你完全应该把这些都记在你聪明的脑袋里面. 1. * 1 2 3 4 * { margin: 0; padding: 0; } 在我们看比较高级的选择器之前,应该认识下这个众所周知的清空选择器.星号呢会将页面上所有每一个元素都选到.许多开发者都用它来清空margi…

关于CSS选择器的效率问题

最近一段时间接触CSS比较多,所以从网上找了写资料,这里做下总结. 以下是CSS选择器的效率排名: id选择器(#myid) 类选择器(.myclassname) 标签选择器(div,h1,p) 相邻选择器(h1+p) 子选择器(ul < li) 后代选择器(li a) 通配符选择器(*) 属性选择器(a[rel="external"]) 伪类选择器(a:hover,li:nth-child) id和类名用于关键选择器上效率是最高的,而CSS3的仿伪类和属性选择器,虽然使用方便,…

CSS选择器4是下一代CSS选择器规范

那么,这一版本的新东西有哪些呢? 选择器配置文件 CSS选择器分为两类:快速选择器和完整选择器.快速选择器适用于动态CSS引擎.完整选择器适用于速度不占关键因素的情况,例如document.querySelector. 选择器上下文不同,发挥的作用不同.一些功能强大的选择器很遗憾太慢了,不能切实地适应高性能环境.要做到这一点,需要在选择器规范里定义两个配置文件[参见]. :HAS :has选择器是第四代选择器中最有趣的部分,但它有个重要的警告,下面会描述.它能让你改变选择器的选择对象,即实际将被…

css,html性能优化

css性能优化 CSS是负责布局和渲染的重要角色,漂亮的页面当然能够吸引用户.本文是自己在开发过程中总结的关于CSS与性能的关系,可能有不对之处,希望能够指出. ? 1.所有的样式尽量放在css文件中,HTML标签中不要写style属性,因为浏览器在所有的样式加载完成之后,才会开始渲染整个页面,写在标签属性必会加长浏览器的渲染时间 2.删除默认样式代码因为会影响浏览器的执行时间.如:align="left",默认就是左对齐 3.减少使用相对定位因为这会影响浏览器的repain和re…

CSS选择器渲染效率

1 浏览器如何识别你的选择器首先我们需要清楚,浏览器是如何读取选择器,以识别样式,并将相应的样式附于对应的HTML元素,达到美化页面的效果.Chris Coyier曾在<Efficiently Rendering CSS>一文中说过"浏览器读取你的选择器,遵循的原则是从选择器的右边到左边读取.换句话说,浏览器读取选择器的顺序是由右到左进行".比如说: div.nav < ul li a[title] 上面的实例来说,浏览器首先会尝试在你的HTML标签中寻找"…

CSS入门介绍（二）CSS选择器

css选择器什么是选择器? 选择器是你构造好网页的结构,需要给这些结构赋予样式,这时候就需要用到选择器,利用选择器将元素与样式一一对应:两者的对应关系可以是一对一,一对多,多对一. 选择器的分类: 这里我只展示几种比较常见的类型, 1. 标签选择器给同一种标签添加样式,例如: 标签名{ 属性名:属性值: } <style type="text/css"> p{ color: turquoise; } div{ width: 50px; height: 50px; bac…

深入理解CSS选择器优先级

题外话今天把 <CSS REFACTORING>(中文名叫<CSS重构:样式表性能调优>)电子书粗略的浏览了一遍,这本书很薄,150页左右,首先是介绍了什么是重构并举了两个简单的重构例子,然后介绍了CSS的选择器优先级,再然后介绍了CSS的最佳实践, 再然后就介绍如何重置浏览器的默认样式,最后比较虚的.纯理论的介绍了CSS重构的策略,然后就没有然后了.这书整体内容很简单,但是,其中对于 CSS选择器优先级计算作了比较深入的讲解. 什么是选择器优先级(Specificity) 直…

编写高效的 CSS 选择器

高效的CSS已经不是一个新的话题了,也不是我一个非得重拾的话题,但它却是我在Sky公司工作之时,所感兴趣的,关注已久的话题. 有很多人都忘记了,或在简单的说没有意识到,CSS在我们手中,既能很高效,也可以变得很低能.这很容易被忘记,尤其是当你意识到你会的太少,CSS代码效率很低的时候. 下面的规则只真正被应用到那些速度要求很高,有成百上千的DOM元素被绘制在页面上的大型网站.但是,实践出真理,这和你是在创建下一个Facebook,还是写一个本地的展示页面都没有关系,多知道一点总是好的. CSS选…

CSS选择器【记录】

1.基本选择器 2.组合选择器 3.伪类选择器 4.伪元素选择器 CSS选择器规定了CSS规则会应用到哪些元素上 1.基本选择器基本选择器:通配选择器.元素选择器.类选择器.ID选择器.属性选择器 /* 通配选择器.性能最低的一个CSS选择器 */ *{} /* 元素选择器 */ element{} /* 类选择器 */ .class{} /* ID选择器 */ id{} /* 属性选择器 */ element[attribute]{} element[attribute="value&quo…

CSS 选择器的兼容性

参考网站 http://blog.csdn.net/yume_sola/article/details/70215695 http://www.youdiancms.com/jianrong/614.html 标签选择器就是用标签名来当做选择器. 1 .所有标签都能够当做选择器,比如body.h1.dl.ul.span等等 2 .不管这个标签藏的多深,都能够被选择上. 3 .选择的是所有的,而不是某一个.所以是共性,而不是特性. 希望页面上所有的超级链接都没有下划线: a{ /*去掉下划线:*…

必须记住的 30 类 CSS 选择器

大概大家读知道`id`,`class`以及`descendant`选择器,并且整体都在使用它们,那么你正在错误拥有更大级别的灵活性的选择方式.这篇文章里面提到的大部分选择器都是在CSS3标准下的,所以它们只能在相应最新版本的浏览器中才能生效,你完全应该把这些都记在你聪明的脑袋里面. 1. * * { margin: 0; padding: 0; } 在我们看比较高级的选择器之前,应该认识下这个众所周知的清空选择器.星号呢会将页面上所有每一个元素都选到.许多开发者都用它来清空`margin`和`p…

【CSS选择器 - 性能的探究及提升】的更多相关文章