互联网大厂前端面试实录：HTML5、ES6、Vue/React、工程化与性能优化全覆盖
场景设定
本故事发生在一家知名互联网大厂的前端面试现场。面试官老王经验丰富，严肃认真。而面试者避雷哥是一位幽默风趣、偶尔有点水的程序员，面对基础问题还能对答如流，但复杂问题就有点应付了。
第一轮：内容社区 UGC 场景
面试官老王：
- 请说说 HTML 语义化的作用，以及 HTML5 有哪些新特性？
- 内容社区中，页面布局经常用到 Flex 布局和盒模型，请你解释一下 CSS 盒模型，并简单说说 Flex 布局的优缺点。
- JavaScript 中闭包的应用场景有哪些？
避雷哥答：
- HTML 语义化能让标签更有意义，方便搜索引擎理解页面结构，像
<header>、<footer>都挺好用的。HTML5新特性有音视频标签、canvas、localStorage......还有表单新属性。 - 盒模型是 margin、border、padding、content 四层。Flex 布局能让排版更灵活，缺点嘛......偶尔会有兼容性和性能问题？
- 闭包嘛，就是函数里面套函数，外面的变量能被里面用，经常用来记住东西，防止变量被污染。
**面试官老王：**很好，基础掌握不错。
第二轮：AIGC 场景
面试官老王：
- 现在社区用 AIGC 生成内容，你如何用 ES6+ 新特性让代码更优雅？
- Vue 组件间有哪些通信方式？响应式原理简单说说。
- React 的 Hooks 是什么？和类组件对比有啥优势？
- 说说前端性能优化你做过哪些？
避雷哥答：
- ES6+有 let/const、箭头函数、解构赋值、Promise 很好用，写起来省事。
- Vue 组件通信有 props、emit、bus、Vuex......响应式？它会自动更新页面，原理嘛，好像和 Object.defineProperty 有关。
- Hooks 让函数组件也能用状态，useState、useEffect 这些，类组件写起来太啰嗦了。
- 性能优化我会用懒加载、合并请求、压缩代码......还有缓存！
**面试官老王：**有经验，继续努力。
第三轮：支付与金融服务场景
面试官老王：
- 前端工程化，比如 Webpack、Vite、ESLint 在项目里怎么用？
- 说说 HTTP 协议中的缓存机制和跨域怎么解决。
- 浏览器的渲染流程你了解吗？
- 你用过 TypeScript 吗？类型系统怎么用？
- 前端安全了解多少，比如 XSS、CSRF？
避雷哥答：
- 工程化嘛，Webpack 打包，Vite启动快，ESLint查代码格式......都用过。
- HTTP 缓存有强缓存、协商缓存。跨域就加 CORS 头，或者用代理。
- 渲染流程......呃，先解析 HTML、CSS，然后......渲染、显示吧。
- TypeScript用过，能加类型注解，防止出 bug。
- XSS 就是输入恶意代码，CSRF 是跨站请求伪造......要防。
**面试官老王：**好的，今天就到这里，回去等通知吧。
技术要点与业务场景详解
第一轮：内容社区 UGC 场景
- HTML 语义化 ：使用语义化标签让页面结构更清晰，提升可访问性和 SEO 效果。HTML5 新特性如
<video>、<audio>、<canvas>、localStorage、sessionStorage、原生表单校验等极大丰富了前端能力。 - 盒模型：CSS 盒模型包括 content、padding、border、margin 四层。Flex 布局适合内容自适应和响应式页面，便于复杂布局实现，但部分旧浏览器兼容性需注意。
- 闭包：闭包常用于封装变量、实现模块化、回调和异步操作，防止变量泄漏。
第二轮：AIGC 场景
- ES6+ 新特性：let/const 提升代码安全，箭头函数、解构赋值、模板字符串等让代码更简洁易维护。Promise、async/await 优化异步流程。
- Vue 组件通信：常用方式有 props、$emit、event bus、Vuex、provide/inject。响应式原理主要是通过 Object.defineProperty 或 Proxy 代理数据变化，自动更新视图。
- React Hooks：Hooks 让函数组件也能拥有状态和生命周期逻辑（如 useState、useEffect），减少了类组件的冗余代码。
- 前端性能优化：常见手段包括资源懒加载、代码分割、缓存利用、图片优化、服务端渲染等。
第三轮：支付与金融服务场景
- 前端工程化：Webpack 用于打包构建，Vite 提升开发体验，ESLint 保证代码风格一致性。
- HTTP 缓存与跨域：缓存机制有强缓存（Expires、Cache-Control）和协商缓存（ETag、Last-Modified）。跨域常用 CORS、JSONP、proxy 等方式解决。
- 浏览器原理：主要流程包括解析 HTML、CSS，生成 DOM、CSSOM，合成渲染树，布局与绘制等。
- TypeScript 类型系统：通过类型注解、接口、泛型等，提升代码安全性与可维护性。
- 前端安全：XSS 需过滤用户输入，CSRF 可通过 token 校验、SameSite Cookie 防护。
希望本文的面试故事和技术点总结能让大家更好地准备前端大厂面试，理解业务场景下的技术应用！