浅谈web应用的内存优化

随着 Web 应用复杂程度愈来愈高，以及 NodeJS 大规模投入生产环境，许多 Web 应用都会长时间运行， JavaScript 的内存管理显得更为重要。

JavaScript 具有自动回收垃圾的机制， 执行环境会负责管理代码在执行环境过程当中使用的内存，将某些再也不被使用的的变量所占用的内存释放掉，正因如此，大多数状况咱们在前端开发的时候，并非那么关注咱们的页面用了多少内存，是否合理，需不须要优化。

JavaScript 基础中有不少重要的知识点是和内存相关的，好比深拷贝和浅拷贝、闭包、原型、引用数据类型和引用传递等。

固然，关于 JS 的内存空间和内存相关的知识已经有不少专业的文章解释的很详细了，这里就再也不赘述了。

好比关于 JS 内存空间的知识能够看看：内存空间详细图解

关于内存周期和垃圾回收的知识能够阅读参考 MDN 的文章，其余文章无外乎也是根据这个来介绍的：Memory_Management

关于 JavaScript 内存泄漏也能够看一下阮一峰老师的文章 JavaScript 内存泄漏教程

在 Web 应用开发中，咱们应该注意：

1. 避免没有必要全局变量的使用
前端开发者都知道，在局部做用域中，当函数执行完毕，局部变量也就没有存在的必要了，它很容易被垃圾回收器回收，当使用全局变量定义值时，垃圾回收器，很难判断全局变量须要何时释放内存空间，所以是不会去对其进行回收销毁的。而该变量会一直存在老生代堆内存中，直到页面被关闭。

function setName () {
     name = "alloy";
}
 
// 等价
 
function setName () {
        window.name = "alloy"
}
复制代码

另一种意外状况是；

function setName (name) {
    this.name = name;
}
 
setName("alloy");
复制代码

咱们能够在 JS 文件的开头经过添加"use strict" 开启严格的解析模式，来避免一些意外建立的全局变量。

2. 及时解除引用

若是必需要一个全局变量来存储大量数据，那么请确保在用完以后将其赋值为 null。

delete 操做符用于删对象的某个属性；若是没有指向这个属性的引用，那它最终会释放。

但注意的一点是，尽可能不要在须要密集运算的函数中去使用 delete，这极可能会引起浏览器在不恰当的时候的 GC，和其余语言同样，JavaScript 的 GC 策略没法避免 GC 时中止响应其余操做，而 JavaScript 的 GC 在 50ms 甚至以上，对普通应用还好，若是是对于操做频繁的 Web 应用或者游戏来讲，就比价烦恼了。

const Room = {
        desks: 10,
        chairs: 22
};
 
console.log(Room.desks); // 10;
 
delete Row.desks;
 
console.log(Room.desks); // undefined
复制代码

有时候咱们虽然用 removeChild 移除了 button，可是还在 node 对象里保存着 #button 的引用，DOM 元素还在内存里面，须要及时解除引用。

var node = {
        button: document.getElementById('button');
};
 
document.body.removeChild(document.getElementById('button'));
复制代码

3. 减小对象的建立
垃圾回收周期性运行，若是分配的内存很是多，或者新建很不少实例的话，那么回收工做也会很辛苦。

尽可能避免在常常调用的方法中循环使用 new 对象，并且还要花时间对这些对象进行垃圾回收和处理。

设计模式中的享元模式就是为了减小对象的屡次建立而来的。在咱们能够控制的范围内，最大限度的重用对象。

4. 内存不是缓存
缓存在需求开发中举足轻重，可是不少时候咱们会把许多大数据缓存在内存中，致使咱们的内存占用始终处于高位，内存对任何程序开发都是寸土寸金 的，若果不是很重要的资源，请不要直接放在内存中，或者制定过时机制，自动销毁过时缓存。

5. 避免复杂的递归调用；
一般状况下，简单的递归调用还不至于致使堆栈溢出，但遇到复杂且每次调用须要 在栈里存储大量信息的时候，成千上万个此类空间累积起来，很容易就超过了栈空间。

6. 合理使用的 IndexedDB
其实这个是和 JS 关系不是很大，可是对于 Web 应用的影响却十分重要，曾经我遇到过一个用户案例，因为长时间的本地数据写入，和一些上报日志没有被及时清除，致使用户的浏览器中对应域名下的 IndexedDB 存储高达 12GB，浏览器在访问对应域名的时候，也能够初始化 IndexedDB 和读取本地存储的数据，而面对如此庞大的数据，浏览器内存暴涨，最后崩溃，避免过分依赖 IndexedDB，无脑写入数据而不作按期清理。

总结

这篇分享主要总结了咱们在 Web 应用，可能会遇到的一些状况和注意的事情。

不少时候只要咱们在编码的时候多加注意，能够避免不少问题。

转载自AlloyTeam： www.alloyteam.com/2019/07/138…