如何进行网站性能优化？

 分享人：chenxingxing

 目录 
 1.背景介绍 
 2.知识剖析 
 3.常见问题 
 4.解决方案 
 5.编码实战 
 6.扩展思考 
 7.参考文献 
 8.更多讨论 
 

一.背景介绍 
     
     前端优化的目的:
     
      1. 用户：体验好 
      2. 服务商：节省资源 
      简而言之，就是在不影响系统运行正确性的前提下，使之运行地更快，完成特定功能所需的时间更短。 

二.知识剖析 

    2.1 优化途径 
    
    1、页面级 
      HTTP请求数、脚本加载、内联脚本位置等 
      
    2、代码级 
      DOM操作优化、CSS选择符优化、图片及HTML结构优化等 
      
     一、页面级优化 

        1、减少HTTP 请求数————最重要最有效的方法
     
 
         减少时间成本和资源成本
     
         途径 
         
          （1）从设计实现层面简化页面 
     
          （2）合理设置 HTTP缓存  原则:能缓存越多越好，能缓存越久越好
                     
          （3）资源合并与压缩
          
          （4）CSS Sprites
           
          （5）Inline Images——转化为编码
       
            let fr = new FileReader();
            $scope.max = $scope.file.size;//文件大小
            fr.readAsDataURL($scope.file);
            fr.onprogress = function($event){
                $scope.value = $event.loaded;
            }
            fr.onload = function ($event){//预览图片
                preview.src = $event.target.result;
            }
        
           缺点：增大了页面的体积，而且无法利用浏览器缓存 
     
          （6）图片懒加载 

               图片地址缓存在 Textarea标签中，待用户往下滚屏的时候才 “惰性” 加载
     
    
        
        2、外部脚本置底 
        
        3、异步执行inline脚本 
        
        4、Lazy Load Javascript 
        
        5、将 CSS放在head中 

        6、减少不必要的 HTTP跳转 
         
        7、避免重复的资源请求 
        
    二、代码级优化 
    
        1、JavaScript 
        
        (1)DOM 
        
           a. HTML Collection 
           在遍历的时候可以将 length属性、成员保存到局部变量后再使用局部变量。 
           
           b. Reflow & Repaint 

              减少Repaint 和 Reflow
           
              Reflow(回流/重排):元素
              Repaint(重绘): 属性
                   
                  var el = document.getElementById('demo');
                  el.style.broderLeft = '1px';
                  el.style.broderRight = '2px';
                  el.style.padding = '5px';
           
           
           优化：减少此类操作 
           
        (2)减少作用域链查找 
            
           低效率的写法：
           // 全局变量
           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次全局变量在函数中只需要将 globalVar中内容的值赋给localVar
           }
                         
           要减少作用域链查找还应该减少闭包的使用 
           
        (3)避免使用with（obj）｛｝、evel（）Function 
        
        (4)数据访问 
        
           Javascript中的数据访问包括直接量 (字符串、正则表达式 )、变量、对象属性以及数组，
           其中对直接量和局部变量的访问是最快的，对对象属性以及数组的访问需要更大的开销.当出现以下情况时，建议将数据放入局部变量：
        
              a. 对任何对象属性的访问超过 1次 
              b. 对任何数组成员的访问次数超过 1次 
       
        (5)字符串拼接 
        
           "+" :
           效率低：因为每次运行都会开辟新的内存并生成新的字符串变量，然后将拼接结果赋值给新变量；
           
           优化方法：join()
        
        2. CSS选择符 
        
           ul li a { color: #444; } 
        
        
三.常见问题 

     3.1HTTP缓存怎样设置？
     
     3.2链接后面是否带“/”有什么区别？ 

     3.3如何正确理解 Repaint 和 Reflow？

四.解决方案 
     3.1
     HTTP缓存怎样设置？ 
  
            meta http-equiv="Cache-Control" content="max-age=7200"
            meta http-equiv="expires" content="someGMT"
           
    3.2
    链接后面是否带“/”有什么区别？ 
    
        有/会认为是目录，没/会认为是文件。  
        
        加了/浏览器会指向一个目录，目录的话会读取默认文件index等等。
        
        没有/会先尝试读取文件，如果没有文件再找与该文件同名的目录，最后才读目录下的默认文件。
        
        网址没有加上/会给服务器增加一个查找是否有同名文件的过程。      

     3.3 如何正确理解 Repaint 和 Reflow ？

          Repaint(重绘)就是在一个元素的外观被改变，但没有改变布局(宽高)的情况下发生，如改变visibility、outline、背景色等等。

Reflow(重排)就是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证DOM树上的所有其它结点的visibility属性，这也是Reflow低效的原因。如：改变窗囗大小、改变文字大小、内容的改变、浏览器窗口变化，style属性的改变等等。如果Reflow的过于频繁，CPU使用率就会噌噌的往上涨，所以前端也就有必要知道 Repaint 和 Reflow的知识。

减少性能影响的办法：
总之，因为 Reflow 有时确实不可避免，所以只能尽可能限制Reflow的影响范围。

五.编码实战 

六.扩展思考 

七.参考文献 

参考一：
    
        Web前端应该从哪些方面来优化网站?----知乎
     
 
参考二：
    
        HTML优化--------阿里云
     
 

八.更多讨论 

 感谢观看 
 
BY :禚洪宇|陈星宇