前端优化网页性能及速度

1.MinimizeHTTPRequests减少HTTP请求  图片、css、script、flash等等这些都会增加http请求数,减少这些元素的数量就能减少响应时间。把多个JS、CSS在可能的情况下写进一个文件,页面里直接写入图片也是不好的做法,应该写进CSS里,利用CSSsprites将小图拼合后利用background来定位。 
2.UseaContentDeliveryNetwork利用CDN技术
CDN确实是好东西,不过服务器提供商的这项服务一般是要收费的。
3.AddanExpiresoraCache-ControlHeader设置头文件过期或者静态缓存
浏览器会用缓存来减少http请求数来加快页面加载的时间,如果页面头部加一个很长的过期时间,浏览器就会一直缓存页面里的元素。不过这样如果页面里的东西变动的话就要改名字了,否则用户端不会主动刷新,这项可以通过修改.htaccess文件来实现。==== <meta http-equiv="expires" content="Sunday 26 October 2008 01:00 GMT"/>====
4.GzipComponentsGzip压缩
Gzip格式是一种很普遍的压缩技术,几乎所有的浏览器都有解压Gzip格式的能力,而且它可以压缩的比例非常大,一般压缩率为85%。压缩没压缩,可以到这里做下测试。
5.PutStylesheetsattheTop把CSS放顶部
让浏览者能尽早的看到网站的完整样式。
6.PutScriptsattheBottom把JS放底部
网站呈现完毕后再进行功能设置,当然这些JS要在你的加载过程中不影响内容表现。
7.AvoidCSSExpressions避免CSSExpressions
CSS表达式很可怕,这个只被IE支持的东西执行时候的运算量非常大,你移动一下鼠标它都要进行重计算的,但有时候为了做浏览器的兼容必须要用到这个IE6。

前端性能优化的14个规则:
规则01:尽量减少HTTP请求
① 图片地图
② 请CSS喝“雪碧”(CSS Sprites)CSS Sprites一句话:将多个图片合并到一张单独的图片,这样就大大减少了页面中图片的HTTP请求。
③ 内联图片和脚本使用data:URL(Base64编码)模式直接将图片包含在Web页面中而无需进行HTTP请求。
④ 样式表的合并将页面样式定义、脚本、页面本身代码严格区分开,但是样式表、脚本也不是分割越细越好,因为没多引用一个样式表就增加一次HTPP请求,能合并的样式表尽量合并。
规则02:使用内容发布网络(CDN的使用)

规则03:添加Expires头

规则04:压缩组件(使用Gzip方式)

规则05:将CSS样式表放在顶部

规则06:将javascript脚本放在底部

规则07:避免使用CSS表达式

规则08:使用外部javascript和CSS

规则09:减少DNS查询

规则10:精简javascript

规则11:避免重定向

规则12:删除重复脚本

规则13:配置ETag

规则14:使Ajax可缓存

posted @ 2013-07-23 17:12  Fien  阅读(180)  评论(0)    收藏  举报