为什么要进行性能优化

新应用上线前在性能上无法满足需求，这个时候需要对系统进行性能调优

应用系统在线上运行后随着系统数据量的不断增长、访问量的不断上升，系统的响应速度通常越来越慢，不满足业务需要，这个时候也需要对系统进行性能调优

性能优化的参考指标

执行时间：一段代码从开始运行到运行结束所使用的时间。

CPU时间：(算法)函数或者线程占用CPU的时间。

内存分配：程序在运行时占用的内存空间。

磁盘吞吐量：描述I/O的使用情况。

网络吞吐量：描述网络的使用情况。

响应时间：系统对某用户行为或者动作做出响应的时间。响应时间越短，性能好。

通过优化js代码提高性能

JavaScript中的一些性能优化技巧，包括减少重绘和重排、使用节流和防抖技术、使用事件代理、慎用全局变量、使用缓存等。

减少重绘和重排

1.减少直接操作dom元素，改用className用于控制

2、尽量减少table使用，table属性变化使用会直接导致布局重排或者重绘

3、当dom元素position属性为fixed或者absolute, 可以通过css形变触发动画效果，此时是不会触发reflow的

4、不要把 DOM 结点的属性值放在一个循环里当成循环里的变量

5、如果需要创建多个DOM节点，可以使用DocumentFragment创建完后一次性的加入document

使用防抖和节流技术

防抖：单位时间内，频繁触发一个事件，以最后一次触发为准。

应用场景：主要用来监听input输入框：我们在搜索内容的时候一般都会有搜索提示，它是通过input事件获取用户输入的内容，然后发送数据请求给后端，后端返回搜索提示内容。我们希望等待用户输入结束之后再发送请求，而不是输入一个发一次请求，这时候就需要使用防抖函数来实现。

节流：单位时间内，频繁触发一个事件，只会触发一次。

应用场景：监听scroll滚动事件、按钮点击等等。

使用定时器实现防抖技术

//func 是事件处理程序，delay 是事件执行的延迟时间，单位：毫秒
    function debounce(func, delay){
      var timer = null;
      return function(){
        var that = this;
        var args = arguments
        //每次触发事件 都把定时器清掉重新计时
        clearTimeout(timer)
        timer = setTimeout(function(){
          //执行事件处理程序
          func.call(that, args)
        }, delay)
      }
    }

使用时间戳实现节流技术

//func 是事件处理程序，delay 是事件执行的延迟时间，单位：毫秒
    function throttle(func, delay){
      //定义初始时间(开始触发事件的时间)
      var start = 0;
      return function(){
        var that = this;
        var args = arguments;
        //获取当前时间戳
        var current = Date.now();
        // 判断当前时间与初始时间是否超过间隔
        if(current - start >= delay){
          //执行事件处理程序
          func.call(that, args)
          //更新初始时间
          start = current;
        }
      }
    }

事件代理

函数都是对象，都会占用内存；内存中对象越多，性能就越差。
所以减少函数，也算是js的性能优化

例：给所有的li添加同一个事件

      document.getElementsByTagName("li")[0].onclick=function(){
            console.log(1);
        }
        document.getElementsByTagName("li")[1].onclick=function(){
            console.log(2);
        }
        document.getElementsByTagName("li")[2].onclick=function(){
            console.log(3);
        }

这样要搭载三个事件
如果将事件托给ul，通过事件对象event 下的target属性来控制具体点到那个li上，这个原理是事件冒泡。
事件冒泡：事件从目标节点的父节点到最外层的window对象依次触发的阶段。(从内到外)


 document.getElementsByTagName("ul")[0].onclick=function(e){
            console.log(e.target.innerText);
        }

慎用全局变量

全局变量定义在全局执行上下文，是所有作用域链的顶端
全局执行上下文一直存在于上下文执行栈，直到程序退出
如果某个局部作用域出现了同名变量则会遮蔽或污染全局

使用缓存

缓存是一种在Web应用程序中提高性能的重要技术。当浏览器首次访问Web应用程序时，它会从服务器下载HTML、CSS、JavaScript和其他文件。如果我们在服务器上启用了缓存，那么浏览器可以将这些文件存储在本地缓存中，并在下一次访问时使用本地缓存，而不是从服务器重新下载文件。这样可以减少HTTP请求次数，并提高Web应用程序的性能。

常用的缓存技术包括浏览器缓存、CDN缓存和服务端缓存等。例如，我们可以在服务器端配置HTTP缓存头，以指示浏览器将文件缓存在本地。常用的HTTP缓存头包括Expires、Cache-Control和ETag等。

其他小技巧

<script>标签尽可能放到<body>标签的底部
不要使用 with() 语句
对象属性和数组元素的速度都比变量慢
避免全局查找
避免双重解释

如果要提高代码性能，尽可能避免出现需要按照JavaScript解释的字符串
缩短否定检测
一条有返回值的return语句不要用()括号来括住返回值，如果返回表达式，则表达式应与return关键字在同一行，以避免压缩时，压缩工具自动加分号而造成返回与开发人员不一致的结果。
总是检查数据类型
JavaScript 程序应该尽量放在 .js 的文件中，需要调用的时候在 HTML 中以
部署之前推荐使用压缩工具将JS文件压缩
switch语句相对if较快

文章参考：

blog.csdn.net/m0_67948827…

t.csdn.cn/BUrXv

t.csdn.cn/IKYZ0

性能优化与调试技巧 | 青训营

为什么要进行性能优化

性能优化的参考指标

通过优化js代码提高性能