189 8069 5689

怎么提高浏览器渲染页面速度

本篇内容主要讲解“怎么提高浏览器渲染页面速度”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么提高浏览器渲染页面速度”吧!

从网站建设到定制行业解决方案，为提供网站制作、成都网站建设服务体系，各种行业企业客户提供网站建设解决方案，助力业务快速发展。创新互联将不断加快创新步伐，提供优质的建站服务。

一，写出高效的css代码

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

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

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

body * {...} hide-scrollbars * {...}

b, 用标签做关键选择符

  1. ul li a {...} 
  2. #footer h4 {...} 
  3. * html #atticPromo ul li a {...} 

c, 画蛇添足的写法

ul#top_blue_nav {...} form#UserLogin {...}

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

h4: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部分会影响页面渲染的速度，因为浏览器只有在所有样式表下载完成后才会继续下载页面其他内容。另外，内联样式表（放在