JavaScript性能优化

最新推荐文章于 2022-04-19 11:20:22 发布

菜鸟小七_hhh

最新推荐文章于 2022-04-19 11:20:22 发布

阅读量149

点赞数

分类专栏：前端菜鸟的学习历程文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43132396/article/details/109444403

版权

前端菜鸟的学习历程专栏收录该内容

30 篇文章 2 订阅

订阅专栏

内存管理

内存：由可读写单元组成，表示一片可操作空间
管理：人为的去操作一片空间的申请、使用和释放
内存管理：开发者主动申请空间、使用空间、释放空间
管理流程：申请—使用—释放

JavaScript中的垃圾回收

JavaScript中内存管理是自动的
对象不再被引用时是垃圾
对象不能从根上访问到时是垃圾

JavaSrcipt中的可达对象
- 可以访问到的对象就是可达对象（引用，作用域链）
- 可达的标准是从根出发是否能被找到
- JavaScript中的根就可以理解为是全局变量对象

GC算法介绍

GC定义与作用

GC就是垃圾回收机制的简写
GC可以找到内存中的垃圾，并释放回收空间
- GC中的垃圾是什么
  - 程序中不再需要的对象
  - 程序中不能再访问到的对象

GC算法是什么

GC是一种机制，垃圾回收器完成具体的工作
工作内容就是查找垃圾释放空间、回收空间
算法就是工作时查找和回收所遵循的规则
- 常见的GC算法
  - 引用计数
  - 标记清除
  - 标记整理
  - 分代回收
引用计数算法实现原理
- 核心思想：设置引用数，判断当前引用数是否为0
- 引用计数器
- 应用关系改变时修改引用数字
- 引用数字为0时立即回收
- 引用计数算法优点：
  - 发现垃圾时立即回收
  - 最大限度减少程序暂停
- 引用计数算法缺点
  - 无法回收循环引用的对象
  - 时间资源开销大
标记清除算法实现原理
- 核心思想：分标记和清除两个阶段完成
- 遍历所有对象找标记活动对象
- 遍历所有对象清除没有标记对象
- 回收相应的空间
- 标记清除算法优点
  - 相对于引用计数，可以解决对象循环引用的回收操作
- 标记清除算法缺点
  - 空间碎片化，浪费空间（回收的垃圾对象在地址上不连续）
  - 不能立即回收垃圾对象
标记整理算法实现原理
- 标记整理可以看做是标记清除的增强
- 标记阶段的操作和标记清除一致
- 清除阶段会先执行整理，移动对象位置
- 标记整理优点
  - 减少碎片化空间
    -标记整理缺点
  - 不会立即回收垃圾对象
  - 移动对象位置，回收效率慢

V8

V8 是一款主流的JavaScript执行引擎
V8采用即时编译
V8内存设限（64位系统不超过16G，32位系统不超过800M）

V8 垃圾回收策略
- 采用分代回收的思想
- 内存分为新生代、老生代
- 针对不同对象采用不同算法
V8中常用及GC算法
- 分代回收
- 空间复制
- 标记清除
- 标记整理
- 标记增量
- V8内存空间一分为二
- 小空间用于存储新生代对象（32M|16M）
- 新生代指的是存活时间较短的对象
- 老生代对象指的就是存活时间较长的对象，64位操作系统1.4G,32位操作系统700M
- 老生代对象存放在右侧老生代区域
V8 关于新生代的回收
- 回收过程采用复制算法 + 标记整理
- 新生代内存区分为二个等大小空间
- 使用空间为From，空闲空间为To
- 活动对象存储于From空间
- 标记整理后将活动对象拷贝至To
- From与To交换空间完成释放
回收细节说明
- 拷贝过程中可能出现晋升
- 晋升就是将新生代对象移动至老生代
- 一轮GC还存活的新生代需要晋升
- To空间的使用率超过25%，需要晋升新生代
V8 关于老生代的回收
- 主要采用标记清除、标记整理、增量标记算法
- 首先使用标记清除完成垃圾空间的回收
- 采用标记整理进行空间优化
- 采用增量标记进行效率优化
细节对比
- 新生代区域垃圾回收使用空间换时间
- 老生代区域垃圾回收不适合复制算法（因为数据过多）

