Vue3核心考点核心流程（记忆关键）记忆口诀：响应式用Proxy，组合式API，性能更优，TypeScript友好
核心对比：Vue2 vs Vue3（面试必考）
第一部分：核心概念1. Vue3 vs Vue2 核心区别1.1 响应式原理Vue2：Object.defineProperty
123456789// 缺点：// 1. 无法监听数组索引和length变化// 2. 无法监听对象属性的新增/删除// 3. 需要递归遍历所有属性Object.defineProperty(obj, 'name', { get() { return value }, set(newVal) { value = newVal; notify() }})
Vue3：Proxy（推荐）
12345678910111213141516// 优点：// 1. 可以监听数组索引和length// 2. 可以监听对象属性的新增/删除// 3. 懒代理，性能更好const proxy = new Proxy(obj, ...
JavaScript模块化完整指南核心流程（记忆关键）记忆口诀：立即执行，CommonJS同步，AMD异步，ES Module静态
核心对比：CommonJS（Node.js）vs ES Module（浏览器/现代工具）
第一部分：核心概念1. 什么是模块化？1.1 定义
将一个复杂的程序拆分成多个独立的模块
每个模块负责特定的功能
模块之间通过接口进行通信
1.2 为什么需要模块化？没有模块化的问题：
全局污染：所有变量都在全局作用域
命名冲突：变量名可能重复
依赖管理：不知道文件的加载顺序
难以维护：代码耦合严重
模块化的优势：
避免命名冲突（独立作用域）
更好的代码组织（按功能拆分）
按需加载（提升性能）
高复用性（模块可重用）
高维护性（模块独立，易于维护）
2. 主流模块化规范（面试重点）2.1 CommonJS（Node.js）核心特点：
同步加载、运行时加载、值拷贝
主要用于服务端（Node.js）
语法：
1234567// 导出module.exports = { add, multiply }// 或exports.a ...
前端工程化完整指南核心流程（记忆关键）记忆口诀：规范先行，构建打包，测试部署，监控优化
工程化体系：代码规范 → 模块化 → 构建工具 → 自动化测试 → CI/CD → 监控体系
1. 什么是前端工程化？1.1 定义与目标定义：前端工程化是使用软件工程的方法来组织前端开发流程，通过工具、规范和流程来提升开发效率、保证代码质量、降低维护成本的一套完整体系。
核心目标：
提升开发效率（自动化工具）
保证代码质量（规范和测试）
降低维护成本（模块化和文档）
优化用户体验（性能优化）
1.2 工程化体系架构123456789101112131415161718192021222324252627282930前端工程化├── 开发阶段│ ├── 代码规范（ESLint、Prettier）│ ├── 模块化（ES Module、CommonJS）│ ├── 组件化（Vue、React）│ └── 开发工具（VSCode、Chrome DevTools）│├── 构建阶段│ ├── 构建工具（Webpack、Vite）│ ├── 编译转译（Babel、Typ ...
Vue Diff算法原理核心流程（记忆关键）记忆口诀：同层比较，深度优先，双端对比，最长递增
核心策略：只比同层，tag+key 判断，Vue2 双端，Vue3 最长递增子序列
1. 基础概念什么是 Diff 算法？
Diff 算法是一种对比算法，用于找出新旧虚拟 DOM 树的差异
目标是用最小的操作次数将旧 DOM 更新为新 DOM
Vue 的 Diff 算法时间复杂度为 O(n)
为什么需要 Diff 算法？1234567// 没有 Diff：直接替换整个 DOMoldDOM.parentNode.replaceChild(newDOM, oldDOM)// 问题：性能极差，会丢失状态（输入框内容、滚动位置等）// 有 Diff：精确找出差异，最小化 DOM 操作patch(oldVNode, newVNode)// 优势：性能好，保留状态，用户体验好
传统 Diff 的问题1234567传统树的 Diff 算法：- 时间复杂度：O(n³)- 过程： 1. 遍历旧树的每个节点：O(n) 2. 遍历新树的每个节点：O(n) 3. 计算最小编辑距离：O(n)- 结果：性能太 ...
Vue模板编译原理核心流程（记忆关键）记忆口诀：解析成树，优化标记，生成函数
三大阶段：Parse（解析）→ Optimize（优化）→ Generate（生成）
1. 基础概念什么是模板编译？
将 Vue 的 <template> 模板字符串转换为浏览器可执行的 JavaScript 代码（render 函数）
模板编译发生在构建时（使用 vue-loader）或运行时（使用完整版 Vue）
编译后的 render 函数返回虚拟 DOM（VNode）
为什么需要模板编译？123456789101112131415// 开发者编写的模板<template> <div id="app"> <h1>{{ title }}</h1> <p>{{ message }}</p> </div></template>// 编译后的 render 函数（简化版）function ...
JavaScript中的this指向核心流程（记忆关键）记忆口诀：普通函数看调用者，箭头函数看定义处，new 指向新对象
快速判断（一句话总结）：
123普通函数：谁调用指向谁，没人调用指向全局（严格模式 undefined）箭头函数：定义时绑定，继承外层 this构造函数：new 调用指向新创建的实例对象
1. this 指向快速判断（核心规律）1.1 最常见的 4 种情况情况1：普通函数调用 → 指向全局对象
1234567891011function foo() { console.log(this) // window（浏览器）或 global（Node.js）}foo() // 独立调用，this 指向全局// 严格模式下'use strict'function bar() { console.log(this) // undefined}bar()
情况2：对象方法调用 → 指向调用的对象
1234567const obj = { name: 'Tom', sayN ...
谷歌浏览器性能指标详解一、核心性能指标（Core Web Vitals）谷歌在2024年3月将 FID（首次输入延迟）替换为 INP（交互到下一次绘制），现在三大核心指标为：
指标
英文全称
测量内容
用户感知
合格标准
LCP
Largest Contentful Paint
最大内容绘制时间
“页面主要内容加载完了吗？”
≤ 2.5秒
INP
Interaction to Next Paint
交互到下一次绘制
“我点了按钮，多久有反应？”
≤ 200毫秒
CLS
Cumulative Layout Shift
累积布局偏移
“页面元素会不会乱跳？”
≤ 0.1
数据来源：谷歌通过 Chrome 用户体验报告（CrUX）收集真实用户数据，采用 75分位值 评估（即75%的用户体验达到标准才算合格）
二、详细解读1. LCP（最大内容绘制）- 加载速度通俗理解：就像你去餐厅点菜，LCP 就是”主菜上桌”的时间。不是茶水（小图标），而是那份牛排（主要内容）。
什么算”最大内容”：
首屏最大的图片（Hero Image）
视频封面
大段文字块
优化建议： ...
HTTP缓存机制核心概念（2大类型）记忆口诀：强缓存不请求，协商缓存问一问
121. 强缓存：直接使用本地缓存，不请求服务器2. 协商缓存：询问服务器缓存是否可用
缓存流程图：
12345678910111213请求资源 ↓检查强缓存 ↓命中？ → 是 → 直接使用缓存（200 from cache） ↓ 否发送请求到服务器 ↓检查协商缓存 ↓未修改？ → 是 → 使用缓存（304 Not Modified） ↓ 否返回新资源（200 OK）
1. 强缓存（Strong Cache）1.1 Expires（HTTP/1.0）原理：
服务器返回资源的过期时间（绝对时间）
浏览器判断当前时间是否超过过期时间
未过期则直接使用缓存
响应头示例：
1Expires: Wed, 21 Oct 2026 07:28:00 GMT
缺点：
1231. 依赖客户端时间，如果客户端时间不准确会导致缓存失效2. 服务器时间和客户端时间可能不一致3. 已被Cache-Control替代
Node.js示例：
123456789const express = require ...
前端安全核心威胁（6大类型）记忆口诀：XSS → CSRF → 点击劫持 → SQL注入 → 中间人攻击 → 其他
1234561. XSS（跨站脚本攻击）：注入恶意脚本2. CSRF（跨站请求伪造）：伪造用户请求3. 点击劫持：诱导用户点击4. SQL注入：注入恶意SQL5. 中间人攻击：拦截篡改数据6. 其他：DDoS、暴力破解等
1. XSS（Cross-Site Scripting）跨站脚本攻击1.1 XSS攻击类型存储型XSS（最危险）
123456789101112// 攻击场景：评论、留言板// 1. 攻击者提交恶意脚本到数据库const comment = '<script>alert(document.cookie)</script>';// 2. 其他用户访问页面时，脚本被执行<div>{comment}</div> // 直接渲染，脚本执行// 危害：// - 窃取Cookie// - 劫持用户会话// - 篡改页面内容// - 钓鱼攻击
反射型XSS
123456// ...
6. 版本管理6.1 语义化版本（Semantic Versioning）12345678910版本格式：主版本号.次版本号.修订号 (MAJOR.MINOR.PATCH)1.0.0 → 1.0.1 修复bug（PATCH）1.0.1 → 1.1.0 新增功能，向下兼容（MINOR）1.1.0 → 2.0.0 重大更新，不兼容（MAJOR）先行版本：1.0.0-alpha.1 内测版本1.0.0-beta.1 公测版本1.0.0-rc.1 候选版本
6.2 版本发布流程12345678910111213141516# 使用standard-version自动化版本管理npm install standard-version -D# package.json{ "scripts": { "release": "standard-version", "release:minor": "standard-version --release-as m ...
