Web页面性能优化小结

Web 页面性能优化


一、添加Expire/Cache-Control 头：Add an Expires Header
现在越来越多的图片，脚本，css，flash被嵌入到页面中，当我们访问他们的时候势必会做许多次的http请求。其实我们可以通过设置Expires header 来缓存这些文件。Expire其实就是通过header报文来指定特定类型的文件在览器中的缓存时间。大多数的图片，flash在发布后都是不需要经常修 改的，做了缓存以后这样浏览器以后就不需要再从服务器下载这些文件而是而直接从缓存中读取，这样再次访问页面的速度会大大加快


二、减少 HTTP 的请求数
   当用户浏览页面时，如果我们在用户第一次访问时将一些信息一次性加载到客户端缓存，用户访问其他页面时是可以大大提高页面访问速度的，因为每一次发生http请求是要产生服务器开销的，常用的方法有：合并css，js，并作为外部引用，这样就可以减少访问其他页面时再次加载。目前大多数的网站都采用将页面所用到的图片全部放在一张大图上，这样只要访问网站，图片就全部加载到客户端缓存起来了。不过也有特殊的情况，对于访问量特别大的网站，首页应该单独考虑，yahoo建议将首页的css和js 直接写在页面文件里面，而不是外部引用。因为首页的访问量太大了，这么做也可以减少两个请求数。而事实上国内的很多门户都是这么做的。

三、将CSS放在页面顶端，JS文件放在页面底端。
CSS的引用要放在html的头部header中，因为显示页面时要用到的，对于JS文件引用尽量放在页面底端标签的后面，因为它是不需要用到的。对于加载页面时用到的js，可以适当的放在头部，因为页面加载通常都是从上到下的，因此js放在页面底部是会出错的。

四、压缩css和js代码
   首先去掉css和js里面一些重复的脚本或代码，再对文件进行压缩，用来减少页面字节数。容量小页面加载速度自然也就快。而且压缩除了减少体积以外还可以起到一定的保护左右，通过压缩的代码可以减少很大的文件传输。推荐个比较不错的工具jsminifier,淘宝的牛人开发的，淘宝的js也都是压缩过的。

五、网站美工图片的处理
可以根据需求将多张小图整合到一张大图上，通过css定位来调用图片，目的是为了减少http的访问。

六、使用CDN(内容分发网络): Content Delivery Network
   cdn的原理就是根据访问用户的地址将网站的内容发布到最接近用户的 cache服务器内，通过DNS负载均衡的技术，判断用户来源就近访问cache服务器取得所需的内容，这样可以有效减少数据在网络上传输的时间，提高速度。同样可以减少服务器的压力。

七、推迟数据的加载
这个是针对一些js处理加载数据而言的，你可以分析你的网页哪些内容是页面呈现时所必需首先加载的？哪些内容和结构可以稍后再加载？这样可以有效地帮助地提高页面显示的速度。