二、我们从代码方面来探讨有如下方法 1.减少http请求数 图片,css,script,flash,等等这些都会增加http请求数,减少这些元素的数量能减少响应时间。 CSS Sprites技术能减少图片的请求数,把零散的小图片放到一起,运用background-position来改变背景图片的位置,前提是html元素事先定义好宽高,其实就像一个遮罩,移动背景就会看到不同的景象。 内嵌图像 用data:URL scheme的方式把图片内容代码直接嵌入html代码中,这样会增大html代码的体积,改进的方式是把内嵌图片嵌入到css中(css被缓存),这样就会更好的减少http请求数而且不增大html的体积。 很多用户都是在空缓存的情况下进入你的网站的,这样第一次的速度就会显得很重要。 第一条规则是最重要的一条规则。 2.把样式表放到顶部 我们发现把css放到文档头部会让网页加载得更快。因为这样可以让页面逐渐加载。 3.把脚本放到底部 把脚本放到尽可能底部的地方,一个原因是让页面逐渐渲染,另一个是实现更好的并行下载。 对于脚本,脚本以下的内容被阻止逐渐加载了,因为只有当下载完脚本以后才会下载下面的内容,第二个脚本引起的问题是阻止平行下载。 “http/1.1 specification”建议浏览器对一个域名, 同一时间下载数不超过2个(按:实际监测发现一般有超过2个),我曾经让ie并行下载100个图片。 当脚本正在下载的时候,浏览器不会开始下载任何东西。 4.避免css expressions css expressions 是一个有力(和危险)的方式动态的改变css的属性。他们自ie5就开始被支持,举个例子,用css expression可以让背景色每个小时轮换一次。但是被非ie浏览器忽略的。 background-color: expression( (new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00″ ); expressions的问题就在与它的计算频率绝对超出我们的想象,甚至当我们移动鼠标,都会引起页面的重绘! 下面是举例页面 减少css expressions计算次数的一个方法就是使用一次性的expressions。 当第一次expression计算出一个明确的值,就让样式等于这个值,不再变动。如果样式的属性一定要动态的改变,就用时间句柄吧! 5.让脚本和样式外延 Javascript和CSS应该是外部调用还是内嵌呢? 6.减小脚本体积 有两个比较流行的工具是用来减小脚本的体积的–JSMin和YUI Compressor。(按:这个压缩和Gzip压缩是不一样的,Gzip是传输压缩,这个是代码压缩)。 我们以上方法,读者应该适当的选择或配合使用,我们在选择方法的原则是应该以最低的代价来完成客户端的功能。 原文:http://hi.baidu.com/mj_623ok/blog/item/a843d8de288d601b632798b8.html |
|