web前端页面性能优化 Web 页面性能优化.doc

web前端页面性能优化 Web 页面性能优化 导读：就爱阅读网友为您分享以下“Web 页面性能优化”的资讯，希望对您有所帮助，感谢您对92的支持! 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的访问。