2026年前端开发工程师高级面试题集

2026年前端开发工程师高级面试题集一、JavaScript核心基础（共5题，每题8分）1.题目：javascriptleta={x:1};letb=a;b.x=2;console.log(a.x);//输出什么？为什么？答案与解析：输出`2`。因为`a`和`b`指向同一个对象，修改`b.x`会直接改变对象的`x`属性，所以`a.x`也会变成`2`。2.题目：javascriptasyncfunctionasync1(){console.log('async1start');awaitasync2();console.log('async1end');}asyncfunctionasync2(){console.log('async2start');console.log('async2end');}console.log('scriptstart');async1();console.log('scriptend');输出顺序是什么？解释`await`的原理。答案与解析：输出顺序：1.`scriptstart`2.`async1start`3.`async2start`4.`async2end`5.`async1end`6.`scriptend``await`会暂停当前异步函数的执行，直到Promise解决后再继续。但`async`函数本身仍是同步执行，所以`async1`和`async2`会按顺序执行。3.题目：javascriptconstobj={a:1};functiontest(){obj.a=2;obj={b:3};}test();console.log(obj.a);//输出什么？为什么？答案与解析：输出`1`。在函数`test`中，`obj={b:3}`是重新赋值了`obj`变量，而不是修改原对象的`a`属性。外部的`obj`仍然是`{a:1}`。4.题目：javascriptconstarr=[1,2,3];arr.forEach(item=>item++);console.log(arr);//输出什么？为什么？答案与解析：输出`[1,2,3]`。`forEach`的回调函数是`item++`，但不会修改原数组，因为回调函数中的`item`是浅拷贝，不是引用。5.题目：javascriptfunctionA(){this.x=1;}functionB(){this.y=2;}A.prototype=newB();constinstance=newA();console.log(instance.x,instance.y);//输出什么？为什么？答案与解析：输出`1undefined`。`A`的原型指向`B`的实例，所以`instance.x=1`。但`instance.y`不存在，因为`B`的构造函数没有被显式调用。二、React与Vue框架（共5题，每题8分）1.题目：React中，`React.memo`和`PureComponent`的区别是什么？何时使用？答案与解析：`React.memo`是高阶组件，用于包装函数组件，仅在props变化时重新渲染。`PureComponent`是类组件的优化，通过`shouldComponentUpdate`实现浅比较。两者核心相同，但`memo`更灵活（可自定义比较函数）。适用于props变化不频繁的场景。2.题目：Vue3的`ref`和`reactive`的区别是什么？如何选择？答案与解析：`ref`用于单个值（自动转为响应式），`reactive`用于对象/数组（深度响应式）。选择：-单个数据用`ref`，如`ref(count)`。-对象用`reactive`，如`reactive({obj:{a:1}})`。3.题目：React中，如何优化组件性能？列举3种方法。答案与解析：1.`React.memo`避免不必要的渲染。2.`useCallback`缓存回调函数。3.`useMemo`缓存计算结果。4.题目：Vue3中，`v-memo`指令的作用是什么？答案与解析：`v-memo`是Vue3新增的memoization指令，用于缓存子组件渲染结果，减少重复渲染。适用于计算密集型子组件。5.题目：React中，`useEffect`的依赖项为空数组`[]`时，有什么特点？答案与解析：组件挂载后执行一次，且仅执行一次。适用于副作用操作（如设置定时器），不会在更新时重复执行。三、CSS与布局（共5题，每题8分）1.题目：如何实现一个100%宽的固定高度导航栏，在移动端自适应？答案与解析：css.navbar{width:100%;height:50px;background:#333;position:fixed;top:0;left:0;}注意`z-index`和`overflow:hidden`避免内容被遮挡。2.题目：Flexbox和Grid的区别是什么？何时使用？答案与解析：-Flexbox：一维布局（行/列），适合组件对齐。-Grid：二维布局（行/列/交叉轴），适合整体页面布局。选择：Flexbox用于列表或组件，Grid用于复杂网格。3.题目：如何实现一个水平居中且等宽的无限轮播图？答案与解析：css.carousel{display:flex;justify-content:space-around;overflow:hidden;}结合`transform`实现平滑滚动。4.题目：CSS变量和传统变量的区别是什么？答案与解析：-CSS变量：`var(--name)`，支持嵌套和计算，适合主题切换。-传统变量：`#color`，仅单一值，不支持计算。5.题目：如何实现一个响应式水滴形按钮？答案与解析：css.button{border-radius:50%;transition:all0.3s;}.button:hover{border-radius:20%;}利用`border-radius`和`:hover`实现变形。四、性能优化（共5题，每题8分）1.题目：前端性能优化的关键指标有哪些？如何提升？答案与解析：指标：LCP、FID、CLS。优化：-LCP：优化图片大小和格式（WebP），使用`loading="lazy"`。-FID：减少重排重绘（`transform`代替`margin`），使用`requestAnimationFrame`。-CLS：避免`layoutshift`（固定高度占位）。2.题目：如何实现图片懒加载？答案与解析：html<imgsrc="placeholder.jpg"data-src="real.jpg"loading="lazy">或使用`IntersectionObserver`监听进入视口。3.题目：Webpack的`CodeSplitting`如何实现？答案与解析：js//entry.jsimport('lodash').thenlodash=>{console.log(lodash);};或配置`optimization.splitChunks`。4.题目：如何减少HTTP请求？答案与解析：-合并JS/CSS文件。-使用雪碧图或SVG。-CDN加速。5.题目：如何优化长列表滚动性能？答案与解析：-使用`requestAnimationFrame`分帧渲染。-`IntersectionObserver`懒加载子项。-`transform`代替`margin`。五、跨端与工程化（共5题，每题8分）1.题目：Vite和Webpack的区别是什么？Vite的优势是什么？答案与解析：-Vite：基于ES模块预构建，热更新更快。-优势：开发环境启动快，按需编译。2.题目：如何实现PWA（ProgressiveWebApp）？答案与解析：-`manifest.json`：定义应用图标。-`serviceworker`：离线缓存。-`localStorage`：本地数据存储。3.题目：如何实现Web组件（CustomElements）？答案与解析：javascriptclassMyElementextendsHTMLElement{constructor(){super();this.attachShadow({mode:'open'});this.shadowRoot.innerHTML='<p>Hello</p>';}}customElements.define('my-element',MyElement);注册自定义标签。4.题目：微前端（MicroFrontends）的优缺点是什么？答案与解析：优点：-模块化开发。-多团队协作。缺点：-通信复杂。-构建配置高。5.题目：如何实现跨浏览器兼容性？答案与解析：-使用`autoprefixer`自动添加前缀。-标准化API（如`Promise`代替`window.onload`）。-测试工具：`Babel`、`CanIUse`。六、安全与网络（共5题，每题8分）1.题目：XSS攻击的原理是什么？如何防御？答案与解析：原理：注入恶意脚本。防御：-输入过滤（`textContent`代替`innerHTML`）。-CSP（`Content-Security-Policy`）。2.题目：CSRF攻击的原理是什么？如何防御？答案与解析：原理：伪装用户请求。防御：-Token验证（`CSRFtoken`）。-SameSiteCookie。3.题目：HTTP和HTTPS的区别是什么？答案与解析：-HTTP：明文传输。-HTTPS：加密传输（TLS/SSL）。HTTPS更安全，但消耗更多资源。4.题目：如何优化缓存策略？答案与解析：-`Cache-Control`：控制缓存时长。-`ETag`：验证缓存有效性。-ServiceWorker缓存API。5.题目：如何检测浏览器兼容性问题？答案与解析：-`CanIUse`查API兼容性。-测试工具：`BrowserStack`、`Selenium`。七、Node.js与后端交互（共5题，每题8分）1.题目：如何用Node.js实现RESTfulAPI？答案与解析：javascriptconstexpress=require('express');constapp=express();app.get('/users',(req,res)=>res.json([{id:1,name:'Alice'}]));app.listen(3000,()=>console.log('Serverrunning'));使用`express`框架。2.题目：如何用Axios实现异步请求？答案与解析：javascriptaxios.get('/api/data').then(res=>console.log(res.data));支持Promise语法。3.题目：如何实现WebSocket通信？答案与解析：javascriptconstWebSocket=require('ws');constwss=newWebSocket.Server({port:8080});wss.on('connection',ws=>{ws.on('message',msg=>console.log(msg));});双向通信。4.题目：如何用Node.js处理文件上传？答案与解析：javascriptconstexpress=require('express');constmulter=require('multer');constapp=express();constupload=multer({dest:'uploads