Web性能优化技巧

探究事物的本质似乎是人的天性，凡事总喜欢问个为什么。小时候坐车时会问父母，树为什么会往后面跑，为什么停电了圣斗士就不能看了。很久很久之后，学习了《物理》,仿佛找到答案了，有一种自我满足的快意。

身为程序员，秉持这天性去看待解决性能问题或许就能感觉到一次有趣而有益的挑战吧，没有人知道这条路要走多久，但是，我们在路上。

http协议对并发的建议

http协议中规定了一个特殊规则：浏览器对一个服务器不能同时打开两个以上的连接(IP+Port)。这个规则应该是为了保护服务器不会很容易被洪水攻击。主流浏览器包括IE都实现了这个规则。

DEMO: 用IE下载一个网站的文件，只能同时打开2个，第三个就需要等待。

附注：这个规定是对IE而言是精确到域名而不是IP。



相关内容的详细说明：

HTTP协议1.1中文版：
 
http://www.cnpaf.net/Class/HTTP/0772522080738754597.html
 
请查看8.1.4节最后的说明。

其中节选：
 
       

使用持续连接的客户机应限制与某一服务器同时连接的个数。单用户客户机不应与任一服务器或代理服务器保持两个以上的连接。代理服务器与其它服务器或代理之间应维护2*N个连接，其中N是同时在线的用户数。设定这一规则是为了改进 HTTP应答时间且避免拥塞。
html加载过程

JQuery之父《精通JavaScrip》中对浏览器加载HTMl过程有一个大致的描述：

# HTML is parsed.

# External scripts/style sheets are loaded.

# Scripts are executed as they are parsed in the document.

# HTML DOM is fully constructed.

# Images and external content are loaded.

# The page is finished loading.

因为HTML没有也不会规定具体如何处理一个html文档的加载过程，因此上文的描述比较粗，没有涉及到一些重要的解析细节，而具体的细节也会因为浏览器的不同而不能一概而论。
 
这里重点进一步补充说明IE浏览器解析 html文档过程：
 
# 客户端IE收到的服务器返回的HTML，就开始,顺序读取里面的具体内容，将其解析为RAM中的一棵DOM树。
   
具体如何解析HTML文档：
   

   1. 顺序读取html文档中的各种元素。
           

注意点：
  因为IE浏览器令人恼火的容错机制，即使html文档不符合规格，也可能被自动纠正，但是可能显示的不是你期望的效果，这可能导致很多隐藏较深的bug。
 
# 内存中形成一棵DOM树的结构，读到的内容往里面添加。
   
注意点：此时，并没有显示，只是读成了一个树的结构。
 
# 如果遇到<script> 可执行语句 </script>：
   

   1. script有defer 声明，则将可执行语句延迟到整个DOM完全加载完成时执行。
           
   2. script 没有defer声明，立即执行script中的可执行语句。
           

# 如果遇到External scripts/style sheets, Images and external content等需要下载的资源将其放到特定的结构中。
   
       2．下载1过程中累集的所需要的资源
 
           2.1首先检查缓存中是否存在相关资源，然后依据资源的缓存类型，决定发送那种请求到服务器。
 
              2.1.1 资源在缓存中存在
 
                   2.1.1.1 过期类型资源，对比时间，没有过期，不发请求给服务器。
 
                   2.1.1.2 客户端缓存类型，发请求到服务器，看资源是否改变。
 
                   2.1.1.3 …..

              2.1.2资源在缓存中不存在
 
                   2.1.2.1优先请求DOM内容可能相关的资源并且执行他们。比如js,,css。最后处理图片等一般资源，原因，性能考虑，避免无用下载。
 

 
   注意点：1>> 并发下载内容，对同一个服务器，默认不会超过2个，这是由于http1.1协议要求的。http协议这么要求是为了防止单个客户端就占用大量的服务器资源。
 
                2>> 默认情况下，下载是two-by-two进行的，即二个资源二个资源的下载。特定的情况下，静态脚本资源下载会阻塞图片等文件的下载，后文会解释这个。
 
                3>> 协议上不能保证先发出的请求就一定先返回，虽然一般是先发出的先返回。
 
                4>> 当资源文件部分被缓存时，可能出现写在html前面的资源,结果后请求的情况，原因是在请求前会检查ie缓存。
 
