web前端优化-温故知新系列(1)

有关web前端优化的博文，博客园中有许多网友的博客中都有介绍，而且详细、精准。楼主打算写这个博客，算是对自己一年工作来的一个总结和积累有些知识从别的地方拷贝过来的，但是都审查过。

引言：

1. 慢的页面可能会网站失去更多的用户.
2. 慢500ms意味着20%的用户将放弃访问(google)
3. 慢100ms意味着1%的用户将放弃交易(amazon)

通过上面列举的三个数据，可以看到web前端优化的重要性，而作为程序员，总有一股矫情劲，希望将自己开发出来的东西能更加的完美。:)

一.减少Http请求

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

1，合并文件

包括脚本、样式文件和图片，可以有选择的把一些Js和css可以合并成一个文件，一些图片可以使用css sprites技术。这样做的原因是什么？做过web开发的人都知道，js和css基本是不变的，是静态文件,图片亦然。那么不变的文件如果适当的合并在一起,会有什么效果呢？请求的次数从多次变成了一次，这样http请求的次数就减少了。其实对于js的合并更是尤为重要，我们知道浏览器对js的加载是阻塞式的。什么意思呢，对于css和图片之类的，浏览器大多支持并行加载，因为浏览器加载DOM树时，检测到会先预留一个节点，进而进行下面的加载，而js中存在创建DOM节点的可能，所以加载js存在一个解析的过程。

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中设置http status=302,浏览器收到之后,判断出是302,会重新发送一个请求,目标地址是前一次返回中指定的地址.在网站项目中如果可以不用重定向就别用吧.如果您做企业应用项目,ok,关系不大,您就放心的”定”吧.
小节,减少http请求次数分为了以上5个小点,每个小点之后附加一些实例,大家可以根据这些点来判断自己的项目是否可以有优化的地方.
使用cdn
让内容更靠近用户,这有啥好说呢,原理很简单,就是根据用户浏览器所在机器的ip来判断哪些服务器离用户最近,浏览器会再次去请求这些最近的机器.一般的cdn服务商是通过开发自己的dns server来达到这个目的的.不过这个是通常情况哦,技术实力比较高,或者场景比较特殊的公司会开发自己的cdn.当然不管怎么说,使用cdn肯定可以使页面响应更快(也包括音频,视频,图片,文本文件,等等等等)

二.减小返回数据的体积

1. 使用gzip压缩返回数据

Gzip压缩所有可能的文件类型是减少文件体积增加用户体验的简单方法。比如本来400k的文件,压缩一下之后只有50k-100k,那么网络的流量就立刻下来了,压缩的代价是服务器端要压缩文件,需要消耗cpu,浏览器需要解压文件,也需要消耗cpu,不过对于现代这么nb的pc,来说,浏览器解压一下数据带来的cpu消耗简直不值一提.所以您就压吧.不过压的时候要小心哦,有的浏览器在特定场景下会出去一些小bug,导致页面不正常.比如ie6在跨域的时候可能会有些小麻烦,把这部分数据的gzip去掉就可以了.

2. 最小化js文件和css文件

压缩js可以使用JSMin或者YUICompressor,后者同时可以压缩css,这个也没啥好说的,照做吧.有关YUI Compressor 这个，可以了解下，楼主试用过，不错。

3. 将css和js独立成外部文件

其实这一点也可以看成是区分不变数据和变化数据.很多人喜欢在页面上写很多很多的js和css,这些数据其实都是不会变化的数据,也就是说这些数据也是可以缓存在浏览器上的,通过把它们独立成外部文件,可以把这些数据缓存起来.这样做看上去是增加的请求的次数,但是由于第一次请求之后该部分数据已经被缓存,所以第二次就无需再请求后端,减少了网络带宽的开销.

三.优化Cookie

1. 减小cookie体积

cookie是用于身份认证尤其是个性化等操作，它是在http的请求头中进行交换的，它体积越大，则响应越慢；
每3000字节的cookie在DSL的带宽中会增加80毫秒的响应；所以除去不必要的cookie，已经使用短小的文件名和尽可能小的减少cookie的大小都有利于改善响应时间。

2. 合理设置Cookie域

由于二级域名可以拿到一级域名得cookie,那么如果,而二级域名之间确不能相互共享cookie,所以合理得设置cookie得域名也可以避免无必要得带宽浪费和响应速度得增加.

3. 设置合理的cookie过期时间