Performance工具

GC的目的是为了实现内存空间的良性循环
良性循环的基石是合理使用
时刻关注才能确定是否合理
Performance提供多种监控方式
使用步骤
- 打开浏览器输入目标网址
- 进入开发人员工具面板，选择性能
- 开启录制功能，访问具体界面
- 执行用户行为，一段时间后停止录制
- 分析界面中记录的内存信息
内存问题的外在表现
- 页面出现延迟加载或经常性暂停
- 页面持续性出现糟糕的性能
- 页面的性能随时间延长越来越差
界定内存问题的标准
- 内存泄露：内存使用持续升高
- 内存膨胀：在多数设备上都存在性能问题
- 频繁垃圾回收：通过内存变化图进行分析（存在频繁的忽上忽下的情况）
监控内存的方式
- 浏览器任务管理器
- Timeline时序图记录
- 堆快照查找分离Dom（分离Dom指的是：不存在于页面上，仅存在在js代码当中的无用Dom元素）
- 判断是否存在频繁的垃圾回收
  分离DOM：
  - 界面元素存活在DOM树上
  - 垃圾对象时的DOM节点
  - 分离状态的DOM节点（分离：和界面元素分离）
    频繁的垃圾回收：
  - GC工作时应用程序是停止的
  - 频繁且过长的GC会导致应用假死
  - 用户使用中感知应用卡顿

代码优化

JavaScript中的内存管理自动完成
执行引擎会使用不同的GC算法
算法工作的目的是为了实现内存空间的良性循环
Performance工具监测内存变化
JavaScript是单线程机制的解释型语言

避免全局变量
- 全局变量挂载在window下，是左右作用域的顶端
- 全局变量至少有一个引用计数
- 全局变量存活更久（一直存在于执行栈，直到程序退出），持续占用空间
- 如果某个局部作用域出现了同名边来那个则会遮蔽或污染全局
- 如果使用中无法避免的全局变量可以缓存到局部
避免全局查找
- 目标变量不存在于当前作用域内，通过作用域链向上查找
- 减少全局查找降低时间消耗
- 减少不必要的全局变量定义
- 全局变量数据局部化
避免循环引用
- 多个对象间存在相互引用

采用字面量替换New操作

var a = [1, 2, 3] // 字面量
var a1 = new Array(3) // new操作
let aa = '123'; // 字面量
let aa1 = new String('123'); // new操作

setTimeout 替换 setInterval
因为setInterval在一些情况下，会导致前后两次定时器代码的执行间隔产生不可预料的变化，甚至会跳过某次定时器代码的执行，所以可用setTimeOut实现setInterVal的功能。
采用事件委托

合并循环变量和条件

for (var i = 0; i < arrList.length; i++) {
  console.log(arrList[i])
}
for (var i = arrList.length; i; i--) {
  console.log(arrList[i])
}

var arrList = new Array(1, 2, 3, 4, 5)

arrList.forEach(function(item) { // 最快
  console.log(item)
})

for (var i = arrList.length; i; i--) { // 第二
  console.log(arrList[i])
}

for (var i in arrList) { // 第三
  console.log(arrList[i])
}

