前端优化

加快网站的最佳实践

最小化HTTP请求

终端用户响应时间的80％用于前端。大部分时间都在下载页面中的全部组件：图像，样式表，脚本，Flash等。减小组件数量又会减小呈现页面所需的HTTP请求数量。这是更快页面的关键。

• ==组合文件== 是一种经过将全部脚本合并为一个脚原本减小HTTP请求数量的方法，一样也能够将全部CSS合并到一个样式表中。当脚本和样式表因页面而异时，将文件组合起来更具挑战性，但使发布过程的这一部分可以缩短响应时间。
• ==CSS Sprites== 是减小图片请求数量的首选方法。将背景图像组合成单个图像，并使用CSSbackground-image和background-position属性显示所需的图像片断。

使用内容交付网络

用户与Web服务器的距离对响应时间有影响。在多个地理位置分散的服务器上部署您的内容将使您的网页从用户的角度更快加载。

1. 80-90％的最终用户响应时间用于下载页面中的全部组件：图像，样式表，脚本，Flash等。这是性能黄金法则。不要从从新设计应用程序体系结构的艰巨任务开始，最好先分散您的静态内容。这不只实现了响应时间的更大缩短，并且因为内容交付网络，这更容易实现。
2. 内容传送网络（CDN）是分布在多个位置的网络服务器的集合，以更高效地向用户传送内容。选择用于将内容递送给特定用户的服务器一般基于网络邻近度的度量。例如，选择网络跳数最少的服务器或响应时间最快的服务器。
3. 一些大型互联网公司拥有本身的CDN，但使用CDN服务提供商（如Akamai Technologies，EdgeCast或level3）具备成本效益。对于创业公司和私人网站来讲，CDN服务的成本可能会很高，但随着您的目标受众不断扩大并变得更加全球化，CDN是实现快速响应所必需的。在雅虎，将静态内容从其应用程序Web服务器转移到CDN（如上所述的第三方以及雅虎本身的CDN）的属性将最终用户响应时间提升了20％甚至更多。切换到CDN是一种相对简单的代码更改，可显着提升网站的速度。

添加过时或缓存控制标题

• 对于静态组件：经过设置远期Expires标题实现“永不过时”策略
• 对于动态组件：使用适当的Cache-Control标题来帮助浏览器提供有条件的请求

1. 网页设计愈来愈丰富，这意味着更多的脚本，样式表，图像和Flash在页面中。首次访问您的页面可能须要发出多个HTTP请求，但经过使用Expires标头，可使这些组件可缓存。这避免了后续页面浏览中没必要要的HTTP请求。过时标头最经常使用于图像，但它们应该用于全部组件，包括脚本，样式表和Flash组件。

2. 浏览器（和代理）使用缓存来减小HTTP请求的数量和大小，使网页加载速度更快。Web服务器使用HTTP响应中的Expires标头告诉客户端能够缓存组件的时间。这是一个颇有前途的Expires标题，告诉浏览器这个响应将不会在2010年4月15日以前失效。

   到期时间：2010年4月15日星期四20:00:00 GMT

3. 若是您的服务器是Apache，请使用ExpiresDefault指令设置相对于当前日期的到期日期。ExpiresDefault指令的这个示例将过时日期设置为从请求开始的10年。

   ExpiresDefault“访问加10年”

4. 请记住，若是您使用远期将来的Expires头文件，则只要组件更改，就必须更改组件的文件名。常常使这一步成为构建过程的一部分：组件的文件名中嵌入了一个版本号，例如，yahoo_2.0.6.js。

5. 只有在用户已经访问过您的网站后，使用远期将来的Expires标题才会影响页面浏览。当用户第一次访问您的网站而且浏览器的缓存为空时，它对HTTP请求的数量没有影响。所以，这种性能改进的影响取决于用户多久访问一次带有缓冲区的页面。（一个“准备好的缓存”已经包含了页面中的全部组件。）咱们在Yahoo!上测试了这一点。并发现带有引导缓存的页面浏览量为75-85％。经过使用远期将来的Expires标题，您能够增长浏览器缓存的组件数量，并在后续页面浏览中从新使用，而无需在用户的Internet链接上发送单个字节。

将样式表放置在顶部

1. 将样式表移动到文档HEAD中会使页面显示加载速度更快。这是由于将样式表放在HEAD中容许页面逐步呈现。
2. 关注性能的前端工程师但愿逐步加载页面; 也就是说，咱们但愿浏览器尽快显示它拥有的任何内容。这对于有不少内容的网页和Internet链接速度较慢的用户尤为重要。为用户提供视觉反馈（如进度指示器）的重要性已获得充分研究和记录。在咱们的例子中，HTML页面是进度指示器！当浏览器逐渐加载页面时，页眉，导航栏，顶部的徽标等都做为等待页面的用户的视觉反馈。这改善了总体用户体验。
3. 将样式表放在文档底部附近的问题是，它禁止在许多浏览器（包括Internet Explorer）中进行渐进式呈现。这些浏览器会阻止渲染，以免在样式更改时从新绘制页面元素。用户停留在查看空白页面。

