文档章节

前端开发人员需要了解的CSS原理

sheilacat
 sheilacat
发布于 2015/03/21 14:05
字数 1915
阅读 52
收藏 0

从事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的优点

什么是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有微妙的速度优势)。


本文转载自:http://blog.jobbole.com/10011/

sheilacat
粉丝 35
博文 75
码字总数 35249
作品 0
长沙
程序员
私信 提问
[北京]搜狐高薪招聘JS前端/页面制作/Java架构/开发/运维/搜索

北京搜狐为了构建一个重要的互联网产品, 打造一支精英化队伍, 特招聘有理想有抱负 的同学, 来实现我们共同的理想! 你是否胸中理想? 你是否需要一个大的舞台? 你是否需要一帮聊得来的兄弟, 请...

飞云小侠
2011/07/11
1K
11
北京搜狐高薪招聘 Java PM/架构师/WEB开发 JS前端交互 测试 产品经理

北京搜狐为了构建一个重要的互联网产品, 打造一支精英化队伍, 特招聘有理想有抱负的同学, 来实现我们共同的理想! 你是否有远大的理想? 你是否需要一个大的舞台? 你是否需要一帮聊得来的兄弟,...

飞云小侠
2011/06/13
791
4
7个让你获益匪浅的开放式前端面试题

翻译:疯狂的技术宅 原文:https://www.indeed.com/hire/interview-questions/front-end-developer 不管你是面试官还是求职者,里面的思路都能让你获益匪浅。 如何保证你的网站或 Web 应用的...

疯狂的技术宅
03/01
0
0
WEB前端知识体系

前端简介 Web前端开发工程师是一个很新的职业,在国内乃至国际上真正开始受到重视的时间不超过5年。Web前端开发是从网页制作演变而来的,名称上有很明 显的时代特征。随着人们对用户体验的要...

痕無影
2015/08/31
2.1K
1
[深圳]深圳云讯网络科技有限公司招聘javascript/css工程师/前端开发工程师

javascript/css工程师 职位描述: 1.参与云讯平台项目Web前端开发工作,协调界面设计师和开发人员的工作,完成产品的整合工作; 2.参与用户体验设计、并能通过前端的工作提高产品的用户体验;...

魔线
2012/01/31
237
0

没有更多内容

加载失败,请刷新页面

加载更多

以太坊私有链搭建

https://blog.csdn.net/Blockchain_lemon/article/details/80589123

Moks角木
43分钟前
2
0
自律给我自信-为什么要自律

为什么要自律 混一天和努力一天 看不到任何差别 3天看不到任何变化 7天也看不到任何效果 但是 1个月后, 会看到话题不同 3个月后, 会看到气场不同 6个月后, 会看到距离不同 3年后, 会看到...

周大壮
44分钟前
3
0
读书replay计划说明

突然脑袋一闪,我有了这样一个主意:通过写博客的方式,将我阅读的书中的内容replay出来。 我一般会找着我感兴趣的书去读,一般也会读书中我感兴趣的章节,或者当下对我有用的章节,所以这个...

wanxiangming
45分钟前
1
0
CentOS7安装xrdp环境可实现远程桌面访问

CentOS7安装xrdp环境可实现远程桌面访问 2018-07-14 06:39:28 分类:运维 阅读(2051) 评论(0) 在"Ubuntu系统安装xrdp桌面客户端及实现远程连接桌面"文章中有分享过在Ubuntu系统中安装XRDP环境...

linjin200
今天
5
0
ConfigurationProperties

package cn.enjoy.config; import org.springframework.boot.context.properties.ConfigurationProperties; import org.springframework.stereotype.Component; @ConfigurationProperties(pr......

少年已不再年少
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部