一、浏览器的发展与CSS

网页浏览器主要通过HTTP协议连接网页服务器而取得网页,HTTP容许网页浏览器送交资料到网页服务器并且获取网页。目前最常用的 HTTP 是 HTTP/1.1,这个协议在RFC2616中被完整定义。HTTP/1.1 有其一套Internet Explorer并不完全支援的 标准,然而 许多其他当代的网页浏览器则完全支援这些标准。网页的位置以URL(统一资源定位符)指示,此乃网页的地址;以http:开首的便是 通过 HTTP协议登陆。很多浏览器同时支援其他类型的URL及协议,例如ftp:是FTP(档案传送协议)、gopher:是Gopher及https: 是 HTTPS(以SSL加密的HTTP)。

早期的网页浏览器只支援简易版本的HTML。专属软件的浏览器的迅速发展导致非标准的HTML代码的产生。

但随着HTML的成长,为了满足设计师的要求,HTML获得了很多显示功能。随着这些功能的增加外来定义样式的语言越来越没有意义了。

1994年哈坤·利提出了CSS的最初建议。伯特·波斯(BertBos)当时正在设计一个叫做Argo的浏览器,他们决定一起合作设计CSS。

当时已经有过一些样式表语言的建议了,但CSS是第一个含有“层叠”的主意的。在CSS中,一个文件的样式可以从其他的样式表中继承下来。读者在有 些 地方可以使用他自己更喜欢的样式,在其他地方则继承,或“层叠”作者的样式,这种层叠的方式使作者和读者都可以灵活地加入自己的设计,混合各人的爱好。

1997年初,W3C内组织了专门管CSS的工作组,其负责人是克里斯·里雷。这个工作组开始讨论第一版中没有涉及到的问题,其结果是1998年5月出版的第二版要求。到2007年为止,第三版还未完备。

二、浏览器是如何渲染页面和加载页面

为什么有些网站打开的时候会加载会很慢,而且是整个页面同时显示的,而有些网站是从顶到下逐步显示出来的?要搞懂这个可以先从下面这个常规流程开始:

  1. 浏览器下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。
  2. 在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)。
  3. 如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载。
  4. 并且在下载后进行解析,解析过程中,停止页面所有往下元素的下载。
  5. 样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染的)重新进行渲染。
  6. JS、CSS中如有重定义,后定义函数将覆盖前定义函数。

这里关键的是第2-5这三点。渲染效率与下面三点有关:

  1. css选择器的查询定位效率
  2. 浏览器的渲染模式和算法
  3. 要进行渲染内容的大小

三、什么是CSS以及CSS的优点

什么是CascadingStyleSheets(层叠样式表)*CSS是CascadingStyleSheets(层叠样式表)的简 称.*CSS 语言是一种标记语言,它不需要编译,可以直接由浏览器解释执行(属于浏览器解释型语言).*在标准网页设计中CSS负责网页内容 (XHTML)的表 现.*CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀.*可以通过简单的更改 CSS文件,改变网页 的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.*CSS是由W3C的CSS工作组产生和维护的.

采用CSS+DIV进行网页重构相对与传统的TABLE网页布局而具有以下3个显著优势:

  1. 表现和内容相分离将设计部分剥离出来放在一个独立样式文件中,HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好。
  2. 提高页面浏览速度对于同一个页面视觉效果,采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多,前者一般只有后者的1/2大小。浏览器就不用去编译大量冗长的标签。
  3. 易于维护和改版你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。

四、浏览器对CSS的匹配原理

浏览器CSS匹配不是从左到右进行查找,而是从右到左进行查找。比如之前说的DIV#divBoxpspan.red{color:red;},浏览器 的查找顺序如下:先查找html中所有class=’red’的span元素,找到后,再查找其父辈元素中是否有p元素,再判断p的父元素中是否有id为 divBox的div元素,如果都存在则CSS匹配上。

浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。firefox称这种查 找方式为keyselector(关键字查询),所谓的关键字就是样式规则中最后(最右边)的规则,上面的key就是span.red。

五、优化你的CSS

所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找,下面列出一些我们常见的写CSS犯一些低效错误:

1、不要在ID选择器前使用标签名
一般写法:DIV#divBox
更好写法:#divBox
解释:因为ID选择器是唯一的,加上div反而增加不必要的CSS匹配。
2、不要在class选择器前使用标签名
一般写法:span.red
更好写法:.red
解释:同第一条,但如果你定义了多个.red,而且在不同的元素下是样式不一样,则不能去掉,比如你css文件中定义如下:
p.red{color:red;}
span.red{color:#ff00ff}
如果是这样定义的就不要去掉,去掉后就会混淆,不过建议最好不要这样写

3、尽量少使用层级关系
一般写法:#divBoxp.red{color:red;}
更好写法:.red{..}
4、使用class代替层级关系
一般写法:#divBoxullia{display:block;}
更好写法:.block{display:block;}
5、在css渲染效率中id和class的效率是基本相当的
class最在第一次载入中被缓存,在层叠中会有更加好的效果,在根部元素采用id会具有更加好(id有微妙的速度优势)。

转载于:https://www.cnblogs.com/xly1208/archive/2011/11/18/2254680.html

CSS原理与CSS经验分享相关推荐

  1. Lucene底层原理和优化经验分享(1)-Lucene简介和索引原理

    基于Lucene检索引擎我们开发了自己的全文检索系统,承担起后台PB级.万亿条数据记录的检索工作,这里向大家分享下Lucene底层原理研究和一些优化经验. 从两个方面介绍: 1. Lucene简介和索 ...

  2. Lucene底层原理和优化经验分享(2)-Lucene优化经验总结

    转自:https://blog.csdn.net/njpjsoftdev/article/details/54133548 系统优化遵从木桶原理:一只木桶能盛多少水,并不取决于最高的木板,而取决于最短 ...

  3. 利用html制作网页的小结,HTML_CSS制作网页的一些经验分享,CSS制作网页总结的一些经验 1: - phpStudy...

    CSS制作网页的一些经验分享 CSS制作网页总结的一些经验 1: ID用于标识页面单独元素以及持久行的结构性元素 方便JS的调用 类用于标识同一页面可重复定义使用的结构性元素 ID与类的命名需与表现形 ...

  4. 关于CSS浮动(float,clear)的通俗讲解(经验分享)

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  5. CSS Sprites(CSS精灵)技术及其优化经验分享

    CSS Sprites 技术对于广大的前端工程师来说应该是一点也不陌生.这个被国内开发者昵称为CSS精灵.CSS雪碧的家伙到底解决了什么问题,我们又怎样合理使用这个技术呢?下面让我们详细的聊聊. 在大 ...

  6. 【CSS】537- 认真介绍 CSS 原理

    作为前端,我们每天都在与CSS打交道,那么CSS的原理是什么呢? 一.浏览器渲染 开篇,我们还是不厌其烦的回顾一下浏览器的渲染过程,先上图: 正如上图所展示的,我们浏览器渲染过程分为了两条主线: 其一 ...

  7. html精灵图资源,知识分享:HTML5+CSS3基础之CSS Sprites(CSS精灵)

    原标题:知识分享:HTML5+CSS3基础之CSS Sprites(CSS精灵) CSS Sprites介绍 Css sprites 可翻译为css精灵,也有人翻译为css雪碧,因为sprite也有雪 ...

  8. 前端开发必须要了解的CSS原理

    从事Web前端开发的人都与CSS打交道很多,有的人也许不知道CSS是怎么去工作的,写出来的CSS浏览器是怎么样去解析的呢?当这个成为我们提高CSS水平的一个瓶颈时,是否应该多了解一下呢? 一.浏览器的 ...

  9. [css] 解释下 CSS sprites的原理和优缺点分别是什么

    [css] 解释下 CSS sprites的原理和优缺点分别是什么 我来说下我的观点 原理: 多张图合并成一张图优点&解决的问题hover效果,如果是多个图片,网络正常的情况下首次会闪烁一下. ...

最新文章

  1. 由浅入深理解java集合(二)——集合 Set
  2. cocos2d-x 错误异常抛出捕获和崩溃拦截
  3. 情感分析——深入snownlp原理和实践
  4. 这个开源项目...看了就停不下来啊!
  5. 最简单的网络图片的爬取 --Pyhon网络爬虫与信息获取
  6. 10余万行C代码开源之后,我被震惊了。。。
  7. debian 安装 php,Ubuntu/Debian上安装Nginx+php环境详细教程
  8. java 线程访问控件_多线程下访问控件的方式
  9. ASP.NET自定义控件组件开发 第二章 继承WebControl的自定义控件
  10. [转]laravel 4之视图及Responses
  11. 深度剖析:针对深度学习的GPU共享
  12. puppet server升级,puppet 常见错误解决
  13. 机器学习(六)统计学习理论
  14. 仓库盘点好方法,使用安卓盘点机PDA扫描商品条码进行超市盘点
  15. linux 模拟arm,拒绝开发板, 用 SkyEye 就可以模拟 ARM Linux!
  16. 基于主成分分析法的安全评价模型
  17. 分解质因数Java_Java 分解质因数
  18. windows批量移动文件bat脚本
  19. python — cnn+opencv 识别车牌
  20. Java 统一返回结果集封装

热门文章

  1. php表格合并_如何在php生成的表中合并单元格?
  2. mysql输入正确,但远程连接报错
  3. 创建的Maven Web工程无法部署到服务器及web-app_2_3.dtd规范
  4. 对Redis配置中bind的探索
  5. 腾讯AI加速器三期全球招募开启,打造AI+产业生力军
  6. TensorFlow 1.11.0正式版发布了,强力支持Keras
  7. AlphaGo Zero你也来造一只,PyTorch实现五脏俱全| 附代码
  8. 一头盔一电极,MIT机器人读心完毕
  9. 谷歌大脑AutoML最新进展:不断进化的阿米巴网络
  10. Excel中 ColorIndex 属性值和颜色对照表