前端开发之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 相关文章推荐
jquery简单体验
Jan 10 Javascript
用js实现多域名不同文件的调用方法
Jan 12 Javascript
关于document.cookie的使用javascript
Apr 11 Javascript
javaScript NameSpace 简单说明介绍
Jul 18 Javascript
模拟一个类似百度google的模糊搜索下拉列表
Apr 15 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
Apr 25 Javascript
jQuery 删除或是清空某个HTML元素示例
Aug 04 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
Jan 04 Javascript
Bootstrap table表格简单操作
Feb 07 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
Nov 07 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
May 22 Javascript
微信小程序实现导航栏和内容上下联动功能代码
Jun 29 Javascript
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
php REMOTE_ADDR之获取访客IP的代码
2008/04/22 PHP
PHP投票系统防刷票判断流程分析
2012/02/04 PHP
php比较多维数组中值的大小排序实现代码
2012/09/08 PHP
初识ThinkPHP控制器
2016/04/07 PHP
Laravel创建数据库表结构的例子
2019/10/09 PHP
TP框架实现上传一张图片和批量上传图片的方法分析
2020/04/23 PHP
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
2011/10/12 Javascript
动态改变div的z-index属性的简单实例
2013/08/08 Javascript
ExtJS判断IE浏览器类型的方法
2014/02/10 Javascript
jQuery中:reset选择器用法实例
2015/01/04 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
jquery跟随屏幕滚动效果的实现代码
2016/04/13 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
2017/06/04 Javascript
vue组件watch属性实例讲解
2017/11/07 Javascript
Vue中"This dependency was not found"问题的解决方法
2018/06/19 Javascript
浅析vue-router原理
2018/10/19 Javascript
JavaScript格式化json和xml的方法示例
2019/01/22 Javascript
VUE安装使用教程详解
2019/06/03 Javascript
用Python的urllib库提交WEB表单
2009/02/24 Python
Python 的 with 语句详解
2014/06/13 Python
使用C语言来扩展Python程序和Zope服务器的教程
2015/04/14 Python
Python 做曲线拟合和求积分的方法
2018/12/29 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
Python values()与itervalues()的用法详解
2019/11/27 Python
深入浅析python 中的self和cls的区别
2020/06/20 Python
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
设计师家具购买和委托在线市场:Viyet
2016/11/16 全球购物
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
法院实习人员自我鉴定
2013/09/26 职场文书
中级会计职业生涯规划书
2014/03/01 职场文书
搞笑创意广告语
2014/03/17 职场文书
运动会广播稿150字(9篇)
2014/09/20 职场文书
小区的门卫岗位职责
2014/10/01 职场文书
简爱电影观后感
2015/06/10 职场文书
2016年重阳节慰问信
2015/12/01 职场文书
工人先锋号事迹材料(2016精选版)
2016/03/01 职场文书