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

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

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

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

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

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

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

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

Sizzle引擎的主体部分已经分析完毕了,今天为这部分划一个句号. a. Sizzle解析流程总结 是时候该做一个总结了.Sizzle解析的流程已经一目了然了. 1.选择器进入Sizzle( selector, context, results, seed )函数,先对选择器不符合要求的(比如没有选择器.选择器不为字符串.上下文环境context不是节点元素且不是document)排除,直接返回:接着判断如果选择器是简单的选择器(只有一个元选择器,比如“#ID”.“.CLASS”.“TAG”等)…

不负十年后的自己,共勉! 前端性能优化一直是一个比较热门的话题,我们总是在尽我们最大的努力去,提高我们的页面性能,比如减少HTTP请求,利用工具对资源进行合并压缩,脚本置底,避免重复请求,css sprite等等.其实大量的方法都是在减少文件大小,减少请求,优化JS,很少有人对css十分关注,甚至有人都不对css进行压缩. 其实,不规范的css会导致很多性能问题,这些问题可能在一些小的项目中不够明显,但是在大型项目中就会显现出来. css匹配原理 在优化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实现了饼图轮播.地图标记点闪烁等动画,然而在一张大屏上同时显示了许多张图表时,持续的动画效果有时会出现掉帧.卡顿的情况,需要对动画性能进行优化.本文简单介绍了chrome浏览器性能分析工具和CSS动画使用GPU加速进行性能优化的解决方案. 浏览器渲染流程 这是浏览器渲染引擎的处理过程: 接收到文档后,渲染…

为了分析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选择器.优先级与匹配原理 导航 为了分析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 使用的规则也很简单,就是 选择器的权值加到一起,大的优先:如果权值相同,后定义的优先 .虽然很简单,但如…

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

来源: http://blog.jobbole.com/31178/ 你的网站正常运转.现在我们来让它运转的更快.网站的性能由页面载入速度和代码执行效率决定.一些服务可以让你的网站载入更快,比如压缩JS和CDN,但是让代码执行的更快你要做的事情. 代码中很小的改动都可能对性能造成巨大的影响.快速灵活的网站和可怕的“无响应脚本”对话框可能只有几行代码的差别.这篇文章告诉你如何通过用Chrome开发者工具(Chrome Developer Tools)找到这几行关键的代码. 设置一个基线 我们来看一…

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

我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用哪些值时,浏览器不仅要考虑继承,还要考虑声明的特殊性,另外需要考虑声明本身的来源.这个过程就称为层叠.——<css权威指南> 如下图,css规则由选择器和声明块组成,写在选择器后面大括号里的就叫声明.…

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

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

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

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

http://blog.jobbole.com/78995/     首页 最新文章 IT 职场 前端 后端 移动端 数据库 运维 其他技术 - 导航条 - 首页 最新文章 IT 职场 前端 - JavaScript - HTML5 - CSS 后端 - Python - Java - C/C++ - PHP - .NET - Ruby - Go 移动端 - Android - iOS 数据库 运维 - Linux - UNIX 其他技术 - Git - 机器学习 - 算法 - 测试 - 信息安…

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

CSS选择器:基本可以分为通配选择器,标签选择器,类选择器,ID选择器,简单属性选择,具体属性选择,根据部分属性值选择,特定属性选择,从结构上来分还有后代选择器,子元素选择器,相邻兄弟选择器以及伪类.详细一些请见下表:类型选择符 E{}属性选择符E[attr]{}E[attr=value]{}选择具有attr属性且属性值等于value的EE[attr~=value]{}选择具有attr属性且属性值为用-连字符分隔的字词列表,由value开始的E.例如 <!DOCTYPE html PUBLIC…

注意:本文是我们的 PHP 性能分析系列的第三篇,点此阅读 PHP 性能分析第一篇: XHProf & XHGui 介绍 ,或  PHP 性能分析第二篇: 深入研究 XHGui. 在本系列的 第一篇 中,我们介绍了 XHProf .而在 第二篇 中,我们深入研究了 XHGui UI, 现在最后一篇,让我们把 XHProf /XHGui 的知识用到工作中! 性能调优 不用运行的代码才是绝好的代码.其他只是好的代码.所以,性能调优时,最好的选择是首先确保运行尽可能少的代码. OpCode 缓存 首先…

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

选择器的优先级关系到元素应用哪个样式.在CSS2.1的规范(http://www.w3.org/TR/2009/CR-CSS2-20090908/cascade.html#specificity)中是这样描述的: 如果声明来自于“style”属性,而不是带有选择器的规则,则记为 1,否则记为 0 (= a)(HTML元素的style属性也是样式规则,因为这些样式规则没有选择器,因此记为a=1,b=0,c=0,d=0) 计算选择器中 ID 属性的个数 (= b) 计算选择器中其他属性(类.属性选择…

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