前端性能优化核心优化方向（6大维度）记忆口诀：加载 → 渲染 → 交互 → 网络 → 缓存 → 构建 1234561. 加载优化：减少资源体积，加快加载速度2. 渲染优化：减少重排重绘，提升渲染性能3. 交互优化：提升用户体验，减少卡顿4. 网络优化：减少请求次数，优化传输5. 缓存优化：合理利用缓存，减少重复请求6. 构建优化：打包体积优化，代码分割 1. 加载性能优化1.1 资源压缩123456789101112131415161718// Gzip/Brotli压缩// nginx配置gzip on;gzip_types text/plain text/css application/json application/javascript;gzip_min_length 1000;// Webpack配置const CompressionPlugin = require('compression-webpack-plugin');module.exports = { plugins: [ new CompressionPlugin(
...

一、RAG（检索增强生成）⭐⭐⭐什么是RAG？解决什么问题？标准答案（背诵版）：RAG是Retrieval-Augmented Generation的缩写，检索增强生成。它解决了LLM的三大问题： 知识过时：模型训练后无法获取最新信息 幻觉问题：模型会编造不存在的内容 领域知识缺失：通用模型缺少企业私有数据 工作流程（必背）： 1用户提问 → 向量化查询 → 检索知识库 → 拼接上下文 → LLM生成答案 RAG的技术实现流程？标准答案： 离线阶段： 文档切片（Chunking）：将长文档切成512-1024 token的片段 向量化（Embedding）：用模型（如text-embedding-ada-002）转成向量 存储：保存到向量数据库（Pinecone/Milvus/Chroma） 在线阶段： 用户问题向量化 相似度检索（余弦相似度/欧氏距离） Top-K召回（通常K=3-5） 构造Prompt：根据以下资料回答：[检索内容] 问题：[用户问题] LLM生成答案 RAG的优化策略？必背要点： Chunking优化 ...

核心流程（记忆关键）记忆口诀：同步代码 → 微任务 → 宏任务 → 微任务 → 宏任务… 执行顺序：执行栈 → 微任务队列清空 → 取一个宏任务 → 微任务队列清空 → 循环 1. 基础概念执行栈（Call Stack） 同步代码按顺序执行的地方 函数调用形成栈帧，先进后出（LIFO） 栈空时才会检查任务队列 任务队列（Task Queue） 宏任务队列（Macro Task）：script、setTimeout、setInterval、I/O、UI渲染、postMessage 微任务队列（Micro Task）：Promise.then/catch/finally、MutationObserver、process.nextTick（Node.js） 2. 事件循环完整流程12345678910111. 执行同步代码（执行栈） ↓2. 执行栈清空 ↓3. 执行所有微任务（清空微任务队列） ↓4. 渲染更新（如果需要） ↓5. 取出一个宏任务执行 ↓6. 回到步骤2（循环） 关键点： 每次执行一个宏任务后，会清空所有微任务 微 ...

核心流程（9个关键步骤）记忆口诀：URL解析 → DNS查询 → TCP连接 → HTTP请求 → 服务器响应 → 解析HTML → 构建DOM/CSSOM → 渲染树 → 绘制显示 1. URL解析 浏览器解析输入的URL，提取协议（http/https）、域名、端口、路径等信息 检查URL合法性，判断是搜索关键词还是网址 如果是HTTPS，后续需要进行SSL/TLS握手 2. DNS域名解析（查找IP地址）流程：浏览器缓存 → 系统缓存 → 路由器缓存 → ISP DNS → 根域名服务器 → 顶级域名服务器 → 权威域名服务器 浏览器先查看自身DNS缓存 查看操作系统hosts文件和系统DNS缓存 向本地DNS服务器（ISP提供）发起查询 递归查询：根DNS → 顶级域名DNS(.com) → 权威DNS 返回目标服务器IP地址 3. 建立TCP连接（三次握手）流程：SYN → SYN+ACK → ACK 客户端发送SYN包（请求建立连接） 服务器返回SYN+ACK包（确认并请求连接） 客户端发送ACK包（确认连接建立） 为什么三次握 ...

