链接参考： https://developer.yahoo.com/performance/rules.html
只需10%～20%的最终用户相应时候花在了下载HTML文档上，其他的80%～90%时候花在了下载页面中的一切组件上。
——Steve Souders
划定规矩1——削减HTTP请求（Minimize HTTP Requests）
只需10%～20%的最终用户相应时候花在吸收请求的HTML文档上，剩下的80%～90%时候都花在HTML文档所援用的一切组件（图片、剧本、款式表、Flash等）举行的HTTP请求上。因而，改良相应时候最简朴的要领就是削减组件数目并由此削减HTTP请求数。削减组件数目一般会和产品设想的初志相抵牾，因而，此处给出了一些手艺：
图片舆图（Image Maps）团结多个图片到一个零丁的图片中。下载图片大小的总和坚持稳定，然则，经由过程削减HTTP请求数的体式格局加速了页面。图片舆图适用于导航栏或其他超链接中运用多个图片的状况。然则，在定义图片舆图上的地区坐标时，假如采纳手工体式格局很难完成且轻易失足，而且除了矩形外险些没法定义其他外形。
CSS Sprites运用CSS background-image和background-position属性将多个图片团结成一个自力的图片来显现。它经由过程兼并图片削减了HTTP请求，而且比图片舆图越发天真，同时也下落了图片的下载量。假如在页面中须要为背景、按钮、导航栏、链接等供应大批图片，CSS Sprites是一种优异的处置惩罚方案。
内联图片（Inline images）运用data: URL scheme情势将图片嵌入到HTML文档中。经由过程此情势嵌入图片，不须要任何分外的HTTP请求开支。然则，现在的主流阅读器（主如果IE）不支撑此种体式格局。
兼并文件（Combined files）经由过程将一切JavaScript剧本兼并到一个文件，一切CSS款式表兼并到另一个文件的体式格局来削减HTTP请求的数目。然则简朴的兼并一般会碰到模块化、页面变化等题目，须要依据页面援用剧本和款式表来详细分析以肯定详细的组合体式格局。
划定规矩2——运用内容宣布收集（Use a Content Delivery Network）
用户同Web服务器的间隔会对页面相应时候发作影响。网站最初一般将其一切服务器放在一致个处所，当用户群增添时，公司必须面临服务器安排所在不再适宜的实际。因而，有必要在多个地理位置差别的服务器上布置内容。
作为完成地理位置星散的第一步，不该当起首尝试运用散布式架构从新设想Web运用程序。如许的运用程序决议了从新设想将带来如同步会话状况、在服务器安排所在间复制数据库事宜等庞杂题目。从新设想会推延以至基础没法完成收缩用户和网站内容间隔的愿望。
假如运用程序Web服务器里用户更近，则一个HTTP请求的相应时候将被收缩；假如组件Web服务器离用户更近，则多个HTTP请求的相应时候将收缩。因而，与其从新最先设想运用程序，以便将运用程序Web服务器分散开，不如起首将组件Web服务器分散开。这不仅能抵达相应时候大幅削减的目标，还很轻易完成。
内容宣布收集（CDN）是一组散布在多个差别地理位置的Web服务器，用于越发有用的向用户宣布内容。向特定用户宣布内容的服务器基于对收集可费用的丈量，比方，CDN可以挑选收集阶跃数最小的服务器，或许具有最短相应时候的服务器。
除了收缩相应时候外，CDN还可以带来其他上风，包括备份、扩大存储才能和举行缓存；同时，CDN另有助于紧张Web流量峰值的压力，如在猎取天色或股市消息、阅读体育或文娱事宜时。依靠CDN的一个瑕玷是网站的相应时候会遭到其他网站——以至多是竞争对手流量的影响；另一个瑕玷是没法直接掌握组件服务器所带来的题目。
CDN用于宣布静态内容（如图片、剧本、款式表、Flash）。供应动态HTML页面会引入特别的存储请求——数据库衔接、状况治理、考证、硬件和OS优化等，这些庞杂性凌驾了CDN的局限。另一方面，静态文件更轻易存储并具有较少的依靠。
划定规矩3——增加Expires头（Add an Expires or a Cache-Control Header）
Web页面包括大批组件，而且数目在不停增进。页面的初访者会举行很多的HTTP请求，但经由过程一个久长的Expires头，可以使这些组件被缓存下来，可以在后续的页面阅读中防备没必要要的HTTP请求。久长的Expires头最长用于图片，但应当将其用于一切组件上，包括剧本、款式表和Flash。
Web服务器运用Expires头关照Web客户端它可以运用一个组件的当前副本，晓得指定时候为止。HTTP范例中扼要的称该头为“在这一日期/时候今后，相应将被认为是无效的”。比方：
Expires: Thu, 15 Apr 2010 20:00:00 GMT
关照阅读器该相应的有用性延续到2010年4月15日。
因为Expires头运用一个特定的时候，它请求服务端和客户端的时钟严厉同步；别的，逾期日期须要常常搜检，一旦逾期日期到了，须要在服务器中设置供应一个新的日期。所以，HTTP1.1引入了Cache-Control头来战胜Exipres头的限定。Cache-Control运用max-age指令指定组件被缓存多久，它以秒为单元定义了一个更新窗。运用带有max-age的Cache-Control可以消弭Expires的限定，但关于不支撑HTTP1.1的运用，仍愿望运用Expires头。可以同时制订这两个相应头，假如二者同时涌现时，HTTP范例划定max-age指令将重写Expires头。
当涌现了Expires头时，直到逾期时候为止一向会运用缓存的版本，阅读器不会搜检任何更新，直到过了逾期时候。为了确保用户可以猎取组件的最新版本，须要在一切的HTML页面中修正组件的文件名。Yahoo在此运用了将版本号嵌入在组件的文件名中的要领。
划定规矩4——紧缩组件（Gzip Components)
紧缩组件经由过程削减HTTP请求发作的相应包的大小，从而下落传输时候的体式格局来进步机能。从HTTP1.1最先，Web客户端可以经由过程HTTP请求中的Accept-Encoding头来标识对紧缩的支撑：
Accept-Encoding: gzip, deflate
假如Web服务器看到请求中的这个头，就会运用客户端列出的要领中的一种来紧缩相应。Web服务器经由过程相应中的Content-Encoding头来关照Web客户端：
Content-Encoding: gzip
现在很多网站一般会紧缩HTML文档，剧本和款式表的紧缩也是值得的（包括XML和JSON在内的任何文本相应理论上都值得被紧缩）。然则，图片和PDF文件不该当被紧缩，因为它们原本已被紧缩了。
紧缩一般能将相应的数据量削减近70%，然则紧缩一般状况下会带来服务端和客户端的CPU开支，要检测受益是不是大于开支，须要综合斟酌相应大小、衔接的带宽和客户端也服务端直接的间隔等要素。一般须要对大于1KB或2KB的文件举行紧缩。
当阅读器经由过程代办来发送请求时，有可以涌现阅读器希冀接收的紧缩后内容和实际吸收到的不一致的状况。处置惩罚这一题目标要领是在Web服务器的相应中增加Vary头。Web服务器可以关照代办依据一个或多个请求头来转变缓存的相应。因为紧缩的决议是基于Accept-Encoding请求头的，因而须要在服务器的Vary相应头中包括Accept-Encoding:
Vary: Accept-Encoding
现在约莫90%的经由过程阅读器举行的Internet通讯都须要运用gzip，使得服务端和客户端的对等性变得分外主要。无论是客户端照样服务端发送毛病，都邑形成页面被损坏。防备毛病的一种体式格局是采纳“阅读器白名单”体式格局，即只为经由证明支撑紧缩的阅读器供应紧缩内容，然则当代办缓存加进来今后，处置惩罚边沿状况阅读器将变得越发庞杂。另一种体式格局是运用Vary: *或Cache-Control: private头来禁用代办缓存。此种体式格局会为一切阅读器禁用代办缓存，从而增添带宽开支。怎样均衡紧缩和代办支撑须要在加速相应时候、减小带宽开支和边沿状况阅读器缺点之间举行衡量：
假如网站的用户很少，而且他们处于一个小圈子中，边沿状况阅读器不须要太多关注，可以紧缩内容并运用Vary: Accept-Encoding。
假如更注重带宽开支，可以和前一种状况一样，紧缩内容并运用Vary: Accept-Encoding。
假如网站具有大批的、多变的用户群，可以敷衍较高的带宽开支，而且享有高质量的名声，须要紧缩内容并运用Cache-Control: Private。（Google和Yahoo都运用这类体式格局）
划定规矩5——将款式表放在顶部（Put Stylesheets at the Top）
我们都愿望页面可以逐渐加载，也就是说，我们愿望阅读器可以尽快显现内容。当阅读器逐渐加载页面时，页头、导航栏、顶端logo等一切这些都邑守候页面的用户供应视觉反应，这改良了用户体验。将款式表放在底部，为防备当款式变化时重绘页面中的元素，阅读器会壅塞内容逐渐显现。
款式表在页面中的位置并不影响下载时候，然则会影响页面的显现。依据HTML范例“和A不一样，[LINK]只能涌现在文档的HEAD节中，但其涌现次数是恣意的”。因而，题目标处置惩罚体式格局应当是遵照HTML范例，运用LINK标签将款式表放在文档的HEAD中。
划定规矩6——将剧本放在底部（Put Scripts at the Bottom）
对相应时候影响最大的是页面中的组件数目，而剧本会壅塞组件的并行下载，带来机能上的题目。HTTP1.1范例提议阅读器从每一个主机名并行下载两个组件。假如一个Web页面均匀将其组件离别放在两个主机名下，团体相应时候可以削减约莫一半。我们可以经由过程对阅读器默许设置的修正来增添每一个主机名并行下载组件的数目，也可以运用CNAME（DNS别号）将组件离别放到多个主机名下。然则，增添并行下载数目一般会带来机能上的开支，过量的并行下载偶然反而会下落机能。Yahoo!研讨表明，运用两个主机名比运用1、4或10个主机名能带来更好的机能。
须要我们注重的是，下载剧本时并行下载实际上是被禁用的，纵然此时运用了差别的主机名，阅读器也不会启动其他下载。因而，假如将剧本放在顶部，剧本会壅塞背面内容的显现，也会壅塞背面组件的下载。因而，安排剧本最好的处所是页面底部，这不会阻挠页面内容显现，而且页面中的可视组件可以尽早下载。
划定规矩7——防备CSS表达式(Avoid CSS Expressions)
CSS表达式是动态设置CSS属性的一种壮大（而且风险）的体式格局。它从IE5今后的版本被支撑，在IE8中已被烧毁。
表达式的题目在于对其举行的求值频次比人们希冀的要高。它们不只在显现页面和大小转变时求值，当页面转动，以至用户鼠标在页面上移过期都要举行求值。
削减CSS表达式求值次数的一种体式格局是运用一次性表达式，假如CSS表达式必须被求值一次，可以在这一次中实行重写它本身。除此以外，还可以运用事宜处置惩罚器来为特定的事宜供应所希冀的动态行动。
划定规矩8——运用外部JavaScript和CSS（Make JavaScript and CSS External）
在实际环境中运用外部文件一般会发作较快的页面，因为JavaScript和CSS有机会被阅读器缓存起来。关于内联的状况，因为HTML文档一般不会被设置为可以举行缓存的，所以每次请求HTML文档都要下载JavaScript和CSS。所以，假如JavaScript和CSS在外部文件中，阅读器可以缓存它们，HTML文档的大小会被削减而没必要增添HTTP请求数目。
决议是不是运用外部文件的关键在于被缓存的外部文件占请求的HTML文档数的比重。假如网站用户在每次会话中举行屡次页面接见，同时页面重用了多个剧本和款式表，运用外部文件时很好的挑选。
关于大多数网站而言，难以准确器量以推断是不是运用内联或外部文件，此时提议是运用外部文件的体式格局。关于这个题目标一个破例是网站主页，因为主页关于相应时候请求更高，因而越发倾向于内联而不是外部文件。
关于内联文件而言，因为没法应用阅读器缓存，因而给人觉得依旧比较低效。我们可以经由过程加载后下载和动态内联的体式格局来使得网站主页既可以取得内联的上风，同时也能缓存外部文件。
划定规矩9——削减DNS查找（Reduce DNS Lookups）
DNS关于网站来讲会带来开支。一般阅读器查找一个给定主机名的IP要花费20～120毫秒的时候。在DNS查找完成之前，阅读器不能今后主机下载任何东西。
DNS查找可以被缓存起来以进步机能，这类缓存可以发作在ISP或局域网中的一台特别的缓存服务器上，同时，缓存也会发作在自力的用户机械上。在用户请求一个主机名后，DNS信息会留在操纵体系的DNS缓存中，大多数阅读器也具有本身的缓存，和操纵体系缓存相星散。只需阅读器在其缓存中保留了DNS纪录，就不会经由过程操纵体系来请求这个纪录。
当客户端阅读器和操纵体系中DNS缓存同时为空时，DNS查询的数目即是页面中唯一主机名的数目，这些主机名包括了页面的URL、图片、剧本、款式表、Flash等。所以，削减唯一主机名数目，可以削减DNS查询数。
削减唯一主机名数目会潜伏的削减页面中并行下载的数目。防备DNS查找下落了相应时候，但削减并行下载可以会增添相应时候。关于这类状况，提议将这些组件放在最少2个，但不要凌驾4个主机名下。
划定规矩10——精简JavaScript和CSS（Minify JavaScript and CSS）
精简是从代码中移除没必要要的字符以减小其大小，进而改良加载时候。在代码被精简后，一切解释以及没必要要的空缺字符（空格、换行和制表符）都将被移除。关于JavaScript而言，因为须要下载的文件大小减小了，可以改良相应时候。
殽杂是可以运用在源代码上的另一种优化体式格局。相比较于精简，殽杂越发庞杂，因而更轻易发作bug。殽杂可以更大程度上紧缩源代码，然则也存在着肯定的风险。
除了外部JavaScript外，内联在<script>和<style>块中的源代码也须要被精简。纵然运用了gzip来紧缩JavaScript和CSS，运用精简可以将代码大小再削减5%或许更多。
划定规矩11——防备重定向（Avoid Redirects）
重定向用于将用户从一个URL路由到另一个URL。重定向有很多种，个中301和302是最经常使用的两种。下面是一个301相应头的示例：
HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
Content-Type: text/html
阅读器会自动将用户带到Location字段给出的URL。重定向所必须的一切信息都包括在这个头中，相应体一般是空的。不论叫什么名字，301或许302相应在实际中都不会被缓存，除非有附加的头（如Expires或Cache-Control等）请求它这么做。meta refresh标签和JavaScript也可以用于重定向，然则最好的手艺是运用规范的3xx状况码，以保证退却按钮可以一般事情。
须要我们记着的是重定向会使页面变慢。在用户和HTML文档间插进去一个重定向后，在此HTML文档抵达之前页面上不会描写任何东西，任何组件也不会被下载。
有一种重定向最为糟蹋，发作的也很频仍，然则Web开辟人员一般都没有意想到它，它发作在URL的末端必须涌现斜线（/）而没有涌现的状况。比方接见地点http://astrology.yahoo.com/astrology将致使一个301相应包括重定向至http://astrology.yahoo.com/astrology/。当主机名后缺乏末端斜线时不会发作重定向。在Apache中，我们可以经由过程Alias指令或许mod_rewrite模块或许DirectorySlash指令来处置惩罚缺乏末端斜线时的重定向题目。
从一个旧的站点链接到新的站点是运用重定向的另一种罕见场景。其他情势还包括将一个网站的差别部份衔接起来，以及基于一些前提（阅读器范例、用户帐户范例等）来指导用户。运用重定向来衔接两个网站很简朴而且只须要很少的分外代码。然则，虽然重定向下落了开辟的庞杂性，也损害了用户体验，一般可以举行其他的挑选：假如两个代码的途径在一致台服务器上，可以运用Alias和mod_rewrite；假如域名因为重定向发作转变，可以运用一个CNAME（一条DNS纪录，用于建立一个域名指向另一个域名的别号）让两个主机名指向雷同的服务器，然后运用Alias和mod_rewrite。
划定规矩12——移除反复剧本（Remove Duplicate Scripts）
在一个页面中两次庇护一致个JavaScript文件会毁伤机能。致使一个剧本反复的要素主要有两个——团队大小和剧本数目。
当反复剧本的征象发作时，将发作没必要要的HTTP请乞降糟蹋实行JavaScript的时候。没必要要的HTTP请求会发作在IE中，而不会发作在Firefox中。在IE中，假如剧本被包括两次且没有被缓存，阅读器会在页面加载时期发作两个HTTP请求；纵然剧本可以缓存，当用户从新加载页面时也会发作分外的HTTP请求。对JavaScript举行的过剩的实行从而糟蹋时候的征象在IE和Firefox中都存在，与剧本是不是被缓存无关。
防备不测包括一致剧本两次的一种要领是在你的模块体系中完成一个剧本治理模块。包括剧本的典范体式格局是在HTML页面中运用SCRIPT标签：
<script type=”text/javascript” src=”menu_1.0.17.js”></script>
另一种挑选是在PHP中建立一个函数：
<?php insertScript(“menu.js”) ?>
为了防备一致个剧本被反复增加屡次，insertScript函数须要增加处置惩罚剧本的依靠性和版本的功用。
划定规矩13——设置Etag（Configure ETags）
实体标签（Entity Tag，ETag）是Web服务器和阅读器用于确认缓存组件的有用性的一种机制。ETag在HTTP1.1中引入，用于检测阅读器缓存中的组件与原始服务器上的组件是不是婚配。ETag是唯一标识了一个组件的一个特定版本字符串。唯一的束缚是该字符串必须用引号引起来。原始服务器运用Etag相应头来指定组件的ETag。
HTTP/1.1 200 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
ETag: “10c24bc-4ab-457e1c1f”
Content-Length: 12195
今后，假如阅读器必须考证一个组件，它会运用If-None-Match头将ETag传回原始服务器。假如ETag是婚配的，就会返回304状况码，在此例中使相应削减12195字节。
GET /i/yahoo.gif HTTP/1.1
Host: us.yimg.com
f-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
If-None-Match: “10c24bc-4ab-457e1c1f”
HTTP/1.1 304 Not Modified
ETag的题目在于，一般运用组件的某些属性来组织它，这些属性关于特定的、寄宿了网站的服务器来讲是唯一的。当阅读器从一台服务器上猎取了原始组件今后又尝试向另一台服务器来考证组件时，ETag是不婚配的。这类状况关于运用服务器集群来处置惩罚请求的网站来讲是很罕见的一种状况。默许状况下，Apache和IIS向ETag中嵌入的数据都邑大大下落有用性考证的成功率。
Apache1.3和2.x的ETag花样是inode-size-timestamp。文件体系运用inode来存储诸如文件范例、一切者、组和接见情势等信息。只管在多台服务器上一个给定的文件可以位于雷同的目次、具有雷同的文件大小、权限、时候戳等，从一台服务器到另一台服务器，器inode仍然是差别的。
IIS5.0和6.0在ETag上有着相似的题目。IIS上ETag的花样是Filetimestamp:ChangeNumber。ChangeNumber适用于跟踪IIS设置变化的计数器。关于一个网站背地的一切IIS服务器来讲，ChangeNumber不大可以雷同。
最
终的结果是，关于完整雷同的组件，从一台服务器到另一台，Apache和IIS发作的ETag是不会婚配的。假如ETag不婚配，用户就不会根据ETag的设想设计那样吸收到更小更快的304相应；相反，它们会收到一般的200相应以及组件的一切数据。假如只在一台服务器上布置网站，这一般不会发作题目；但假如运用了服务器集群，同时运用Apache或许IIS举行默许的ETag设置，用户相应将变慢，服务器负载将变高，将斲丧更多的带宽，同时代办缓存的效力也会下落。纵然组件具有久长的Expires头，一旦用户单击了Reload或Refresh按钮，依旧会发作前提GET请求。
假如组件必须经由过程最新修正日期以外的一些东西来举行考证，则ETag是一种壮大的要领；假如不必自定义ETag，则最好将其移除。Last-Modified头基于组件的时候戳举行考证，可以供应完整等价的信息，而且移除ETag可以削减相应和后续请求的HTTP头的大小。在Apache中，只需向Apache设置文件中简朴地增加下面一行设置就可以移除ETag：
FileETag none
划定规矩14——使Ajax可缓存（Make Ajax Cacheable）
Ajax的一个最主要的长处就是向用户供应立即反应，因为它异步的从背景Web服务器请求信息。然则，运用Ajax并不保证用户不会比及异步的JavaScript和XML返回相应。在很多运用程序中，用户是不是须要守候取决于怎样运用Ajax。用户是不是须要守候的关键要素在于Ajax请求是主动的照样被动的。主动请求是基于用户的当前操纵而提议的，被动请求则是为了未来运用而预先提议的。我们须要注重的是，“异步”并没有暗示“及时”。
为了提拔机能，最主要的是优化Ajax相应。而改良这些主动Ajax请求的最主要的体式格局就是使相应可缓存。如同在“增加Expires头”中议论的，一些其他划定规矩也适用于Ajax，包括：紧缩组件、削减DNS查找、精简JavaScript、防备重定向、设置Etag。
