前端高级工程师面试题及答案.docxVIP

前端高级工程师面试题及答案

一、核心原理与底层理解

问：请结合实际场景，说说闭包的本质和常见应用，以及使用时需要注意的问题？

答：闭包本质是「函数嵌套函数时，内层函数引用外层函数变量，导致外层函数执行上下文不被GC回收」的现象。

实际应用比如：①防抖节流（用闭包保存定时器ID，避免重复创建）；②模块封装（早期无ESModule时，用闭包包裹私有变量，只暴露接口，比如(function(){leta=1;window.getA=()=a})()）；③ReactHooks（useState的状态保存依赖闭包，比如循环中使用setTimeout需注意闭包捕获的是循环时的变量快照）。

注意点：①避免内存泄漏（比如DOM事件绑定后未解绑，闭包持有DOM引用导致无法回收，需在组件卸载时清除事件）；②避免过度使用（比如频繁创建闭包会增加内存占用，像循环中定义函数可提到循环外）。

问：浏览器和Node的EventLoop有什么区别？请举例说明微任务和宏任务的执行顺序？

答：核心区别在「微任务执行时机」和「宏任务队列数量」：

浏览器：1个宏任务队列（如script、setTimeout、DOM事件），1个微任务队列（如Promise.then、MutationObserver）；执行顺序是「执行完一个宏任务→清空所有微任务→渲染→下一个宏任务」。

Node（11+版本后接近浏览器）：早期有6个宏任务队列（如timers、poll、check等），微任务分nextTick（优先级最高）和othermicrotasks；执行顺序是「执行完一个宏任务→清空nextTick队列→清空其他微任务→下一个宏任务队列」。

例子：setTimeout(()=console.log(1),0);Promise.resolve().then(()=console.log(2));console.log(3)

浏览器/node11+输出：3→2→1（先执行同步代码3，再清微任务2，最后宏任务1）；node10及以下若timers队列无其他任务，输出一致，若有多个队列则可能不同。

二、工程化与构建优化

问：webpack的tree-shaking原理是什么？实际项目中遇到过tree-shaking不生效的情况吗？怎么解决的？

答：原理是「基于ESModule的静态分析（import/export），剔除代码中未被引用的死代码」，需满足两个条件：①代码使用ESModule（不能是CommonJS的require，因为是动态引入）；②开启production模式（默认启用TerserPlugin压缩，删除死代码）。

实际遇到过不生效的情况：①引入的第三方库用CommonJS打包（比如lodash@4.x默认是CommonJS，需引入lodash-es版本）；②代码中存在副作用（比如import./style.css，webpack默认认为CSS有副作用，不会tree-shaking，需在package.json配置sideEffects:[*.css]，明确只有CSS有副作用，其他文件无副作用）；③动态引入（比如import(${a}.js)，静态分析无法确定引用，需避免不必要的动态引入）。

问：前端工程化中，如何设计一套可扩展的组件库打包方案？需要考虑哪些点？

答：核心是「支持多场景引入（全量/按需）、保证产物质量（体积/兼容性）、提升开发体验」，方案设计如下：

构建工具：用rollup（适合库打包，Tree-shaking更彻底）+postcss（处理CSS）；

产物类型：①ESM（供现代项目import）；②CommonJS（供Node或老项目require）；③UMD（供CDN引入）；④样式单独打包（支持CSSModules，按需引入时加载对应样式）；

兼容性：用babelpreset-env配置targets（比如支持IE11+），配合core-js按需polyfill（避免全量引入增大体积）；

可扩展点：①支持主题定制（通过postcss变量或less/sass的modifyVars）；②支持组件按需引入（配合babel-plugin-import，比如import{Button}fromxxx-ui自动转成importButtonfromxxx-ui/es/Button）；③集成文档工具（如Storybook，方便组件预览和API文档生成）。

三、