前端性能优化35条规则 yahoo -页面内容

前端性能优化35条规则 yahoo -页面内容
前端性能优化35条规则 yahoo -页面内容
前端性能优化35条规则 yahoo -页面内容

01) 减少`HTPP`请求

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

减少页面中组件数量的一种方法是简化页面的设计。但是，有没有一种方法可以构建具有更丰富内容的页面，同时又可以实现快速响应时间？这里有一些减少HTTP请求数量的技术，同时仍然支持丰富的页面设计

合并文件是一种通过将所有脚本组合成一个脚本，并类似地将所有CSS组合成一个样式表来减少HTTP请求数量的方法。当脚本和样式表在页面之间变化时，合并文件更具挑战性，但是将其作为发布过程的一部分可以缩短响应时间。

1	CSS Sprites是减少图像请求数量的首选方法。将您的背景图像合并为一个图像，并使用CSSbackground-image和background-position属性显示所需的图像段

图像映射将多个图像合并为一个图像。总体大小大致相同，但是减少HTTP请求的数量可以加快页面的速度。仅当图像在页面中是连续的（例如导航栏）时，图像映射才起作用。定义图像地图的坐标可能很乏味且容易出错。也无法使用图像地图进行导航，因此不建议使用

内联图像使用data:URL方案将图像数据嵌入到实际页面中。这会增加HTML文档的大小。将嵌入式图像组合到您的（缓存的）样式表中是减少HTTP请求并避免增加页面大小的一种方法。所有主要浏览器尚不支持嵌入式图像

减少页面中的HTTP请求数是一个开始。这是提高初次访问者性能的最重要指南。您网站的每日访问者中有40-60％的用户拥有空的缓存。使这些初次访问者快速浏览您的页面是改善用户体验的关键

02) 减少`DNS`查询

用户靠近您的Web服务器会影响响应时间。从用户的角度来看，跨多个地理位置分散的服务器部署您的内容将使您的页面加载速度更快。但是，您应该从哪里开始呢？

作为实现地理上分散的内容的第一步，请不要尝试重新设计Web应用程序以使其在分布式体系结构中工作。根据应用程序的不同，更改体系结构可能包括艰巨的任务，例如同步会话状态和跨服务器位置复制数据库事务。尝试缩短用户与您的内容之间的距离的尝试可能会因此应用程序体系结构步骤而被延迟或永远不会过去。

请记住，最终用户响应时间的80-90％是花在下载页面上的所有组件上的：图像，样式表，脚本，Flash等。这是性能的黄金法则。与其从重新设计应用程序体系结构这一艰巨的任务开始，不如先分散静态内容，这是更好的选择。这不仅可以大大缩短响应时间，而且由于内容传送网络的原因，它更容易实现。

内容交付网络（CDN）是分布在多个位置的Web服务器的集合，目的是将内容更有效地交付给用户。选择用于向特定用户传送内容的服务器通常基于网络邻近性的度量。例如，选择网络跳数最少的服务器或响应时间最快的服务器。

一些大型的互联网公司拥有自己的CDN，但是使用CDN服务提供商（例如Akamai Technologies，EdgeCast或level3）具有成本效益。对于初创公司和私人网站，CDN服务的成本可能令人望而却步，但是随着您的目标受众越来越大并变得更加全球化，为了实现快速响应，CDN是必不可少的。在Yahoo!上，将静态内容从其应用程序Web服务器移至CDN（如上所述的第三方和Yahoo自己的CDN）的属性将最终用户的响应时间缩短了20％或更多。切换到CDN是相对容易的代码更改，它将显着提高网站的速度

03) 避免重定向

重定向是使用301和302状态代码完成的。这是301响应中HTTP标头的示例

1
2
3

HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
Content-Type: text/html

浏览器会自动将用户带到该Location字段中指定的URL 。重定向所需的所有信息都在标头中。响应的正文通常为空。不管它们的名字是什么，在实践中都不会高速缓存301和302响应，除非有其他标头（例如Expires或Cache-Control）表明它应该是。元刷新标记和JavaScript是将用户定向到其他URL的其他方法，但是，如果必须进行重定向，首选的技术是使用标准的3xx HTTP状态代码，主要是为了确保后退按钮可以正常工作。

