前端面试题（侧重项目实操）.docx

前端面试题（侧重项目实操）

前端面试题（侧重项目实操）

一、基础与实际应用

做项目时肯定用过flex布局吧？说下你是怎么用flex实现“左侧固定300px，右侧自适应”的布局？实际开发中遇到过flex在不同浏览器显示不一致的情况吗？怎么解决的？

项目里处理过异步请求吧？比如调接口拿数据的时候，用的是Promise还是async/await？说说这两种方式在实际使用中的区别，你更习惯用哪种，为什么？

平时写CSS时，怎么处理“父子元素margin重叠”的问题？举个你遇到过的例子，最后是怎么解决的？

二、框架与业务结合

用Vue开发时，组件之间传值有哪些方式？如果是爷孙组件传值，你会用哪种方式？实际项目里有没有遇到过传值导致的bug（比如数据更新不及时）？怎么排查的？

React的hooks用过哪些？比如useState和useReducer，在什么场景下会选useReducer而不是useState？举个你项目里的例子说说。

做过单页应用（SPA）吧？路由跳转用的是hash模式还是history模式？两种模式在部署到服务器时有什么坑？比如刷新页面404的问题，你是怎么解决的？

三、性能优化与兼容性

项目上线后发现页面加载很慢，你会从哪些方面排查？比如首屏加载时间长，可能是哪些原因导致的？说下你实际做过的优化措施（比如图片、打包方面）。

处理过移动端适配吗？用的是rem、vw还是flexible方案？说说不同方案在实际项目中的优缺点，比如在iPhone和安卓上有没有遇到过适配问题？

怎么优化大量DOM操作的性能？比如要渲染1000条列表数据，直接循环appendChild会有什么问题？你会用什么方法提升性能？

四、场景题与代码题

假设有个需求：做一个“返回顶部”按钮，滚动到距离顶部200px时显示，点击平滑回到顶部。用原生JS怎么实现？需要注意哪些细节（比如滚动过程中突然刷新页面）？

写一个防抖函数（debounce），要求：连续触发事件时，只在最后一次触发后300ms执行回调。说说你在项目里用防抖处理过什么场景（比如搜索输入框）。

遇到过接口返回数据格式和前端预期不一致的情况吗？比如后端返回的日期是时间戳，而前端需要显示“2024-09-01”，你是怎么统一处理的？有没有封装过工具函数？

（面试官追问参考）

你说用async/await处理异步，那如果一个接口依赖另一个接口的返回结果，怎么写更优雅？如果其中一个接口报错了，怎么捕获错误？

刚才说的图片优化，具体怎么实现懒加载的？用的是IntersectionObserver还是监听scroll事件？两种方式性能上有什么区别？

做Vue项目时，为什么要用key？你遇到过不用key导致的问题吗？比如列表渲染错乱，具体是怎么表现的？

（注：这些题更看重你结合实际项目的理解，能说出自己踩过的坑和解决思路，比背API文档更有说服力。）