前端工程师面试题及答案.docx

前端工程师面试题及答案

一、基础篇（HTML/CSS/JS）

1.问：怎么实现“左侧固定300px，右侧自适应”的两栏布局？实际项目中要注意什么？

答：常用三种方案，各有适用场景：

方案1：Flex布局（推荐，兼容性好且简洁）

父容器设display:flex，左侧设width:300px，右侧设flex:1（占满剩余空间）。

注意：如果右侧有最小宽度需求，加min-width避免内容挤压（比如表格场景）。

方案2：Grid布局（适合复杂布局延伸）

父容器display:grid;grid-template-columns:300px1fr，一行两列，左侧固定右侧自适应。

方案3：传统Float（兼容旧项目）

左侧float:left;width:300px，右侧加margin-left:300px，但要给父容器加overflow:hidden清除浮动，避免高度塌陷。

实际项目中优先用Flex/Grid，除非要兼容IE8及以下（这时用Float）。

2.问：闭包在项目里怎么用？会有什么问题？怎么解决？

答：闭包核心是“函数嵌套函数，内层函数引用外层函数变量，且内层函数被外部引用”，实际常用场景：

场景1：封装模块（早期无ES6Module时）

比如封装工具函数：

constutils=(function(){

constprivateVar=私有变量，外部访问不到;//闭包保存私有变量

return{

getPrivate:()=privateVar,

formatTime:(time)=time.toLocaleString()//对外暴露的方法

}

})()

场景2：防抖节流（保存定时器ID）

防抖函数里的定时器ID，靠闭包保存才能在下次调用时清除：

functiondebounce(fn,delay){

lettimer=null;//闭包保存timer，不会每次调用都重置

return(...args)={

clearTimeout(timer);

timer=setTimeout(()=fn.apply(this,args),delay);

}

}

问题：闭包会让外层函数的变量一直存在内存中，若滥用（比如循环里创建闭包没处理）会导致内存泄漏。

解决：不用时主动释放变量（比如设为null），避免不必要的闭包（比如能直接传参就不用闭包）。

3.问：事件委托是什么？实际项目中什么时候用？举个例子

答：事件委托是“把子元素的事件绑定到父元素上，靠event.target判断触发元素”，核心是利用事件冒泡。

用的场景：子元素是动态生成的（比如列表增删项），不用每次增删都绑定/解绑事件。

例子：动态列表点击项显示内容：

ulid=list

!--子项会动态添加，比如从接口拿数据渲染--

/ul

script

//绑定到父元素ul，不用给每个li绑事件

document.getElementById(list).addEventListener(click,(e)={

//判断点击的是li（避免点到ul的空白处）

if(e.target.tagName.toLowerCase()===li){

alert(e.target.textContent);//拿到点击的li内容

}

});

//动态添加li时，不用再绑事件

constaddLi=(text)={

constli=document.createElement(li);

li.textContent=text;

list.appendChild(li);

};

addLi(第一项);

addLi(第二项);

/script

二、进阶篇（框架/异步）

1.问：React中虚拟DOM和Diff算法的作用？实际项目中key为什么不能用索引？

答：先讲核心逻辑：

虚拟DOM是“用JS对象模拟真实DOM结构”，比如真实DOM的divclass=box123/div，虚拟DOM是{type:div,props:{className:box},children:[123]}。

Diff算法是“对比新旧虚拟DOM的差异，只更新有变化的真实DOM”，避免全量重绘（真实DOM操作比JS计算慢得多，能提升性能）。

key不能用索引的原因：如果列表有增删、排序操作，索引会变化，导致Diff算法误判“元素复用”，出现渲染错误。

例子：