要记住的主要事情是重定向会减慢用户体验。在用户和HTML文档之间插入重定向会延迟页面中的所有内容，因为无法呈现页面中的任何内容，并且只有在HTML文档到达之前，才能开始下载任何组件。

最浪费的重定向之一经常发生，并且Web开发人员通常不了解它。当URL末尾应包含一个斜杠（/）时，会发生这种情况。例如，转到http://astrology.yahoo.com/astrology会导致301响应，其中包含到http://astrology.yahoo.com/astrology/的重定向（请注意添加了斜杠）。如果使用Apache处理程序，则使用Alias或mod_rewrite或该DirectorySlash指令在Apache中进行了修复。

将旧网站连接到新网站是重定向的另一种常见用法。其他包括连接网站的不同部分并根据某些条件（浏览器类型，用户帐户类型等）指导用户。使用重定向连接两个网站很简单，几乎不需要其他编码。尽管在这些情况下使用重定向会降低开发人员的复杂性，但会降低用户体验。这种使用重定向的替代方法包括使用Alias和mod_rewrite如果两个代码路径都托管在同一服务器上。如果域名更改是使用重定向的原因，则另一种方法是结合使用Alias或来创建CNAME（DNS记录，该记录创建从一个域名指向另一个域名的别名）mod_rewrite

04) 缓存`Ajax`请求

Ajax引用的好处之一是，它向用户提供即时反馈，因为它从后端Web服务器异步请求信息。但是，使用Ajax并不能保证用户不会在等待那些异步JavaScript和XML响应返回时挥手致意。在许多应用程序中，用户是否一直等待取决于Ajax的使用方式。例如，在基于Web的电子邮件客户端中，用户将一直等待Ajax请求的结果来查找与其搜索条件匹配的所有电子邮件。重要的是要记住，“异步”并不意味着“瞬时”。

为了提高性能，优化这些Ajax响应很重要。改善Ajax性能的最重要方法是使响应可缓存，如Add Expires或Cache-Control Header中所述。其他一些规则也适用于Ajax：

让我们来看一个例子。Web 2.0电子邮件客户端可能使用Ajax下载用户的地址簿以自动完成。如果用户自从上次使用电子邮件Web应用以来没有修改过她的通讯簿，那么如果该Ajax响应可以通过将来的Expires或Cache-Control标头进行缓存，则可以从缓存中读取以前的通讯簿响应。必须告知浏览器何时使用先前缓存的通讯簿响应而不是请求新的响应。可以通过向时间戳记Ajax URL添加时间戳，以指示用户最后一次修改其地址簿的时间，例如，&t=1190241612。如果自上次下载以来未修改过地址簿，则时间戳将相同，并且将从浏览器的缓存中读取地址簿，从而避免了额外的HTTP往返。如果用户修改了自己的地址簿，则时间戳会确保新的URL与缓存的响应不匹配，浏览器将请求更新的地址簿条目。

即使您的Ajax响应是动态创建的，并且可能仅适用于单个用户，它们仍然可以被缓存。这样做将使您的Web 2.0应用程序更快

05) 延迟加载

您可以仔细查看您的页面，然后问自己：“最初呈现该页面绝对需要什么？”。其余的内容和组件可以等待。

JavaScript是onload事件之前和之后进行拆分的理想选择。例如，如果您具有执行拖放操作和动画的JavaScript代码和库，则这些操作可以等待，因为页面上的拖动元素是在初始渲染之后进行的。寻找后加载候选的其他地方包括隐藏的内容（用户操作后出现的内容）和首屏以下的图像。

可以帮助您完成工作的工具：YUI Image Loader允许您将图像延迟到首屏以下，而YUI Get实用程序是一种动态添加JS和CSS的简便方法。举个例子，看看Yahoo! Firebug的“ Net Panel”已打开的主页。

