web-性能优化

序言：

由于个人网站的博客没有阅读量，哈哈哈，就将所有博客移步到思否上面，同时也有人指出我的错误，让我能够发现我的问题，及时改正，不多bb...

正文：

对于每个前端程序猿来说，前端优化是一个大问题。那么针对前端进行的优化，会造成什么结果？

• 对于用户，直观地提升用户的浏览体验。
• 对于服务商，减少带宽，减少请求量，降低成本。

那么前端优化到底有哪些渠道？总的来说可以分为两类，第一类是页面级优化，主要包括减少http请求数目、浏览器缓存、脚本无阻塞加载、脚本位置优化；第二类是代码级优化，包括Dom操作的优化、图片加载的优化、HTML结构优化等。

1. 页面级优化

   1. 减少Http请求
      这种方式是最基本的，也是最重要的。我们首先看看一次请求会经历哪些过程：

      

      一个完整的Http请求包括DNS寻址、建立连接、发送数据、等待服务器响应、接收数据这样漫长而复杂的过程。每次请求都包含数据的传递，而附带的数据都会占用相应的带宽。同时，浏览器可处理的并发请求的数目是有限的，剩下的则需要等待浏览器的分批处理，加长了用户的等待时间。

      那么如何减少Http请求的数量？

   2. Http缓存机制
      对于那些很少变化的文件，如图片、样式文件等，可以利用浏览器的缓存机制，将其缓存在客户端，而不用每次都去服务器端获取这些文件。Http缓存分为 Expires策略 和 Cache-control 策略

      • Expires策略
        通过Http请求响应头中的Data和Expires判断是否可以使用缓存文件，Data为当前时间，Expires为过期时间。貌似这个策略已经过时了。
      • Cache-control策略
        Cache-control策略与Expires策略作用相同，都是通过当前资源的有效时间，来控制浏览器是否从浏览器缓存中获取数据还是请求服务器。但是Cache-control可配置项更多，且优先级高于Expires。

        Http协议头Cache-control包括：max-age、public、private、no-cache、no-store等
        1.public指可被任何缓存区缓存
        2.priivate指此缓存不共享，不对其他用户公开
        3.no-cache指请求或响应的消息不进行缓存
        4.no-store指请求和响应的消息不进行缓存
        5.max-age指缓存的生成时间（max-age = 300 即五分钟）

    那么对于Cache-control策略，更灵活的则是配合Last-Modified/If-Modified-Since使用，Last-Modified指的是文件最后被修改的时间，当资源过期时，若发现具有Last-Modified声明，则向服务器请求时带上If-Modified-Since，即请求时间。服务器处理请求时，将文件最后修改的时间与请求时间做对比，判断文件是否有修改，若已被修改，则返回资源所有数据，Http200；若未被修改，则响应Http304，通知浏览器继续使用该缓存。  

1. 资源合并压缩
   资源合并与压缩的优点是减少请求资源的大小、减少请求。具体的方法则是合并CSS文件、JavaScript文件、图片。图片转化为base64格式，同样减少请求。
2. 懒加载
   需要的时候再请求，不需要的时候不管。适用于图片，分页数据等。

3. 避免资源的重复请求
   假如页面由多个模块构成，每个模块请求了相同的资源时，则会得到重复的资源。

   • 脚本位置优化
     假如将CSS文件放在Body中，界面则会因为CSS文件未加载出来，而出现的页面混乱，影响用户体验，那么最好将CSS文件放在Head中。外部脚本置于最底部，防止加载暂时不需要的外部脚本而阻塞图片、CSS文件，避免页面长时间处于空白状态。

2.代码级优化

1. JavaScript

   • Html收集器

     在js文件中，document.getElementsByTagName()、document.forms、document.images返回的都是HtmlCollection类型的集合，尽管我们一直把它当做数组在使用，但是事实上它并不是一个静态的结果，每次访问这个集合时，都会重新查询一次更新一次集合。因此在使用这样的集合时，我们应先将它保存在一个数组里面，再通过数组进行访问，可提高性能。

   • 避免使用eval和Function

        每次通过字符串式的源代码使用eval和new function构造函数时，脚本引擎需要将字符串转化为可执行的代码，这个操作非常消耗资源，比简单的定义函数慢了100倍以上。

   • 减少作用域链的查找
     在此举两例

     //低效率：
     // 全局变量 
     var globalVar = 1; 
       function myCallback(info){    
        for( var i = 100000; i--;){       
         //每次访问 globalVar 
         //都需要查找到作用域链最顶端
         //本例中需要访问 100000 次
         globalVar += i;    
        }
     }
     
     
     //高效率：
     // 全局变量 
     var globalVar = 1; 
       function myCallback(info){    
        //局部变量缓存全局变量     
        var localVar = globalVar;    
        for( var i = 100000; i--;){       
            //访问局部变量是最快的        
            localVar += i;    
        }
     }

2. 数据访问
   JS中的数据访问包括直接量（字符串、正则表达式）、变量、对象、数组，JS对直接量和局部变量的访问是最快的，那么对于以下情况：

     * 对对象属性的访问超过一次
     * 对数组成员的访问超过一次  
       建议将其放入局部变量中。
   

3. 字符串拼接

   在JS中使用“+”来拼接字符串是很浪费内存的，在需要拼接较长字符串的时候，可以考虑采用数组的join方法进行拼接。 

4. Html优化

   1. 标签有开头有结尾。
   2. 减少使用iframe，一个iframe即是一个Http请求，会阻止当前页面的加载，造成白屏。
   3. 减少不必要的嵌套，浏览器需要查找到开始标签和结束标签过后，才开始渲染其中的内容。

   4. Script标签写在末尾，否则阻塞页面显示。

参考链接：

1. 缓存技术原理 http://blog.csdn.net/moshengl...
2. Web前端应该从哪些方面来优化网站? https://www.zhihu.com/questio...
3. 资源合并与压缩减少HTTP请求 http://www.bubuko.com/infodet...
4. HTML性能优化 http://www.cnblogs.com/zzhui/...