5>> 使用HttpAnalyzer分析html的解析过程，你会发现似乎有时候同时下载的超过了2个，有几种可能：第一种情况是错觉，因为一定有东西被缓存了，此时只需要询问服务器这个文件是否修改，速度很快，好似同时n个。但是要同时下载n个资源，那么服务器必须允许同一个ip的n个端口连接才行，这在 iis服务器是有最大值限制的，通过修改注册表的设置，最大并发可以设置为6个，默认是2个，并且一般情况下不建议修改。第二种情况就是资源被放在了不同的服务器上。
 

  3．绘画内容，即由布局管理器计算DOM树中各个可视元素的位置，高度，等css盒特征。
 
       3.1 当2过程中的与DOM内容可能有关的css,js被下载且被执行后，HTML DOM的内容就已可以绘画了。DirectDraw thread就会开始绘画可视的html元素，可视单元的嵌套越多，绘画就越慢。
 

   注意点：1>> 绘画窗口开始时，可能还有不影响DOM的资源没有下载完。
 
               2>> 源文件Body区域的多个可视标签嵌套，需要所有被嵌套标签都加载完成，才能正常显示，这时候加载顺序是倒着的。举例：<div>1<div>2<div>3</div><div>< /div>这段源代码会先显示3，然后2，
   最后1。因为加载div1时并没有找到它的结束标签</div>，于是它不加载继续解析源文件，在找到div2时，和上面一样也没有找到结束位置不做加载。然后是找到div3，div3有结束标签。
   浏览器开始加载div3，之后，找到div2的结束标签，加载div2，以次类推，所以这时理论加载顺序为： 3 2 1 。因为IE的容错机制，可以看到上面的例子会比较混乱。
 
               3>> IE可以由特定算法预测部分可视元素的显示。
 
js下载阻塞图片下载的解决方案

问题描述

在下载完所有的script文件并且执行之前，IE并不知道script中的内容是否包括document.write()这类修改DOM 树的语句或者是 location.href这类跳转语句。如果这些情况发生了，那么IE先前下载的任何资源都可能是白费了。为了避免这种情况发生，IE会首先下载可能影响后续下载的script并且执行它们。这样做的结果就是，js文件的下载会阻塞页面下载进程即使js与图片在不同服务器上，从而影响页面的加载速度。

DEMO

解决办法

   将静态js改为动态下载js:

<script src="myscript.js" />
<script>

var js = document.createElement('script');

js.src = 'myscript.js';

var head = document.getElementsByTagName('head')[0];

head.appendChild(js);

</script>
YAHOO网站优化7类别34黄金守则

阅读了网络上google,yahoo的优化原则，感慨万千："不择手段优化性能，哪怕只是一个byte，1ms能优化的就会优化"，优化代码已经溶入了他们的血液和文化。

Yahoo将网站性能优化分为了7个大的类别：内容，服务器，cookie,CSS,JavaScript,Image,Mobile

       重点介绍内容这一块的优化守则。

最小化http请求数量 [非常重要]

豹：第一条原则是最重要的原则，也是一个总则。

终端用户响应的时间中，有80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以减少HTTP请求的次数。这是提高网页速度的关键步骤。 

豹：这里yahoo指的是网站类的程序。 

 

减少页面组件的方法其实就是简化页面设计。那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢？这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术。

豹：减少页面组件即减少http请求次数，最关键的是页面设计。



合并文件是通过把所有的脚本放到一个文件中来减少HTTP请求的方法，如可以简单地把所有的CSS文件都放入一个样式表中。当脚本或者样式表在不同页面中使用时需要做不同的修改，这可能会相对麻烦点，但即便如此也要把这个方法作为改善页面性能的重要一步。



CSS Sprites是减少图像请求的有效方法。把所有的背景图像都放到一个图片文件中，然后通过CSS的background- image和background-position属性来显示图片的不同部分；



图片地图是 把多张图片整合到一张图片中。虽然文件的总体大小不会改变，但是可以减少HTTP请求次数。图片地图只有在图片的所有组成部分在页面中是紧挨在一起的时候 才能使用，如导航栏。确定图片的坐标和可能会比较繁琐且容易出错，同时使用图片地图导航也不具有可读性，因此不推荐这种方法；



内联图像是使用data:URL scheme的方法把图像数据加载页面中。这可能会增加页面的大小。把内联图像放到样式表（可缓存）中可以减少HTTP请求同时又避免增加页面文件的大小。但是内联图像现在还没有得到主流浏览器的支持。



减少页面的HTTP请求次数是你首先要做的最重要的一步。这是改进首次访问用户等待时间的最重要的方法。如同Tenni Theurer的他的博客Browser Cahe Usage - Exposed!中所说，HTTP请求在无缓存情况下占去了40%到60%的响应时间。让那些初次访问你网站的人获得更加快速的体验吧！

