提高浏览器渲染页面速度的建议

提高浏览器渲染页面速度的建议

怎样尽可能的缩短浏览器上页面渲染的时间，文章从以下几方面着手：

写出高效的css代码

避免使用css表达式

把css文件放在页面顶部

指定页面图片的尺寸

页面头部标明文档编码

一，写出高效的css代码

首先弄清浏览器解析html代码的过程：构建一个dom树，页面要显示的各元素都会创建到这个dom树当中。每当一个新元素加入到这个dom树当 中，浏览器便会通过css引擎查遍css样式表，找到符合该元素的样式规则应用到这个元素上。css引擎查找样式表，对每条规则都按从右到左的顺序去匹 配。

了解过程后，我们可以看出可以从两方面优化我们的css代码：1，定义的css样式规则条数越少越好，所以赶紧删除css文件中不必要的样式定 义;2，优化每条规则的选择符书写方式，尽量让css引擎一看就知道这个规则是否需要应用到当前这个元素上，让引擎少走不必要的弯路。

如以下几种效率不高的css书写方式：

body * {...}

hide-scrollbars * {...}

b, 用标签做关键选择符

ul li a {...}

#footer h3 {...}

* html #atticPromo ul li a {...}

c, 画蛇添足的写法

ul#top_blue_nav {...}

form#UserLogin {...}

d, 给非连接标签添加 :hover 伪类，这会对用了strict doctype的页面在IE7和IE8下变的很慢。

h3:hover {...}

.foo:hover {...}

#foo:hover {...}

div.faa :hover {...}

优化建议：

a, 避免使用通配符;

b, 让css引擎快速辨别该规则是否适用于当前元素：多用id或class选择符，少用标签选择符;

c, 不要画蛇添足把id和class或标签和class等连着写;

d, 尽量避免使用后代选择符，去除不必要的祖先元素，可以考虑使用class选择符来替换后代选择符;

/*给无序和有序的li定义不同颜色，你可能会这样写：*/

ul li {color: blue;}

ol li {color: red;}

/*给li添加class，这样定义效率会更高：*/

.unordered-list-item {color: blue;}

.ordered-list-item {color: red;}

e, 避免给非连接标签添加 :hover 伪类。

二，避免使用css表达式

css表达式仅在ie浏览器下才起作用，微软已在ie8后不推荐使用，因为它会严重影响页面性能：任何时候，不管任何一个事件被触发，例如窗口的 resize 事件，鼠标的移动等等，css表达式都会重新计算一遍。

三，把css文件放在页面顶部

把外联或内联样式表放在body部分会影响页面渲染的速度，因为浏览器只有在所有样式表下载完成后才会继续下载页面其他内容。

【提高浏览器渲染页面速度的建议】相关文章：

如何提高电脑传输速度10-27

有效提高跳绳速度的方法07-11

诺基亚5230提高运行速度的技巧07-12

在电脑上提高英语行测的速度的方法07-12

诺基亚E63--教大家提升UC浏览器上网速度07-12

3D智能渲染管理系统全面提高设计师效率！07-11

写作中渲染的技巧02-17

网页设计实习生提高设计速度工作效率的方法07-10

提高诺基亚C6/5230运行速度的五种方法07-12

页面设计岗位职责12-26