1. 前端面试基础知识点梳理作为一名经历过上百场技术面试的前端工程师我深知基础知识在面试中的重要性。今天要分享的是前端面试中最常被问及的基础知识体系这些内容看似简单却往往成为区分候选人水平的关键指标。前端基础知识体系可以划分为几个核心模块HTML/CSS基础、JavaScript核心概念、浏览器工作原理、网络协议基础、前端安全常识。每个模块都有其独特的考察重点面试官通常会从这些基础点出发逐步深入考察候选人的技术深度。提示前端面试中80%的基础问题都来自这些核心模块掌握它们能帮你通过大多数初筛环节。2. HTML/CSS核心考点解析2.1 HTML语义化与文档结构现代前端开发中HTML语义化是必考内容。面试官常会问为什么要使用语义化标签正确的回答应该包含以下几点提升可访问性屏幕阅读器能更好解析利于SEO优化搜索引擎更容易理解内容结构代码可读性更强开发者更容易维护移动端适配更友好响应式布局基础常见的语义化标签使用场景header用于页面头部或内容区块的头部 nav用于导航链接组 main用于页面主要内容区 article用于独立的内容区块 section用于文档中的节或段 aside用于侧边栏或附加内容 footer用于页脚或内容区块的底部2.2 CSS盒模型与布局系统盒模型是CSS最基础也最容易出错的概念。面试中常被问到的问题包括标准盒模型与怪异盒模型的区别box-sizing属性的作用与取值margin重叠现象及解决方案通过这个例子可以清晰展示差异/* 标准盒模型 */ .box { width: 100px; padding: 10px; border: 5px solid; /* 实际宽度 100 10*2 5*2 130px */ } /* 怪异盒模型 */ .box { box-sizing: border-box; width: 100px; padding: 10px; border: 5px solid; /* 实际宽度 100px (包含padding和border) */ }Flex布局是近年来的热点考察内容需要掌握容器属性flex-direction, justify-content, align-items, flex-wrap项目属性flex-grow, flex-shrink, flex-basis实际应用场景等分布局、垂直居中、自适应布局等3. JavaScript核心概念深度剖析3.1 作用域与闭包作用域链是JavaScript的基础机制面试中常通过以下问题考察for(var i0; i5; i) { setTimeout(function() { console.log(i); }, 1000); } // 输出结果是什么为什么如何修改能得到期望结果闭包的应用场景与内存管理模块模式实现私有变量函数柯里化事件处理回调需要注意的内存泄漏问题3.2 原型与继承原型链是JavaScript面向对象的基础需要掌握__proto__与prototype的区别new操作符的内部执行过程ES6 class语法糖的本质实现继承的多种方式及其优缺点一个典型的原型链问题function Person() {} Person.prototype.name Tom; var person new Person(); console.log(person.name); // Tom console.log(person.hasOwnProperty(name)); // false console.log(name in person); // true3.3 异步编程演进从回调地狱到Promise再到async/await异步编程是前端面试必问话题。需要理解事件循环机制宏任务/微任务Promise的三种状态与链式调用async函数的执行顺序错误处理方式的演进典型面试题console.log(script start); setTimeout(function() { console.log(setTimeout); }, 0); Promise.resolve().then(function() { console.log(promise1); }).then(function() { console.log(promise2); }); console.log(script end);4. 浏览器工作原理与性能优化4.1 关键渲染路径从输入URL到页面展示的完整过程DNS解析TCP连接HTTP请求/响应解析HTML构建DOM树解析CSS构建CSSOM树合并生成渲染树布局计算绘制页面重排Reflow与重绘Repaint的区别重排几何属性改变需要重新计算布局重绘外观改变但不影响布局如何减少重排重绘使用transform代替top/left等4.2 前端性能优化实战常见的性能优化手段资源压缩与合并Webpack优化图片优化懒加载、响应式图片、WebP格式缓存策略强缓存/协商缓存代码分割与按需加载使用Web Workers处理密集型任务一个性能优化的实际案例// 使用IntersectionObserver实现图片懒加载 const observer new IntersectionObserver((entries) { entries.forEach(entry { if (entry.isIntersecting) { const img entry.target; img.src img.dataset.src; observer.unobserve(img); } }); }); document.querySelectorAll(img[data-src]).forEach(img { observer.observe(img); });5. 网络协议与安全基础5.1 HTTP协议核心知识HTTP/1.1与HTTP/2的主要区别多路复用 vs 队头阻塞头部压缩服务器推送HTTPS的工作原理对称加密与非对称加密结合SSL/TLS握手过程证书验证机制5.2 前端安全防护常见的前端安全问题及解决方案XSS攻击输入过滤、输出转义、CSP策略CSRF攻击SameSite Cookie、Token验证点击劫持X-Frame-Options中间人攻击HTTPS严格模式一个防御XSS的实例// 使用DOMPurify对用户输入进行净化 import DOMPurify from dompurify; const clean DOMPurify.sanitize(userInput, { ALLOWED_TAGS: [b, i, em, strong], ALLOWED_ATTR: [style] }); document.getElementById(content).innerHTML clean;6. 前端工程化基础6.1 模块化发展历程从IIFE到现代模块系统的演进IIFE时代立即执行函数CommonJSNode.js采用AMDRequireJSES Modules现代浏览器原生支持Tree Shaking原理6.2 构建工具核心概念Webpack的核心配置项module.exports { entry: ./src/index.js, output: { path: path.resolve(__dirname, dist), filename: bundle.js }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: babel-loader }, { test: /\.css$/, use: [style-loader, css-loader] } ] }, plugins: [ new HtmlWebpackPlugin({ template: ./src/index.html }) ] };7. 框架基础概念7.1 虚拟DOM原理虚拟DOM的核心优势跨平台能力React Native等高效的差异比较算法Diff算法声明式编程范式一个简化的虚拟DOM实现function createElement(type, props, ...children) { return { type, props: { ...props, children: children.map(child typeof child object ? child : createTextElement(child) ), }, }; } function createTextElement(text) { return { type: TEXT_ELEMENT, props: { nodeValue: text, children: [], }, }; }7.2 组件通信模式常见的前端组件通信方式父子组件props/events兄弟组件状态提升/全局事件总线跨层级组件Context API/状态管理库非相关组件自定义事件/PubSub模式8. 实战面试题解析8.1 高频手写题实现实现一个Promise.allPromise.myAll function(promises) { return new Promise((resolve, reject) { const results []; let count 0; promises.forEach((promise, index) { Promise.resolve(promise) .then(res { results[index] res; count; if (count promises.length) resolve(results); }) .catch(reject); }); }); };8.2 算法题解题思路常见的算法考察方向数组处理去重、扁平化、排序字符串操作反转、回文、匹配链表操作反转、环检测树结构遍历DFS/BFS一个典型的数组去重问题// 多种去重方法对比 const arr [1, 2, 2, 3, 4, 4, 5]; // 方法1Set const unique1 [...new Set(arr)]; // 方法2filter const unique2 arr.filter((item, index) arr.indexOf(item) index); // 方法3reduce const unique3 arr.reduce((acc, cur) acc.includes(cur) ? acc : [...acc, cur], []);9. 面试准备策略9.1 知识体系构建建议采用金字塔学习法底层语言特性ES6新特性中层框架原理React/Vue核心机制上层工程实践性能优化、架构设计9.2 模拟面试技巧有效的模拟面试方法录音回放发现表达问题白板编程训练临场编码能力时间控制每题不超过5分钟解释STAR法则回答项目问题我在准备面试时发现建立一个错题本特别有用。记录下每次面试中被问倒的问题分析知识盲点针对性补强。三个月下来这个习惯让我的面试通过率提升了60%以上。