置信互联网已愈来愈成为人们生涯中不可或缺的一部分。Ajax，flex等等富客户端的运用使得人们越加“幸运”地体验着许多本来只能在C/S完成的功用。比方Google时机已把最基本的office运用都搬到了互联网上。固然轻易的同时毫无疑问的也使页面的速率愈来愈慢。自身是做前端开辟的，在机能方面，依据Yahoo的观察，背景只占5%，而前端高达95%之多，个中有88%的东西是可以优化的。

以上是一张web2.0页面的生命周期图。工程师很抽象地讲它分成了“怀胎，诞生，毕业，完婚”四个阶段。假如在我们点击网页链接的时刻可以意想到 这个历程而不是简朴的要求-响应的话，我们便可以挖掘出许多细节上可以提拔机能的东西。本日听了淘宝小马哥的一个对yahoo开辟团队对web机能研讨的 一个讲座，觉得收成很大，想在blog上做个分享。

置信许多人都听过优化网站机能的14条划定规矩。更多的信息可见 developer.yahoo.com

第一条、只管的削减 HTTP 的要求数 （Make Fewer HTTP Requests ）

http要求是要开支的，想方法削减要求数天然可以进步网页速率。常常运用的要领，兼并css，js（将一个页面中的css和js文件离别兼并）以及 Image maps和css sprites等。固然也许将css，js文件拆分多个是由于css构造，共用等方面的推敲。阿里巴巴中文站当时的做法是开辟时依旧离开开辟，然后在背景 对js，css举行兼并，如许关于浏览器来讲依旧是一个要求，然则开辟时依然能还原成多个，轻易治理和反复援用。yahoo以至发起将首页的css和js 直接写在页面文件内里，而不是外部援用。由于首页的接见量太大了，这么做也可以削减两个要求数。而事实上国内的许多流派都是这么做的。
而css sprites是指只用将页面上的背景图兼并成一张，然后经由过程css的background-position属性定义不过的值来取他的背景。淘宝和阿里巴巴中文站如今都是如许做的。有兴致的可以看下淘宝和阿里巴巴的背景图。http://www.csssprites.com/ 这是个东西网站，它可以自动将你上传的图片兼并并给出对应的background-position坐标。并将结果以png和gif的花样输出。

第二条、运用CDN（内容分发收集）: Use a Content Delivery Network

说实话，关于CDN这一块自身并非很相识，简朴地讲，经由过程在现有的Internet中增添一层新的收集架构，将网站的内容宣布到最接近用户的 cache服务器内，经由过程DNS负载平衡的手艺，推断用户泉源就近接见cache服务器获得所需的内容，杭州的用户接见近杭州服务器上的内容，北京的接见 近北京服务器上的内容。如许可以有用削减数据在收集上传输的时候，进步速率。更细致地内容人人可以参考百度百科上关于CDN的诠释。Yahoo!把静态内容散布到CDN削减了用户影响时候20%或更多。

CDN手艺示意图：

CDN组网示意图：

第三条、 增加Expire/Cache-Control 头：Add an Expires Header

如今愈来愈多的图片，剧本，css，flash被嵌入到页面中，当我们接见他们的时刻必将会做许屡次的http要求。实在我们可以经由过程设置Expires header 来缓存这些文件。Expire实在就是经由过程header报文来指定特定范例的文件在览器中的缓存时候。大多数的图片，flash在宣布后都是不须要常常修正的，做了缓存今后如许浏览器今后就不须要再从服务器下载这些文件而是而直接从缓存中读取，如许再次接见页面的速率会大大加速。一个典范的HTTP 1.1协定返回的头信息：

HTTP/1.1 200 OK
Date: Fri, 30 Oct 1998 13:19:41 GMT
Server: Apache/1.3.3 (Unix)
Cache-Control: max-age=3600, must-revalidate
Expires: Fri, 30 Oct 1998 14:19:41 GMT
Last-Modified: Mon, 29 Jun 1998 02:28:12 GMT
ETag: “3e86-410-3596fbbc”
Content-Length: 1040
Content-Type: text/html

个中经由过程服务器端剧本设置Cache-Control和Expires可以完成。
如，在php中设置30天后逾期：

