美文网首页
js语言性能优化以及相关概念理解

js语言性能优化以及相关概念理解

作者: 池鱼_故渊 | 来源:发表于2021-01-06 23:38 被阅读0次

概要

  • 内存管理
  • 垃圾回收与常见的 GC 算法
  • V8 引擎的垃圾回收
  • performance 工具
  • 代码优化示例

内存管理

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

我们来看 js 语言是怎么做到这个流程

// 因为js没有提供申请内存的管理的api 所以当我们主动定义变量的时候js会主动给我们分配内存空间
// 申请
let obj = {};
//使用
obj.name = "wj";
// 同样js也没有提供api给我释放内存空间,下面只是模拟了释放内存空间
//释放
obj = null;

js 垃圾回收

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

可达对象

  • 可以访问到的对象就是可达对象
  • 可达的标准就是从根出发是否能被找到
  • js 的根可以理解为全局变量

GC 算法介绍

  • GC 就是垃圾回收的缩写
  • GC 可以找到内存中的垃圾并释放和回收空间
  • GC 是一种机制,垃圾回收器完成具体的工作
  • 工作内容就是查找垃圾释放空间回收空间
  • 算法就是工作时查找和回收所遵循的规则

引用计数算法原理介绍

核心思想:设置引用数,判断当前引用数是否为 0

const user = { anme: "q" };
function fn() {
  const name = "11";
}
fn();
//当fn执行完毕后,全局变量是无法找到fn函数内的name属性,此时name的引用数会变成0 回收掉,而user则不会被回收

优点:

  • 发现垃圾立即回收
  • 最大限度减少程序暂停

缺点:

  • 无法回收循环引用的对象
  • 时间开销大
function foo(){
    const user1 = {}
    const user2 = {}
    user1.name = user2
    user2.name  user1
}
foo()
// 当函数执行完后,由于user1和user2循环引用,此时计数是不为0的,所以计数不能回收垃圾,因为函数已经执行完,user1和user2没有存在的必要了,所以造成了内存浪费

标记清除算法实现原理

  • 核心思想:分标记和清除两个阶段
  • 遍历所有对象找标记活动对象
  • 遍历所有对象清除没有标记的对象
  • 回收空间

优点:

  • 可以解决对象循环引用的问题
    缺点:
  • 会产生空间碎片化,不能是空间使用到最大化

标记整理算法

和标记清除算法很相似,只不过清除之前会整理标记的内容,然后再清除垃圾内容,可以使空间利用最大化

V8 引擎

  • V8 采用即时编译
  • V8 内存设限(64 位 1.5G 32 位 700M)
  • v8 内存分为新生代和老生代
  • v8 垃圾回收常见的 GC 算法(标记整理,增量标记,标记清除)

代码优化

  • 慎用全局变量
    • 全局变量定义在全局执行上下文,是所有作用域的顶端
    • 全局执行上下文一直存在于上下文执行栈,直到程序退出
    • 如果某个局部作用域出现了同名变量则会遮蔽或者污染全局变量
  • 缓存全局变量
    • 将无法避免使用的全局变量缓存在局部作用域中
  • 通过原型新增方法
  • 避开闭包陷阱(使用不当容易造成内存泄漏)
  • 避免属性访问方法使用
  • 选择最优的循环方式( forEach性能最好>for>for in
  • 节点的添加
// 第一种
for (var i = 0; i < 10; i++) {
  var op = document.createElement("p");
  op.innerHTML = i;
  document.body.appendChild(op);
}
// 第二种 文档碎片添加
const frag = document.createDocumentFragment();
for (var i = 0; i < 10; i++) {
  var op = document.createElement("p");
  op.innerHTML = i;
  frag.appendChild(op);
}
document.body.appendChild(frag);

// 第二种性能更好一点

相关文章

  • js语言性能优化以及相关概念理解

    概要 内存管理 垃圾回收与常见的 GC 算法 V8 引擎的垃圾回收 performance 工具 代码优化示例 内...

  • Three.js 入门详解

    本文主要是讲解 Three.js 的相关概念,帮助大家对 Three.js 以及相关知识形成比较完整的理解。今年来...

  • 性能优化 - 相关概念

    1. 内存泄漏和内存抖动 内存泄漏:GC,垃圾回收器,在内存吃紧时候回收内存时,无法回收某一块不再使用的区域...

  • Android性能优化——性能优化的难题总结

    前言 现在都在谈性能优化或者在面试的时候被问到性能优化相关问题,那么我们为什么要做性能优化呢?以及性能优化的难点是...

  • 前端性能优化

    性能优化 参考 性能优化是一个发散性问题,对于没有实践经验的人来讲,是比较难把握的。涉及网络相关,JS相关,CSS...

  • 前端性能优化

    js性能小贴士——优化循环 前端网页与js性能优化 我总结的js性能优化的小知识 提高 web 应用性能之 Jav...

  • 前端性能 优化 大全

    js性能小贴士——优化循环 前端网页与js性能优化 我总结的js性能优化的小知识 提高 web 应用性能之 Jav...

  • 前端进阶(9) - js 性能优化利器:prepack

    js 性能优化利器:prepack 1. js 性能优化 js 性能优化不外乎从三个角度入手: 1.1 开发者在编...

  • Android性能优化

    Android性能优化 简介 这篇文章主要打算从几个方面讲解一下怎么去对app进行性能优化。不打算涉及任何概念相关...

  • 前端性能优化

    我们都知道对于Web应用来说性能很重要。然而性能优化相关的知识却非常的庞大并且杂乱。对于性能优化需要做些什么以及性...

网友评论

      本文标题:js语言性能优化以及相关概念理解

      本文链接:https://www.haomeiwen.com/subject/lfdaoktx.html