WebSocket 面试笔记一、WebSocket 基础概念1.1 什么是 WebSocket？WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，允许服务端主动向客户端推送数据。 核心特点： 全双工通信：客户端和服务端可以同时发送和接收数据 持久连接：建立连接后保持长连接状态 低延迟：无需频繁建立连接，实时性强 较少的控制开销：相比 HTTP 轮询，数据包头部更小 1.2 WebSocket 的应用场景 实时聊天应用 在线协作工具（如文档编辑） 实时数据推送（股票行情、体育比分） 多人在线游戏 实时监控系统 视频弹幕 二、HTTP vs WebSocket2.1 协议对比 特性 HTTP WebSocket 通信方式 半双工（请求-响应） 全双工 连接方式 短连接（HTTP/1.1 可keep-alive） 长连接 服务端推送 不支持（需轮询/长轮询） 原生支持 协议标识 http:// 或 https:// ws:// 或 wss:// ...

没问题，这就为你整理 Vue 框架编译和渲染的完整流程。 这里我将内容分为两部分：结构化的核心笔记（适合复习和搭建框架）以及面试口述逐字稿（适合直接拿来背诵或作为模拟面试的参考）。 第一部分：Vue 编译与渲染完整流程（核心笔记）整个流程可以清晰地划分为四个核心阶段： 1. 初始化与响应式系统构建 (Reactivity) 数据劫持：Vue 遍历 data 对象，使用 Object.defineProperty (Vue 2) 或 Proxy (Vue 3) 将其转换为响应式对象。 依赖收集准备：为每个属性分配一个 Dep (依赖收集器)。 核心逻辑：定义 getter 用于后续收集依赖（Watcher），定义 setter 用于未来数据变化时派发更新。 2. 模板编译阶段 (Compilation)将开发者编写的 <template> 转化为浏览器和 Vue 能执行的 render 函数。包含三个子步骤： 解析 (Parse)：将 HTML 模板字符串通过正则表达式解析成抽象语法树 (AST)。 优化 (Optimize)：遍历 AST，标记静态节点和静态根节点。 ...

这是一份完整的 React18 学习笔记，涵盖从基础到进阶的所有核心知识点。 学习路线图1基础入门 → Hooks 深入 → 组件通信 → TypeScript → 全家桶 → 性能优化 → React18 新特性 一、React 基础入门1.1 项目搭建创建 React 项目： 1234567# JavaScript 项目npx create-react-app my-appcd my-appnpm start# TypeScript 项目npx create-react-app my-app --template typescript 项目结构： 123456789my-app/├── public/ # 静态资源│ └── index.html├── src/│ ├── index.js # 入口文件│ ├── App.js # 根组件│ └── ...├── package.json└── README.md 1.2 React 18 入口文件1234567891011// src/index.jsimport ...

项目架构升级实战指南 (Vue 2 -> Vue 3 / Webpack -> Vite)本手册记录了 eco-etc-firm-fleet-ui-v3 从旧版技术栈全面升级至现代前端基座的完整路径、核心脚本与具体操作流程。 1. 架构设计全景对比 (Framework Comparison) 维度 Webpack 旧架构 (Legacy) Vite + Vue 3 新架构 (Current) 升级理由 Node.js v14.x v24.x 长期支持版，性能更强 包管理器 npm pnpm 节省磁盘空间，安装飞快 构建工具 Webpack 4 / Vue CLI Vite 7.3 毫秒级热更新，开发体验质变 前端框架 Vue 2.7.16 Vue 3.x 组合式 API，更好的 TS 支持 UI 组件库 element-ui 2.13 element-plus 适配 Vue 3，更现代的 UI 状态管理 Vuex 3.x Pinia 2.x 类型安全，逻辑更扁平 路由库 vue-router 3.x vue-rout ...

WSL 环境准备安装 or 更新 wsl1wsl --install / wsl --update 安装 Ubuntu1wsl --install -d Ubuntu 启动Ubuntu 在开始菜单启动Ubuntu在开始菜单中点击图标进入 PowerShell/CMD 中启动 1wsl 1ubuntu 或 1wsl -d Ubuntu Windows Terminal（推荐）Windows Terminal 是微软推出的现代化终端工具，比传统 PowerShell/CMD 更好用安装（PowerShell） 1winget install Microsoft.WindowsTerminal 安装后使用开始菜单搜索 “Terminal” 打开 ->> 点击标签栏的 ▼ 下拉箭头 =>> 选择 Ubuntu 即可进入 三种启动方式对比 启动方式 界面 点击 Ubuntu 图标 独立的 Ubuntu 终端窗口 PowerShell 输入 wsl 在 PowerShell 中进入 Ubuntu Windows Ter ...