pHeader("Cache-Control: must-revalidate"); $offset = 60 * 60 * 24 * 30; $ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT"; Header($ExpStr);

也可以经由过程设置服务器自身完成，这些偶就不是很清晰了，呵呵。想相识跟多的朋侪可以参考http://www.web-caching.com/
据我相识，如今阿里巴巴中文站的Expires逾期时候是30天。不逾时期也有过题目，特别是关于剧本逾期时候的设置照样应当细致推敲下，不然响应的剧本功用更新后客户端能够要过很长一段时候才“感知”到如许的变化。所以，哪些应当缓存，哪些不应缓存照样应当细致推敲一番。

第四条、启用Gzip紧缩：Gzip Components

Gzip的头脑就是把文件先在服务器端举行紧缩，然后再传输。如许可以明显削减文件传输的大小。传输终了后浏览器会 从新对紧缩过的内容举行解紧缩，并实行。如今的浏览器都能“优越”地支撑 gzip。不仅浏览器可以辨认，而且各大“爬虫”也一样可以辨认，列位seoer可以放下心了。而且gzip的紧缩比例异常大，平常紧缩率为85%，就是 说服务器端100K的页面可以紧缩到25K摆布再发送到客户端。详细的Gzip紧缩道理人人可以参考csdn上的《gzip紧缩算法》 这篇文章。雅虎特别强调， 一切的文本内容都应当被gzip紧缩: html (php), js, css, xml, txt… 这一点我们网站做得不错，是一个A。之前我们的首页也并非A，由于首页上另有许多广告代码投放的js，这些广告代码具有者的网站的js没有经由gzip紧缩，也会拖累我们网站。
以上三点大多属于服务器端的内容，本人也是深刻地相识罢了。说得不对的处所有待列位斧正。

第五条、将css放在页面最上面 （ Put Stylesheets at the Top）

将css放在页面最上面，这是为何？由于 ie，firefox等浏览器在css悉数传输完整之前不会去衬着任何的东西。来由诚如小马哥说得那样很简朴。css，全称Cascading Style Sheets (层叠款式表单)。层叠即意味这背面的css可以掩盖前面的css，级别高的css可以掩盖级别低的css。在[css之！important] 这篇文章的最下面曾简朴地提到过这层级关联，这里我们只须要晓得css可以被掩盖的。既然前面的可以被掩盖，浏览器在他完整加载终了以后再去衬着无疑也是通情达理的许多浏览器下，如IE，把款式表放在页面的底部的题目在于它制止了网页内容的递次显现。浏览器阻挠显现以防止重画页面元素，那用户只能看到空白页了。Firefox不会阻挠显现，但这意味着当款式表下载后，有些页面元素能够须要重画，这致使闪灼题目。所以我们应当尽快让css加载终了
顺着这层意义，假如我们再细究的话，实在另有可以优化的处所。比方本站上面包括的两个css文件，

第六条、将script放在页面最下面 （Put Scripts at the Bottom ）

将剧本放在页面最下面的目标有那末两点： 1、 由于防备script剧本的实行壅塞页面的下载。在页面loading的历程当中，当浏览器读到js实行语句的时刻一定会把它悉数诠释终了后在会接下来读下 面的内容。不信你可以写一个js死循环看看页面下面的东西还会不会出来。（setTimeout 和 setInterval的实行有点类似于多线程，在响应的响应时候之前也会继承下面的内容衬着。）浏览器这么做的逻辑是由于js随时能够执 行 location.href或是其他能够完整中缀此页面历程的函数，即云云，固然得等他实行终了以后再加载咯。所以放在页面末了，可以有用削减页面可 视元素的加载时候。 2、剧本引发的第二个题目是它壅塞并行下载数目。HTTP/1.1范例发起浏览器每一个主机的并行下载数不凌驾2个（IE只能为2个，其他浏览器如ff等都是默认设置为2个，不过新出的ie8可以达6个）。因而假如您把图像文件散布到多台机械的话，您可以到达凌驾2个的并行下载。然则当剧本文件下载时，浏览器不会启动其他的并行下载。
固然对各个网站来讲，把剧本都放到页面底部加载的可行性照样值得商议的。就比方阿里巴巴中文站的页面。许多处所有内联的js，页面的显现严峻依靠于此，我认可这和无侵入剧本的理念相差甚远，然则许多“汗青遗留题目”却不是那末轻易处理的。

