🚀 前端面试必备知识点总结：从CSS到框架，一篇搞定！
作为前端开发者，面试时总会遇到各种各样的知识点考察。从基础的CSS布局到复杂的框架原理，从浏览器机制到网络协议，内容繁杂却又至关重要。今天就为大家梳理一份高频考点清单，帮你轻松应对面试！
🎨 一、CSS核心知识点
CSS是页面的"化妆师"，掌握这些核心点，布局和样式问题再也不怕！
📌 盒模型
页面渲染时，DOM元素采用的布局模型可通过box-sizing设置，主要分为：
content-box（W3C标准盒模型）：宽高仅包含内容区border-box（IE盒模型）：宽高包含内容区、内边距和边框- 还有
padding-box和margin-box（浏览器未实现）
📌 BFC（块级格式化上下文）
BFC是一个独立的渲染区域，内部元素与外部元素相互隔离，定位互不影响。
- 触发条件：根元素、
position: absolute/fixed、display: inline-block/table、浮动元素、overflow !== visible等 - 应用场景：阻止margin重叠、清除内部浮动、实现自适应两栏布局等
📌 居中布局
- 水平居中：行内元素用
text-align: center，块级元素用margin: 0 auto，也可通过absolute + transform或flex + justify-content: center实现 - 垂直居中：单行文本用
line-height: height，通用方案有absolute + transform、flex + align-items: center等 - 水平垂直居中：推荐flex + justify-content + align-items，或absolute + transform组合
📌 选择器优先级
优先级顺序：!important > 行内样式 > #id > .class > tag > * > 继承 > 默认，且选择器是从右往左解析的哦～
📌 动画相关
transition：用于过渡动画，包含property（属性）、duration（时长）、timing-function（曲线）、delay（延迟）四个属性，可通过transitionend监听结束animation + @keyframes：更灵活的动画方案，支持循环次数（infinite）、方向（alternate）等，通过animationend监听结束
💻 二、JavaScript核心原理
JS是前端的"发动机"，这些原理性知识是面试必问！
📌 原型与原型链
- 原型（prototype）：一个简单对象，用于实现属性继承，可理解为"对象的爹"，实例通过
__proto__指向原型 - 构造函数：可通过
new创建对象的函数，如Object - 原型链：由
__proto__连接的对象链，用于属性查找。当查找对象属性时，会沿原型链向上搜索，直到Object.prototype
📌 执行上下文与作用域
- 执行上下文：包含变量对象（VO）、作用域链、
this指向，分为全局、函数、eval三种类型 - 作用域链：由自身活动对象（AO）和父级
[[scope]]组成，让函数能访问父级变量 - 闭包：父函数销毁后，子函数仍能访问父级变量的特殊作用域。需注意多个子函数共享父级变量的问题，可通过传参或块级作用域解决
📌 异步编程
- Promise：解决回调地狱的方案，支持
then链式调用 - async/await：
generator的语法糖，基于Promise实现，让异步代码看起来像同步 - 事件循环（浏览器）：执行一个宏任务（如
setTimeout、IO），再清空微任务（如Promise），循环往复
📌 类型转换与判断
- 隐式转换规则：
+遇到字符串会拼接，-/*%会转为数字；数字与对象相加时，优先调用对象的valueOf再toString - 类型判断：
typeof适合基本类型，引用类型需用Object.prototype.toString，如[object Array]可判断数组
📌 数组方法
- 遍历/转换：
map（返回新数组）、forEach（无法break）、filter（过滤）、reduce（累加） - 增删：
push/pop（末尾）、unshift/shift（头部）、splice（任意位置，会修改原数组） - 其他：
slice（截取，不修改原数组）、flat（数组扁平化）
🌐 三、浏览器与网络
浏览器是前端的"舞台"，这些机制你必须了解！
📌 从输入URL到页面展示的过程
- DNS解析：将域名转为IP地址
- TCP三次握手：建立连接
- 发送请求：携带请求头和主体
- 服务器返回HTML文件
- 浏览器渲染：
- 解析HTML生成DOM树
- 解析CSS生成样式树
- 结合生成渲染树（Render Tree）
- 布局（layout）和绘制（painting）
📌 重绘与回流
- 重绘（repaint）：样式变化不影响布局时触发（如改颜色），损耗小
- 回流（reflow）：尺寸、结构变化时触发（如改宽高），损耗大
- 优化建议：用
absolute/fixed脱离文档流、批量修改样式、避免频繁访问clientWidth等属性
📌 跨域解决方案
- JSONP：利用
<script>标签跨域特性，仅支持GET - CORS：服务端设置
Access-Control-Allow-Origin: * - postMessage：跨窗口通信
📌 HTTP相关
- HTTP 1.1：支持长连接（
keep-alive）、断点续传 - HTTP 2.0：多路复用、二进制分帧、首部压缩
- 状态码：
200（成功）、304（缓存有效）、404（资源不存在）、500（服务器错误）
🧩 四、Vue框架核心
Vue是主流框架，这些知识点高频考察！
📌 生命周期
- 创建阶段：
beforeCreate（实例刚创建，无数据）→created（数据已绑定，无DOM） - 挂载阶段：
beforeMount（模板编译前）→mounted（DOM已生成） - 更新阶段：
beforeUpdate（数据变，DOM未更）→updated（DOM已更） - 销毁阶段：
beforeDestroy（销毁开始）→destroyed（销毁完成）
📌 响应式原理：Proxy vs defineProperty
- Proxy优势：能监听数组变化、无需深度遍历，更高效
📌 vue-router
- 模式：
hash（带#）和history（需服务端支持） - 跳转：
this.$router.push()或<router-link> - 占位：
<router-view>
📌 vuex核心
state：状态中心mutations：同步修改状态（唯一途径）actions：异步操作，提交mutationsgetters：计算属性，获取状态modules：拆分状态，便于管理
💡 总结
前端知识点多但有规律，掌握这些核心内容，面试时就能从容应对啦！建议结合实际项目理解，多敲代码多实践，祝你拿到心仪的offer～ 🎉
