加快网站的最佳实践
最小化HTTP请求
终端用户响应时间的80％用于前端。大部分时间都在下载页面中的所有组件：图像，样式表，脚本，Flash等。减少组件数量又会减少呈现页面所需的HTTP请求数量。这是更快页面的关键。
- ==组合文件== 是一种通过将所有脚本合并为一个脚本来减少HTTP请求数量的方法，同样也可以将所有CSS合并到一个样式表中。当脚本和样式表因页面而异时，将文件组合起来更具挑战性，但使发布过程的这一部分能够缩短响应时间。
- ==CSS Sprites== 是减少图片请求数量的首选方法。将背景图像组合成单个图像，并使用CSSbackground-image和background-position属性显示所需的图像片段。
使用内容交付网络
用户与Web服务器的距离对响应时间有影响。在多个地理位置分散的服务器上部署您的内容将使您的网页从用户的角度更快加载。
- 80-90％的最终用户响应时间用于下载页面中的所有组件：图像，样式表，脚本，Flash等。这是性能黄金法则。不要从重新设计应用程序体系结构的艰巨任务开始，最好先分散您的静态内容。这不仅实现了响应时间的更大缩短，而且由于内容交付网络，这更容易实现。
- 内容传送网络（CDN）是分布在多个位置的网络服务器的集合，以更高效地向用户传送内容。选择用于将内容递送给特定用户的服务器通常基于网络邻近度的度量。例如，选择网络跳数最少的服务器或响应时间最快的服务器。
- 一些大型互联网公司拥有自己的CDN，但使用CDN服务提供商（如Akamai Technologies，EdgeCast或level3）具有成本效益。对于创业公司和私人网站来说，CDN服务的成本可能会很高，但随着您的目标受众不断扩大并变得更加全球化，CDN是实现快速响应所必需的。在雅虎，将静态内容从其应用程序Web服务器转移到CDN（如上所述的第三方以及雅虎自己的CDN）的属性将最终用户响应时间提高了20％甚至更多。切换到CDN是一种相对简单的代码更改，可显着提高网站的速度。
添加过期或缓存控制标题
- 对于静态组件：通过设置远期Expires标题实现“永不过期”策略
- 对于动态组件：使用适当的Cache-Control标题来帮助浏览器提供有条件的请求
- 网页设计越来越丰富，这意味着更多的脚本，样式表，图像和Flash在页面中。首次访问您的页面可能需要发出多个HTTP请求，但通过使用Expires标头，可以使这些组件可缓存。这避免了后续页面浏览中不必要的HTTP请求。过期标头最常用于图像，但它们应该用于所有组件，包括脚本，样式表和Flash组件。
浏览器（和代理）使用缓存来减少HTTP请求的数量和大小，使网页加载速度更快。Web服务器使用HTTP响应中的Expires标头告诉客户端可以缓存组件的时间。这是一个很有前途的Expires标题，告诉浏览器这个响应将不会在2010年4月15日之前失效。
到期时间：2010年4月15日星期四20:00:00 GMT
如果您的服务器是Apache，请使用ExpiresDefault指令设置相对于当前日期的到期日期。ExpiresDefault指令的这个示例将过期日期设置为从请求开始的10年。
ExpiresDefault“访问加10年”
- 请记住，如果您使用远期未来的Expires头文件，则只要组件更改，就必须更改组件的文件名。经常使这一步成为构建过程的一部分：组件的文件名中嵌入了一个版本号，例如，yahoo_2.0.6.js。
只有在用户已经访问过您的网站后，使用远期未来的Expires标题才会影响页面浏览。当用户第一次访问您的网站并且浏览器的缓存为空时，它对HTTP请求的数量没有影响。因此，这种性能改进的影响取决于用户多久访问一次带有缓冲区的页面。（一个“准备好的缓存”已经包含了页面中的所有组件。）我们在Yahoo!上测试了这一点。并发现带有引导缓存的页面浏览量为75-85％。通过使用远期未来的Expires标题，您可以增加浏览器缓存的组件数量，并在后续页面浏览中重新使用，而无需在用户的Internet连接上发送单个字节。
将样式表放置在顶部
- 将样式表移动到文档HEAD中会使页面显示加载速度更快。这是因为将样式表放在HEAD中允许页面逐步呈现。
- 关注性能的前端工程师希望逐步加载页面; 也就是说，我们希望浏览器尽快显示它拥有的任何内容。这对于有很多内容的网页和Internet连接速度较慢的用户尤其重要。为用户提供视觉反馈（如进度指示器）的重要性已得到充分研究和记录。在我们的例子中，HTML页面是进度指示器！当浏览器逐渐加载页面时，页眉，导航栏，顶部的徽标等都作为等待页面的用户的视觉反馈。这改善了整体用户体验。
- 将样式表放在文档底部附近的问题是，它禁止在许多浏览器（包括Internet Explorer）中进行渐进式呈现。这些浏览器会阻止渲染，以避免在样式更改时重新绘制页面元素。用户停留在查看空白页面。
将脚本放在底部
- 脚本导致的问题是它们会阻止并行下载。如果您从多个主机名提供图像，则可以同时发生两个以上的下载。然而，当脚本正在下载时，浏览器将不会启动任何其他下载，即使是在不同的主机名上。
- 另一个建议是使用延迟脚本。该DEFER属性指示该脚本不包含document.write，并且是浏览器可以继续呈现的线索。不幸的是，Firefox不支持该DEFER属性。在Internet Explorer中，该脚本可能会延迟，但不如预期的那么多。如果脚本可以被延期，它也可以被移动到页面的底部。这会让你的网页加载速度更快。
避免使用CSS表达式
如果样式属性必须在页面的整个生命周期中动态设置，则使用事件处理程序而不是CSS表达式是一种替代方法。如果您必须使用CSS表达式，请记住它们可能会被评估数千次，并且可能会影响页面的性能。
使用外联JavaScript和css
- 在现实世界中使用外部文件通常会产生更快的页面，因为浏览器会缓存JavaScript和CSS文件。每次请求HTML文档时，都会下载HTML文档中内联的JavaScript和CSS。这减少了所需的HTTP请求数量，但增加了HTML文档的大小。另一方面，如果JavaScript和CSS位于浏览器缓存的外部文件中，则HTML文档的大小会减少，而不会增加HTTP请求的数量。
- 关键因素是外部JavaScript和CSS组件相对于所请求HTML文档数量的缓存频率。这个因素尽管难以量化，但可以使用各种指标进行衡量。如果您的网站上的用户每个会话有多个页面浏览量，并且许多网页重复使用相同的脚本和样式表，则缓存的外部文件可能带来更大的潜在收益。
- 许多网站都处于这些指标的中间。对于这些网站，最好的解决方案通常是将JavaScript和CSS作为外部文件进行部署。首选内联的唯一例外是主页，例如雅虎的首页和My Yahoo! 。每个会话只有很少（可能只有一个）页面视图的主页可能会发现内嵌JavaScript和CSS可以缩短最终用户的响应时间。
- 对于通常是许多页面视图中的第一个的首页，有一些技术可以利用内联提供的HTTP请求的减少以及通过使用外部文件实现的缓存优点。其中一种方法是在首页内嵌JavaScript和CSS，但在页面加载完成后动态下载外部文件。后续页面将引用应该已经在浏览器缓存中的外部文件。
减少DNS查找
- 域名系统（DNS）将主机名映射到IP地址，就像电话本将人名映射到他们的电话号码一样。当您在浏览器中输入www.yahoo.com时，浏览器联系的DNS解析器会返回该服务器的IP地址。DNS有成本。DNS通常需要20-120毫秒才能查找给定主机名的IP地址。直到DNS查找完成后，浏览器才能从此主机名下载任何内容。
- DNS查找缓存以获得更好的性能。这种高速缓存可以发生在用户的ISP或局域网维护的特殊高速缓存服务器上，但也可以在个人用户的计算机上进行高速缓存。DNS信息保留在操作系统的DNS缓存中（Microsoft Windows上的“DNS客户端服务”）。大多数浏览器都有自己的缓存，与操作系统的缓存分开。只要浏览器在自己的缓存中保存了一条DNS记录，它就不会打扰操作系统请求记录。
- 当客户端的DNS缓存为空（对于浏览器和操作系统）时，DNS查找的数量等于网页中唯一主机名的数量。这包括页面URL，图像，脚本文件，样式表，Flash对象等中使用的主机名。减少唯一主机名的数量可减少DNS查找的数量。
- 减少唯一主机名的数量有可能减少页面中发生的并行下载量。避免DNS查找会缩短响应时间，但减少并行下载可能会增加响应时间。我的准则是将这些组件分成至少两个但不超过四个主机名。这在减少DNS查找和允许高度并行下载之间取得了很好的折衷。
缩小JavaScript和CSS
- 缩小是从代码中删除不必要的字符以缩小其大小从而缩短加载时间的做法。当代码缩小时，所有注释都将被删除，以及不需要的空白字符（空格，换行符和制表符）。在JavaScript的情况下，由于下载文件的大小减小，这提高了响应时间性能。两种用于缩小JavaScript代码的流行工具是JSMin和YUI Compressor。YUI压缩机还可以缩小CSS。
- 混淆是一种可应用于源代码的替代优化。它比缩小更复杂，因此更容易因迷惑步骤本身而产生错误。在对美国十大网站的调查中，缩小比例达到了21％，而混淆的比例为25％。尽管模糊处理的尺寸减小了很多，但缩小JavaScript风险较小。
- 除了缩小外部脚本和样式之外，内嵌和
避免重定向
重定向是使用301和302状态码完成的。以下是301响应中HTTP头的示例：
HTTP / 1.1 301永久移动
位置：http://example.com/newuri
内容类型：text / html- 浏览器会自动将用户转到该Location字段中指定的URL 。重定向所需的所有信息都在标题中。响应的主体通常是空的。尽管名称不同，301和302响应在实践中都不会被缓存，除非额外的标头（例如Expires或Cache-Control）指示它应该是。元刷新标记和JavaScript是将用户引导到不同URL的其他方式，但是如果您必须执行重定向，首选方法是使用标准的3xx HTTP状态代码，主要是为了确保后退按钮正常工作。
- 要记住的重点是重定向会减慢用户体验。在用户和HTML文档之间插入重定向会延迟页面中的所有内容，因为可以呈现页面中的任何内容，并且在HTML文档到达之前不会开始下载任何组件。
配置ETags
1.实体标签（ETags）是Web服务器和浏览器用来确定浏览器缓存中的组件是否与源服务器上的组件匹配的机制。（一个“实体”是另一个词“组件”：图像，脚本，样式表等）ETag被添加来提供一种机制来验证比上一次修改日期更灵活的实体。ETag是唯一标识组件特定版本的字符串。唯一的格式约束是字符串被引用。原始服务器使用ETag响应头指定组件的ETag 。
HTTP / 1.1 200 OK
Last-Modified：Tue，2006年12月12日03:03:59 GMT
ETag：“10c24bc-4ab-457e1c1f”
内容长度：121952.之后，如果浏览器必须验证组件，它将使用If-None-Match标头将ETag传递回原始服务器。如果ETags匹配，则返回一个304状态码，在此示例中将响应减少12195字节。
GET /i/yahoo.gif HTTP / 1.1
Host：us.yimg.com
If-Modified-Since：星期二，2006年12月12日03:03:59 GMT
If-None-Match：“10c24bc-4ab-457e1c1f”
HTTP / 1.1 304未修改使Ajax可缓存
- Ajax引用的好处之一是，它向用户提供即时反馈，因为它从后端Web服务器异步请求信息。但是，使用Ajax并不能保证用户不会在等待这些异步JavaScript和XML响应返回时扭动拇指。在许多应用程序中，用户是否在等待取决于如何使用Ajax。例如，在基于Web的电子邮件客户端中，用户将不断等待Ajax请求的结果，以查找与其搜索条件匹配的所有电子邮件。记住“异步”并不意味着“即时”。
- 为了提高性能，优化这些Ajax响应非常重要。提高Ajax性能的最重要方法是使响应可缓存，如添加过期或缓存控制头中所述。其他一些规则也适用于Ajax：
Gzip组件
减少DNS查找
缩小JavaScript
避免重定向
配置ETags
使用GET获取AJAX请求
- 在使用时XMLHttpRequest，POST在浏览器中实现为两步：首先发送标题，然后发送数据。所以最好使用GET，它只需要一个TCP数据包发送（除非你有很多的cookie）。IE中最大的URL长度是2K，所以如果你发送的数据超过2K，你可能无法使用GET。
- 一个有趣的副作用是POST没有实际发布任何数据就像GET一样。基于HTTP规范，GET旨在用于检索信息，所以在您仅请求数据时使用GET（在语义上）是合理的，而不是将数据发送到服务器端存储。
后加载组件
- JavaScript是在onload事件之前和之后进行分割的理想人选。例如，如果您有JavaScript代码和用于拖放和动画的库，则可以等待，因为在初始渲染之后拖动页面上的元素。其他要查找候选人进行后加载的地方包括隐藏内容（用户操作后显示的内容）和低于该对象的图像。
- 性能目标与其他Web开发最佳实践保持一致是很好的。在这种情况下，逐步增强的想法告诉我们，JavaScript在受支持的情况下可以改善用户体验，但是即使没有JavaScript，您也必须确保页面能够正常工作。因此，在确保页面正常工作后，您可以使用一些后期加载的脚本来增强它，从而为您提供更多的细节和哨音，例如拖放和动画。
预加载组件
预加载看起来可能与后加载相反，但它实际上有一个不同的目标。通过预加载组件，您可以利用浏览器闲置的时间以及将来需要的组件（如图像，样式和脚本）。通过这种方式，当用户访问下一页时，您可以将大部分组件都存储在缓存中，并且您的页面将为用户加载得更快。
- 无条件预加载 - 只要onload激活，您就可以继续并获取一些额外的组件。
- 有条件预加载 - 根据用户操作，您可以根据用户的行为猜测下一个用户前进的位置并相应地进行预加载。
- 预期的预加载 - 在启动重新设计之前提前预加载。
减少DOM元素的数量
- 复杂的页面意味着需要下载更多的字节，这也意味着JavaScript中的DOM访问速度较慢。例如，当您想要添加事件处理程序时，如果在页面上循环遍历500或5000个DOM元素，则会有所不同。
- DOM元素的数量很容易测试，只需输入Firebug的控制台：
document.getElementsByTagName('*').length
拆分组件跨域
拆分组件可让您最大限度地平行下载。由于DNS查找惩罚，请确保您使用的域不超过2-4个。
尽量减少iframe的数量
Iframe允许将HTML文档插入到父文档中。
优点：
- 像徽章和广告等缓慢的第三方内容
- 安全沙箱
并行下载脚本
缺点
- 即使空白也很昂贵
- 阻止页面载入
非语义
没有404
- HTTP请求很昂贵，因此提出HTTP请求并获得无用的响应（即404 Not Found）是完全没有必要的，并且会减慢用户体验而没有任何好处。
- 当到外部JavaScript的链接错误并且结果是404时。首先，此下载将阻止并行下载。接下来，浏览器可能会尝试解析404响应正文，就好像它是JavaScript代码一样，试图找到可用的东西。
减小Cookie大小
HTTP cookie由于各种原因（如身份验证和个性化）而被使用。有关cookie的信息在Web服务器和浏览器之间的HTTP标头中交换。尽可能降低cookies的大小以尽量减少对用户响应时间的影响，这一点很重要。
- 消除不必要的cookie
- 尽可能降低Cookie大小，以尽量减少对用户响应时间的影响
- 请注意在适当的域级别设置cookie，以便其他子域不受影响
- 适当设置过期日期。更早的过期日期或不更早删除cookie，提高用户响应时间
最小化DOM访问
使用JavaScript访问DOM元素很慢，所以为了获得更响应的页面，您应该：
- 缓存对访问元素的引用
- 更新节点“脱机”，然后将它们添加到树中
- 避免使用JavaScript修复布局
优化图像
在设计师完成为网页创建图像后，在将这些图像传输到Web服务器之前，仍然可以尝试一些操作，列如压缩和转换格式。
优化CSS精灵
- 将水平方向上的图像与垂直方向排列在一起通常会导致较小的文件大小。
- 在精灵中组合相似的颜色可帮助您将颜色数量保持在较低的水平，理想情况下在256色以下，以适应PNG8。
- “适合移动设备”并且不要在精灵图像之间留下很大的空白。这不会影响文件大小，但需要较少的内存供用户代理将图像解压缩为像素映射。100x100图像是10万像素，其中1000x1000是100万像素
不要在HTML中缩放图像
不要使用比您需要的图片更大的图片，因为您可以在HTML中设置宽度和高度。如果你需要，
<img width="100" height="100" src="mycat.jpg" alt="My Cat" />那么你的图像（mycat.jpg）应该是100x100px，而不是缩小的500x500px图像。
制作favicon.ico Small和Cacheable
favicon.ico是保留在服务器根目录中的映像。这是一个必要的罪恶，因为即使你不关心它，浏览器仍然会请求它，所以最好不要回应404 Not Found。另外，由于它位于同一台服务器上，每次请求时都会发送Cookie。此图片还会干扰下载顺序，例如在IE中，当您在onload中请求额外的组件时，favicon会在这些额外的组件之前下载。
因此，要减轻拥有favicon.ico的缺点，请确保：
- 它很小，最好在1K以下。
- 设置过期标题与你感觉舒适（因为你不能重命名，如果你决定改变它）。您几乎可以在将来几个月安全地设置Expires标题。您可以查看您当前的favicon.ico的最后修改日期，以做出明智的决定。
避免空图像src
具有空字符串src属性的图像会发生超过一个人的预期。它以两种形式出现：
//HTML
<img src =“”>
//JavaScript
var img = new Image（）;
img.src =“”;
//两种形式都会产生相同的效果：浏览器向您的服务器发出另一个请求- Internet Explorer向该页面所在的目录发出请求。
- Safari和Chrome向实际页面本身发出请求。
- Firefox 3和更早版本的行为与Safari和Chrome相同，但版本3.5解决了此问题[错误444931]，不再发送请求。
- 当遇到空图像src时，Opera不会执行任何操作。
为什么这种行为不好？
- 通过发送大量意外流量来瘫痪您的服务器，特别是对于每天获得数百万页面浏览量的页面。
- 浪费服务器计算周期生成一个永远不会被查看的页面。
- 可能损坏的用户数据。如果您通过Cookie或以其他方式跟踪请求中的状态，则可能会销毁数据。即使图像请求没有返回图像，浏览器也会读取并接受所有标题，包括所有的Cookie。虽然其余的反应被抛弃，但损害可能已经完成。