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/...