第七条、防止在CSS中运用Expressions （Avoid CSS Expressions ）

不过如许就多了两层无意义的嵌套，一定不好。还须要一个更好的方法。

第八条、把javascript和css都放到外部文件中 （Make JavaScript and CSS External ）

这点我想照样很轻易明白的。不仅从机能优化上会这么做，用代码易于庇护的角度看也应当这么做。把css和js写在页面内容可以削减2次要求，但也增 大了页面的大小。假如已对css和js做了缓存，那也就没有2次过剩的http要求了。固然，我在前面中也说过，有些特别的页面开辟人员照样会挑选内联 的css和js文件。

第九条、削减DNS查询 (Reduce DNS Lookups)

在 Internet上域名与IP地点之间是一一对应的，域名（kuqin.com）很好记，但计算机不认识，计算机之间的“相认”还要转成ip地点。在收集 上每台计算机都对应有一个自力的ip地点。在域名和ip地点之间的转换事情称为域名剖析，也称DNS查询。一次DNS的剖析历程会斲丧20-120毫秒的 时候,在dns查询完毕之前，浏览器不会下载该域名下的任何东西。所以削减dns查询的时候可以加速页面的加载速率。yahoo的发起一个页面所包括的域 名数只管控制在2-4个。这就须要对页面团体有一个很好的计划。如今我们这点做的不好，许多办理的广告投放体系拖累了我们。

第十条、紧缩 JavaScript 和 CSS (Minify JavaScript )

紧缩js和css的摆布很显然，削减页面字节数。容量小页面加载速率天然也就快。而且紧缩除了削减体积之外还可以起到一定的庇护摆布。这点我们做得不错。常常运用的紧缩东西有JsMin、YUI compressor等。别的像http://dean.edwards.name/packer/还给我们供应了一个异常轻易的在线紧缩东西。你可以在jQuery的网页看到紧缩过的js文件和没有紧缩过的js文件的容量差异：

固然，紧缩带来的一个弊病就是代码的可读性没了。置信许多做前端的朋侪都遇到过这个题目：看Google的结果很酷，但是去看他的源代码倒是一大堆 挤在一同的字符，连函数名都是替换过的，汗死！自身的代码也如许岂不是对庇护异常不轻易。一切阿里巴巴中文站如今采纳的做法是在js和css宣布的时刻在 服务器端举行紧缩。如许在我们很轻易地庇护自身的代码。

第十一条、防止重定向 (Avoid Redirects )

不久前在ieblog上看到过《Internet Explorer and Connection Limits》这篇文章，比方 当你输入http://www.kuqin.com/ 的时刻服务器会自动发作一个301服务器转向 http://www.kuqin.com/ ，你看浏览器的地点栏就可以看出来。这类重定向天然也是须要斲丧时候的。固然这只是一个例子，发作重定向的缘由另有许多，然则稳定的是每增添一次重定向就会增添一次web要求，所以因该只管削减。

第十二条、移除反复的剧本 (Remove Duplicate Scripts )

这点我想不说也晓得，不仅是从机能上推敲，代码范例上看也是如许。然则不能不认可，许多时刻我们会由于图一时之快而加上一些也许是反复的代码。也许一个一致的css框架和js框架可以比较好的处理我们的题目。小猪的看法很对，不仅是要做到不反复，更是要做到可重用。

第十三条、设置实体标签（ETags） (Configure ETags )

这点我也不懂，呵呵。在inforQ上找到一篇诠释得比较细致的申明《运用ETags削减Web运用带宽和负载》，有兴致的同砚可以去看看。

第十四条、使 AJAX 缓存 (Make Ajax Cacheable )

ajax还要去缓存？做ajax要求的时刻每每还要增添一个时候戳去防止他缓存。It’s important to remember that “asynchronous” does not imply “instantaneous”.（记着“异步”不是“霎时”这一点很主要）。记着，纵然AJAX是动态发作的而且只对一个用户起作用，他们依旧可以被缓 存。

以上内容转自：http://www.itokit.com/2012/0704/74572.html