前端的内存处理

Posted →_→空

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端的内存处理相关的知识,希望对你有一定的参考价值。

内存的生命周期

1.内存分配:声明变量,函数,对象的时候,js会自动分配
2.内存使用:调用的时候
3.内存回收:使用完毕,js判断

js垃圾回收

1.引用计数垃圾回收

a对象对b对象有访问权限,则a引用b对象
没有引用对象则标记为垃圾
缺陷:循环引用:a引用b,b引用a=>内存泄漏

2.标记清除算法

在运行的时候给存储在内存的所有变量加上标记
从根部触发,能触及的对象,标记清除
哪些有标记的视为即将删除的变量

js常见的内存泄漏

1.全局变量(赋值为null,清除)
2.未被清除的定时器和回调(clearTimeout(time))
3.闭包 内部函数有权访问包含他的函数的变量
4.dom的引用
从而,避免内存泄漏的方法:
减少不必要的全局变量,清除定时器,及时解除引用


sizeof()函数,实现传入object,判断所占内存

const data={
    a:111,
    b:\'ccc\',
    2222:false
}
/*
number:8字节
string:每个长度2字节
boolean:4字节
*/
const seen=new WeakSet()
function sizeOfObject(object){
    if(object===null) return 0
    let bytes=0;
    //对象里的key也占用内存空间
    const properties=Object.keys(object)
    for(let i=0;i<properties.length;i++){
        const key=properties[i];
        bytes+=calculator(key)

        if(typeof object[key]===\'object\' &&object[key]!==null){

            if(seen.has(object[key])){
                continue
            }
            seen.add(object[key])
        }
        bytes+=calculator(object[key])

    }
    return bytes
}
function calculator(object){
    const objectType=typeof object
    switch(objectType){
        case \'string\':{
            return object.length*2
        }
        case \'boolean\':{
            return 4
        } case \'number\':{
            return 8
        } case \'object\':{
            if(Array.isArray(object)){
                return object.map(item=>calculator(item)).reduce((res,current)=>res+current,0)
            }else{
                return sizeOfObject(object)
            }
        }
        default:{
            return 0
        }
    }
}
console.log(sizeOfObject(data))

以上是关于前端的内存处理的主要内容,如果未能解决你的问题,请参考以下文章

前端防扒代码片段

前端防扒代码片段

前端防扒代码片段

前端防扒代码片段

前端开发常用代码片段(中篇)

前端开发常用js代码片段