知识集合

HTTP 协议与状态码

200（请求成功）、
301（永久重定向，如域名跳转）、
302（临时重定向，如未登录跳登录页）、
304（资源未修改，走协商缓存）、
404（资源未找到）、
500（服务器内部错误）。

浏览器渲染与缓存

URL 到页面渲染流程：
DNS 解析→TCP 三次握手→发送 HTTP 请求→服务器返回响应→解析 HTML 生成 DOM 树→解析 CSS 生成 CSSOM 树→合并为渲染树→布局（重排）→绘制（重绘）→TCP 四次挥手。

浏览器缓存机制

强缓存：通过Expires（HTTP 1.0，绝对时间）、Cache-Control（HTTP 1.1，如max-age，相对时间）控制，未过期直接用缓存，
状态码 200 from cache，Cache-Control优先级更高。
协商缓存：通过Last-Modified/If-Modified-Since（基于修改时间）、
Etag/If-None-Match（基于资源哈希）验证，需请求服务器，未修改返回 304。

存储与安全

存储方式对比：

image.png

安全攻击防范

XSS（跨站脚本）：注入恶意脚本，防范措施包括输入过滤、输出编码、给 Cookie 设置HttpOnly属性。

CSRF（跨站请求伪造）：伪造用户请求，防范措施包括验证码、请求头加 Token、验证Referer字段。

HTML5 新特性

语义化标签（header、footer、nav、article等）；
表单新类型（color、email、date、search）；
功能扩展：localStorage/sessionStorage、audio/video多媒体、Canvas绘图、Web Worker（后台运行 JS，避免阻塞主线程）、WebSocket（持久化通信）。

CSS 相关

盒模型与定位

标准盒模型（box-sizing: content-box）：width仅含内容宽，总宽度 = width+padding+border+margin。
IE 盒模型（box-sizing: border-box）：width含内容宽 + padding+border，总宽度 = width+margin。

position 属性：

static：默认，正常文档流，忽略top/left等。
relative：相对自身定位，保留原空间，可通过top/left偏移。
absolute：相对最近定位父元素（非static），脱离文档流，不占空间。
fixed：相对浏览器窗口，脱离文档流，滚动时位置不变。
sticky：滚动到阈值前相对定位，之后固定定位。

布局与居中

Flex 布局

容器属性 ：flex-direction（主轴方向，如row/column）、justify-content（主轴对齐，如center/space-between）、align-items（交叉轴对齐，如center/stretch）。
项目属性：flex-grow（放大比例）、flex-shrink（缩小比例）、order（排列顺序，默认 0）

垂直居中方法

Flex：父容器设display: flex; align-items: center; justify-content: center。
绝对定位 ：子元素设position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)。
Table-cell：父容器设display: table-cell; vertical-align: middle; text-align: center。

浮动与 BFC

清除浮动：
1、额外标签法：浮动元素后加空标签，设clear: both。
2、父容器设overflow: hidden（触发 BFC，计算高度包含浮动元素）。
3、伪元素法：父容器加::after，设content: ""; display: block; clear: both。
BFC（块级格式化上下文）：

1、触发条件：根元素、float≠none、position=fixed/absolute、overflow≠visible、display=inline-block/flex等。

2、规则：BFC 区域不与浮动元素重叠；子元素不影响外部；计算高度包含浮动元素。

动画与优化

动画属性：
transition：需触发事件（如hover），实现两帧过渡（from→to）。
animation：无需触发，配合@keyframes定义多帧动画，可设循环、时长等。
重排与重绘：
重排：元素几何属性（宽高、位置）变化，需重构渲染树，性能消耗大。
重绘：元素外观（颜色、背景）变化，无需重构渲染树。
优化：批量修改样式、用transform/opacity（仅触发合成，不重排重绘）、脱离文档流（absolute/fixed）。

JavaScript 相关

1. 基础语法与数据类型

数据类型：

基本类型：undefined、null、string、number、boolean、symbol（ES6 新增，唯一标识），按值访问。

引用类型：Object、Array、Function等，按引用访问，存储在堆内存，栈内存存引用地址。

this 指向：

默认绑定：全局环境中this指向window（非严格模式）。
隐式绑定：对象调用方法，this指向该对象（如obj.fn()，this=obj）。
显式绑定：call/apply（立即执行，参数分别为列表 / 数组）、bind（返回新函数，不立即执行）。
new 绑定：new构造函数时，this指向新创建的实例。

2、闭包与继承

闭包：

定义：能访问外部函数变量的内部函数，本质是函数作用域链的保留。
作用：模拟块级作用域、缓存数据、封装私有变量（如单例模式）。
注意：可能导致内存泄漏，需及时释放引用。

继承方式（ES5）：

原型链继承：子类原型指向父类实例（Child.prototype = new Parent()），缺点是引用属性共享。
构造继承：子类构造函数中调用父类构造（Parent.call(this)），缺点是无法继承原型方法。
组合继承：结合原型链与构造继承，缺点是调用两次父类构造。
寄生组合继承：优化组合继承，仅调用一次父类构造，是较优方案。

3、异步与模块化

异步解决方案

Promise：三种状态（pending→fulfilled/rejected），链式调用解决回调地狱，then处理成功，catch处理错误。
Generator：带*的函数，yield暂停执行，next()恢复，可配合 Promise 处理异步。
async/await：Promise 语法糖，async函数返回 Promise，await暂停至 Promise 完成，同步写法更直观。

模块化规范：

CommonJS：Node 端，同步加载，module.exports导出，require导入。
AMD：浏览器端，异步加载（如 RequireJS），define定义模块，require加载。
ES6 Module：export导出，import导入，静态分析，支持 Tree-Shaking。

