机能优化

• 削减Http要求:

1.只管削减HTTP要求数 　　80%的终端用户相应时刻都花在了前端上，个中大部份时刻都在下载页面上的种种组件：图片，款式表，剧本，Flash等等。削减组件数必定能够削减页面提交的HTTP要求数。这是让页面更快的症结。

2.削减页面组件数的一种体式格局是简化页面设想。但有没有一种要领能够在构建庞杂的页面同时加快相应时刻呢？嗯，确切有鱼和熊掌兼得的方法。

3.兼并文件是经由过程把一切剧本放在一个文件中的体式格局来削减要求数的，固然，也能够兼并一切的CSS。假如各个页面的剧本和款式不一样的话，兼并文件就是一项比较贫苦的事情了，但把这个作为站点宣布历程的一部份确切能够进步相应时刻。

4.CSS Sprites是削减图片要求数目的首选体式格局。把背景图片都整合到一张图片中，然后用CSS的background-image和background-position属性来定位要显现的部份。

5.图象映照能够把多张图片兼并成单张图片，总大小是一样的，但削减了要求数并加快了页面加载。图片映照只需在图象在页面中一连的时刻才有效，比方导航条。给image map设置坐标的历程既无聊又轻易失足，用image map来做导航也不轻易，所以不引荐用这类体式格局。

6.行内图片（Base64编码）用data: URL形式来把图片嵌入页面。如许会增添HTML文件的大小，把行内图片放在（缓存的）款式表中是个好方法，而且胜利防止了页面变“重”。但现在主流浏览器并不能很好地支撑行内图片。

7.削减页面的HTTP要求数是个出发点，这是提拔站点初次接见速率的重要指点准绳。

• 削减DNS查找:

1.域名体系建立了主机名和IP地点间的映照，就像电话簿上人名和号码的映照一样。当你在浏览器输入www.yahoo.com的时刻，浏览器就会联络DNS解析器返回效劳器的IP地点。DNS是有本钱的，它须要20到120毫秒去查找给定主机名的IP地点。在DNS查找完成之前，浏览器没法从主机名下载任何东西。

2.DNS查找被缓存起来更高效，由用户的ISP（收集效劳供应商）也许本地收集存在一个特别的缓存效劳器上，但还能够缓存在个人用户的盘算机上。DNS信息被保存在操纵体系的DNS cache(微软Windows上的”DNS客户端效劳”)里。大多数浏览器有独立于操纵体系的本身的cache。只需浏览器在本身的cache里还保留着这条纪录，它就不会向操纵体系查询DNS。

3.IE默许缓存DNS查找30分钟，写在DnsCacheTimeout注册表设置中。Firefox缓存1分钟，能够用network.dnsCacheExpiration设置项设置。(Fasterfox把缓存时刻改成了1小时 P.S. Fasterfox是FF的一个提速插件)

4.假如客户端的DNS cache是空的（包含浏览器的和操纵体系的），DNS查找数即是页面上差别的主机名数，包含页面URL，图片，剧本文件，款式表，Flash对象等等组件中的主机名，削减差别的主机名就能够削减DNS查找。

5.削减差别主机名的数目同时也削减了页面能够并行下载的组件数目，防止DNS查找削减了相应时刻，而削减并行下载数目却增添了相应时刻。我的准绳是把组件疏散在2到4个主机名下，这是同时削减DNS查找和许可高并发下载的折衷计划。

• 防止重定向 重定向用301和302状况码，下面是一个有301状况码的HTTP头：

1.HTTP/1.1 301 Moved Permanently Location: http://example.com/newuri Content-Type: text/html 　　浏览器会自动跳转到Location域指明的URL。重定向须要的一切信息都在HTTP头部，而相应体平常是空的。实在分外的HTTP头，比方Expires和Cache-Control也示意重定向。除此之外另有别的跳转体式格局：refresh元标签和JavaScript，但假如你必需得做重定向，最好用规范的3xxHTTP状况码，重要是为了让返回按钮能一般运用。

2.切记重定向会拖慢用户体验，在用户和HTML文档之间插进去重定向会耽误页面上的一切东西，页面没法衬着，组件也没法最先下载，直到HTML文档被送达浏览器。

3.有一种罕见的极为浪费资源的重定向，而且web开辟人员平常都认识不到这一点，就是URL尾部缺乏一个斜线的时刻。比方，跳转到http://astrology.yahoo.com/as…://astrology.yahoo.com/astrology/的301相应（注重添在尾部的斜线）。在Apache中能够用Alias，mod_rewrite也许DirectorySlash指令来作废不必要的重定向。

4.重定向最罕见的用处是把旧站点衔接到新的站点，还能够衔接统一站点的差别部份，针对用户的差别状况（浏览器范例，用户帐号范例等等）做一些处置惩罚。用重定向来衔接两个网站是最简朴的，只须要少许的分外代码。虽然在这些时刻运用重定向削减了开辟人员的开辟庞杂度，但降低了用户体验。一种替换计划是用Alias和mod_rewrite，前提是两个代码途径都在雷同的效劳器上。假如是由于域名变化而运用了重定向，就能够建立一条CNAME（建立一个指向另一个域名的DNS纪录作为别号）连系Alias也许mod_rewrite指令。

• 让Ajax可缓存:

