高性能CSS(三)
CSS选择器对性能的影响源于浏览器匹配选择器和文档元素时所消耗的时间,所以优化选择器的原则是应尽量避免需要消耗更多匹配时间的选择器。而在这之前我们需要了解CSS选择器匹配的机制,如例子的子选择器规则:
#header > a {font-weight:blod;}
我们中的大多数人都是从左到右的阅读习惯,可能也会习惯性的设定浏览器也是从左到右的方式进行匹配规则,因为会推测这条规则的开销并不高。我们这样假象浏览器会像这样的方式工作:找到唯一的id为header为的元素,然后把这个样式规则应用到直系子元素中的a元素上。我们知道文档中只有一个id为header的元素,并且它只有几个a类型的子节点,所以这个CSS选择器应该相当高效。
事实上,却恰好相反,CSS选择器是从右到左进行规则匹配。了解这个机制后,例子中看似高效的选择器在实际中的匹配开销是很高的,浏览器必须遍历页面中所有的a元素并且确定其父元素的id是否为header。
如果把例子的子选择器改为后代选择器则会开销更多,在遍历页面中所有a元素后还需向其上级遍历直到根节点。
#header a {font-weight:blod;}
理解了CSS选择器从右到左匹配的机制后,可以理解选择器中最右边的规则往往决定了浏览器继续左移匹配的工作量,我们把最右边选择规则称之为关键选择器。
通配选择器使用 * 符合表示,可匹配文档中的每一个元素。如下例规则将所有元素的字体大小设置为20px:
* { font-size:20px;}
通配选择器作用于所有的元素,如规则最右边为通配符:
.selected * {color: red;}
浏览器匹配文档中所有的元素后分别向上逐级匹配class为selected的元素,直到文档的根节点,因此其匹配开销是非常大的,通常比开销最小的ID选择器高出1~3个数量级,所以应避免使用关键选择器是通配选择器的规则。
高性能CSS(三)的更多相关文章
- Java Web高性能开发(三)
今日要闻: Clarifai:可识别视频中物体 最近几年,得益于深度学习技术的发展,谷歌和Facebook等企业的研究人员在图形识别软件领域取得了重大突破.现在,一家名为Clarifai的创业公司则提 ...
- CSS三种写法的优先级
在HTML文件中引入CSS样式有三种方法: 外部样式:通过link标签引入CSS样式: 内页样式:写在HTML页面里面的style标签里面: 行内样式:写在对应标签的style属性里面. 我知道一般情 ...
- CSS三种样式
CSS 指层叠样式表 (Cascading Style Sheets): 1 内联样式:无法复用,在元素style内写 ,很少使用: 2 内部样式:在head元素内style属性内写,此样式可以被当前 ...
- css三种样式表写法
css三种样式表:1.内嵌样式表: <head> <style type="text/css"> 样式表写法 </style> < ...
- 前端 CSS 三种引入方式
CSS三种引入方式 行内样式 内接样式 外部样式 链接式 导入式 行内样式 就是在标签加上style属性设置样式 <!DOCTYPE html> <html lang="e ...
- Css三栏布局自适应实现几种方法
Css三栏布局自适应实现几种方法 自适应实现方法我们可以从三个方法来做,一个是绝对定位 ,自身浮动法 和margin负值法了,下面我们一起来看看这三个例子吧,希望例子能帮助到各位同学. 绝对定位法三栏 ...
- css三栏布局方案整理
日常开发中,经常会用到css三栏布局,现将工作中常用的css 三栏布局整理如下: 什么是三栏布局: 三栏布局,顾名思义就是两边固定,中间自适应. 一. float布局 <!DOCTYPE htm ...
- 006 CSS三种引入方式
CSS三种引入方式 一.三种方式的书写规范 1.行间式 <div style="width: 100px; height: 100px; background-color: red&q ...
- Python 45 css三种引入方式以及优先级
一:css三种引入方式 三种方式为:行间式 | 内联式 | 外联式 行间式 1.在标签头部的style属性内 2.属性值满足的是css语法 3.属性值用key:value形式赋值,value具 ...
- css三种引入方式以及其优先级的说法
css 三种引入方式 方式一:行间式 1.在标签头部的style属性内 2.属性值满足css语法 3.属性值用key:value形式赋值,value具有单位 4.属性值之间用 分号 : ...
随机推荐
- Codeforces Round #192 (Div. 1) B. Biridian Forest 暴力bfs
B. Biridian Forest Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/329/pr ...
- phpcms v9和discuz X3.1实现同步登陆退出论坛(已实现)
网络上文章很多,按步骤配置好了之后phpcms可以同步登录dz,但是dz登录后状态却无法同步到phpcms,网络上找了很多资料都大同小异,头大.只能自己调试了,废话不多说了. 以下网络上抄 ...
- 第一周:读取XML深度数据并将其重建为三维点云
本周主要任务:学习PCL点云库,掌握利用PCL对点云处理的方法 任务时间:2014年9月1日-2014年9月7日 任务完成情况:完成了读取单幅xml深度数据,并重建三维点云并显示 任务涉及基本方法: ...
- [AngularJS] Using ngModel in Custom Directives
You can use ngModel in your own directives, but there are a few things you'll need to do to get it w ...
- php实现网页标签补全方法(转)
导读:PHP在生成静态文件的时候,有时候会因为一些混编问题让HTML标签不完整或混乱而导致页面混乱.作者分享下面这段小代码可以非常方便解决问题. 如果你的网页内容的html标签显示不全,有些表格标签不 ...
- 深入MySQL源码 学习方法 何登成专家
MYSQL 技术圈 有哪些做得好,又注重分享的公司: Oracle MySQL, MariaDB, Percona,Google, FB, Twitter, Taobao, NetEase… 有哪些值 ...
- Jquery 表格固定表头
网上找了好多现成的.结果没一个能成.只得自己动手. (function($){ $.fn.fixHeader = { init : function(obj){ var p = obj.parent( ...
- Python学习 之 运算符&表达式
1.Python运算符包括:赋值运算符.算术运算符.关系运算符.逻辑运算符. 表达式是将不同的数据(包括变量.函数)用运算符号按一定规则连接起来的一种式子. 2.赋值运算符:=.+=.-=.*=./= ...
- windows快捷操作
命令行启动或关闭VMWare服务: net start VMwareHostdVMAuthdServiceVMUSBArbService"VMware NAT Service"VM ...
- 关于Linux的10个核心面试问题与答案
转载:http://www.linuxeden.com/html/news/20140222/148676.html 又到了以轻松的心情来读些严肃内容的时刻了,哈!这是另一篇关于面试问题的文章,我们将 ...