[转载]雅虎35条优化黄金守则（一）
Yahoo!的 Exceptional Performance微商团队为改变 Web能造成 最适社会实训。孩子们爱品生新风系统完成一堆款型的进行实验、联合开发了各方面器具、写了丰富的论文和最新文章并在各方面例会上进入探析。最适社会实训的重点即是目的提生网址能。分析出一堆款型也都可以提生网址网络速度的工艺。也都可以分类 7小类 35条。涉及网站内容 、产品器 、 CSS 、 JavaScript 、Cookie 、圖片 、移動app ，七区域。
一、相关内容的部分
- 尽量减少 HTTP请求
- 减少 DNS查找
- 避免跳转
- 缓存 Ajxa
- 推迟加载
- 提前加载
- 减少 DOM元素数量
- 用域名划分页面内容
- 使 frame数量最少
-
避免 404错误
1、刻意减低 HTTP表单提交单次 华为设备玩家为了响应的时期中，有 80%用在下载安装使用相关内部。这本分时期涉及到下载安装使用html界面中的图案、形状表、按键小精灵、 Flash等。凭借抑制html界面中的重元素不错抑制 HTTP申请的时间。这只是增强网页内容强度的关键所在方法流程。 增多选项卡设置设置引擎的步骤但其实那就是简易选项卡设置设置装修设计。那麼有木有有另外一种步骤既能确保选项卡设置设置东西的充裕性又能到达加速推进反映事件的的目的呢？下面有两条增多HTTP恳求数次也又应该确保选项卡设置设置东西充裕的技术性。
合为压缩zip文件名是顺利通过把其他的按键小精灵在的压缩zip文件名里减掉 HTTP提起的形式，如能够 简单易行地把其他的 CSS压缩zip文件名都复制到的式样表里。当按键小精灵还式样表在不一html页面设置中用需要要做不一的修 改，这几率会相比较问题点，但纵使是这样也是要把这一形式是改进html页面设置特点的比较重要步骤。 CSS Sprites是降低影像post请求的有郊形式。把任何的历史背景影像都都集中在一家全部画面文件目录中，接着确认 CSS的 background-image和 background-position抗性来显示信息全部画面的不一样的部位；
视频地形图是把多张视频构建到两张视频中。即便是zip文件的综合性程度不轻松改变了，并且可 以限制 HTTP需求多少次。视频地形图仅仅在视频的各种构成地方在网站中是紧挨在我们一起的情况下就要 用到，如凯立德导航模块栏。肯定视频的座标和可以会是比较枯燥且轻松参数错误，直接用到视频地形图凯立德导航模块就说享有精确性，由此不推送一种措施；
内联图面是在使用 data:URL scheme的方法步骤把图面数据统计加载失败选项卡中。这将会扩大选项卡的大 小。把内联图面放置于种类表（可临时文件目录）中能减低 HTTP提起时又以免扩大选项卡文件目录的的大小。然而内联图面现再不能赢得流行的手机搜狗浏览器的 可以。
以减少新页面的 HTTP表单提交频次就是我一开始要做的步骤。她是改造第一時间网页访问浏览朋友等着時间的最沉要的技巧。 仿佛 Tenni Theurer的他的博客文章 Browser Cahe Usage - Exposed!中说， HTTP表单提交在无内存情况发生下占居了 40%到 60%的出现异常時间。让哪些地方头回网页访问浏览你网 的人才能得到越来越最快的休验吧！
2、减小 DNS找寻单次 阿里云网站域名服务器分析系統（ DNS）提供了了阿里云网站域名服务器分析和 IP的分别相互问题，就好比电销本中人物名字和其的电销电活的相互问题一样。你在搜索器地此栏中 键盘输入 www.yahoo.com 时， DNS分析服務器会跳到这点阿里云网站域名服务器分析分别的 IP地此。 DNS分析的的时候相同的也是还要日子的。一样前提下跳到给定阿里云网站域名服务器分析分别的 IP地此会消耗 20到 120毫秒的日子。同时在这点的时候中搜索器这些都没有做有一天 DNS找出结束以后。
清理平缓能力 DNS找寻也可以改变页性能指标。此种清理平缓能力应该同一个相关的清理平缓能力售后云主机，此种售后云主机通常情况下专属大家的 ISP提高商一些当地虚拟局域网把握，可是它相同会在大家运用的算机子有清理平缓能力。 DNS消息会保存在运作方法装置的 DNS清理平缓能力中（微软中国 Windows装置中 DNS Client Service）。几乎数看器有独立性于运作方法装置其他的本身的清理平缓能力。是因为看器有本身的清理平缓能力信息，因而在一场請求中它不要受运作方法装置的引响。
Internet Explorer 默认页实际情况下对 DNS找到见证的存储数据周期为 半1天左右，它在公司表格的键数值为 DnsCacheTimeout。 Firefox对 DNS的找到见证存储数据周期为 5分钟左右，它在搭配信息中的应用设置为 network.dnsCacheExpiration（ Fasterfox把此应用设置设成了 11天）。
当合作方端中的 DNS清理缓存都为空时（手机苹果浏览器和使用整体都为空）， DNS查看的频率和htmlhtml页面中服务器主机系统箱名的时长同等。这里面还包括htmlhtml页面中 URL、圖片、角本材料、材质表、Flash群体等一般包括的服务器主机系统箱名。减小服务器主机系统箱名的时长能够 减小DNS查看频率。
下降台式主机名的数还不错下降网站中串行在线资源下载下载的数。下降 DNS查阅时长不错省去卡死准确时长，但下降串行在线资源下载下载却会上升卡死准确时长。我的考核评价要求是 把这类网站中的的内容拼接成不低于几地方但不不超四地方。本身但是便是在下降 DNS查阅时长和提高较高度串行在线资源下载下载两者中中的权衡利弊了。
3、尽量不要转跳 跳出是使用的 301和 302码确保的。接着是一种个崩溃码为 301的 HTTP头： HTTP/1.1 301 Moved Permanently Location: //example.com/newuri Content-Type: text/html 查询器会把玩家指在到 Location手规定的 URL。头文件资料中的因此信息资源在一遍弹出过程都是也要的，资源这部分不错为空。不顾它们的名 称， 301和 302崩溃都不会轻易被离线下载设置要不是新增某个减半的头选择项，如 Expires某些 Cache-Control来规定它离线下载设置。 <meat />要素的突破标鉴和JavaScript也不错推动 URL的弹出，只是只要你需求要弹出的期间，最佳的形式就是说在适用规格的 3XXHTTP工作状态二维码，这其主要是为了更好地确定“倒退”按键不错精准地在适用。
所以要注意弹出网站会削减朋友访客体验研究。在朋友和 HTML文本文档中间的提升有一个弹出网站，会拖期网站中均有原子的展示，而是在 HTMLzip系统文件被读取前任何zip系统文件（画面、 Flash等）都不可能被下载安装。
下有种老是被淘宝网页的开发者改变却通常相当资源浪费没有响应速度间隔的自动转跳的问题。 这一的问题产生在当 URL终归是有斜杠（ /）却被改变掉时。随后，如果你们要造访//astrology.yahoo.com/astrology 时，现实中上重返的不是个分为 301源代码的自动转跳，它朝着的是 //astrology.yahoo.com/astrology/ （还要注意开头的斜杠）。在 Apache功能器中应该运行 Alias 以及 mod_rewrite以及 the DirectorySlash来杜绝。
对接新网页和旧网页是调用功能性定期被用上的另个种情況下。这样情況下 下往往会要对接网页的不一样的内容后来按照访客的不一样型号（如网页极速浏览器型号、访客帐户分属型号）来依据调用。操作调用来控制两网页的开启10分简洁明了，须得的代码是什么量 又不多。即使操作这样的办法这对设计规划者比喻就能够减少简化度，只是它相同减少访客休验。1个可用于的办法也就是比如二者在一模一样台安全服务器主机上时操作 Alias和 mod_rewrite和控制。比如是会因为备案域名解析解析的不一样而利用调用，那就能够依据操作 Alias一些 mod_rewirte创建 CNAME（保管1个备案域名解析解析和另一1个备案域名解析解析期间问题的DNS登记）来用于。
4、可缓存设置的 AJAX Ajax 长时间间隔被说出的同一款 害处可是是因为其从管理后台的物理服务器互传图片信息 的异步性谓之雇主数造成 的调查问卷的就算性。但有，在的使用 Ajax并不可能衡量雇主数不可能在等等异步的 JavaScript和 XML出现异常上消耗时间间隔。在越来越多应用领域中，雇主数是否需要需要等等出现异常衡量于 Ajax该如何来在的使用。列如 ，在同一款 对于 Web的 Email雇主端中，雇主数要等等 Ajax跳到按照你们因素的电邮查寻结果显示。记得住些许，“异步”并不味道着“就算”，这 太重要。
为了能够加快效果，优化方案 Ajax运行是太重要的。加快 Ajxa效果的处理中最沉要的的方法那就是使运行还具有可存储性，按照的座谈会能否察看 Add an Expires or a Cache-Control Header。 各种的好几条原则也同个适宜于Ajax： Gizp 压解文件目录 削减 DNS快速搜索三次 精减 JavaScript 避免出现网页跳转 选配 ETags
我要们你看个举例说明：个 Web2.0的 Email雇主端会利用 Ajax来主动完成任务对手机客户联系地止薄的下载百度链接。若是手机客户在以前利用过 Email web选用程序流程后沒有对联系地止薄作所以的合并，况且 Ajax不能加载完成 Expire还有 Cacke-Control头来进行存储，那些就也会会直接从一次的存储中显示联系地止薄 了。肯定报备查询器是利用存储中的联系地止薄还是要发送邮件个新的ajax重定向。这也会完成为显示联系地止薄的 Ajax URL增大个富含以前我们的事件的的事件戳来进行，举例说明， &t=11900241612等。若是联系地止薄在以前下载百度链接后沒有被我们过，的事件 戳就变了，则从查询器的存储中放载因此减低没事次 HTTPajax重定向过程中。若是手机客户合并过联系地止薄，的事件戳可能会用做肯定新的 URL和存储不能加载并不配对，查询器可能会最重要ajax重定向不断更新联系地止薄。 纵使你的 Ajxa出错是动态化转为的，就算它只不适用做一名用户账户，那些它也会被转码变得。只要做 还可以使你的 Web2.0运用软件进一步热键。
5、拖延启动玩法 可不能能以认真仔细地看看你的网站对话框，看看自行“哪类方式是对话框显示时 所须要关键在于加载失败的？哪类方式和构成可不能能稍后再加上载失败？ 把大部件的过程 以 onload新闻事件分缝成两个部件， JavaScript是一个个不错的确定。列如，比如你需要使用于构建拖放和动漫的 JavaScript，那么好它就以停留稍后添加，正因为窗口上的拖放成分是在默认值化展示 时候才会发生的。其他一些的列如存在部件的资源（手机用户实际操作时候才凸显的资源）和出于拆叠部件的画面也需要推延添加 最简单的方法可能合理节省你的工作上量： YUI Image Loader可能帮你延后添加拆卸那部分的高清图片， YUI Get utility是包括 JS和 CSS的智能最简单的方法。譬如能能开 Firebug的 Net按钮卡看一点 Yahoo的百度主页。 当性阶段目标和其它的公司站点发掘保持共同时还会见仁见智。这些现象 下，完成执行程序不断提高公司站点性的方案跟人们，在鼓励 JavaScript的现象下，能否先消除普通用户游戏体验，不这要确保你的公司站点在没了 JavaScript也能否顺利人运动。在选定网页页面运动顺利人后，加个载脚原来保持如拖放和动漫等更色彩鲜艳的成果。
6、预载入 预弹出失败和后弹出失败看起來仿佛正好不同，但具体情况上预弹出失败是为了更好地实 现额外其中一种要求。预弹出失败是在打开网页器空闲时ajax请求20年后很有可能会用到到的选项卡主要游戏内容（如图是像、形状表和角本）。便用一种方式 ，当朋友要互访下这个选项卡时，选项卡中的主要游戏内容 大地方现已弹出失败到存储中了，由于可能极大的提升互访时速。
下保证了那种预数据加载做法： 无具体条件添加：勾起 onload新闻时，进行添加更多的首页的内容。以 Google.com加以分析，你是否以我要看看吧它的 spirit image彩色图相是咋样在 onload中添加的。这样 spirit image彩色图相在 google.com登录首页中是是需要的，可是却能能在查找后果首页当中用到它。 有一件数据启动：按照其访客名的方法来有按照其地判段访客名现在可能去往的手机网页并相对应的预 数据启动手机网页的方面。在 search.yahoo.com中你是否以见到是怎么在你搜索的方面时数据启动减半的手机网页的方面。 有预想的刷新：载入直接制作的概念过的首页时适用预刷新。此种状况有时候出来在首页经历过直接制作的概念后手机观众数落“新的首页看起床很酷，虽然却比很久以前慢”。事情有机会出在 手机观众这对你的旧公交站点形成了详细完整的清理缓存设置，而这对新公交站点却找不到某些清理缓存设置游戏东西。如此你以在网站訪問旧站开始之前就刷新一部电影游戏东西来防止产生此种最终结果的出来。在你的旧站中巧用 手机浏览器器的空闲用时刷新旧站当中用到的图象的和脚原本增加网站訪問时速。
7、抑制 DOM设计个数 其中个繁多的手机网页代表着要保存更好地数据报告，时也代表着 JavaScript遍历 DOM的转化率更慢。词有当我增高其中个活动句柄时在 500和 5000个 DOM要素中循环法效果好认可不都一样的。 过多的 DOM设计原素的的来源于含意着手机网页含有可能不同移除方面只需要代替设计原素标示就可能简洁的要素。你到手机网页构造中操作数据表格啥时候？你有木有有仅仅只是为构造而接入非常多的 <div>设计原素呢？说不定会的来源于1个适用于可能在语意是更贴切的标示可能供你操作。 YUI CSS utilities 就还能够对你的布置有不小有助于： grids.css就还能够帮你体现整体化布置， font.css和 reset.css就还能够有助于你移除挑选器锁定版式。它提供数据一堆个立即思考你网页招标签 的好机会，例如只能是在语意有着意义所在时才选用的 <div>，而也不是因它有换行体验才选用的它。 DOM 无素用量很会计算出起来，只需要在 Firebug的管控台内录入： document.getElementsByTagName('*').length 那多少个个 DOM成分可算是多呢？这就能够对比有有效标示在用的类似于选项卡。举个例子来说 Yahoo!百度主页也是个方面十分多的选项卡，只不过它只在用了 700个成分（ HTML标示）。
8、不同注册域名分类新页面主要内容 把html首页內容划定成几环节还能使你比较大最大地体现垂直下载软件。犹豫 DNS找出获得的损害你1要抓实你采用的网站域名规模在 二个到 4个之中。比如，你还能把应用的 HTML內容和技术性內容在 //www.example.org/ 上，而把html首页繁多器件（图片搜索、脚本制作、 CSS)区别存在 statics1.example.org和 statics.example.org上。 玩家能够在 Tenni Theurer和 Patty Chi合写的好的文章 Maximizing Parallel Downloads in the Carpool Lane找到了太多重要性数据。
9、使 iframe的数量统计较大 ifrmae 营养元素就能够在父word中放入一两个新的 HTMLword。询问 iframe的操作理随后才可以进一步有效率地在使用它，这一项点非常重要要。
<iframe>独到之处： 搞定读取极慢的三方协议书东西长为标和广告词等的读取故障 Security sandbox 并行计算初始化按键小精灵 <iframe>的有缺陷： 立即方式为空，加载图片也可以用时 会制止网站页面载入 没了语意
10、不必诞生 404报错 HTTP 要求精力耗电量是非常大的的，因为操作 HTTP要求来获取其中一个无做用的反应（比如说 404无遇到界面）是可以无必须的，它只是会减小消费者用户体验度而不太会有一个点坏处。 很站名把 404原因回应界面化为“你是不能是要找 ***”，这似乎原因解决了使用者休验可是一致也会的浪费服务性器教育资源（如信息库等）。最槽糕的 现状属于向外表 JavaScript的链接转换存在原因并回 404二维码。第一个，类似这些打开会伤害并行计算打开；再者观看器会把命令在回的404回应内部中找见已经好用的部位看作 JavaScript二维码来进行。 二、服务管理器的部分
- 使用内容分发网络
- 为文件头指定Expires或Cache-Control
- Gzip压缩文件内容
- 配置ETag
- 尽早刷新输出缓冲
- 使用GET来完成AJAX请求
-
避免空的图像来源
11、使用内容分发网络
用户与你网站服务器的接近程度会影响响应时间的长短。把你的网站内容分散到多个、处于不同地域位置的服务器上可以加快下载速度。但是首先我们应该做些什么呢？
按地域布置网站内容的第一步并不是要尝试重新架构你的网站让他们在分发服务器上正常运行。根据应用的需求来改变网站结构，这可能会包括一些比较复杂的任 务，如在服务器间同步Session状态和合并数据库更新等。要想缩短用户和内容服务器的距离，这些架构步骤可能是不可避免的。
要记住，在终端用户的响应时间中有80%到90%的响应时间用于下载图像、样式表、脚本、Flash等页面内容。这就是网站性能黄金守则。和重新设计你的 应用程序架构这样比较困难的任务相比，首先来分布静态内容会更好一点。这不仅会缩短响应时间，而且对于内容分发网络来说它更容易实现。
内容分发网络（Content Delivery Network，CDN）是由一系列分散到各个不同地理位置上的Web服务器组成的，它提高了网站内容的传输速度。用于向用户传输内容的服务器主要是根据 和用户在网络上的靠近程度来指定的。例如，拥有最少网络跳数（network hops）和响应速度最快的服务器会被选定。
一些大型的网络公司拥有自己的CDN，但是使用像Akamai Technologies，Mirror Image Internet，或者Limelight Networks这样的CDN服务成本却非常高。对于刚刚起步的企业和个人网站来说，可能没有使用CDN的成本预算，但是随着目标用户群的不断扩大和更加 全球化，CDN就是实现快速响应所必需的了。以Yahoo来说，他们转移到CDN上的网站程序静态内容节省了终端用户20%以上的响应时间。使用CDN是一个只需要相对简单地修改代码实现显著改善网站访问速度的方法。
12、为文件头指定Expires或Cache-Control
这条守则包括两方面的内容：
对于静态内容：设置文件头过期时间Expires的值为“Never expire”（永不过期）
对于动态内容：使用恰当的Cache-Control文件头来帮助浏览器进行有条件的请求
网页内容设计现在越来越丰富，这就意味着页面中要包含更多的脚本、样式表、图片和Flash。第一次访问你页面的用户就意味着进行多次的HTTP请求，但 是通过使用Expires文件头就可以使这样内容具有缓存性。它避免了接下来的页面访问中不必要的HTTP请求。Expires文件头经常用于图像文件， 但是应该在所有的内容都使用他，包括脚本、样式表和Flash等。
浏览器（和代理）使用缓存来减少HTTP请求的大小和次数以加快页面访问速度。Web服务器在HTTP响应中使用Expires文件头来告诉客户端内容需 要缓存多长时间。下面这个例子是一个较长时间的Expires文件头，它告诉浏览器这个响应直到2010年4月15日才过期。
Expires: Thu, 15 Apr 2010 20:00:00 GMT
如果你使用的是Apache服务器，可以使用ExpiresDefault来设定相对当前日期的过期时间。下面这个例子是使用ExpiresDefault来设定请求时间后10年过期的文件头：
ExpiresDefault "access plus 10 years"
要切记，如果使用了Expires文件头，当页面内容改变时就必须改变内容的文件名。依Yahoo!来说我们经常使用这样的步骤：在内容的文件名中加上版 本号，如yahoo_2.0.6.js。
使用Expires文件头只有会在用户已经访问过你的网站后才会起作用。当用户首次访问你的网站时这对减少HTTP请求次数来说是无效的，因为浏览器的缓 存是空的。因此这种方法对于你网站性能的改进情况要依据他们“预缓存”存在时对你页面的点击频率（“预缓存”中已经包含了页面中的所有内容）。 Yahoo!建立了一套测量方法，我们发现所有的页面浏览量中有75~85%都有“预缓存”。通过使用Expires文件头，增加了缓存在浏览器中内容的 数量，并且可以在用户接下来的请求中再次使用这些内容，这甚至都不需要通过用户发送一个字节的请求。