4、DOM 与事件

事件流：DOM2 级事件流分捕获阶段（从根到目标）、目标阶段、冒泡阶段（从目标到根）；
addEventListener第三个参数useCapture为true时在捕获阶段触发，false在冒泡阶段。
事件委托：
原理：利用事件冒泡，将子元素事件绑定到父元素，如ul监听li的点击。
优点：减少事件绑定、适配动态新增的子元素。

DOM 操作：

节点创建：document.createElement()、document.createTextNode()。
尺寸属性：clientHeight（可视高度，不含边框）、offsetHeight（含边框）、scrollHeight（总高度，含隐藏部分）。

5. 工具类方法

深浅拷贝：

浅拷贝：slice()、concat()（数组）、Object.assign()，仅拷贝表层属性，引用类型仍共享。
深拷贝：递归遍历（function deepClone(obj) { ... }）、JSON.parse(JSON.stringify(obj))（不支持函数、正则、undefined）。

数组去重：

ES6 Set：Array.from(new Set(arr))或[...new Set(arr)]。
索引判断：arr.filter((item, idx) => arr.indexOf(item) === idx)。

Ajax 与跨域

原生 Ajax 流程：

创建XMLHttpRequest对象：var xhr = new XMLHttpRequest()。
配置请求：xhr.open('GET', url, true)（方法、URL、异步）。
发送请求：xhr.send()（GET 无参数，POST 传参数）。
监听状态：xhr.onreadystatechange = function() { if(xhr.readyState === 4 && xhr.status === 200) { ... } }（readyState=4表示请求完成）。

跨域解决方案：

JSONP：动态创建script标签，利用其跨域特性，仅支持 GET。
CORS：服务端设置响应头Access-Control-Allow-Origin: *（允许所有域名）。
代理服务器：如 Webpack-dev-server 配置proxy，转发请求。
postMessage：跨窗口 /iframe 通信，传递数据。

移动 Web 开发

适配方案：

rem：基于根元素html的font-size，如设计稿 750px，设html { font-size: 75px }，1rem=75px，需 JS 动态调整font-size适配不同设备。
vw/vh：1vw = 视口宽度 1%，1vh = 视口高度 1%，无需 JS，直接适配。
Flex：弹性布局，子元素自适应父容器。

常见问题：

1px 边框：用transform: scale(0.5)缩小边框，或meta标签设initial-scale=0.5。
click 300ms 延迟：禁用缩放（<meta name="viewport" content="user-scalable=no">）、引入 FastClick 库。
键盘遮挡输入框：监听input焦点事件，用scrollIntoView()将输入框滚动到可视区域。

前端工程化
Webpack：
作用：静态模块打包器，递归构建依赖树，将模块打包为bundle。
核心概念：entry（入口）、output（出口）、loader（转换非 JS 文件，如css-loader处理 CSS）、plugin（扩展功能，如HtmlWebpackPlugin生成 HTML）。

Babel：
作用：将 ES6 + 代码转 ES5，兼容低版本浏览器。
流程：解析（生成 AST）→转换（修改 AST）→生成（转 ES5 代码），可通过插件扩展功能（如@babel/plugin-proposal-class-properties支持类属性）。

Git 操作：

工作流（GitFlow）：master（主分支，存稳定代码）、develop（开发分支）、feature（功能分支，从develop创建，完成后合并回develop）、release（发布分支，从develop创建，测试后合并到master和develop）、hotfix（紧急修复分支，从master创建，修复后合并到master和develop）。

命令区别：merge（保留提交历史，生成 merge commit）、rebase（合并提交历史，更简洁）、reset（回滚提交，修改历史，慎用公共分支）、revert（生成新提交撤销旧提交，不修改历史）。

Vue 框架

生命周期：

创建阶段：beforeCreate（初始化前，无this.data）→created（初始化完成，有this.data，未挂载 DOM）。
挂载阶段：beforeMount（挂载前，生成虚拟 DOM）→mounted（挂载完成，可操作真实 DOM）。
更新阶段：beforeUpdate（数据变，DOM 未更）→updated（DOM 已更）。
销毁阶段：beforeDestroy（销毁前，清除定时器 / 事件）→destroyed（销毁完成）。

响应式原理：

Vue2：用Object.defineProperty劫持data属性的get/set，收集依赖（Watcher），数据变时触发set，通知Watcher更新视图；缺点是无法监听数组索引、对象新增属性（需Vue.set）。

Vue3：用Proxy代理data，支持监听数组索引、对象新增属性，且惰性响应（访问时才劫持），性能更优。

组件通信：

props（父传子）、 $emit（子传父）、Vuex（全局状态管理）、provide/inject（跨层级通信）、$ attrs/$listeners（传递未被props接收的属性 / 事件）。

React 框架

组件类型：

函数式组件：轻量，无this，用 Hooks（useState管理状态、useEffect处理副作用）。
类组件：有this、生命周期，如componentDidMount（挂载完成）、shouldComponentUpdate（判断是否更新，优化性能）。

虚拟 DOM 与 diff 算法：

虚拟 DOM：用 JS 对象模拟 DOM，如{ type: 'div', props: { className: 'box' }, children: [] }，减少真实 DOM 操作。
diff 算法：同层对比，不跨层；列表加key（唯一标识），避免错位；仅更新差异部分。

状态管理：

组件内状态：useState（函数式）、this.state（类组件）。
全局状态：Redux（store存状态、action描述操作、reducer更新状态、中间件redux-thunk处理异步）、Context（跨组件传递状态，适合简单场景）。