使用CDN

     豹：我们用不上，一种内容分发网络。

向http头添加过期或者缓存控制[重要，且效果明显成本低]

此规则规则主要包含如下两个方面:

# 对于静态网页组件，通过设置足够长的 Expires Header，来实现"永不过期"策略,或者每天过期。

# 对于动态网页组件，通过设置恰当的Cache-Control Header，来帮助浏览器根据条件来判断是否做更新请求。

网络页面设计变得越来越丰富，同时也意味着页面包含越来越多的脚本，样式表，图片和Flash。第一次访问你网站的用户，不得不做多次Http请求，不过你可以通过设置Http的Expires Header让这些组件缓存在客户端，从而在接下来的页面浏览过程中，避免了不必要的Http请求。Expires Header最常用于图片，不过我们更应该将之用到所有的网页组件上：脚本，样式表，Flash等等。

浏览器和代理服务器通过缓存来减少 Http请求的数量和大小，从而更快的加载页面。服务器可以通过在Http response中设置Expires Header来告诉客户端组件应该缓存多长时间。下面是一个足够长的Expires Header，告诉浏览器，这个响应在2010年4月15号前都不过期。

Expires: Thu, 15 Apr 2010 20:00:00 GMT

请记住，如果你已经用了一个相当长的Expires header，在你需要修改一个组件的时候，你一定要同时修改组件的文件名。在Yahoo内部，我们已经将这部分作为构建流程的一部分，具体做法就是为每一个组件设置一个版本号，比如yahoo_2.0.6.js。

足够长的Expires header只会影响已经访问过你网站的那些用户。对那些第一次访问你网站或者已经清除了浏览器缓存的用户，并不能减少Http请求数。所以，此规则对性能的提高依赖于用户点击primed cache页面的频度(Primed Cache是指页面中已经包含了所有组件)。我们测量这条规则对Yahoo的影响，发现大约有75%-85%的页面已经有primed cache。通过设置足够长的Expires header，我们就可以提高缓存在用户浏览器的组件数量，从而在用户接下来的浏览中，不需要通过网络连接中发送一个字节的数据。

豹：使用缓存头和过期header效果是不一样的，使用过期头，可以使得过期之前，IE不再去请求资源，而缓存则必须请求资源是否改变，如果不改变，则不再下载资源，但是依然有一次请求的开销。

至于怎么使用缓存头，有二种方式，一种是在IIS中去配置，一种是重写HttpMoudle加载一个过期header。
 
用Gzip压缩组件(Gzip Components)[重要，成本低]

豹：许多静态类型的文件，都应该启用Gzip压缩节约网络带宽。

将样式表放在头部(Put Stylesheets at the Top)[准则，没道理不遵守]

将脚本放在底部(Put Scripts at the Bottom)[准则，一旦没有遵守，想去遵守就会很难]


     豹：5.5和5.6都与前面html解析过程有密切的关系。

         豹：js最佳放置位置

         以下列出主要的六种放置情况：

# 直接将Javascript代码放在标记对<script>和</script>之间

# 由<script />标记的src属性制定外部的js文件,静态js

# 放在DOM事件处理程序中，比如：<p onclick="alert(' ')">XXX</p> 。

# 作为URL的主体，这个 URL使用特殊的Javascript：协议，比如：<a href="javascript:alert(' ')">XXX</a> .

# 利用 javascript本身的document.write()方法写入新的javascript代码

# 利用Ajax异步/同步获取javascript代码，然后执行

        第 3种和第4种方法写入的Javascript需要触发才能执行，所以除非特别设置，否则页面加载时不会执行。

        第一，五种在页面加载读到时就执行，除非有defer声明,如果脚本中含动态下载内容，不能保证后面的js一定可以访问到动态下载文件中的内容，原因请参考html 加载过程。

        第二种页面加载时都到就下载，下载完成后执行，后面的js一定可以访问前面的js，除非引入的js中又有动态下载的内容。

        第六种，因为使用ajax下载资源，而且可以使用同/异步方式，因此此种方式可以控制，动态js内容的加载顺序。

        我们通过分析可以知道最优的放置位子(实质是执行时机):是在待操作的DOM元素后，且内容只对前面出现的DOM 元素操作，JS中最好不要再去下载动态的资源。

         其次是DOM文档加载完毕时，

         最保险，但是性能也最末的是window.onload。

避免CSS表达式(Avoid CSS Expressions)[遵守，几乎无成本]

将JavaScript和CSS放在外部文件中(Make JavaScript and CSS External)

         豹：这也是一个很重要的设计原则，这样可以增加缓存，减少页面动态内容大小，减少请求数。

