CSS渲染原理

本文转自：https://xiejiancong.com/post-220.html

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

       什么是Cascading Style Sheets（层叠样式表）

         -CSS是Cascading Style Sheets(层叠样式表)的简称.

         -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#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有微妙的速度优势）。