从事前端开发必须要了解的

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. 并且在下载后进行解析，解析过程中，停止页面所有往下元素的下载。