1. 前端基础面试高频考点解析作为一名经历过上百场技术面试的前端工程师我深知基础面试环节的重要性。很多候选人往往把精力放在框架原理和算法题上却忽略了那些看似简单却能真实反映基本功的问题。今天我们就来系统梳理那些高频出现却又容易被轻视的前端基础面试题。2. CSS布局体系深度剖析2.1 Flex布局实战要点Flex布局已经成为现代前端开发的标配技能但很多开发者只停留在display: flex的简单使用层面。面试中常被问到的几个关键点主轴与交叉轴控制.container { display: flex; flex-direction: row; /* 主轴方向row | row-reverse | column | column-reverse */ justify-content: flex-start; /* 主轴对齐方式 */ align-items: stretch; /* 交叉轴对齐方式 */ }实际项目中我经常遇到需要垂直居中但忘记设置容器高度的情况。记住交叉轴对齐需要明确的容器高度才能生效。flex-grow的分配机制 当被问到三个子元素flex-grow分别为1、2、3时如何分配剩余空间时很多候选人会答错。正确的理解是剩余空间 容器宽度 - 所有子项原始宽度之和分配比例 各子项flex-grow值 / 所有子项flex-grow值总和最终宽度 原始宽度 (剩余空间 × 分配比例)flex-shrink的压缩计算 这个计算比flex-grow复杂得多面试高级岗位时可能会被考察子项压缩宽度 (子项flex-shrink值 × 子项原始宽度 / 所有子项(flex-shrink × 宽度)总和) × 溢出空间经验分享在移动端开发中我习惯给flex容器加上min-width: 0来防止内容溢出。这是很多新手容易忽略的细节。2.2 Grid布局核心概念虽然Flex已经能满足大部分需求但Grid布局在复杂二维布局中优势明显。面试常考点显式网格与隐式网格.grid { display: grid; grid-template-columns: repeat(3, 100px); /* 显式定义3列 */ grid-auto-rows: 50px; /* 隐式行高度 */ }当项目超出显式定义的网格时会自动创建隐式轨道。这在动态内容加载的场景特别有用。网格线编号系统 理解从1开始和从-1开始的编号方式这在响应式布局中非常实用.item { grid-column: 1 / -1; /* 从第一列跨越到最后一列 */ }fr单位的计算grid-template-columns: 1fr 2fr minmax(100px, 300px);这里有个陷阱fr单位分配的是剩余空间如果总宽度不足minmax的约束会优先保证。3. Vue指令原理与最佳实践3.1 v-if与v-show的底层差异这是面试中出现频率最高的问题之一但很多人只停留在表面理解特性v-ifv-show编译方式条件编译CSS切换DOM操作销毁/重建display:none生命周期触发钩子无变化初始渲染惰性渲染总是渲染性能开销切换开销大初始开销大真实场景选择建议需要频繁切换时用v-show如选项卡运行时条件很少改变用v-if如权限控制在v-for内部避免使用v-if应该用计算属性过滤数据3.2 v-for中的key机制关于key的作用90%的候选人只能说出提高性能但更本质的原因是帮助Vue识别节点身份在列表变化时高效更新DOM避免就地复用导致的副作用如表单元素状态错乱在使用过渡动画时保持正确的元素顺序错误示例!-- 反模式用index作为key -- li v-for(item, index) in items :keyindex {{ item.text }} /li正确做法li v-foritem in items :keyitem.id {{ item.text }} /li4. 前端工程化基础4.1 模块化发展历程面试中常被要求对比各种模块化方案IIFE时代(function(window) { window.moduleA {...}; })(window);早期解决全局污染的方式现在仍能在一些老代码中看到。CommonJS// module.js module.exports {...}; // main.js const module require(./module);Node.js的默认规范同步加载不适合浏览器环境。ES Modules// module.js export const foo () {...}; // main.js import { foo } from ./module.js;现代浏览器的原生支持需要理解静态分析的特性。4.2 构建工具核心原理即使现在Vite等工具流行理解Webpack的基本原理仍是面试重点依赖图构建从入口文件开始解析AST识别import/require语句递归构建完整依赖关系图loader执行顺序module: { rules: [ { test: /\.scss$/, use: [ style-loader, // 最后执行 css-loader, sass-loader // 最先执行 ] } ] }从右到左的链式调用经常让新手困惑。代码分割策略入口点分割配置多个entry动态导入import()语法防止重复SplitChunksPlugin配置5. 浏览器工作原理相关5.1 事件循环机制详解这是区分初级和中级前端的重要知识点console.log(script start); setTimeout(() { console.log(setTimeout); }, 0); Promise.resolve().then(() { console.log(promise1); }).then(() { console.log(promise2); }); console.log(script end);正确的输出顺序是script startscript endpromise1promise2setTimeout关键点微任务Promise、MutationObserver在当前宏任务结束后立即执行宏任务setTimeout、setInterval要等到下次事件循环requestAnimationFrame的执行时机介于两者之间5.2 渲染性能优化面试官常问如何减少页面重绘和回流我的实战建议CSS优化使用transform和opacity实现动画不触发布局避免table布局一个小改动可能引起整个表格重排将频繁变化的元素设为position: absolute/fixed脱离文档流JavaScript优化// 不良实践 for(let i 0; i 100; i) { element.style.left i px; } // 优化方案 let left []; for(let i 0; i 100; i) { left.push(${i}px); } element.style.left left.join( );新的API利用使用Intersection Observer实现懒加载使用Resize Observer替代resize事件使用requestPostAnimationFrame优化动画时序6. 前端安全防护实践6.1 XSS防御体系根据OWASP建议完整的XSS防护应该包括输入过滤使用DOMPurify等库净化HTML对特殊字符进行转义function escapeHtml(str) { return str.replace(/[]/g, tag ({ : amp;, : lt;, : gt;, : #39;, : quot; }[tag])); }输出编码根据上下文使用不同的编码方式HTML内容HTML实体编码HTML属性除了HTML编码还要注意引号JavaScript\u编码URL百分号编码CSP策略 一个严格的内容安全策略示例Content-Security-Policy: default-src none; script-src self unsafe-inline; style-src self unsafe-inline; img-src self data:; connect-src self; font-src self; form-action self; frame-ancestors none; base-uri self6.2 CSRF防护方案除了常见的SameSite Cookie还有这些防御手段双重Cookie验证// 前端 fetch(/api, { headers: { X-CSRF-TOKEN: getCookie(csrf_token) } }); // 后端验证 if (req.cookies.csrf_token ! req.headers[x-csrf-token]) { throw new Error(CSRF检测失败); }加密Token方案使用JWT包含时间戳和用户ID每次请求验证签名和时间有效性比简单Token更安全但实现复杂Origin/Referer检查// 中间件示例 function checkCsrf(req, res, next) { const origin req.get(origin); if (origin !allowedOrigins.includes(origin)) { return res.status(403).send(Invalid origin); } next(); }7. 性能优化进阶策略7.1 关键渲染路径优化从输入URL到页面渲染的完整过程优化HTML交付优化开启gzip/brotli压缩使用HTTP/2服务器推送关键资源考虑BigPipe分块传输技术CSS优化!-- 关键CSS内联 -- style/* above-the-fold styles *//style !-- 非关键CSS异步加载 -- link relpreload hrefnon-critical.css asstyle onloadthis.relstylesheetJavaScript优化使用module/nomodule模式适配现代浏览器script typemodule srcmodern.js/script script nomodule srclegacy.js/script预加载关键资源link relpreload hrefmain.js asscript7.2 内存管理技巧前端内存泄漏是高级面试的重点考察方向常见泄漏场景未解绑的事件监听器闭包持有DOM引用被遗忘的定时器/回调缓存无限增长检测工具Chrome DevTools的Memory面板Performance Monitor实时监控// 手动获取内存使用情况 window.performance.memory;优化实践使用WeakMap/WeakSet存储临时数据虚拟列表优化长列表渲染合理使用requestIdleCallback处理非紧急任务8. 前端新兴技术趋势8.1 Web Components实践虽然不算新技术但在微前端架构中的使用越来越多自定义元素开发class MyElement extends HTMLElement { constructor() { super(); this.attachShadow({ mode: open }); } connectedCallback() { this.shadowRoot.innerHTML style:host { display: block; }/style slot/slot ; } } customElements.define(my-element, MyElement);与框架集成Vuecomponent :ismy-elementReact需要包装器处理属性变化class ReactWrapper extends React.Component { ref React.createRef(); componentDidMount() { this.ref.current.addEventListener(change, this.props.onChange); } render() { return my-element ref{this.ref} /; } }8.2 WebAssembly应用场景虽然不要求深入掌握但了解应用场景很有必要性能敏感场景图像/视频处理加密算法物理模拟工具链生态Emscripten编译C/Cwasm-pack处理RustAssemblyScript(TypeScript-like)与JavaScript互操作WebAssembly.instantiateStreaming(fetch(module.wasm)) .then(obj { const result obj.instance.exports.add(1, 2); console.log(result); // 3 });在面试中展现对这些前沿技术的理解能让面试官看到你的技术视野和学习能力。不过切记不要为了炫技而谈论不熟悉的技术面试官几个深入问题就能检验真实水平。