雅虎性能优化规则

/**
 * Yahoo网站优化29条规则：(https://developer.yahoo.com/performance/rules.html)
 *      1. Minimize HTTP Requests–尽可能减少HTTP请求次数.
 *          a.CSS Sprites
 *          b.Image maps 图像映射
 *              图像映射允许作者指定图像或对象的区域，并为每个区域分配指定动作（如检索文档、运行程序等），当用户**该区域，执行该动作
 *              两种类型的图像映射：
 *                  I.客户端  当用户鼠标**客户端指定区域,会触发该指定区域的链接，并跳转到指定链接
 *                  II.服务器端 当用户鼠标**服务器端指定区域，点击的像素坐标元素的href属性被发送到服务器端指定的代理，服务器端代理解释坐标并执行一些操作
 *              客户端图像映射比服务器端图像映射更受欢迎至少有两个原因：
 *                  使用非图形用户代理进行浏览的用户可以访问客户端图像映射，并且可以立即提供有关指针是否位于活动区域上的反馈。 
 *          example:
 *           ☆  客户端图像映射
 *              HTML <map> 标签
 *              使用场景：点击地图的不同省份分别跳到不同的连接
 *              定义：定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。
 *              用法：
 *                  <img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
 *                  <map name="planetmap" id="planetmap">
 *                      <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
 *                      <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
 *                      <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
 *                  </map>
 *              注释：
 *                  1).<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），
 *                      所以我们应同时向 <map> 添加 id 和 name 属性。
 *                  2).area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域
 *              <area>标签：
 *                  必须属性：
 *                      alt   定义此区域的替换文本
 *                  可选属性：
 *                      shape   定义区域的形状。   default|rect|circ|poly
 *                      coords 定义可点击区域（对鼠标敏感的区域）的坐标。
 *                          coords 属性坐标含义取决于shape属性中决定的区域形状(矩形、圆形、多边形)
 *                          每种形状的适当值：
 *                              I.圆形：shape="circ"  coords="x,y,r"
 *                                 注意： 
 *                                   ·x,y定义了圆心的位置,r是以像素为单位的圆形半径。
 *                              II.多边形：shape="poly"  coords="x1,y1,x2,y2,x3,y3,..."
 *                                 注意： 
 *                                   ·每一对'x,y'坐标都定义了多边形一个顶点的坐标。
 *                                   ·多边形会自动封闭，所以不需要在结尾重复第一个坐标来闭合整个区域。
 *                              III.矩形: shape="rect"，coords="x1,y1,x2,y2"  
 *                                 注意： 
 *                                   ·每一对'x,y'坐标是矩形一个角的顶点坐标，另一对坐标是对角的坐标。
 *                                   ·定义矩形实际上是定义带有四个顶点的多边形的一种简化方法。
 *                           注释：
 *                              如果某个 area 标签中的坐标和其他区域发生了重叠，会优先采用最先出现的 area 标签。
 *                              浏览器会忽略超过图像边界范围之外的坐标            
 *         
 *                      href   定义此区域的目标 URL。
 *                          链接的 URL。可能的值：
 *                              绝对 URL - 指向另一个站点（比如 href="http://www.example.com/sun.htm"）
 *                              相对 URL - 指向站点内的某个文件（href="sun.htm"）
 *                              锚 URL - 指向页面中的锚（href="#sun"）
 *                      nohref   从图像映射排除某个区域。nohref="nohref" 
 *                      target   规定在何处打开 href 属性指定的目标 URL。  _blank|_parent|_self|_top
 *                          _blank  在新窗口中打开被链接文档。
 *                          _self 默认。在相同的框架中打开被链接文档。
 *                          _parent 在父框架集中打开被链接文档。
 *                          _top 在整个窗口中打开被链接文档。
 *                          framename 在指定的框架中打开被链接文档。
 *             ☆ 服务器端图像映射
 *                  在图像映射对于客户端图像映射来说太复杂的情况下，服务器端图像映射可能是有趣的。
 *                      I.只能为img和input元素定义服务器端图像映射
 *                      II.当是img元素时，img必须在元素内，并且自己必须设置一个boolean值的属性 ismap.
 *                      III.当是input元素时，它的type必须是'image'
 *                  注意：当用户通过单击图像**链接时，屏幕坐标将直接发送到文档所在的服务器
 *                  example:
 *                      <A href="http://www.acme.com/cgi-bin/competition">
 *                          <IMG src ="game.gif" ismap alt ="target"> 
 *                      </A>
 *                      如果用户在位置x = 10，y = 27处单击，则派生的URI是"http://www.acme.com/cgi-bin/competition?10,27"
 *      2. Use a Content Delivery Network–使用CDN（内容分发网络）.
 *           解决用户与web服务器的距离对响应时间的影响,CDN是分布在多个位置的Web服务器的集合,就近访问。
 *      3. Add an Expires or a Cache-Control Header–为文件头指定Expires或Cache-Control，使内容具有缓存性
 *           Expires 响应过期时间   Expires：Thu，15 Apr  2019  20：00：00  GMT;   在这个时间之内相同的请求使用缓存，这个时间之外使用http请求。
 *                 注意：Expires 使用一个固定的时间，要求服务器与客户端的时钟保持严格的同步，到期后，服务器还得重新设定新的时间。
 *           Cache-Control  通用消息头  Cathe-Control：max-age=315360000
 *                 注意：使用max-age指定组件被缓存多久，从请求开始在max-age时间内浏览器使用缓存，之外的使用请求，这样就可以消除Expires的限制。
 *                 max-age缺陷：max-age=<seconds>
 *                      如果在max-age时间内，服务器文件有修改，这样用户就不能第一时间获取最新信息，因此可以通过修改请求文件名，但为了确保用户能获取组件最新版本，
 *                  需要在整个项目中修改组件的文件名。 
 *          区别：
 *              1.Cache-Control用于控制HTTP缓存
 *              2.Expires 表示存在时间，允许客户端在这个时间之前不去发请求，相当于max-age效果，如果同时存在，则被Cache-Control的max-age覆盖
 *      4. Gzip Components–使用gzip压缩内容.
 *          请求头：Accept-Encoding: gzip, deflate
 *          响应头：Content-Encoding: gzip
 *      5. Put StyleSheets at the Top–把CSS放到顶部.
 *          浏览器是逐步加载页面，当放在底部，会禁止在许多浏览器中逐步渲染，这些浏览器会阻止渲染，以避免在样式发生变化时重绘页面元素
 *      6. Put Scripts at the Bottom–把JS放到底部.
 *          放上面可能引发的问题： 
 *              1.DOM操作可能获取不到DOM元素。
 *              2.js报错页面不出来。
 *      7. Avoid CSS Expressions–避免使用CSS表达式.
 *          背景颜色设置为每小时交替: background-color：expression((new Date()).getHours()%2?"#B8D4FF":"#F08A00"）;
 *          问题：不仅在页面呈现和调整大小时评估，在页面滚动甚至鼠标悬停时也会评估，所以使用cssbiao'da
 *          解决方法：使用一次性表达式，如果必须在页面的整个生命周期中动态设置样式属性，则使用事件处理程序而不是css表达式
 *      8. Make JavaScript and CSS External–将CSS和JS放到外部文件中.
 *          问题：每次请求HTML文档时，都会下载文档中内联的js和css。这虽然减少了所需的HTTP请求数，但增加了HTML大小。
 *          优点：1.浏览器会缓存外部css和js文件。2.HTML文档大小减少，且不会增加HTTP请求数量。
 *          注意：雅虎建议首页用内联js和css，会导致更快的最终用户响应时间
 *               对于多个页面具有代表性的首页，可以在首页中内联js和css,但在页面加载完成后动态下载外部文件。后续页面将引用已存在的浏览器缓存的外部文件
 *      9. Reduce DNS Lookups–减少DNS查找次数.
 *          DNS通常需要20-120毫秒才能查找给定主机名的IP地址。在DNS查找完成之前，浏览器无法从此主机名下载任何内容
 *          注意：1.默认情况下，Internet Explorer将DNS查找缓存30分钟，如DnsCacheTimeout注册表设置所指定。 
 *                  Firefox缓存DNS查找1分钟，由network.dnsCacheExpiration配置设置控制。 （Fasterfox将此更改为1小时。）
 *               2.减少唯一主机名的数量有可能减少页面中发生的并行下载量。 避免DNS查找会缩短响应时间，但减少并行下载可能会缩短响应时间。 
 *                  我的准则是将这些组件分成至少两个但不超过四个主机名。 这导致在减少DNS查找和允许高度并行下载之间的良好折衷。
 *      10. Minify JavaScript and CSS–压缩CSS和JS.
 *      11. Avoid Redirects–避免重定向.
 *          301/302状态码
 *          注意：要记住的主要事情是重定向会降低用户体验。 在用户和HTML文档之间插入重定向会延迟页面中的所有内容，
 *              因为页面中的任何内容都无法呈现，并且在HTML文档到达之前不会开始下载任何组件。
 *          example：在URL中缺少尾部斜杠（/）时,会产生一个301重定向
 *      12. Remove Duplicate Scripts–删除重复的JS.
 *          重复的js会损害性能：1.生成浪费的HTTP请求2.浪费多次评估脚本时间（是否可缓存）
 *      13. Configure ETags–配置ETags.
 *          注意：
 *              1.可以更加精确地判断资源是否被修改，因为它不是一个时间值，而是对时间经过处理的一个长整型数值（当然具体算法我们目前还不得而知）
 *              2.浏览器发起新请求时需要包含 If-None-Match
 *      14. Make AJAX Cacheable–使AJAX可缓存.
 *                 缓存规则适用于ajax:
 *                    Gzip Components
 *                    Reduce DNS Lookups
 *                    Minify JavaScript
 *                    Avoid Redirects
 *                    Configure ETags
 *                      这可以通过向地址簿Ajax URL添加时间戳来实现，该时间戳指示用户上次修改地址簿的时间，例如，&t=1190241612。如果地址簿自上次下载后未被修改，则时间戳将相同，地址簿将从浏览器缓存中读取，从而消除额外的HTTP往返。
 *                 如果用户修改了地址簿，时间戳将确保新的URL与缓存的响应不匹配，浏览器将请求更新的地址簿条目。
 *      16. Use GET for AJAX Requests–使用GET来完成AJAX请求.
 *              在使用xmlhttprequest时：post---先发送请求头，然后发送数据
 *          只请求数据时，最好用get
 *      17. Post-load Components-延迟载入组件
 *          必须确保页面即使没有javascript也能正常工作。js进一步装饰
 *      18. Preload Components-预载入组件 
 *              预加载看起来可能与后加载相反，但实际上它有一个不同的目标。通过预加载组件，您可以利用浏览器空闲的时间，请求将来需要的组件（如图像、样式和脚本）。
 *          这样，当用户访问下一个页面时，您可以将大部分组件都保存在缓存中，并且您的页面将更快地为用户加载。 
 *      19. Reduce the Number of DOM Elements–减少DOM元素数量.
 *          复杂的页面意味着要下载更多的字节，它还意味着在JavaScript中访问DOM的速度较慢
 *          查看页面中DOM元素数量(document.getElementsByTagName('*').length)
 *      20. Reduce Cookie Size–减少Cookie的大小.
 *              HTTP cookie的使用有多种原因，例如身份验证和个性化。有关cookie的信息在Web服务器和浏览器之间的HTTP头中交换。
 *          保持尽可能小的cookie大小以最小化对用户响应时间的影响是很重要的。 
 *              规则：
 *                  1.消除不必要的cookie              
 *                  2.尽可能减小cookie的大小，以最大限度地减少对用户响应时间的影响。              
 *                  3.注意在适当的域级别设置cookie，这样其他子域就不会受到影响。              
 *                  4.适当地设置到期日期。较早的到期日期或“无”会更快地删除cookie，从而提高用户响应时间 
 *      21. Use Cookie-Free Domains for Components–使用无cookie的域.
 *              如果您的域是www.example.org，那么您可以在static.example.org上托管静态组件。但是，如果您已经在*域example.org上设置了cookie，而不是www.example.org，那么对static.example.org的所有请求都将包括这些cookie。
 *          在这种情况下，您可以购买一个全新的域，在那里托管静态组件，并保持这个域cookie是免费的。
 *              在无cookie域上托管静态组件的另一个好处是，某些代理可能会拒绝缓存用cookie请求的组件。在相关的注释中，如果您想知道您的主页是否应该使用example.org或www.example.org，请考虑cookie的影响。省略www会使您别无选择，
 *          只能将cookie写入*.example.org，因此出于性能原因，最好使用www子域并将cookie写入该子域。 
 *      22. Minimize DOM Access-最小化DOM访问
 *          js操作DOM比较慢，可以缓存已经访问过的元素
 *      23.Develop Smart Event Handlers-开发智能呢个的事件处理程序
 *          事件委托代替多个事件处理程序
 *      24. Avoid Filters–避免使用滤镜. 旨在解决IE版本<7的半透明真彩色PNG的问题。
 *      25. Optimize Images-优化图片  
 *          能用png不用gif
 *      26. Optimize CSS Sprites-优化精灵图
 *          I.与垂直排列相比，水平排列sprite中的图像通常会导致较小的文件大小
 *          II.不要在精灵中的图像之间留下大的空白
 *      27.Don't Scale Images in HTML-不要在HTML中缩放图像 
 *          不要因为可以用HTML设置宽度和高度而使用比需要的大的图像。如果你需要的话              
 *          <img width=“100”height=“100”src=“my cat.jpg”alt=“my cat”/>              
 *          那么您的图像（mycat.jpg）应该是100x100px，而不是缩小的500x500px图像。
 *      28. Make favicon.ico Small and Cacheable–缩小favicon.ico并缓存.
 *      29. Avoid empty src –避免空src.
 *          straight HTML
 *              <img src="">
 *          JavaScript
 *              var img = new Image();
 *              img.src = "";
 *          这两种表单都会产生相同的效果：浏览器向服务器发出另一个请求->            
 *              Internet Explorer向页面所在的目录发出请求。              
 *              Safari和Chrome向实际页面本身发出请求。              
 *              firefox 3和早期版本的行为与safari和chrome相同，但3.5版解决了这个问题[bug 444931]，不再发送请求。              
 *              当遇到空的image-src时，opera不执行任何操作。 
 *          造成的影响：
 *              I.通过发送大量的意外流量，尤其是对于每天获得数百万页面浏览量的页面，会使服务器瘫痪。              
 *              II.浪费服务器计算周期，生成永远无法查看的页面。              
 *              III.可能已损坏用户数据。如果您正在通过cookie或其他方式跟踪请求中的状态，则有可能破坏数据。
 *           即使图像请求不返回图像，浏览器也会读取并接受所有头文件，包括所有cookie。当剩余的响应被丢弃时，可能已经造成了损害。 
 * */