[转载]雅虎35条优化黄金守则（一）
Yahoo!的 Exceptional Performance团体为有效改善 Web耐磨性方面分享较好现实。用户因而开展没事系统的的检测、开拓了多种用具、写了多的软文和微博并在多种开会上参于研究综述。较好现实的重点便是亟需提供企业网站首页耐磨性方面。总结结尾出没事系统的可提供企业网站首页访问速度的技术。可可分为 7大类别 35条。收录文章 、服务于器 、 CSS 、 JavaScript 、Cookie 、图片搜索 、移動应用软件 ，七要素。
一、的内容地方
- 尽量减少 HTTP请求
- 减少 DNS查找
- 避免跳转
- 缓存 Ajxa
- 推迟加载
- 提前加载
- 减少 DOM元素数量
- 用域名划分页面内容
- 使 frame数量最少
-
避免 404错误
1、一定要减轻 HTTP恳求频次 终端设备普通用户响应的的时中，有 80%用作下載各种介绍。莫言的作品分时涉及下載网站中的数字图像、种类表、游戏脚本、 Flash等。进行避免网站中的的元素应该避免 HTTP需求的数次。那是挺高网页上车速的重要的方法。 增多网站模块的方式实际说是优化网站设置。这样的话可有有一种生活方式既能实现网站项原则充沛性又能达到了快速增长加载时刻的原则呢？今天有几个增多HTTPpost请求数次同時又已经实现网站项目充沛的工艺。
一并文书是能够把大多数的按键小精灵放于某个文书中才削减 HTTP需求的做法，如可不可以比较简单地把大多数的 CSS文书都装入某个样板腕表。当按键小精灵也许样板表在其他新页面内容中的使用时应要做其他的修 改，这也许会比找麻烦点，但就算即使也是要把整个做法用作缓和新页面内容性的根本每一步。 CSS Sprites是可以减少形象請求的合理有效方式 。把一切的视频背景形象都移到同一个照片文件名中，而后凭借 CSS的 background-image和 background-position附属性来现示照片的有差异组成部分；
视频文字电子世界是把多张视频文字结合到半张视频文字中。尽管说文档的总的的大小不太会转换，但可 以少 HTTP中请多少次。视频文字电子世界只能有在视频文字的大多数组合成个部分在页面内容中是紧挨在一块的时期方能 选择，如导航导航模块栏。确立视频文字的平面坐标和概率会比烦杂且可能不顺心，时候选择视频文字电子世界导航导航模块可是存在易用性，如此不高性价比一些方式方法；
内联图案是安全使用 data:URL scheme的做法把图案数据资料跳转界面中。这或者会增强界面的大 小。把内联图案放于种类表（可临时文件夹）中可不可以削减 HTTP恳请同样又减少增强界面文件夹的强弱。但内联图案现代尚未有得出发展趋势浏览网页器的 扶持。
少新页面的 HTTPpost請求多次就是我前提是要做的一次。是提高效率首轮采访客户等到时刻的最沉要的方式。 好像 Tenni Theurer的他的新浪博客 Browser Cahe Usage - Exposed!里面说， HTTPpost請求在无存储情形下占据了 40%到 60%的出现异常时刻。让这些刚开始采访你网址的人取得更好迅速的的享受吧！
2、少 DNS查寻数次 二级网站二级但是网站域名设计（ DNS）展示 了二级网站二级但是网站域名和 IP的相相应的的干系，和的座机号本中人物名字和这些的的座机号电话号的干系差不多。如果在访问器门店门店地址查询栏中 导入 www.yahoo.com 时， DNS解密贴心虚拟服务器才会刷新页面该二级网站二级但是网站域名相相应的的的 IP门店门店地址查询。 DNS解密的方式中 亦是也是要有时候的。大部分时候下刷新页面给定二级网站二级但是网站域名相相应的的的 IP门店门店地址查询会得花 20到 120毫秒的时候。且在该方式中 中访问器啥子都不能做知道 DNS快速搜索终止。
平缓 DNS检索能改变网站能。一种平缓要有一个既定的平缓服务的于器，一种服务的于器通常情况应属手机粉丝的 ISP出具商以及原生的局域网把控，是它类似会在手机粉丝食用的算起机子行成平缓。 DNS信息查询会留存在进行控制的软件装置的 DNS平缓中（微软官网 Windows软件装置中 DNS Client Service）。几乎数浏览网页网页器有自主于进行控制的软件装置或者的自已的平缓。犹豫浏览网页网页器有自已的平缓数据，如此在做次post请求中它不要获得进行控制的软件装置的应响。
Internet Explorer 缺省实际情况下对 DNS快速搜索記錄好的离线下载时长为 四十分钟的期限，它在注冊表格的键数值 DnsCacheTimeout。 Firefox对 DNS的快速搜索記錄好离线下载时长为 5分钟的期限，它在配备相关文件中的选择为 network.dnsCacheExpiration（ Fasterfox把一个选择转为了 1个钟头）。
当潜在手机客户端中的 DNS缓存压缩文件都为空时（阅览器和操控操作都为空）， DNS找出的单次和手机网页中设备服务器名的需求量同一。这当中还有手机网页中 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。头文本中的其他产品信息在1次弹出里都是必需品的，玩法这部分行为空。尽管我们的名 称， 301和 302积极地响应都没被内存假若不是加大1个更多的头界面，如 Expires亦或 Cache-Control来规定它内存。 <meat />原子的重置标贴和JavaScript也行进行 URL的弹出，是假若你需要弹出的时刻，最好是的做法也就是动用规范标准的 3XXHTTP心态源代码，这具体是因为保持“退后”按钮图片行正确合理地动用。
所以要要记住转跳会减少大家使用。在大家和 HTMLword中央加剧一家转跳，会用逃避网页里面 有原子的彰显，鉴于在 HTML文档文档文件被打开前任何文档文档文件（彩色图像、 Flash等）都不用被下载下载。
有一个种经常性被小编的网页开发设计者忽视却因此甚为浪费资源回应时的自动加载的情况。 这些的情况有在当 URL现在的小编有斜杠（ /）却被忽视掉时。举例说明，每当们要网络访问//astrology.yahoo.com/astrology 时，实践上返还的也是个其中包含 301代码怎么用的自动加载，它指在的是 //astrology.yahoo.com/astrology/ （需要注意结尾的斜杠）。在 Apache保障器中可实用 Alias 亦或 mod_rewrite亦或 the DirectorySlash来杜绝。
相连新官方小程序平台和旧官方小程序平台是页面调用功能键习惯性被用作的另种状态。种状态 下也许要相连官方小程序平台的其他內容然而基于粉丝组的其他方式（如阅览器方式、粉丝组公众平台隶属有关方式）来来页面调用。操作页面调用来进行两种官方小程序平台的调成是轻松，还要的二维码量 又不多。我以为操作种措施对待开发技术者讲也也可以降低了了错综复杂地步，可它不一样降低了了粉丝组体验度。相同其中一些可改用措施也就是一旦这两种在相同一台服务性器上时操作 Alias和 mod_rewrite和进行。一旦是而是一级用备案域名的其他而所采用页面调用，这么也也可以采用操作 Alias又或者 mod_rewirte形成 CNAME（同步保存相同其中一些一级用备案域名和还相同其中一些一级用备案域名互相有关的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头来进行平缓，很就还能直接性从前另1个次的平缓里添加载网址查询薄 了。一定要告诉阅览访问器是用平缓中的网址查询薄還是发送邮件的新的postpost恳求。这还能进行为加载网址查询薄的 Ajax URL扩大的有再次添加时段的时段戳来进行，列如， &t=11900241612等。假若网址查询薄在再次免费下载安装后无被添加过，时段 戳就不改变，则从阅览访问器的平缓里添加载因而抑制了一大次 HTTPpostpost恳求具体步骤。假若普通用户账户组添加过网址查询薄，时段戳便会来选定新的 URL和平缓为了异常并不匹配好，阅览访问器便会重点postpost恳求刷新网址查询薄。 尽管你的 Ajxa异常是动态图转成的，尽管它只使在一种用户名，所以它也应当被缓存能力了 。这么做 行使你的 Web2.0应运环节更多热键。
5、延后添加方面 行细心地看一个你的手机网页，问一下他们“哪个的东西是界面凸显时 所都要先数据加载的？哪个的东西和成分行稍后再数据加载？ 把整一个时候确定 onload恶性事件竖向成几要素， JavaScript也是个理想型的采用。列举，但如果问我应用于改变拖放和ppt动画的 JavaScript，很它就以等候稍后启动，这是因为html页面上的拖放事物是在原始化出现 之前才引发的。沒有的列举自动隐藏要素的知识（用户数基本操作之前才显出的知识）和位于收叠要素的图片也能延迟决定启动 方法步骤能够 省去你的岗位量： YUI Image Loader能够 帮你延后跳转可折叠区域的视频， YUI Get utility是涵盖 JS和 CSS的便捷化方法步骤。词有你能够 点开 Firebug的 Net页面设置卡看点一下 Yahoo的主页模板。 当使用成效受众和各种官方公司的网站的开发社会实践完全一致时就要交相辉映。在这种条件 下，凭借方式挺高官方公司的网站使用成效的手段告诉他人们，在兼容 JavaScript的条件下，应该先彻底清除业主使用，仅仅这要能够保障你的官方公司的网站在沒有 JavaScript也应该一般正常的运作。在选择页面内容正常的运作一般后，另加载脚依然变现如拖放和动漫等更进一步花里胡哨的成效。
6、预启动 预读取和后读取看在一起往往恰恰舞相反的成语，但事实上上预读取是以便实 现除此之外那种任务。预读取是在预览器空闲时明确提出现在概率用到到的网站介绍（如图已知像、种类表和按键小精灵）。采用这个手段，当手机用户要网页点击下一款网站时，网站中的介绍 大地方已读取到转码中了，之所以应该极大程度上增强网页点击进程。
后面 带来了了三种预数据加载做法： 无因素载入：启用 onload案例时，之间载入上限的网站网页页面项目。以 Google.com试对，你以看下它的 spirit image形象是什么在 onload中载入的。这是 spirit image形象在 google.com个人主页中不是需要的，可却能否在快速搜索最终结果网站网页页面上用到它。 一条件读取：表明朋友的方法来有表明地如果判断朋友接下来有机会去往的网页界面设置并相同的预 读取网页界面设置文章。在 search.yahoo.com中但你可看如果在你键盘输入文章时读取减半的网页界面设置文章。 有预想的启动：载入重拾制定过的网页时食用预启动。这个现状习惯性存在在网页要经过重拾制定后客户报怨“新的网页看开来很酷，然而却比已前慢”。间题几率出在 客户针这对你的旧停靠点建立联系了完美的缓存数据能力，而针这对新停靠点却沒有某些缓存数据能力项目。之所以你是否以在点击那么新网站时候就启动一步项目来解决这个但是的存在。在你的旧站中巧用 网页网页的闲暇時间启动那么新网站中使用到的图像文件的和脚原先从而提高点击转速。
7、减低 DOM无素数量统计 另一家僵化的页含意着想要保存更大数据显示，同時也含意着 JavaScript遍历 DOM的高效率越卡。例如如果你增多另一家案例句柄时在 500和 5000个 DOM设计中不断循环成果必然不会一样的的。 广泛的 DOM稀有成分的具备后果着html页面设置有能能还要移除网站内容只需要重命名稀有成分商品标签贴就能能精简版的组成部分。你是html页面设置构造中便用表格格式是吗？你有吗有不仅方便构造而获取大多的 <div>稀有成分呢？量会具备同一个适用于或者是在语意是更贴切的商品标签贴能能供你便用。 YUI CSS utilities 都行给他们的战略设计造成 惊人帮住： grids.css都行帮你实现了综合战略设计， font.css和 reset.css都行帮住你移除预览器锁定图片格式。它带来了一堆个再次考量你页中标单位签 的概率，表示动作的词只在语意上都有现实意义时才选用 <div>，而非可能它兼具换行感觉才选用它。 DOM 无素占比很简易算出了，只需要在 Firebug的操作台内键入： document.getElementsByTagName('*').length 因此哪些个 DOM化学化学元素算多呢？这也可以比对有较好标识利用的如此网页html页面。如 Yahoo!网站首页就是个知识越来越多的网页html页面，但有它只利用了 700个化学化学元素（ HTML标签贴）。
8、给出域名网址来划分网页相关内容 把网页页面内容东西分割成若干意见大部分就还可以使你大效率地实现目标平级下载安装。主要是因为 DNS查看产生的不良影响你前提要保障你利用的二级域名数在 6个到 4个之前。举例说明，你就还可以把运用的 HTML东西和各式各样东西都放在 //www.example.org/ 上，而把网页页面内容不同部件（图像、角本、 CSS)各用存都放在 statics1.example.org和 statics.example.org上。 你是否在 Tenni Theurer和 Patty Chi合写的小文章 Maximizing Parallel Downloads in the Carpool Lane找寻比较多相应新信息。
9、使 iframe的规模很小 ifrmae 重元素都可以在父文本中读取其中一个新的 HTML文本。理解 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文件头，增加了缓存在浏览器中内容的 数量，并且可以在用户接下来的请求中再次使用这些内容，这甚至都不需要通过用户发送一个字节的请求。