前端开发之CSS原理详解


Posted in Javascript onMarch 11, 2017

前端开发之CSS原理详解

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

  一、浏览器的发展与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 的优点

什么是 CSS?

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

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

1. 表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中,HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好。

2. 提高页面浏览速度。对于同一个页面视觉效果,采用 CSS+DIV 重构的页面容量要比 TABLE 编码的页面文件容量小得多,前者一般只有后者的1/2大小。浏览器就不用去编译大量冗长的标签。

3. 易于维护和改版。你只要简单的修改几个 CSS 文件就可以重新设计整个网站的页面。

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

浏览器CSS匹配不是从左到右进行查找,而是从右到左进行查找。比如之前说的 DIV#divBox p span.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 代替层级关系

一般写法:#divBox ul li a{display:block;}

更好写法:.block{display:block;}

5、在 CSS 渲染效率中 id 和 class 的效率是基本相当的

class 会在第一次载入中被缓存,在层叠中会有更加好的效果,在根部元素采用id会具有更加好(id有微妙的速度优势)。

       感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
ajax更新数据后,jquery、jq失效问题
Mar 16 Javascript
js里怎么取select标签里的值并修改
Dec 10 Javascript
jquery如何获取元素的滚动条高度等实现代码
Oct 19 Javascript
jQuery过滤选择器用法示例
Sep 12 Javascript
微信小程序 devtool隐藏的秘密
Jan 21 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
Oct 27 Javascript
原生js+cookie实现购物车功能的方法分析
Dec 21 Javascript
JavaScript循环遍历你会用哪些之小结篇
Sep 28 Javascript
微信小程序实现同一页面取值的方法分析
Apr 30 Javascript
vue实现Input输入框模糊查询方法
Jan 29 Javascript
微信小程序实现菜单左右联动
May 19 Javascript
vue实现移动端div拖动效果
Mar 03 Vue.js
JS实现简易刻度时钟示例代码
Mar 11 #Javascript
js鼠标跟随运动效果
Mar 11 #Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
Mar 11 #Javascript
基于Node.js的WebSocket通信实现
Mar 11 #Javascript
js原生Ajax的封装和原理详解
Mar 11 #Javascript
ThinkPHP+jquery实现“加载更多”功能代码
Mar 11 #Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
Mar 10 #Javascript
You might like
我的论坛源代码(七)
2006/10/09 PHP
一步一步学习PHP(8) php 数组
2010/03/05 PHP
PHP编码转换
2012/11/05 PHP
php array_map使用自定义的函数处理数组中的每个值
2016/10/26 PHP
javascript在一段文字中的光标处插入其他文字
2007/08/26 Javascript
CCPry JS类库 代码
2009/10/30 Javascript
jquery ajax abort()的使用方法
2010/10/28 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
2013/07/17 Javascript
JS实现div居中示例
2014/04/17 Javascript
javascript 获取函数形参个数
2014/07/31 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
2014/11/08 Javascript
简介JavaScript中的sub()方法的使用
2015/06/08 Javascript
深入解析JavaScript中的数字对象与字符串对象
2015/10/21 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2016/06/12 Javascript
AngularJS入门教程之Helloworld示例
2016/12/25 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
2016/12/28 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
2017/01/10 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
2017/03/14 Javascript
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
浅谈React前后端同构防止重复渲染
2018/01/05 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
2019/02/18 Javascript
Python 含参构造函数实例详解
2017/05/25 Python
Face++ API实现手势识别系统设计
2018/11/21 Python
Python3多线程基础知识点
2019/02/19 Python
查看python安装路径及pip安装的包列表及路径
2019/04/03 Python
django多个APP的urls设置方法(views重复问题解决)
2019/07/19 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
北美领先的牛仔品牌:Buffalo David Bitton
2017/05/22 全球购物
雷蛇美国官网:Razer
2020/04/03 全球购物
2014年乡镇工作总结
2014/11/21 职场文书
2015最新学生自我评价范文
2015/03/03 职场文书
销售口号霸气押韵
2015/12/24 职场文书
创业计划书之花店
2019/09/20 职场文书
在pycharm中无法import所安装的库解决方案
2021/05/31 Python
浅谈MySql update会锁定哪些范围的数据
2022/06/25 MySQL