缩短页面的渲染时间让页面跑的更快些

204 阅读 0 评论 135 点赞

我是靠谱客的博主时尚哑铃，最近开发中收集的这篇文章主要介绍缩短页面的渲染时间让页面跑的更快些，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

写出高效的css代码
避免使用css表达式
把css文件放在页面顶部
指定页面图片的尺寸
页面头部标明文档编码

一，写出高效的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表达式

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

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

把外联或内联样式表放在body部分会影响页面渲染的速度，因为浏览器只有在所有样式表下载完成后才会继续下载页面其他内容。另外，内联样式表（放在<style>内的样式）有可能会引起页面重新渲染或显示隐藏页面中的某些元素，建议不要使用内联样式表。

四，指定页面图片的尺寸

指定页面图片尺寸，要符合图片的真实尺寸（不要通过指定尺寸来缩放图片），可以避免尺寸改变导致的页面结构效果的变化，所以对加快页面渲染速度有益。

五，页面头部标明文档编码

HTML文档是以包含文档编码信息的数据流方式在网络间传输。页面的编码信息一般会在HTTP响应的头部信息或在文档内的HTML标记中指明。客户端浏览器只有在确定了页面编码后才能正确的渲染页面，所以在绘制页面或执行任何的javascript代码前，大部分的浏览器（ie6、ie7、ie8除外）都会缓冲一定字节的数据来从中查找编码信息，不同的浏览器当中预缓冲的字节数是不一样的。如果浏览器在接收到了设定的预缓冲数据量后还没有找到页面的编码信息，便会根据各自指定的默认编码开始渲染页面，如果这时再获取到页面编码信息，而又跟现在所用编码不一致，那整个页面就得重新渲染，某些情况下甚至需要重新获取数据。所以，对于大小超过1KB的页面（根据在各浏览器的测试情况，预缓冲数据量最多的也就1KB）应当尽早标明编码信息。

优化建议：
a, 尽量在HTTP头部信息中标明页面编码（这个需要在服务器端设置）。像Firefox浏览器，如果在HTTP头部信息就获取到了编码信息，便会预缓冲更少的数据从而减少不必要的数据缓冲时间；
b, 在HTML的 <head> 部分标明编码信息；
c, 要习惯给文档指定编码；
d, 给页面指定的编码要符合页面实际编码；如果你在HTTP头部信息和HTML标记中同时指定了编码，需确保编码信息一致。

注：文章没有完全按google文档原意翻译，翻出来的文字是结合了自己的理解表达的，如有发现错误的地方，感谢指正。