当性能目标与其他Web开发最佳实践保持一致时，这是很好的。在这种情况下，渐进增强的想法告诉我们，JavaScript受支持时可以改善用户体验，但是即使没有JavaScript，也必须确保页面能够正常工作。因此，在确保页面正常运行之后，可以使用一些后期加载的脚本来增强页面的性能，这些脚本可以为您提供更多的便利，例如拖放和动画

06) 预加载

预加载可能看起来与后加载相反，但实际上有一个不同的目标。通过预加载组件，您可以利用浏览器空闲的时间来请求将来需要的组件（例如图像，样式和脚本）。这样，当用户访问下一页时，您可能已经在缓存中包含了大多数组件，因此页面的加载速度将大大快于用户。

实际上，预加载有几种类型：

无条件预加载-一旦onload触发，您就继续获取一些额外的组件。在google.com上查看有关如何在加载图片时请求子画面图片的示例。不需要在google.com主页上使用此图片图片，但在连续的搜索结果页面上则需要使用此图片图片。
有条件的预加载-根据用户的操作，您可以进行有根据的猜测，然后判断用户下一步的去向并相应地进行预加载。在search.yahoo.com上，您可以看到在开始在输入框中输入内容后如何请求一些额外的组件。
预期的预加载-启动重新设计之前的预加载。经过重新设计后，您通常会听到这样的消息：“新站点很酷，但是比以前慢。” 问题的部分原因可能是用户访问了具有完整缓存的旧站点，但是新站点始终是空的缓存体验。您可以通过甚至在启动重新设计之前预加载一些组件来减轻这种副作用。您的旧站点可以使用浏览器空闲时的时间，并请求新站点将使用的图像和脚本

07) 减少`DOM`元素数量

复杂的页面意味着需要下载更多的字节，也意味着JavaScript中的DOM访问速度较慢。例如，当您想添加事件处理程序时，如果在页面上循环访问500或5000个DOM元素，则会有所不同。

大量DOM元素可能是一种征兆，即页面标记需要改进某些内容，而不必删除内容。您是否使用嵌套表进行布局？您是否<div>仅为了解决布局问题而投入更多资源？也许有一种更好，更语义正确的方式来进行标记。

与布局有很大的帮助是YUI CSS公用事业：grids.css可以帮助你的整体布局，fonts.css和reset.css可以帮你除掉那些浏览器的默认格式。这是一个重新开始并思考您的标记的机会，例如，<div>仅在语义上有意义时才使用s，而不是因为它呈现了新的一行。

只需在Firebug的控制台中键入，即可轻松测试DOM元素的数量：
document.getElementsByTagName('*').length

多少个DOM元素太多？检查其他具有良好标记的相似页面。例如Yahoo! 主页是一个非常繁忙的页面，仍然少于700个元素（HTML标记）。

08) 划分内容到不同域名

拆分组件使您可以最大程度地并行下载。确保您使用的域名不超过2-4个，因为DNS查询会受到影响。例如，您可以将HTML和动态内容托管在上，www.example.org 并在static1.example.org和之间拆分静态组件。static2.example.org

有关更多信息，请查看Tenni Theurer和Patty Chi撰写的“最大程度地在拼车通道中并行下载”。

09) 尽量减少`iframe`的使用

iframe可将HTML文档插入父文档中。了解iframe的工作方式非常重要，这样才能有效地使用它们。

<iframe> 优点：

帮助处理缓慢的第三方内容，例如徽章和广告
安全沙箱
并行下载脚本
<iframe> 缺点：

即使空白也很昂贵
阻止页面加载
非语义

10) 避免`404`错误

HTTP请求非常昂贵，因此完全不需要发出HTTP请求并获得无用的响应（即404 Not Found），这会减慢用户体验，而没有任何好处。

一些站点上有有用的404s“您是不是X吗？”，这对用户体验很有用，但也浪费了服务器资源（如数据库等）。特别糟糕的是，当指向外部JavaScript的链接错误并且结果为404时。首先，此下载将阻止并行下载。接下来，浏览器可能会尝试解析404响应主体，就好像它是JavaScript代码一样，试图在其中找到可用的内容。