公众账号

二维码 微信扫描关注

当前位置:首页 > 技术文章 > 前端开发 >

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

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

  • 写出高效的css代码

  • 避免使用css表达式

  • 把css文件放在页面顶部

  • 指定页面图片的尺寸

  • 页面头部标明文档编码

关于提高浏览器渲染页面速度的建议_www.uibq.com

一、写出高效的css代码

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

了解过程后,我们可以看出可以从两方面优化我们的css代码:

1,定义的css样式规则条数越少越好,所以赶紧删除css文件中不必要的样式定义;

2,优化每条规则的选择符书写方式,尽量让css引擎一看就知道这个规则是否需要应用到当前这个元素上,让引擎少走不必要的弯路。

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

a、用通配符作为关键选择符(关键选择符指的是每条规则最右侧的选择符)

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表达式

关于 商务 项目 联系 友情链接网站地图 Copyright ©-2018 UiBQ版权所有(http://www.uibq.com)