前端中高级面试知识点解析-优快云博客

本文链接：https://blog.youkuaiyun.com/JackieMing0328/article/details/93599718

本文探讨了前端中高级面试的重点，包括内存泄漏与垃圾回收机制、闭包的原理与应用、webpack的优化策略，以及算法和浏览器缓存的相关知识。深入理解这些概念对提升前端开发技能至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

内存泄漏和垃圾回收机制

内存泄漏

不再用到的内存，没有及时释放。便称之为内存泄漏
定义：程序中已动态分配的堆内存，由于某种原因，程序未释放或无法释放引发的各种问题，js中可能出现的内存泄漏情况结果：变慢，崩溃，延迟大等
原因：
· 全局变量
· dom清空时还存在引用
· ie中使用闭包
· 定时器未清理
· 子元素存在引起的内存泄漏
避免策略：
1. 减少不必要的全局变量，及时对无用的数据进行垃圾回收
2. 避免死循环之类的
3. 减少层级过多的引用

垃圾回收机制
语言引擎有一张‘引用表’，保存了内存里面所有的资源（通常是各种值）的引用次数。如果一个值的引用次数是0，就表示这个值不再用到了，因此可以将这块内存释放

const arr=[1,2,3,4]

这个值[1,2,3,4]便会占用内存。变量arr是仅有的对这个值的引用，因此引用次数为1.尽管后面的代码没有用到arr，它还是会持续占用内存，可以通过 arr = null 释放

Node提供 process.memoryUsage()方法，返回结果包含内存占用信息
es6 提供 weakSet，weakMap 他们对于值的引用都是不计入垃圾回收机制的
垃圾回收机制精选

闭包

闭包的存在，是对变量作用域的需求引起的
我们有全局变量和局部变量两种作用域
因为我们函数内部可以直接读取全局变量，而在函数外部无法直接读取函数内的局部变量
那我们如何从外部读取局部变量呢

function f1(){
    var n=999;
    function f2(){
        alert(n); // 999
    }
}

在上面的代码中，函数f2就被包括在函数f1内部，这时f1内部的所有局部变量，对f2都是可见的。但是反过来就不行，f2内部的局部变量，对f1就是不可见的。这就是Javascript语言特有的"链式作用域"结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。
既然f2可以读取f1中的局部变量，那么只要把f2作为返回值，我们不就可以在f1外部读取它的内部变量了吗

function f1(){
    var n=999;
    reutrn function f2(){
        alert(n); // 999
    }
}

闭包就是能够读取其他函数内部变量的函数。

闭包的用途
一个是可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

使用闭包的注意点

1.由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

2.闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

var name = "The Window";
　　var object = {
　　　　name : "My Object",
　　　　getNameFunc : function(){
　　　　　　return function(){
　　　　　　　　return this.name;
　　　　　　};
　　　　}
　　};
　　alert(object.getNameFunc()());  // The Window

var name = "The Window";
　　var object = {
　　　　name : "My Object",
　　　　getNameFunc : function(){
　　　　　　var that = this;
　　　　　　return function(){
　　　　　　　　return that.name;
　　　　　　};
　　　　}
　　};
　　alert(object.getNameFunc()());  // My Object