减少域名服务查询次数[了解]

最小化JavaScript和CSS(Minify JavaScript and CSS) [遵守]

避免重定向(Avoid Redirects)

删除重复的脚本(Remove Duplicate Scripts)

配置 ETags(Configure Etags)

使Ajax可被缓存(Make Ajax Cacheable)


  Ajax 经常被提及的一个好处就是由于其从后台服务器传输信息的异步性而为用户带来的反馈的即时性。但是，使用Ajax并不能保证用户不会在等待异步的 JavaScript和XML响应上花费时间。在很多应用中，用户是否需要等待响应取决于Ajax如何来使用。例如，在一个基于Web的Email客户端 中，用户必须等待Ajax返回符合他们条件的邮件查询结果。记住一点，"异步"并不异味着"即时"，这很重要。

为了提高性能，优化 Ajax响应是很重要的。提高Ajxa性能的措施中最重要的方法就是使响应具有可缓存性，具体的讨论可以查看Add an Expires or a Cache-Control Header。其它的几条规则也同样适用于Ajax。 

让我们来看一个例子：一个Web2.0的 Email客户端会使用Ajax来自动完成对用户地址薄的下载。如果用户在上次使用过Email web应用程序后没有对地址薄作任何的修改，而且Ajax响应通过Expire或者Cacke-Control头来实现缓存，那么就可以直接从上一次的缓 存中读取地址薄了。必须告知浏览器是使用缓存中的地址薄还是发送一个新的请求。这可以通过为读取地址薄的Ajax URL增加一个含有上次编辑时间的时间戳来实现，例如，&t=11900241612等。如果地址薄在上次下载后没有被编辑过，时间戳就不变，则 从浏览器的缓存中加载从而减少了一次HTTP请求过程。如果用户修改过地址薄，时间戳就会用来确定新的URL和缓存响应并不匹配，浏览器就会重要请求更新 地址薄。

即使你的Ajxa响应是动态生成的，哪怕它只适用于一个用户，那么它也应该被缓存起来。这样做可以使你的Web2.0应用程序更加快捷。

尽量早的清除缓冲(Flush the Buffer Early)









用 GET方式完成Ajax请求(Use GET for AJAX Requests)

      豹：这条规则的意思是应该用Get的就不要用Post。

      理由有二：

# Get的处理过程比 Post少(Get没有请求实体)

# Get与Post有不同的http语义，这在将来Web标准强推后可能有较大影响(不是主要原因)

推迟组件加载(Post-load Components)

你可以仔细看一下你的网页，问问自己"哪些内容是页面呈现时所必需首先加载的？哪些内容和结构可以稍后再加载？

把整个过程按照onload 事件分隔成两部分，JavaScript是一个理想的选择。例如，如果你有用于实现拖放和动画的JavaScript，那么它 就以等待稍后加载，因为页面上的拖放元素是在初始化呈现之后才发生的。       

其它的例如隐藏部分的内容（用户操作之后才显现的内容）和处于折叠部分的图像也可以 推迟加载

工具可以节省你的工作量：YUI Image Loader可以帮你推迟加载折叠部分的图片，YUI Get utility是包含JS和 CSS的便捷方法。比如你可以打开Firebug的Net选项卡看一下Yahoo的首页。

当性能目标和其它网站开发实践一致时就会相得益彰。这种情况下，通过程序提高网站性能的方法告诉我们，在支持JavaScript的情况下，可以先去除用户体验，不过这要保证你的网站在没有 JavaScript也可以正常运行。在确定页面运行正常后，再加载脚本来实现如拖放和动画等更加花哨的效果。

豹：页面整体架构时应该考虑的关键事情之一。

预先加载组件(Preload Components)

预加载和后加载看起来似乎恰恰相反，但实际上预加载是为了实现另外一种目标。预加载是在浏览器空闲时请求将来可能会用到的页面内容（如图像、样式表和脚本）。使用这种方法，当用户要访问下一个页面时，页面中的内容大部分已经加载到缓存中了，因此可以大大改善访问速度。

下面提供了几种预加载方法：

无条件加载：触发onload事件时，直接加载额外的页面内容。以Google.com为例，你可以看一下它的spirit image图像是怎样在onload中加载的。这个spirit image图像在google.com主页中是不需要的，但是却可以在搜索结果页面中用到它。

有条件加载：根据用户的操作来有根据地判断用户下面可能去往的页面并相应的预加载页面内容。在search.yahoo.com中你可以看到如何在你输入内容时加载额外的页面内容。