在原型对象上新增实例对象需要的方法
在js当中，我们存在的构造函数，原型对象，实例对象。其中实例对象和构造函数都是可以指向原型对象的，在这个过程中，如果某个构造函数的内部具有一个成员方法，让后续的实例对象都需要频繁的调用，那么就可以直接把他添加在原型对象上，而不需要放在构造函数内部。
原理：在第一次new的时候会查找构造函数内部的属性，如果内有找到则会去找他的原型对象上面的属性。所以如果只有一次实例对象的调用，那么将成员方法添加在构造函数内部更好，避免第二次查找。但如果需要多天且频繁的调用实例对象或实例化对象，则放在原型链上面会更好，因为原型链上面的对象永远只存在于一个空间内，而构造函数内的成员方法，每实例化一次就需要分配空间让他创建一次，因此，如果需要频繁调用实例对象的话，挂载在原型链的方式更佳。
```
// 放在构造函数内部
var fn1 = function() {
  this.foo = function() {
    console.log(11111)
  }
}
let f1 = new fn1()
// 放在原型对象上
var fn2 = function() {}
fn2.prototype.foo = function() {
  console.log(11111)
}
let f2 = new fn2()
```

避开闭包陷阱

闭包的特点

外部具有指向内部的引用
在‘外’部作用域访问‘内’部作用域的数据

闭包使用不当容易造成内存泄露

function foo () {
  var el = document.getElementById('btn')
  el.onclick = function () {
    console.log(el.id)
  }
  el = null; // 当界面中的元素被清除之后，dom对他的引用就消失了，然后把代码对他的引用手动清除，这样那个元素就可以被回收了
}

避免属性访问方法的使用
Js中的面向对象：
- js不需要属性的访问方法，所有属性都是对外部可见的
- 使用属性访问方法只会增加一层重定义，没有访问的控制力

function Person() {
  this.name = 'icoder'
  this.age = 18
  this.getAge = function() {
    return this.age
  }
}
const p1 = new Person()
const a = p1.getAge()
function Person() {
  this.name = 'icoder'
  this.age = 18
}
const p2 = new Person()
const b = p2.age

节点添加优化（通过文档碎片的容器）
节点的添加操作必然会有回流和重绘

 for (var i = 0; i < 10; i++) {
      var oP = document.createElement('p')
      oP.innerHTML = i 
      document.body.appendChild(oP)
    }

    const fragEle = document.createDocumentFragment()
    for (var i = 0; i < 10; i++) {
      var oP = document.createElement('p')
      oP.innerHTML = i 
      fragEle.appendChild(oP)
    }

    document.body.appendChild(fragEle)

克隆优化节点操作

for (var i = 0; i < 3; i++) {
      var oP = document.createElement('p')
      oP.innerHTML = i 
      document.body.appendChild(oP)
    }

    var oldP = document.getElementById('box1')
    for (var i = 0; i < 3; i++) {
      var newP = oldP.cloneNode(false)
      newP.innerHTML = i 
      document.body.appendChild(newP)
    }

代码为什么需要优化

提高前端性能
实现优秀的内存管理

Japerf 使用流程

使用GitHub帐号登录
填写个人信息（非必填）
填写详细的测试用例信息（title，slug）
填写准备代码（DOM操作时经常使用）
填写必要有setup与teardown代码
填写测试代码片段

JSBench使用（性能测试）

JSBench网站需要脚本多次执行，取几率更高的结果。
关于性能测试，一段代码的执行速度只是其中的一项指标，所以注意：一段代码执行速率快，并不意味他的健壮性强，对于代码的执行的性能中涉及两个方面：1、空间换时间。2、时间换空间。

堆栈中的js执行过程

堆栈执行图

减少层级判断

function a () {
	let a1 = 1;
	if (a1 === 1) {
		return 1
	} else if (a1 === 2) {
		console.log('a1等于2')
	} else {
		console.log('a1等于3')
	}
}
function a () {
	let a1 = 1;
	if (a1 === 1) {
		console.log('a1等于1');
		return;
	}
	if (a1 === 2) {
		console.log('a1等于2')
		return
	}
	console.log('a1等于3')
}

减少作用域链查找层级

