【web性能】让css更简洁、高效
DIV#divBox p span.red{color:red;}，按习惯我们对这个CSS 的理解是，浏览器先查找id为divBox的DIV元素，当找到后，再找其下的所有p元素，然后再查找所有span元素，当发现有span的class为red的时候，就应用该style。多么简单易懂的原理，可是这个理解却是完完全全相反、错误的。
匹配原理：
浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。比如之前说的 DIV#divBox p span.red{color:red;}，浏览器的查找顺序如下：
先查找html中所有class='red'的span元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有id为divBox的div元素，如果都存在则匹配上。
浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。比如如下html和css:
DIV#divBox p span.red{color:red;}
<style>
<body>
<div id="divBox">
<p><span>s1</span></p>
<p><span>s2</span></p>
<p><span>s3</span></p>
<p><span class='red'>s4</span></p>
</div>
</body>
如果按从左到右查找，哪会先查找到很多不相关的p和span元素。而如果按从右到左的方式进行查找，则首先就查找到<span class='red'>的元素。firefox称这种查找方式为key selector(关键字查询)，所谓的关键字就是样式规则中最后(最右边)的规则，上面的key就是span.red。
简洁、高效的CSS:
所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找，下面列出一些我们常见的写CSS犯一些低效错误(也是我以前常常犯的错误，还老以为这样写才是高效的)：
1.不要在ID选择器前使用标签名
一般写法：DIV#divBox
更好写法：#divBox
解释： 因为ID选择器是唯一的，加上div反而增加不必要的匹配。
2.不要再class选择器前使用标签名
一般写法：span.red
更好写法：.red
解释： 同第一条，但如果你定义了多个.red，而且在不同的元素下是样式不一样，则不能去掉，比如你css文件中定义如下：
p.red{color:red;}
span.red{color:#ff00ff}
如果是这样定义的就不要去掉，去掉后就会混淆，不过建议最好不要这样写
3.尽量少使用层级关系
一般写法：#divBox p .red{color:red;}
更好写法：.red{..}
4.使用class代替层级关系
一般写法：#divBox ul li a{display:block;}
更好写法：.block{display:block;}
PS：看有些同学对从右到左的理论保持怀疑，下面贴出firefox和google的2篇相关css解释的文章，供大家参考
mozilla firefox：https://developer.mozilla.org/en/Writing_Efficient_CSS
google page-speed：http://code.google.com/intl/zh-CN/speed/page-speed/docs/rendering.html
【web性能】让css更简洁、高效的更多相关文章
- Web 性能优化：21 种优化 CSS 和加快网站速度的方法
这是 Web 性能优化的第 4 篇,上一篇在下面看点击查看: Web 性能优化:使用 Webpack 分离数据的正确方法 Web 性能优化:图片优化让网站大小减少 62% Web 性能优化:缓存 Re ...
- 提高 web 应用性能之 CSS 性能调优
简介 Web 开发中经常会遇到性能的问题,尤其是 Web 2.0 的应用.CSS 代码是控制页面显示样式与效果的最直接“工具”,但是在性能调优时他们通常被 Web 开发工程师所忽略,而事实上不规范的 ...
- Web性能优化-合并js与css，减少请求
Web性能优化已经是老生常谈的话题了, 不过笔者也一直没放在心上,主要的原因还是项目的用户量以及页面中的js,css文件就那几个,感觉没什么优化的.人总要进步的嘛,最近在被angularjs吸引着,也 ...
- 更简洁的 CSS 清理浮动方式
CSS清理浮动有很多种方式,像使用 br 标签自带的 clear 属,使用元素的 overflow,使用空标签来设置 clear:both 等等.但考虑到兼容问题和语义化的问题,一般我们都会使用如下代 ...
- Web性能优化：What? Why? How?
为什么要提升web性能? Web性能黄金准则:只有10%~20%的最终用户响应时间花在了下载html文档上,其余的80%~90%时间花在了下载页面组件上. web性能对于用户体验有及其重要的影响,根据 ...
- [转] 《高性能HTML5》读后整理的Web性能优化内容
读后感 先说说<高性能HTML5>这本书的读后感吧,个人觉得这本书前两章跟书的标题完全搭不上关系,或者说只能算是讲解了“高性能”这三个字,HTML5完全不见踪影.个人觉得作者应该首先把HT ...
- web前端除了关注代码功能实现,还应具备web性能优化以及SEO优化的常识
web前端除了关注代码功能实现,还应具备web性能优化以及SEO优化的常识 ——不会WPO.SEO的前端工程师不是好码农 作为一名web前端工程师,除了要实现上级的要求,满足其所需要的功能,还要在平时 ...
- 关于WEB 性能优化 （摘抄）
压缩源代码和图片 JavaScript文件源代码可以采用混淆压缩的方式,CSS文件源代码进行普通压缩,JPG图片可以根据具体质量来压缩为50%到70%,PNG可以使用一些开源压缩软件来压缩,比如24色 ...
- web性能优化——浏览器相关
简介 优化是一个持续的过程.所以尽可能的不要有人为的参与.所以能自动化的或者能从架构.框架级别解决的就最更高级别解决. 这样即能实现面对开发人员是透明的.不响应,又能确保所有资源都是被优化过的. 场景 ...
随机推荐
- 51nod 1109 01组成的N的倍数
用01 组成 N的最小倍数 这个BFS搜索就好. 类似这道: ZOJ Problem Set - 1530 每次 要么是0 要么是1, 记入余数,和前驱. #include<bits/stdc ...
- 如何在Report Builder中使用fnd_profile.value
在EBS的Report开发中,需要根据客户化的一个Profile来控制用户可以访问的数据,可是在开发的过程中发现一直取不到该Profile的值,后来百度才找到了原因. 解决方法: 1.添加用户参数p_ ...
- 团队开发NABC特点
一.软件特点 我们所设计的躲避小球游戏,能够防止用户沉迷,且不会使用户有挫败感,失去玩游戏的兴趣. 二.进行NABC分析 N:我们适应于用户对娱乐.打发时间需求 A:我们用图形界面实现 B:此游戏适用 ...
- 团队开发（NABC模型）
1.NEED(需求) 基于铁大目前打电话订水的现状,我们发现了一些问题,例如不能及时送到水,水源不足等问题.本来手机在我们生活中就是非常普及的,尤其是对我们大学生来说,我们似乎患上了“手机依赖症”,没 ...
- python解析xml之lxml
虽然python解析xml的库很多,但是,由于lxml在底层是用C语言实现的,所以lxml在速度上有明显优势.除了速度上的优势,lxml在使用方面,易用性也非常好.这里将以下面的xml数据为例,介绍l ...
- Netsharp产品标识自定义设置：产品名称、版权、LOGO等
阅读本文请先阅读Netsharp下载及环境搭建 Netsharp本身是一个业务基础平台,Netsharp本身基础上开发的业务产品对客户才有价值,客户看到的产品应该不是Netsharp而是具体的业务产品 ...
- Netsharp快速入门(之7) 基础档案(工作区1 向导创建工作区)
作者:秋时 杨昶 时间:2014-02-15 转载须说明出处 3.5 商品开发 3.5.1 创建部件工作区 3.5.1.1 工作区向导 1.打开平台工具,选择界面管理节点下的部件工作区 ...
- JS 学习笔记--3--数据类型
1.typeof 操作符 用来获取变量或者字面量的类型,也可以typeof(x);但是typeof并非内置函 数,而是一个操作符变量2.JS 一共6种类型 Undefined/Null/Boolean ...
- Matlab中diag函数注意事项
在给李X写SVD代码的时候注意到的. >> a = magic(3) a = 8 1 6 3 5 7 4 9 2 >> diag(a) ans = 8 5 2 >> ...
- 二分图匹配 分类： ACM TYPE 2014-10-01 19:57 94人阅读 评论(0) 收藏
#include<cstdio> #include<cstring> using namespace std; bool map[505][505]; int n, k; bo ...