前端中级面试题及答案.docxVIP

前端中级面试题及答案

一、JavaScript核心

问：原型链继承中，子类实例修改父类原型上的引用类型属性，会影响其他子类实例吗？为什么？举个例子说明

答：会影响。因为所有子类实例共享父类原型对象，引用类型属性（如数组、对象）存的是内存地址，修改一个实例的该属性，本质是修改原型上的同一个地址数据。

比如：

functionParent(){}

Ptotype.arr=[1,2];//父类原型上的引用类型

constchild1=newParent();

constchild2=newParent();

child1.arr.push(3);

console.log(child2.arr);//输出[1,2,3]，child2的arr也变了

解决办法：在子类构造函数里重新定义该属性（覆盖原型上的引用类型），或者用ES6Class的super()+自身属性初始化。

问：async/await里如果多个await请求有依赖关系，怎么优化执行效率？没有依赖关系呢？

答：有依赖关系时（比如第二个请求需要第一个的返回值），只能按顺序await，没法并行，但可以把无关逻辑提前（比如先初始化其他数据）；

没有依赖关系时，用Promise.all()批量执行，减少等待时间。比如：

//无依赖，优化前（串行，总耗时=3000ms）

awaitfetchA();//1000ms

awaitfetchB();//1000ms

awaitfetchC();//1000ms

//优化后（并行，总耗时≈1000ms）

const[resA,resB,resC]=awaitPromise.all([fetchA(),fetchB(),fetchC()]);

注意：Promise.all()有一个失败就整体失败，若要允许部分失败，可用Promise.allSettled()。

问：事件循环中，宏任务和微任务的执行顺序是什么？举个包含定时器、Promise、async的例子，说出输出结果

答：执行顺序是：先执行同步代码→清空当前微任务队列→执行一个宏任务→再清空微任务队列→循环。

微任务优先级：Promise.then/catch/finallyasync/await（本质是Promise语法糖）queueMicrotask；

宏任务：setTimeout/setIntervalDOM事件fetch回调。

例子：

console.log(1);//同步

setTimeout(()=console.log(2),0);//宏任务

newPromise((res)={

console.log(3);//同步（Promise构造器里的代码是同步的）

res();

}).then(()=console.log(4));//微任务

asyncfunctionfn(){

awaitPromise.resolve();//await后是微任务

console.log(5);

}

fn();

console.log(6);//同步

输出顺序：1→3→6→4→5→2

二、DOM与浏览器

问：动态渲染的列表（比如滚动加载更多），怎么给列表项绑定点击事件更高效？为什么？

答：用事件委托（事件冒泡），把事件绑定在列表的父容器上，而不是每个列表项单独绑。

原因：①减少事件绑定数量（父容器1个vs子项N个），节省内存；②新增列表项时不用重新绑事件（父容器已存在，冒泡能触发）。

代码示例：

constlist=document.getElementById(list);

list.addEventListener(click,(e)={

//判断点击的是列表项（排除父容器本身）

if(e.target.tagName===LI){

console.log(点击了列表项,e.target.dataset.id);

}

});

问：为什么直接操作DOM（比如循环appendChild）会卡顿？怎么优化？

答：因为每次DOM操作都会触发“重排”（回流）或“重绘”，浏览器要重新计算DOM布局、绘制页面，频繁操作会导致浏览器频繁更新，造成卡顿。

优化方法：

①用DocumentFragment批量操作：先把所有子元素加到Fragment（内存中的容器，不触发DOM更新），最后一次性append到真实DOM；

②先隐藏DOM（display:none），操作完再显示（只触发2次重排：隐藏、