background image

  

5. 样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析

完成后,将对此前所有元素(含以前已经渲染的)重新进行渲染。
  

6. JS、CSS 中如有重定义,后定义函数将覆盖前定义函数。

  这里关键的是第

2-5 这三点。渲染效率与下面三点有关:

  

1. CSS 选择器的查询定位效率

  

2. 浏览器的渲染模式和算法

  

3. 要进行渲染内容的大小

 

  三、什么是

CSS 

 

以及

CSS 的优点

 

  什么是

CSS?

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