位置：71code站长站 → 站长学习 → 设计学院 → 网页制作 → 高性能表现的div+css网站

高性能表现的div+css网站

减小字体

增大字体作者：71站长源码(收集) 来源：71站长源码(网络) 发布时间：2008-3-6 16:45:24

从2004年开始，我开始进入雅虎的异常表现小组。我们是一个很小的队伍，专门针对雅虎的产品进行质量检测和改进，我作为一个后端工程师，现在却开始捣鼓前端代码优化方面的工程，所以我认为这是一个极好的进步的机会。我的目标是改进用户端体验，我度量了在各个带宽下浏览器的响应时间，得出如下的一个图表，它展示了来自http://yahoo.com的http的流量。

71code

以上图标的第一个标签就是html，是一个html文档最开始加载的东东，在这个例子中，读取html代码只占了整个响应时间中的5%，这个结果适用于绝大多数网站，在采样美国的前十位网站中，只有一家超过5%但少于20%，其余80%的时间是用来读取网页其他内容的，也就是说，前端（原文是front-end，意思就是不包括html代码的其余内容，可以是图片，脚本，flash，视频，各种东西）。这就是为什么我们要把目光集中在这些东西来提高显示速度的关键原因。 71code^com

为什么要从前端开始着手有三个主要原因： 71code.com

1、这里有提升和改进的潜力。如果能减少一半的体积，就能减少40%的响应时间

Www.71code.com

2、改进前端比改进后端需要的时间和资源更少。（改进后端要重新设计应用程序规划，代码，寻找优化代码的方法，添加或改变硬件配置，分布式数据库，等等） 71code~com

3、前端的改进在我们的工作中已经被证实，我们在yahoo有五十个小组，在我们的最佳表现规则下，提高了他们的用户端响应时间达到25%或更高。 [71站长源码]

我们的黄金规则是：首先优化前端表现，这些东西耗费了用户端响应时间中的80%。 71code.com

1、减少http请求数 71站长源码

图片，css，script，flash，等等这些都会增加http请求数，减少这些元素的数量能减少响应时间。 71code@com

CSS Sprites技术能减少图片的请求数，把零散的小图片放到一起，运用background-position来改变背景图片的位置，前提是html元素事先定义好宽高，其实就像一个遮罩，移动背景就会看到不同的景象。

71站长源码

内嵌图像用data:URL scheme的方式把图片内容代码直接嵌入html代码中，这样会增大html代码的体积，改进的方式是把内嵌图片嵌入到css中（css被缓存），这样就会更好的减少http请求数而且不增大html的体积。 71code.com

很多用户都是在空缓存的情况下进入你的网站的，这样第一次的速度就会显得很重要。 71站长源码

第一条规则是最重要的一条规则。中国71站长源码

2、运用cdn技术 71站长源码

见： http://hi.baidu.com/axne/blog/item/258e23ade2d76f0a4b36d6d1.html 71站长源码

3、加一个长时间过期的头部中国71站长源码

Expires: Thu, 15 Apr 2010 20:00:00 GMT 71code

浏览器会用缓存来减少http请求数来加快页面加载的时间，如果页面头部加一个很长的过期时间，浏览器就会一直缓存页面里的元素。
不过这样会带来一个问题，就是如果页面里的东西变动的话就要改名字了，否则用户端不会主动刷新，在yahoo工作组用的是版本号，例如yahoo_2.0.6.js Www~71code~com

4、Gzip压缩 71站长源码

Gzip是现在最流行和最有效的压缩方式，她是GNU开发的，RFC1952标准化。

71站长源码

（Gzip是在服务器端压缩图片，css，脚本等，传送到用户端的浏览器再解压，这样可以提高传输速度，不过对服务器的压力会增大，一般选择部分元素压缩比较合适。） 71code@com

5、把样式表放到顶部 Www@71code@com

我们发现把css放到文档头部会让网页加载得更快。因为这样可以让页面逐渐加载。

71站长源码

把样式表放到接近底部的问题是它阻止了页面元素的逐渐显示。这样还会导致“flash of unstyled content” 即在样式表加载之前页面内容是以没有样式的形式显示出来的，待加载完样式后，页面重绘，内容一闪即改变了样式表现。 71站长源码,为中文网站提供动力

6、把脚本放到底部 71站长源码

把脚本放到尽可能底部的地方，一个原因是让页面逐渐渲染，另一个是实现更好的并行下载。 71站长源码

对于脚本，脚本以下的内容被阻止逐渐加载了，因为只有当下载完脚本以后才会下载下面的内容，第二个脚本引起的问题是阻止平行下载。 "http/1.1 specification"建议浏览器对一个域名，同一时间下载数不超过2个（按：实际监测发现一般有超过2个），我曾经让ie并行下载100个图片。当脚本正在下载的时候，浏览器不会开始下载任何东西。 71站长源码

7、避免css expressions 71站长源码

css expressions 是一个有力（和危险）的方式动态的改变css的属性。他们自ie5就开始被支持，举个例子，用css expression可以让背景色每个小时轮换一次。但是被非ie浏览器忽略的。

Www@71code@com

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" ); 71站长源码

expressions的问题就在与它的计算频率绝对超出我们的想象，甚至当我们移动鼠标，都会引起页面的重绘！ 71站长源码

下面是举例页面

71站长源码