1. 前端面试基础知识整理为什么从Day-7开始作为一名经历过多次技术面试的前端工程师我深知系统化复习的重要性。Day-7这个编号背后其实暗藏玄机——它代表的是面试前最后一周的冲刺阶段。这个阶段需要聚焦核心、查漏补缺而不是从头开始学习新知识。在真实的面试场景中面试官往往会从以下几个维度考察候选人的基础能力框架原理理解深度如Vue-Router的实现机制工程化工具的实际应用经验Webpack vs Vite的选型考量浏览器工作原理与性能优化实践现代前端开发的核心模式如HMR的实现原理提示很多候选人会陷入背题误区但真正有效的复习应该是建立知识之间的联系。比如理解Vue-Router时要能关联到History API和前端路由的实现本质。2. Vue-Router深度解析不只是配置路由2.1 路由模式的本质区别面试中常被问及hash模式和history模式的区别但大多数回答停留在表面。实际上这两种模式的核心差异在于hash模式原理利用URL的hash片段#后的部分实现路由切换特点改变hash不会触发页面刷新兼容性全浏览器支持典型问题微信分享时可能丢失hash参数history模式依赖HTML5 History APIpushState/replaceState需要服务器端配合避免404问题更干净的URL结构实际案例nginx配置需要添加try_files规则// 典型history模式nginx配置 location / { try_files $uri $uri/ /index.html; }2.2 动态路由的实战技巧动态路由参数的处理往往藏着不少坑点const routes [ { path: /user/:id, component: User, beforeEnter: (to, from) { // 实际项目中这里常需要验证权限 if (!store.getters.isAuthenticated) { return { path: /login } } } } ]常见面试问题如何监听路由参数变化路由守卫的执行顺序是怎样的路由懒加载的实现原理是什么3. 构建工具对决Webpack vs Vite3.1 Webpack的核心机制Webpack的面试重点不在于配置而在于理解其设计哲学模块化处理流程一切皆模块的理念AST解析与依赖收集loader的执行顺序从右到左从下到上HMR实现原理graph LR A[文件修改] -- B[Webpack监听变化] B -- C[重新编译模块] C -- D[通过websocket通知客户端] D -- E[客户端应用更新]注实际输出时应删除此mermaid图表此处仅为说明原理Tree Shaking的生效条件必须使用ES6模块语法import/export在package.json中设置sideEffects确保Babel配置不会转译模块语法3.2 Vite的革命性设计Vite之所以能快速崛起关键在于其创新的开发体验原生ESM的利用开发环境直接使用浏览器原生ES模块无需打包的极速启动按需编译的冷启动优势依赖预构建的玄机将CommonJS转换为ESM合并多个小文件减少请求缓存策略的实际效果生产构建的差异仍然使用Rollup进行生产构建与传统打包工具的性能对比兼容性处理方案如vitejs/plugin-legacy注意在面试中解释两者区别时不要简单说Vite更快而要说明快在哪里冷启动、HMR更新速度等以及为什么快。4. 浏览器原理与性能优化4.1 关键渲染路径解析理解浏览器如何渲染页面是性能优化的基础构建DOM树HTML解析遇到脚本时的阻塞行为预加载扫描器的优化作用CSSOM的构建CSS选择器的匹配规则为什么建议把CSS放在头部渲染树的形成只包含可见节点样式重计算的影响范围4.2 现代优化技术实践代码分割的进阶用法// Webpack的动态import const module await import(./module.js) // Vite的glob导入 const modules import.meta.glob(./dir/*.js)Worker的合理使用计算密集型任务的offload与主线程的通信成本考量实际案例大文件上传的分片处理预加载策略对比!-- 不同预加载方式的优先级差异 -- link relpreload hrefcritical.css asstyle link relprefetch hrefnext-page.js5. 面试中的高频陷阱题5.1 看似简单的概念题能解释下事件循环吗——这个问题看似基础但能区分不同水平的候选人宏任务与微任务哪些API属于宏任务setTimeout、setInterval哪些API会产生微任务Promise、MutationObserverNode.js与浏览器环境的差异process.nextTick的特殊性setImmediate的实际执行时机实战例题分析console.log(script start); setTimeout(() { console.log(setTimeout); }, 0); Promise.resolve().then(() { console.log(promise1); }).then(() { console.log(promise2); }); console.log(script end);5.2 框架原理类问题Vue3的响应式原理与Vue2有什么不同这类问题考察的是对新技术的理解深度Proxy vs defineProperty对数组变化的检测方式动态添加属性的处理嵌套对象的性能差异编译时优化静态节点提升Patch flag的优化作用事件侦听器缓存组合式API的设计哲学逻辑关注点的组织方式与React Hooks的对比在TS支持上的优势6. 项目经验的有效表达面试官最想听到的不是我做过什么而是我解决了什么技术选型的思考过程为什么选择Vite而非Webpack微前端架构的实际应用场景状态管理方案的选择依据性能优化的量化结果从5s到2s的加载优化过程Lighthouse分数的提升方法内存泄漏的排查思路复杂问题的解决路径如何实现低版本浏览器兼容前端监控系统的搭建经验与后端API的协作模式在最后冲刺阶段建议准备3-5个能体现技术深度的项目案例每个案例都按照问题-方案-结果的结构整理并准备好可能的技术追问。