有预期的加载：载入重新设计过的页面时使用预加载。这种情况经常出现在页面经过重新设计后用户抱怨"新的页面看起来很酷，但是却比以前慢"。问题可能出在用户对于你的旧站 点建立了完整的缓存，而对于新站点却没有任何缓存内容。因此你可以在访问新站之前就加载一部内容来避免这种结果的出现。在你的旧站中利用浏览器的空余时间加载新站中用到的图像的和脚本来提高访问速度。

豹：附注一个图片预加载技巧

function loadImage(url, callback) {


         var img = new Image(); //创建一个Image对象，实现图片的预下载
       
    img.src = url;




         if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
       
        callback.call(img);


         return; // 直接返回，不用再处理onload事件
       
    }



    img.onload = function() { //图片下载完毕时异步调用callback函数。
       
        callback.call(img); //将回调函数的this替换为Image对象
       
    }

}

function imgLoaded(){


         //将回调函数的this替换为Image对象
       
  …

}

<input type="button" value="loadImage" onclick="loadImage('aaa.jpg',imgLoaded)"/>
减少DOM元素数量(Reduce the Number of DOM Elements) [太重要]

一个复杂的页面意味着需要下载更多数据，同时也意味着JavaScript 遍历DOM的效率越慢。比如当你增加一个事件句柄时在500和5000个DOM元素中循环效果肯定是不一样的。
    大量的DOM元素的存在意味着页面中有可以不用移除内容只需要替换元素标签就可以精简的部分。你在页面布局中使用表格了吗？你有没有仅仅为了布局而引入更多的<div>元素呢？也许会存在一个适合或者在语意是更贴切的标签可以供你使用。
     YUI CSS utilities可以给你的布局带来巨大帮助：grids.css可以帮你实现整体布局，font.css和reset.css可以帮助你移除浏览器默 认格式。它提供了一个重新审视你页面中标签的机会，比如只有在语意上有意义时才使用<div>，而不是因为它具有换行效果才使用它。
     DOM元素数量很容易计算出来，只需要在Firebug的控制台内输入：
     document.getElementsByTagName('*').length
     那么多少个DOM元素算是多呢？这可以对照有很好标记使用的类似页面。比如Yahoo!主页是一个内容非常多的页面，但是它只使用了700个元素（HTML标签）。

豹：这个原则非常之重要，页面设计时最核心考虑内容之一，就是用最少的html标签实现最复杂的展示效果。

将不同的组件划分到不同的域名上 (Split Components Across Domains)

     豹：这个主要是为了提高客户端并行下载文件数，效果也比较明显。

最小化IFrame的数量(Minimize the Number of iframes)

ifrmae元素可以在父文档中插入一个新的HTML文档。了解iframe的工作理然后才能更加有效地使用它，这一点很重要。

<iframe>优点：

解决加载缓慢的第三方内容如图标和广告等的加载问题

有安全沙盒

并行加载脚本

<iframe>的缺点：

即时内容为空，加载也需要时间

会阻止页面加载

没有语意

避免404页面(No 404s)

HTTP请求时间消耗是很大的，因此使用 HTTP请求来获得一个没有用处的响应（例如404没有找到页面）是完全没有必要的，它只会降低用户体验而不会有一点好处。

有些站点把 404错误响应页面改为"你是不是要找***"，这虽然改进了用户体验但是同样也会浪费服务器资源（如数据库等）。最糟糕的情况是指向外部 JavaScript的链接出现问题并返回404代码。首先，这种加载会破坏并行加载；其次浏览器会把试图在返回的404响应内容中找到可能有用的部分当 作JavaScript代码来执行。

减少Cookie的大小(Reduce Cookie Size)

将组件的 Cookie设置成域名无关(Use Cookie-free Domains for Components)

最小化DOM访问 (Minimize DOM Access) [非常重要]

豹：就是要多缓存DOM元素，js编码指引有相关内容。

开发智能的事件处理器(Develop Smart Event Handlers) [重要]

        豹：这条与js执行的三个主要时机有关，解析html形成DOM时，DOM构造完成时，Window.onload时。这里希望在js操作DOM元素已经存在而不必等待 window.onload就执行。

用<link>，而不要用@import(Choose <link> over @import)

避免过滤器(Avoid Filters)

优化图片(Optimize Images)

优化CSS(Optimize CSS Sprites)

不要在HTML中缩放图片(Don't Scale Images in HTML)

减少favicon.ico的大小，并使之可缓存(Make favicon.ico Small and Cacheable)

将组件保持在25K以下(Keep Components under 25K)

将不同的组件打包进Multipart文档(Pack Components into a Multipart Document)