1.Ajax的一个优点是能够给用户供应立即反应，由于它能够从背景效劳器异步要求信息。但是，用了Ajax就没法保证用户在守候异步JavaScript和XML相应返回时期不会异常无聊。在许多运用程序中，用户能够一向守候取决于如何运用Ajax。比方，在基于web的电子邮件客户端中，用户为了寻觅相符他们搜刮规范的邮件音讯，将会坚持对Ajax要求返回结果的关注。重要的是，要记得“异步”并不意味着“立即”。

2.要进步机能，优化这些Ajax相应至关重要。最重要的进步Ajax机能的要领就是让相应变得可缓存，就像在添上Expires也许Cache-Control HTTP头中议论的一样。下面适用于Ajax的别的划定规矩：

3.Gzip组件 削减DNS查找 紧缩JavaScript 防止重定向 设置ETags 　　我们一同看看例子，一个Web 2.0的电子邮件客户端用了Ajax来下载用户的通讯录，以便完成自动完胜利能。假如用户从上一次运用以后再没有修悛改她的通讯录，而且Ajax相应是可缓存的，有还没有逾期的Expires也许Cache-Control HTTP头，那末之前的通讯录就能够从缓存中读出。必需关照浏览器，应当继承运用之前缓存的通讯录相应，照样去要求一个新的。能够经由过程给通讯录的Ajax URL里增加一个表明用户通讯录末了修正时刻的时刻戳来完成，比方&t=1190241612。假如通讯录从上一次下载以后再没有被修悛改，时刻戳稳定，通讯录就将从浏览器缓存中直接读出，从而防止一次分外的HTTP往复斲丧。假如用户已修正了通讯录，时刻戳也能够确保新的URL不会婚配缓存的相应，浏览器将要求新的通讯录条目。

4.纵然Ajax相应是动态建立的，而且能够只适用于单用户，它们也能够被缓存，而如许会让你的Web 2.0运用更快。

• 耽误加载组件:

能够靠近看看页面并问本身：什么才是一最先衬着页面所必需的？其他内容都能够等会儿。

1.JavaScript是分开onload事宜之前和以后的一个抱负挑选。比方，假如有JavaScript代码和支撑拖放以及动画的库，这些都能够先等会儿，由于拖放元素是在页面最初衬着以后的。别的能够耽误加载的部份包含隐蔽内容（在某个交互行动以后才涌现的内容）和摺叠的图片。

2.东西可帮你减轻事情量：YUI Image Loader能够耽误加载摺叠的图片，另有YUI Get utility是一种引入JS和CSS的简朴要领。Yahoo!主页就是一个例子，能够翻开Firebug的收集面板细致看看。

3.最好让机能目的相符别的web开辟最好实践，比方“渐进加强”。假如客户端支撑JavaScript，能够进步用户体验，但必需确保页面在不支撑JavaScript时也能一般事情。所以，在肯定页面运转一般以后，能够用一些耽误加载剧本加强它，以支撑一些拖放和动画之类的华美结果。

• 预加载组件:

预加载能够看起来和耽误加载是相反的，但它实在有差别的目的。经由过程预加载组件能够充分应用浏览器余暇的时刻来要求将来会用到的组件（图片，款式和剧本）。用户接见下一页的时刻，大部份组件都已在缓存里了，所以在用户看来页面会加载得更快。

现实运用中有以下几种预加载的范例：

1.无前提预加载——尽快最先加载，猎取一些分外的组件。google.com就是一个sprite图片预加载的好例子，这个sprite图片并非google.com主页须要的，而是搜刮结果页面上的内容。 前提性预加载——依据用户操纵猜想用户将要跳转到哪里并据此预加载。在search.yahoo.com的输入框里键入内容后，能够看到那些分外组件是如何要求加载的。 提早预加载——在推出新设想之前预加载。经常在从新设想以后会听到：“这个新网站不错，但比之前更慢了”，一部份原因是用户接见先前的页面都是有旧缓存的，但新的倒是一种空缓存状况下的体验。能够经由过程在将要推出新设想之前预加载一些组件来减轻这类负面影响，老站能够应用浏览器余暇的时刻来要求那些新站须要的图片和剧本。

• 削减DOM元素的数目:

一个庞杂的页面意味着要下载更多的字节，而且用JavaScript接见DOM也会更慢。举个例子，想要增加一个事宜处置惩罚器的时刻，轮回遍历页面上的500个DOM元素和5000个DOM元素是有区分的。

1.大批的DOM元素是一种征象——页面上有些内容无关的标记须要清算。正在用嵌套表格来规划吗？照样为了修复规划题目而添了一堆的<div>s？也许应当用更好的语义化标记。

2.YUI CSS utilities对规划有很大协助：grids.css针对团体规划，fonts.css和reset.css能够用来去除浏览器的默许花样。这是个最先清算和思索标记的好机会，比方只在语义上有意义的时刻运用<div>，而不是由于它能够衬着一个新行。

3.DOM元素的数目很轻易测试，只须要在Firebug的控制台里输入：

document.getElementsByTagName(‘*’).length

4.那末若干DOM元素才算是太多呢？能够参考别的相似的标记优越的页面，比方Yahoo!主页是一个相称忙碌的页面，但只需不到700个元素（HTML标签）。

• 跨域星散组件:

1.星散组件能够最大化并行下载，但要确保只用不凌驾2-4个域，由于存在DNS查找的价值。比方，能够把HTML和动态内容布置在www.example.org，而把静态组件星散到static1.example.org和static2.example.org。

后续还会整顿，现在对机能的优化先写这么多……..