web前端性能优化小结

                                       web前端性能优化的14个技巧     

            平时接触的很多优化都是后台程序或数据库级别的，最近浏览了下《高性能网站建设指南》，学习了下关于前端性能的优化技巧，在此总结下。

     一、web页面的性能分析
           性能黄金法则：只有10%~20%的最终用户响应时间花在了下载HTML文档上，其余的80%~90%时间花在了下载页面中的所有组件上。
          这里的组件包括js，图片，样式表，flash等

    二、具体优化规则：

        规则1：减少HTTP请求
                  具体措施：
                 1.图片地址（Image Map）——一张图片上点击不同的地方触发不同的链接
           
                 2.CSS sprites（合并图片）——将多幅图片合并为一幅单独的图片。
  
                 3.内联图片——使用data：URL模式将图片数据直接放在URL中

                4.合并脚本和样式表——采用外部脚本和样式表相比内联对性能更有利，但是过多的脚本和样式会增加额外的HTTP请求
 
规则2：使用内容发布网络
       内容发布网络：一组发布在多个不同地理位置的web服务器，用于更加有效地向用户发布内容。
       缺点：受网络（CDN）影响很大。主要用于发布静态内容，如图片、脚本、样式表和flash。

规则3：添加Expires头(缓存时间的控制)
         主要是针对浏览器对组件的缓存问题。    
         除了Expires头还可以设置Cache-Control max-age头。
       设置的对象，应该包含任何不经常变化的组件，包括脚本，样式表和flash组件。

规则4：压缩组件
      通过减小HTTP响应的大小来减少响应时间。
      web客户端可以通过请求中的 Accept-Encoding头来识别对压缩的支持。
 
      web服务器通过响应中的 Content-Encoding头来通知web客户端。

      目前主流的压缩方式是：gzip。   采用Conten-Encoding：gzip

      压缩的对象：主要是脚本和样式表
      注意:图片和PDF不应该压缩，因为他们本来就已经压缩了。

      压缩的成本：服务端会话费额外的CPU周期来完成压缩，客户端要对压缩文件进行解压缩。
              要检测收益是否大于开销。

规则5：将样式表放在顶部head中，并且使用link加载，而不要使用@import加载
       逐行呈现：为了避免当样式变化时重绘页面中的元素，浏览器会阻塞内容逐步呈现。
       放在底部容易出现的问题：白屏和无样式内容的闪烁。
       页面逐步呈现的，如果使用样式表，页面逐步呈现就会被阻止，知道所有的样式表下载完成。
       这就是将样式表放在head中的原因。

规则6：将脚本放在底部
        使用脚本时，对于所有位于脚本一下的内容，逐步呈现都被阻塞了。将脚本放在页面越靠下的地方，意味着越多的内容能够逐步地呈现。

规则7：避免CSS动态表达式
        css表达式是动态设置CSS属性的一种强大（并且危险）的方式。

规则8：使用外部JavaScript和CSS
       单纯来讲，内联更快一些。但是外置能很好的支出组件重用。避免了统一组件的反复加载。

规则9：减少DNS查找
        使用keep-Alive通过重用现有连接避免了重复的DNS查找。

规则10：精简javaScript
        精简（Minification）是从代码中移除不必要的字符以减小其大小，进而改善加载时间的实践。         
        不但内联脚本可以精简，内联脚本也能精简。
        精简工具：JSMin
        精简CSS带来的节省通过小于精简javascript

规则11：避免重定向     

规则12：移除重复脚本
               在一个页面中两次包含同一个javascript和css文件会损伤性能。

规则13：配置ETag（实体标签）

规则14：使ajax可缓存

          经总结不难发现，这些措施主要是减少网络请求，减少HTTP响应的大小，html页面加载顺序，组件的缓存这些方面来提高页面响应的时间。