WEB前端优化一些经验技巧

引言：

1. 慢的页面可能会网站失去更多的用户.

2. 慢500ms意味着20%的用户将放弃访问(google)

3. 慢100ms意味着1%的用户将放弃交易(amazon)

前段时间偶然看到网上的两篇关于前端优化的文章,其中大部分技巧都来自Yahoo的优化原则,这里是对两篇文章的摘抄和总结。

减少Http请求

一般来说,我们从变化性上把数据分成两种类型,变和不变.那么不变的数据可以缓存,变化的数据不能缓存,这是一个常识,也就是说要减少我们的 http请求次数这个目标可以转换成把数据分为变化和不变化两个部分.不变化的数据不需要再次请求,这样http请求的次数就减少了,下面我们分点来描述将数据分类的途径.

1，合并文件

包括脚本、样式文件和图片，可以有选择的把一些Js和CSS可以合并成一个文件，一些图片可以使用css sPRites技术。这样做的原因是什么？做过web开发的人都知道，js和css基本是不变的，是静态文件,图片亦然。那么不变的文件如果适当的合并在一起,会有什么效果呢？请求的次数从多次变成了一次，这样http请求的次数就减少了。当时合并之后，文件体积变大了，会影响速度吗?答:肯定会啊，不过这里是需要权衡的，比如我100份静态文件，合并成10份还是合并成1份这就得看你得具体情况了。

2. 指定Expires或者Cache-Control,对于静态内容：设置文件头过期时间Expires的值为“Never expire”（永不过期）动态页面,在代码中添加cache-control,表示多少时间之后过期,如:response.setHeader("Cache-Control", "max-age=3600");如果使用了Expires文件头，当页面内容改变时就必须改变内容的文件名。通常是在文件内容后加版本号这一点是大多数人都忽略得,之前很多人在坛子上发布自己得小系统,还有demo,ahuaxuan跑过去一看,my god,一堆又一堆得js,css,既没有恰当得合并,也没有设置过期时间.每次刷新页面都要重新下载这一堆又一堆的js,css.http请求那叫一个多啊.无谓了流量就这样产生了.

这一点在企业应用的系统中也时有发生.比如我们使用extjs作为前端的技术,400多k啊,每打开一个页面都导入,下载这个js,够无聊的.那么童子们可能就要问了,静态文件为啥不用apache,lighttpd等呢,答,用了又怎么样,不设expire或者max-age不是一样要下载,最好的方法是写一个filter,再filter中判断,如果url满足一定的条件(比如符合配置文件中的正则表达式),那么就设置一个max-age,这样就ok,太简单了,几行代码就可以搞定.快哉.

3. 缓存Ajax请求缓存的方法同动态页面,ajax请求需要使用get方式,url长度为2k(ie)限制(post请求有两个过程,1发送请求headers,2发送请求数据,根据http规范,get请求只会发送一个tcp包).--------这一段话来自yahoo,先不管其真假,我们从另外一个方面来考虑一下为什么最好使用get方式,讲一个ahuaxuan经历过的事情,之前有一个项目的ajax请求使用了post方式,后来发现经常出错,而且抛出了squid的错误,因为我们的网站使用了squid,问题就出在这里了,从http协议上可以了解到,method=post是指把数据提交到服务器上去,那么squid的一个特性是不会缓存post请求(事实上它确实不应该缓存,因为这样会违反 http协议中的语义),把ajax请求改成get方式之后,一切恢复如常.

4. 移除重复的js重复的js导入也有可能导致ie重新加载该脚本 。

5. 避免重定向有一种经常被网页开发者忽略却往往十分浪费响应时间的跳转现象。这种现象发生在当URL本该有斜杠（/）却被忽略掉时。这时候会返回一个301的状态码,然后浏览器重新发起一次请求.在企业应用里,重定向是我们在企业应用中常用的技术,不过用在网站项目上,您可要小心了, 因为普通的重定向其实是server在response header中设置httpstatus=302,浏览器收到之后,判断出是302,会重新发送一个请求,目标地址是前一次返回中指定的地址.在网站项目中如果可以不用重定向就别用吧.如果您做企业应用项目,ok,关系不大,您就放心的”定”吧.