在学习JavaScript代码优化之前，我们先应该知道JavaScript语言的特性：
- JavaScript中的内存管理自动完成
- 执行引擎会使用不用的GC算法
- 算法工作的目的是为了实现内存空间良性循环
- Performance工具检测内存变化
- JavaScript是单线程机制的解释性语言。
正是由于JavaScript属于解释性语言，因此在性能方面天生具有一定的弱点，因此这就使得我们在编写代码的过程中更加注重一定的细节，这样让我们代码在运行过程中，不然浏览器完成太多的超负荷工作。
因此我总结了以下的代码优化方案：
- 避免全局变量
- 避免全局查找
- 避免循环引用
- 采用字面量替换new构造方式
- 使用requestAnimationFrame代替setTimeout和setInterval
- 采用事件委托代替大量绑定
- 使用文档碎片代替多次append
- 使用clone代替creat
- 减少判断层级
- 减少循环体中的活动
- 减少声明及语句数
下面分别来一一讲解上述内容，在此之前，先给大家介绍一个可以检测代码运行速度、检测性能的网站JSBench，大家可以点击进入，或者输入网址https://jsbench.me。
JSBench网站使用说明及注意实现：
我们写一串代码来模拟要测试的内容，来教大家简单快速的使用JSBench
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>代码优化</title>
</head>
<body>
<ul class="ul"></ul>
</body>
<script type="text/javascript">
// 需求：在ul中插入1000个li
// 优化前，使用append方法插入
let ul = document.querySelector(".ul")
for(let i =0;i<10;i++){
let li = document.createElement("li")
li.innerText = i
ul.appendChild(li)
}
//优化后，使用文档碎片方法
let dom = document.createDocumentFragment()
for(let i =0;i<10;i++){
let li = document.createElement("li")
li.innerText = i
dom.appendChild(li)
}
ul.appendChild(dom)
</script>
</htm
首先，我们先简单看一下JSBench网站功能布局
然后按照上述指引将代码放上去后为：
PS:在使用本网站时，耐心等待一下结果，不要去切屏，不然会影响线程，进而影响结果的准确率。
学会使用JSBench之后，接下来我们开始学习代码优化：
一. 避免全局变量
我们先来了解一下全局变量的特点:
- 全局变量挂在在window上
- 全局变量至少有一个引用变量
- 全局变量存活更久，因此也会持续性的占用内存
因此无论从性能还是从空间利用来说，应该尽可能的减少大量的全局变量。
我们所熟悉的es5中的var变量，就是将变量直接挂载到window对象上。但es6中的let和const变量具有作用域，因此也可以被垃圾回收机制所回收，因此尽可能的使用let和const进行定义。
var a = 1
let b = 1
console.log(window.a) //1
console.log(window.b) //undefined
在函数局部作用域内，根据需求进行选择，如果是函数外部需要的变量，那么定义为全局变量，如果是函数外部不需要的变量，那么就定义为局部变量，这样在函数执行完之后被垃圾回收机制所回收，不会影响内存
//如果在内部不使用变量定义将变量转化成局部变量的时候，那么外部也会访问到的，进而影响函数执行完毕后垃圾的正常回收。
function text(){
a = 1
console.log(a) // 1
}
text()
console.log(a) // 1
//上面这种方式会影响垃圾的正常回收，因此我们使用变量声明改成局部变量
function text(){
let a = 1
console.log(a) //1
}
text()
console.log(a) //报错：a is not defined
二. 避免全局查找
什么是全局查找？
- 当目标变量不在当前所在作用域内，就会通过作用域链或者原型链向上查找，这样会增加时间的消耗。但类似于用空间换去执行效率，因为这样虽然减少了沿着作用域链或原型链查找的时间，但是却为创建局部变量开辟了空间。
//需求：获取浏览器窗口的大小
// 优化前
function winSize(){
console.log(window.innerWidth,window.innerHeight)
}
winSize()
由于每次查找的时候，在当前作用域内并没有该值，那么就会返回到全局中进行查找，因此，我们可以使用局部变量提前定义并缓存该值，也就是提前建立一个数据缓冲区，不必使得每次大范围查找，节约了时间，提升了效率，但是会使得空间使用增大，因此需要看情况来使用，是追求空间还是追求效率
//优化后
function winSize(){
let w = window.innerWidth
let h = window.innerHeight
console.log(w,h)
}
winSize()
三. 避免循环引用
循环引用是指程序中对象互相引用的一种现象，存在于两个或两个以上的对象。我用我们最常使用dom事件进行演示。例如：我们在一个函数中定义了一个dom节点，然后又利用该dom节点进行其他的dom操作，这样就是对象的互相引用。由于这样存在着引用关系，容易使得垃圾回收机制在工作时造成一些问题，不会被回收，这样就使得该对象的内存一直占据着程序内存，直到我们将浏览器进行关闭。
//需求，在fun函数中定义一个dom节点，并且添加监听事件
//优化前
function fun(){
let dom = document.querySelector(".box")
dom.addEventListener("click",function(){
console.log(this)
},false)
}
fun()
分析：我们定义了一个dom元素，并且doom元素中又有一个监听事件指向另一个函数对象，因此存在着dom和内部function函数之间的互相引用，所以会导致GC（垃圾回收机制）工作时无法将dom进行回收。因此我们可以采用下面两种方式实现对dom的回收
方案一：在dom监听事件之后，让dom指向null，这样可以告诉GC该对象没人引用，可以被回收
function fun(){
let dom = document.querySelector(".box")
dom.addEventListener("click",function(){
console.log(this)
},false)
dom = null
}
fun()
方案二：将监听事件的定义函数定义到外部。
function fn(){
console.log(this)
}
function fun(){
let dom = document.querySelector(".box")
dom.addEventListener("click",fn,false)
}
四. 采用字面量替换new构造方式
由于每一个内置对象都会有自己的属性和成员方法,因此js在预解析的时候需要进行额外的操作,但是采用字面量的写法会比较直接,将当前的存在对应的空间内,然后让变量对象指向该空间即可。但是对于不同的类型会有不同的差距。js中的数据类型分为基本数据类型和引用数据类型，下面我们分别对两种类型进行测试。
基本数据类型：
引用数据类型：
因此我们得出结论：
- 引用类型会有差距，但差距不是很大
- 但是使用基础数据类型会有相当大的差距
五. 使用requestAnimationFrame代替setInterval和setTimeout
requestAnimationFrame（请求动画帧）的优势：
- 由系统来决定回调函数的执行时机
- CPU节能
- 函数节流
详细介绍如下：
1.requestAnimationFrame的步伐跟着系统的刷新步伐走。它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次，这样就不会引起丢帧现象，也不会导致动画出现卡顿的问题。
2.使用setTimeout实现的动画，当页面被隐藏或最小化时，setTimeout 仍然在后台执行动画任务，由于此时页面处于不可见或不可用状态，刷新动画是没有意义的，完全是浪费CPU资源。而requestAnimationFrame则完全不同，当页面处理未激活的状态下，该页面的屏幕刷新任务也会被系统暂停，因此跟着系统步伐走的requestAnimationFrame也会停止渲染，当页面被激活时，动画就从上次停留的地方继续执行，有效节省了CPU开销。
3.在高频率事件(resize,scroll等)中，为了防止在一个刷新间隔内发生多次函数执行，使用requestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销。
六. 采用事件委托代替大量绑定
传统的绑定方法需要先找到所有的子元素，然后利用循环监听事件进行dom操作，但是当相同的一类元素大量的循环监听时，无异于对性能和内存都很不友好，因此我们可以采用事件委托的形式来进行监听，这样就免去了大量的重复性的循环监听。下面来看实例：
假设需求：一个ul里面有多个li标签和一个p标签，要求我们在点击每一个li标签的时候，打印出当前li标签的内容，当点击p标签的时候，不做任何处理。
//优化前，采用循环监听
let li = document.querySelectorAll("li")
for(let item of li){
item.addEventListener("click",function(){
console.log(this.innerText)
},false)
}
//优化后，使用事件委托
let ul = document.querySelector(".ul")
ul.addEventListener("click",function(even){
let target = even.target
//判断是不是li元素
if(target.nodeName.toLowerCase()==="li"){
console.log(target.innerText)
}
},false)
注意：事件委托方法采用jsben测试的时候，反而上面的方法要比下面的方法快，因此这里不再从时间上对其进行测试，但是我们可以从逻辑思维上进行理解，但一个元素列表的数量相当多的时候，需要绑定大量的事件，进而影响性能，但是利用事件委托来做的话，就可以很好的解决这一个问题
七. 使用文档碎片代替多次append
大量的dom操作是很消耗性能的，每当往页面中添加一个元素，就会使得页面进行重绘，反复的添加大量的元素后，会使得性能大大降低。因此我们要使用文档碎片，也称文本代码片段。利用这样的一个缓冲机制，先将所有的需要添加的元素添加到文档碎片里，最后再将文档碎片添加到页面中，这样就不会一直使页面重绘，从而提升了性能。我们来看实例：
假设有一个矩形，需要往里面插入若干个p标签(p标签有形状和大小)，直到填充满。
方案一：使用appendChild
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>代码优化</title>
<style type="text/css">
*{
margin: 0;padding: 0;
}
.banner{
width: 486px;
height: 300px;
border: 5px solid #000000;
margin: 20px auto;
padding: 5px;
}
.banner p{
width: 50px;
height: 30px;
background-color: #0000FF;
margin: 2px;
float: left;
}
</style>
</head>
<body>
<div class="banner"></div>
</body>
<script type="text/javascript">
let banner = document.querySelector(".banner")
// 计算填充p标签的个数
let len = Math.floor(banner.offsetWidth/54)*Math.floor(banner.offsetHeight/34)
for(let i=0;i<len;i++){
let p = document.createElement("p")
p.innerHTML = i
banner.appendChild(p)
}
</script>
</html>
方案二：使用文档碎片
//优化后的js代码
let dom = document.createDocumentFragment()
for(let i=0;i<len;i++){
let p = document.createElement("p")
p.innerHTML = i
dom.appendChild(p)
}
banner.appendChild(dom)
八. 使用clone代替creat
碰见需要大量生成相同元素的情况下，如果有模板，就使用克隆，这样就省去了创建大量的dom节点，从而节省了性能和内存。我们来看实例：
有一个ul元素，里面有一个li元素，需要往里面再添加1000个li元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>代码优化</title>
</head>
<body>
<ul>
<li></li>
</ul>
</body>
<script type="text/javascript">
let ul = document.querySelector("ul")
let li = document.querySelectorAll("li")[0]
let fff = document.createDocumentFragment()
for(let i=0;i<1000;i++){
let dom = document.createElement("li")
dom.innerText = i
fff.appendChild(dom)
}
ul.appendChild(fff)
</script>
</html>
//优化后
for(let i=0;i<1000;i++){
let dom = li.cloneNode(false)
dom.innerHTML = i
fff.appendChild(dom)
}
九. 减少判断层级
大量的判断层级不仅会使得代码臃肿，也不利于后期的维护和阅读。能使用switch代替的就使用switch，这样可以使得代码没有太多的else if判断。或者是使用提前return的方法。下面我们来看实例：
我们以最常见的数组递归来举例子，并且在此基础上加上一个条件，那就是数组降维后只保存大于5的元素。
//优化前：未使用提前return方法
let arr = [6,2,8,[1,[9,2],3]]
let newArr = []
function arrFlat(arr){
if(Array.isArray(arr)){
while(arr.length){
let val = arr.shift()
if(Array.isArray(val)){
arrFlat(val)
}else{
if(val>5){
newArr.push(val)
}
}
}
}
}
arrFlat(arr)
//优化后：使用提前return方法
function arrFlat(arr){
if(!Array.isArray(arr)) return
while(arr.length){
let val = arr.shift()
if(Array.isArray(val)){
arrFlat(val)
}else{
if(val<=5) return
newArr.push(val)
}
}
}
我们利用JSBench对上述两段代码进行测试：
发现的确使用提前return方法会使得代码执行速度变快，因此在判断层级中，能使用提前return退出循环的就使用。
十： 减少循环体中的活动
以for循环为例，因为循环体内的内容，都是我们想要多次执行的内容，在循环次数固定的情况下，循环体内容越多，循环体执行效率越低，反之越高。因此我们提前把一个经常使用的值提取出来进行缓存好。我们来看实例：
定义一个数组，使用for循环打印出数组的每一项
// 优化前
let arr = [1,4,2,6,2,4,2]
for(let i=0;i<arr.length;i++){
console.log(arr[i])
}
我们可以提前先把循环体内的变量缓存出来
//优化后
let arr = [1,4,2,6,2,4,2]
let len = arr.length
for(let i=0;i<len;i++){
console.log(arr[i])
}
十一： 减少声明及语句数
咋一看起来好像与上一条所说的提前缓存有些冲突，但是不然。由于js虽然是一门解释性语言，但是也需要预编译的，只不过时间非常短而已，因此语句的声明、解析也需要一定的时间，对于上述所提到的利用缓存，那是针对相比来说经常使用的数据，但是对于不会每次用到的数据没有必要使用缓存，这样反而只会增加内存与执行时间。
//优化前：
function text(){
let name = "web"
let eat = "干饭人"
let paly = "干饭魂"
let method = "干饭的都是人上人"
return name+eat+paly+method
}
text()
我们可以使用逗号来代替
//优化后：
function text(){
let name = "web",
eat = "干饭人",
paly = "干饭魂",
method = "干饭的都是人上人"
return name+eat+paly+method
}
text()
我们使用JSBenc对比后得：
减少声明是因为每次执行var，let和const时不用拆分解析编译，这样用逗号代替来说，相比起来就会简单，只不过这样的话再后期维护或者是阅读的时候相比第一种方法来说不是很直观，所以还是那句话，根据需求进行选择，尽管下面这种方法执行效率会更高，但还是尽量推荐上面这种写法，因为这样写会更加直观。
转载：https://blog.csdn.net/weixin_45777923/article/details/115696267