该过期就过期,不要让不必要的数据一直带在身上走来走去.

4. 使用域分离

为图片或者其他静态资源文件使用子域或者建立新的独立域名(申请新的域名),避免无必要的cookie传输,当然也是要在有必要得情况下,图片类网站肯定有必要,javaeye上得图片并没有使用域分离,所以我们得cookie其实会带到坛子得图片服务器上去,每次请求图片都是如此(不过还好,坛子里没有什么图片,所以这方面的浪费不大).
小结,其实cookie上的问题,单次请求看上去也不是什么大问题,好像是无所谓得事情,就那么几十个byte,至于吗,不过大家都听说过水滴石穿,绳锯木断的故事.所以该做的,我们还是要做,正所谓,勿以善小而不为,勿以恶小而为之.

四.优化浏览器加载

1. 将css放在页面顶部加载

把样式表放在文档底部的问题是在包括Internet Explorer在内的很多浏览器中这会中止内容的有序呈现。浏览器中止呈现是为了避免样式改变引起的页面元素重绘。用户不得不面对一个空白页面。
HTML规范清楚指出样式表要放包含在页面的<head />区域内：“和<a />不同，<link />只能出现在文档的<head />区域内，尽管它可以多次使用它”。无论是引起白屏还是出现没有样式化的内容都不值得去尝试。最好的方案就是按照HTML规范在文档<head />内加载你的样式表。

2. 将js放在页面底部加载

脚本带来的问题就是它阻止了页面的平行下载。HTTP/1.1 规范建议，浏览器每个主机名的并行下载内容不超过两个。如果你的图片放在多个主机名上，你可以在每个并行下载中同时下载2个以上的文件。但是当下载脚本时，浏览器就不会同时下载其它文件了，即便是主机名不相同。
Js放在底部加载其实并不影响浏览器展示页面,除非用户会在js加载完成之前就调用某个js方法,比如说页面刚展现到一半,但是恰好这一半里有一部分是调用了还未下载的js,这个时候就会出问题了,如果童子们遇到这种情况,可以把这部分js先加载.

3.将js和CSS缓存浏览器中

如果可以的话，将这些CSS和js都缓存在本地浏览器中，因为这些都可以考虑为静态文件。

五.优化js书写

1.字符串的拼接(使用join&push)

我们在很多地方用js输出一段html片段时通常会使用如下代码：

var _html = "";

    _html = "<div style='padding-bottom: 5px'>";

    _html += "<span class='icon_favorite' style='padding-top: 2px; padding-bottom: 2px'>这是js打印出来的</span>";

     document.write(_html);

下面看看用join如何书写：

var _html = [];

var i = 0;

_html[i++] = "<div style='padding-bottom: 5px'>";

_html[i++] = "<span class='icon_favorite' style='padding-top: 2px; padding-bottom: 2px'>这是js打印出来的</span>";

document.write(_html.join(""));

或者使用push:

var _html = [];

_html.push("<div style='padding-bottom: 5px'>");

_html.push("<span class='icon_favorite' style='padding-top: 2px; padding-bottom: 2px'>这是js打印出来的</span>");

document.write(_html.join(""));

楼主看web性能指南中有提到，这种写法更高效。

2.for循环

低效率：

//效率低的

    function GetDivNum() {

        var divs = document.getElementsByTagName("div");

        var start = new Date().getTime();

        for (var i = 0; i < divs.length; i++) {

            //"效率低"

        }

        var end = new Date().getTime();

        alert("用时：" + (end - start) + "毫秒");

    }

高效率：

 //效率高的

    function GetDivLen() {

        var divs = document.getElementsByTagName("div");

        var start = new Date().getTime();

        for (var i = 0, len = divs.length; i < len; i++) {

            //"效率高"

        }

        var end = new Date().getTime();

        alert("用时：" + (end - start) + "毫秒");

    }

原因：

主要是因为for循环在执行中，第一种情况会每次都计算一下长度，而第二种情况却是在开始的时候计算长度，并把其保存到一个变量中，所以其执行效率要高点，所以在我们使用for循环的时候，特别是需要计算长度的情况，我们应该开始将其保存到一个变量中。但是并不是只要是取长度都会出现如此明显的差别，如果我们仅仅是操作一个数组，取得的是一个数组的长度，那么其实两种方式的写法都差不多。这里不再测试了。

OK，先总结道这里，下篇介绍前端优化结合后台的一些操作，主要简介如何实现js的合并以及压缩输出。