将脚本放在底部

1. 脚本致使的问题是它们会阻止并行下载。若是您从多个主机名提供图像，则能够同时发生两个以上的下载。然而，当脚本正在下载时，浏览器将不会启动任何其余下载，即便是在不一样的主机名上。
2. 另外一个建议是使用延迟脚本。该DEFER属性指示该脚本不包含document.write，而且是浏览器能够继续呈现的线索。不幸的是，Firefox不支持该DEFER属性。在Internet Explorer中，该脚本可能会延迟，但不如预期的那么多。若是脚本能够被延期，它也能够被移动到页面的底部。这会让你的网页加载速度更快。

避免使用CSS表达式

若是样式属性必须在页面的整个生命周期中动态设置，则使用事件处理程序而不是CSS表达式是一种替代方法。若是您必须使用CSS表达式，请记住它们可能会被评估数千次，而且可能会影响页面的性能。

使用外联JavaScript和css

1. 在现实世界中使用外部文件一般会产生更快的页面，由于浏览器会缓存JavaScript和CSS文件。每次请求HTML文档时，都会下载HTML文档中内联的JavaScript和CSS。这减小了所需的HTTP请求数量，但增长了HTML文档的大小。另外一方面，若是JavaScript和CSS位于浏览器缓存的外部文件中，则HTML文档的大小会减小，而不会增长HTTP请求的数量。
2. 关键因素是外部JavaScript和CSS组件相对于所请求HTML文档数量的缓存频率。这个因素尽管难以量化，但可使用各类指标进行衡量。若是您的网站上的用户每一个会话有多个页面浏览量，而且许多网页重复使用相同的脚本和样式表，则缓存的外部文件可能带来更大的潜在收益。
3. 许多网站都处于这些指标的中间。对于这些网站，最好的解决方案一般是将JavaScript和CSS做为外部文件进行部署。首选内联的惟一例外是主页，例如雅虎的首页和My Yahoo! 。每一个会话只有不多（可能只有一个）页面视图的主页可能会发现内嵌JavaScript和CSS能够缩短最终用户的响应时间。
4. 对于一般是许多页面视图中的第一个的首页，有一些技术能够利用内联提供的HTTP请求的减小以及经过使用外部文件实现的缓存优势。其中一种方法是在首页内嵌JavaScript和CSS，但在页面加载完成后动态下载外部文件。后续页面将引用应该已经在浏览器缓存中的外部文件。

减小DNS查找

1. 域名系统（DNS）将主机名映射到IP地址，就像电话本将人名映射到他们的电话号码同样。当您在浏览器中输入www.yahoo.com时，浏览器联系的DNS解析器会返回该服务器的IP地址。DNS有成本。DNS一般须要20-120毫秒才能查找给定主机名的IP地址。直到DNS查找完成后，浏览器才能今后主机名下载任何内容。
2. DNS查找缓存以得到更好的性能。这种高速缓存能够发生在用户的ISP或局域网维护的特殊高速缓存服务器上，但也能够在我的用户的计算机上进行高速缓存。DNS信息保留在操做系统的DNS缓存中（Microsoft Windows上的“DNS客户端服务”）。大多数浏览器都有本身的缓存，与操做系统的缓存分开。只要浏览器在本身的缓存中保存了一条DNS记录，它就不会打扰操做系统请求记录。
3. 当客户端的DNS缓存为空（对于浏览器和操做系统）时，DNS查找的数量等于网页中惟一主机名的数量。这包括页面URL，图像，脚本文件，样式表，Flash对象等中使用的主机名。减小惟一主机名的数量可减小DNS查找的数量。
4. 减小惟一主机名的数量有可能减小页面中发生的并行下载量。避免DNS查找会缩短响应时间，但减小并行下载可能会增长响应时间。个人准则是将这些组件分红至少两个但不超过四个主机名。这在减小DNS查找和容许高度并行下载之间取得了很好的折衷。

缩小JavaScript和CSS

1. 缩小是从代码中删除没必要要的字符以缩小其大小从而缩短加载时间的作法。当代码缩小时，全部注释都将被删除，以及不须要的空白字符（空格，换行符和制表符）。在JavaScript的状况下，因为下载文件的大小减少，这提升了响应时间性能。两种用于缩小JavaScript代码的流行工具是JSMin和YUI Compressor。YUI压缩机还能够缩小CSS。
2. 混淆是一种可应用于源代码的替代优化。它比缩小更复杂，所以更容易因迷惑步骤自己而产生错误。在对美国十大网站的调查中，缩小比例达到了21％，而混淆的比例为25％。尽管模糊处理的尺寸减少了不少，但缩小JavaScript风险较小。
3. 除了缩小外部脚本和样式以外，内嵌
   刷新评论 刷新页面 返回顶部