js中的性能优化

js性能优化

在创建网页或者应用时，性能始终是绕不开的话题，前端作为一个贴近用户的位置，更要注重性能的优化。
js作为前端的三大将之一，js也是必须要优化，今天我们来说一说js性能优化相关的方法。

1. 图片懒加载

如果一个网页加载图片过多，必定会导致http请求的次数增多，但是一个网页展示给用户的始终是出现在显示屏的部分，多出的部分，只有在滚轮轮动时，才会展示给用户，因为屏幕始终就那么一块大小嘛，所以呢没有显示在屏幕上的图片，我们就不进行加载，只有这个图片要进入屏幕时在进行加载，这就是图片懒加载！

实现思路

img标签只有在src属性写入地址时才会请求图片，所以开始我们先不给src属性图片的地址，我们创建一个自定义属性，data-src，给这个自定义属性添加图片的链接，在这个图片要显示在屏幕上时，再将图片地址给src属性。

<img src="" alt="" data-src="../img/beishang.jpg">

通过监听滚轮滚动事件来判断是否要进行图片加载

document.addEventListener("scroll",lanload);

在发现图片要进入显示区的时候，给src值

img.setAttribute('src',img.getAttribute('data-src'))

2.事件代理

函数都是对象，都会占用内存；内存中对象越多，性能就越差。
所以减少函数，也算是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);
        }

3.少用全局变量

尽量使用局部变量（local variables）来代替全局变量（global variables）

如果了解过作用域你就知道，全局变量放在GO中，而局部变量放在AO中，所以在使用一个变量时就会沿着作用域链去查找，所以查找GO下的全局变量，比查找AO下的局部变量，所花费的事件会多一些。

4.在设置多个样式的时候去使用className去添加类名，而不是使用style去修改

这样做的目的是为了减少dom元素操作

5.减少闭包的出现

闭包会导致内存泄漏，变量不会被回收机制回收
如果内存正在泄漏，则加载的页面将保留越来越多的内存，并最终占用设备的所有可用内存并严重影响性能。

（如果这篇文章有什么问题请及时联系我！）