var name = 'aaa'
function foo () {
  name = 'sss' // 这里的name是属于全局的
  function baz () {
    var age = 20;
    console.log(age)
    console.log(name)
  }
  baz()
}
var name = 'aaa'
function foo () {
  var name = 'sss' // 这里加了var就不会往上再去查找了
  function baz () {
    var age = 20;
    console.log(age)
    console.log(name)
  }
  baz()
}

减少数据读取次数

function hasEle (ele, cls) {
  return ele.className == cls
}
function hasEle (ele, cls) {
  var clsname = ele.className
  return clsname == cls
}

减少循环体中的活动

var test = () => {
  var i;
  var arr = ['zce', 38, 'aaa']
  var len = arr.length
  for (i = 0; i<len;i++) {
    console.log(arr[1])
  }
}
var test = () => {
  var arr = ['zce', 38, 'aaa']
  var len = arr.length
  while(len--) {
    console.log(arr[i])
  }
}

减少声明及语句数

这点和上面的减少数据读取次数恰好相反，主要用哪个还取决于是否有声明的必要，如果一个嵌套变量使用多次的话，还是需要声明变量去赋值，但如果仅使用一次就没有必要

惰性函数与性能

惰性载入表示函数执行的分支只会在函数第一次掉用的时候执行，在第一次调用过程中，该函数会被覆盖为另一个按照合适方式执行的函数，这样任何对原函数的调用就不用再经过执行的分支了。

function addEvent (type, element, fun) {
    if (element.addEventListener) {
        element.addEventListener(type, fun, false);
    }
    else if(element.attachEvent){
        element.attachEvent('on' + type, fun);
    }
    else{
        element['on' + type] = fun;
    }
}

上面是注册函数监听的各浏览器兼容函数。由于，各浏览之间的差异，不得不在用的时候做能力检测。显然，单从功能上讲，已经做到了兼容浏览器。美中不足，每次绑定监听，都会对能力做一次检测。然而，真正的应用中，这显然是多余的，同一个应用环境中，其实只需要检测一次即可。
下面我们重写上面的addEvent：

function addEvent (type, element, fun) {
    if (element.addEventListener) {
        addEvent = function (type, element, fun) {
            element.addEventListener(type, fun, false);
        }
    }
    else if(element.attachEvent){
        addEvent = function (type, element, fun) {
            element.attachEvent('on' + type, fun);
        }
    }
    else{
        addEvent = function (type, element, fun) {
            element['on' + type] = fun;
        }
    }
    return addEvent(type, element, fun);
}

由上，第一次调用addEvent会对浏览器做能力检测，然后，重写了addEvent。下次再调用的时候，由于函数被重写，不会再做能力检测。

事件委托

事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

window.onload = function(){
    var oUl = document.getElementById("ul1");
    var aLi = oUl.getElementsByTagName('li');
    for(var i=0;i<aLi.length;i++){
        aLi[i].onclick = function(){
            alert(123);
        }
    }
}

上面的代码的意思很简单，相信很多人都是这么实现的，我们看看有多少次的dom操作，首先要找到ul，然后遍历li，然后点击li的时候，又要找一次目标的li的位置，才能执行最后的操作，每次点击都要找一次li；
那么我们用事件委托的方式做又会怎么样呢？

window.onload = function(){
    var oUl = document.getElementById("ul1");
   oUl.onclick = function(){
        alert(123);
    }
}

以上就是关于js性能方面的笔记啦！！！加油加油再加油~~~

菜鸟小七_hhh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript性能优化

内存管理内存：由可读写单元组成，表示一片可操作空间管理：人为的去操作一片空间的申请、使用和释放内存管理：开发者主动申请空间、使用空间、释放空间管理流程：申请—使用—释放JavaScript中的垃圾回收JavaScript中内存管理是自动的对象不再被引用时是垃圾对象不能从根上访问到时是垃圾JavaSrcipt中的可达对象可以访问到的对象就是可达对象（引用，作用域链）可达的标准是从根出发是否能被找到JavaScript中的根就可以理解为是全局变量对象GC算法介
复制链接

扫一扫