- 博客(86)
- 收藏
- 关注
RSS订阅原创 AI工具面经
Server：独立进程，提供工具能力（读文件、Git、执行命令），通过标准协议通信。先说明任务，附上相关文件，明确禁止写法，要求输出代码 + 简要说明，减少 AI 自由发挥带来的幻觉。需求变更后，Agent 通过 MCP 读取 Git 变更、查看相关源码，生成代码，再调用 MCP 执行单元测试，输出测试结果；任务过大就拆成小任务；MCP 是协议标准化，Server 独立进程，可跨模型复用，工具能力可以插拔，不用改模型代码。做后端接口开发时，@引入路由、实体类文件，让 AI 理解已有结构，避免造不存在字段。
2026-09-18 10:23:21
194
原创 next笔记
是 App Router 的，Next 会自动给当前路由段包一层<Suspense>，这个文件的内容就是 Suspense 的 fallback。当页面里面卡住时，立刻展示 loading，数据准备完成后自动替换成真实页面，底层就是。
2026-09-16 23:02:27
205
原创 页面DOM过多滚动卡顿原因
和transform。will-change: transform只是，不是强制。浏览器有权忽略。transform是强制提升一个图层，可以作为兜底。
2026-09-16 11:10:09
43
原创 IDB基础使用与练习
/ 创建实例// 版本1，定义仓库和索引// bookId：主键// price：普通索引// [category+price]：复合索引 category + price});// 表结构。
2026-09-15 11:10:52
44
原创 canvas教程
Canvas 性能│├── 减少绘制次数│├── 减少状态切换│├── 批量绘制││├── 避免频繁创建对象│├── 控制 Canvas 分辨率│├── 大量计算放 Worker││└── 必要时使用 WebGL。
2026-09-13 19:18:10
281
原创 性能检测埋点方案选择
用web-vitals采集LCP、INP等核心指标；导航、资源、长任务、自定义打点需手写原生Performance API。TTI/TBT属实验室指标，线上不采集。避免重复造轮子，注意库与原生API的分工即可。
2026-09-02 21:31:54
221
原创 为什么动态 import 线上出现 404（最常见 5 大类原因）
本文系统梳理了前端项目打包部署后动态导入（import）异步 chunk 出现 404 的常见原因，包括部署子目录导致 publicPath 配置错误、静态资源服务器路径不匹配、路由 history 模式刷新 404 与 chunk 404 混淆、contenthash 缓存失效，以及别名 @ 动态拼接的坑。文章同时给出快速定位排查步骤和对应解决方案，帮助开发者快速定位并修复线上 404 问题
2026-08-31 12:05:54
197
原创 容器预热预跳转方案
答：预加载拿到目标 chunk 后，空闲时机提前初始化路由容器、预实例组件、预请求基础接口、预渲染骨架，但不展示页面；用户真正点击跳转时，直接挂载渲染，省去初始化 + 资源解析耗时，也就是这 160ms 的主要收益来源。✅ 追问：预热会不会额外消耗内存？怎么控制？补充：有过期策略，长时间未触发真实跳转就销毁预实例、清空缓存；同时限制同时预热页面数量，避免内存堆积。
2026-08-28 17:34:29
186
原创 落地首屏与次屏分层优化
webpack 打包后会生成一段运行时代码： 作用是管理模块的加载、解析、异步 chunk 的加载逻辑（比如、异步引入的 jsonp 加载逻辑），默认这段 runtime 代码会打包进主 chunk（main.js）里面。
2026-08-27 21:11:02
334
原创 fetch+readablestream（Streamable）流式输出
浏览器环境，传统 axios 默认适配器（XHR）不支持真正的 ReadableStream 流式逐块接收；fetch 原生基于 Streams 标准，response.body 直接返回 ReadableStream，所以 AI Streamable / SSE 流式对话大家首选 fetch。场景：用户快速连续发消息、切换对话，上一个 AI 流还在返回，如果不 abort，旧流还会继续执行。TCP 会分片，一次 read 不一定拿到完整一条业务数据，必须本地 buffer 缓存不完整的行。
2026-08-25 17:51:43
222
原创 长会话虚拟滚动与渲染优化
本文介绍了基于@tanstack/vue-virtual的Vue3虚拟列表实现方案，用于处理动态高度聊天消息的流式渲染。核心思路包括：通过虚拟列表只渲染可视区DOM，配合ResizeObserver动态测量消息高度；使用RAF节流优化滚动和尺寸监听性能；实现历史加载的锚点补偿和流式输出的自动贴底策略。文章详细讲解了技术实现细节，包括虚拟列表初始化、高度测量、滚动控制、Markdown增量渲染等关键环节，并针对常见问题如内存泄漏、渲染抖动、语法残缺等提供了解决方案。
2026-08-22 00:16:32
412
原创 AI 树形会话分支管理方案
对话节点 Node：树的最小单元，每一轮用户提问 + AI 回答生成一个节点；节点可以拥有多个子节点，代表对话分叉。activePath 激活路径：节点 ID 数组，从根节点到当前正在交互的叶子节点，代表用户当前所处对话分支；例如。总结锚点节点 (SummaryAnchor)：打上锚标记的节点，该节点保存向上回溯得到的浓缩完整上下文；回溯上下文遇到锚点就停止向上遍历，避免遍历全部历史。原始内容aiContent，永远不变，用于前端历史回放，禁止改写。摘要内容。
2026-08-17 22:50:24
387
原创 如何获取用户真实首屏时间
本文介绍了如何准确测量网页首屏加载时间的几种方案。核心区分实验室数据（Lighthouse等）和真实用户数据（RUM埋点），推荐采用Google Core Web Vitals规范中的LCP指标作为首屏标准。提供了三种实现方案：1）使用web-vitals官方库快速集成；2）原生Performance API手动采集；3）业务自定义首屏判定。还介绍了数据存储统计方法、现成RUM工具及常见避坑点，强调应采集真实用户数据，优先使用LCP指标，并通过分位数统计优化性能。
2026-08-13 10:39:24
310
原创 Vue3 封装 IntersectionObserver
IntersectionObserver 是浏览器原生交叉观察 API，异步监测目标元素和容器视口是否相交。用来替代 scroll 事件 + getBoundingClientRect 方案，避免高频同步重排，性能更好。答：虚拟列表 DOM 是复用的，同一个 DOM 先后渲染不同数据。元素离开视口再次复用时，要区分当前绑定的数据，防止旧图片请求完成覆盖新内容；回调中区分当前 DOM 绑定的数据，避免旧图片异步加载覆盖新内容。，观察者持续持有 DOM 引用，页面内存持续上涨。，不然观察器监听不存在节点。
2026-07-30 18:00:55
165
原创 简易实现ssr
SSR 在 Node 服务端运行 Vue 组件，通过将组件编译为 HTML 返回浏览器，实现快速首屏展示；客户端执行水合，为静态 DOM 绑定交互事件。
2026-07-28 20:27:15
226
原创 别人的面试题（持续更新）
访问对象属性时，现在对象自身找，找不到就顺着[[prototype]]隐式原型往上找，直到null，这种委托机制，实现了多个对象共享原型上的方法，就是所谓的原型继承。规范强制使用微任务调度回调，提供统一接口管理异步成功，失败，解决传统回调地狱，异步结果无法复用，错误难以统一捕捉的问题。sass功能更强，支持条件，循环，自定义函数，占位选择器，less高级特性较弱。less基于js，变量使用@，sass主流dart-sass，变量$共同点：支持变量，选择器嵌套，mixin混入，import导入，运算。
2026-07-24 21:39:28
220
原创 Promise 本质
Promise本质解析摘要（146字） Promise是异步状态管理模型，核心为状态机（pending/fulfilled/rejected），状态单向凝固后不可逆。通过发布订阅模式管理回调：异步未完成时存储回调，完成后触发队列。关键设计：1) 链式调用：.then返回新Promise，递归处理返回值；2) 微任务调度：确保回调异步执行；3) 结果缓存：支持延时订阅获取历史结果。解决回调地狱、错误追踪和异步组合问题，但底层仍依赖回调，仅标准化异步代码组织形式。async/await为其语法糖。
2026-07-24 11:08:03
309
原创 Offer之路工具推荐
Offer之路 - 求职进度管理工具摘要 Offer之路是一款轻量级求职进度管理工具，帮助求职者高效追踪投递记录。核心功能包括：投递记录管理（增删改查）、7种状态可视化追踪（不同颜色标识）、统计面板实时展示投递数据（总数/面试中/Offer数等）、支持导出TXT/Markdown格式报告。采用localStorage本地存储数据，无需注册即可使用，具有深色工业风界面和响应式设计。技术栈基于HTML5/CSS3/JavaScript，支持桌面和移动端，打开index.html即可直接运行。特色功能包含自动日期
2026-07-22 15:35:54
212
原创 Vue2 SSE 流式对话完整前端代码
浏览器自动存入 Last-Event-ID 请求头用于断点续传。每条 SSE 消息头部必须携带。每条推送标准 JSON（包裹在。id: 数字分片下标。
2026-07-17 12:28:47
258
原创 Vue2 数万级设备数据全局单例 WebWorker 完整实现
核心能力：单例全局 Worker、taskId 任务标记、过期任务丢弃、循环引用清洗、消息异常捕获、组件销毁终止线程、任务取消队列。包含：筛选切换取消旧任务、loading 控制、异常提示、组件卸载终止 Worker、唯一组件 ID 区分多页面。采用单例模式，全局仅创建 1 个后台线程，所有页面组件共用，避免浏览器创建过多线程耗尽资源。独立线程，执行三类耗时逻辑：批量多条件筛选、数据格式化、聚合统计，无 DOM 操作。vue.config.js 添加 loader 匹配 worker 文件。
2026-07-17 12:17:37
230
原创 Vue2 高性能虚拟滚动
本文介绍了一个基于Vue2的高性能虚拟滚动组件，通过多项优化技术实现万级数据的流畅渲染。核心特性包括：使用固定行高和15条缓冲区实现可视区域渲染；通过translate3d和will-change属性启用GPU硬件加速；采用DOM池复用技术避免频繁创建销毁；通过防抖处理和requestIdleCallback分批加载优化性能；使用事件委托减少事件监听数量。组件实现了设备列表展示功能，包含设备名称、区域和在线状态显示，支持点击跳转详情。代码结构清晰，包含详细注释，可作为大数据量列表渲染的参考方案。
2026-07-17 11:48:14
165
原创 手撕小汇总
解构argument，参数使用concat合并解构的argument。记得挂载函数，记得解构argument，记得解构args。记得解构arguments，没传参记得加（）时间戳版（首段执行，无尾调用）定时器版（首段延迟，有尾调用）融合版（首尾调用都有）
2026-07-16 11:08:08
90
原创 说说 Vue3 组合式 API 比选项式 API 强在哪？
设计本质层：它核心解决的是选项式按语法类型分割代码、业务逻辑分散的问题，支持按业务功能聚合代码，实现高内聚低耦合的代码组织，核心目标不是精简代码行数；落地收益层：第一，自定义 Hook 完美替代 mixin，解决命名冲突、来源不明、依赖嵌套三大缺陷，逻辑复用更清晰；第二，基于纯函数的写法对 TS 类型支持远优于选项式；第三，大型项目业务边界清晰，团队协作、新人维护成本显著降低；工程规范层。
2026-07-05 16:05:40
163
原创 马克思主义基本原理在Vue框架中的指导作用探析
本文以马克思主义基本原理为指导，系统分析了Vue框架的技术演进与架构设计。研究表明：Vue的组件化架构体现了普遍联系原理，其渐进式设计解决了工程化与轻量化的矛盾对立；框架迭代遵循实践认识论，功能创新源于工程实践检验；版本升级过程完美践行否定之否定规律，实现技术体系的螺旋式发展。研究证实马克思主义对前端技术发展具有根本性指导价值，开发者应运用辩证唯物主义方法论，在技术实践中把握客观规律，推动技术创新。全文从哲学高度揭示了Vue框架成功的内在理论逻辑，为技术研究提供了马克思主义分析范式。
2026-07-04 20:33:00
247
原创 马克思主义基本原理在MyBatis框架中的指导作用探析
本文从马克思主义哲学视角解析MyBatis框架的技术演进逻辑，揭示其成功背后的科学方法论。研究指出：MyBatis的架构设计遵循唯物辩证法的普遍联系原理，构建了层级清晰、开放互联的系统架构；通过把握对立统一规律，实现了开发效率与灵活性的辩证统一；以实践认识论为指导，使功能设计始终响应实际需求；依据否定之否定规律，完成技术体系的螺旋式升级。论证表明，马克思主义原理对现代信息技术发展具有根本指导价值，技术工作者应建立理论自觉，运用科学世界观推动技术创新。
2026-07-04 20:29:24
460
原创 个人简历面经总结二
渲染过程：URL → 网络 → DOM/CSSOM → 渲染树 → 布局 → 绘制 → 合成；重排 / 重绘的区别与优化是核心；缓存原理：强缓存（）> 协商缓存（ETag），静态资源用 “长时强缓存 + 哈希”，HTML 用协商缓存；事件循环：同步 → 宏任务（一个）→ 微任务（所有）→ 渲染，async/await 是 Promise 语法糖，微任务优先级高于宏任务。减少首屏资源体积，提升 FCP、LCP答typeof：判断基本类型（instanceof：判断类实例（in：判断对象属性（
2026-07-04 12:03:20
745
原创 搜索框防抖 + 竞态完整总结
防抖依靠闭包缓存定时器，降低输入时 Axios 请求频率，但无法解决网络延迟带来的竞态问题；竞态是后发请求先返回、旧数据覆盖页面，Axios 有两种解决方式：一是版本序列号过滤过期响应，二是 AbortController 主动取消上一轮请求，后者性能更优；Vue3 项目里不会零散写逻辑，会封装组合式函数 (composable)，用 shallowRef 存储定时器和中断控制器，借助 onUnmounted 生命周期统一清理资源，避免内存泄漏；
2026-07-02 23:16:43
268
原创 AI Agent Spec Vite 构建插件面试总结
参考 Dify 开源 Agent Spec 配置规范源码，剥离后端 Python 无关逻辑，基于 TS 自研 Vite 插件，实现 AI 人设 YAML 配置文件构建期自动转换，消除前端运行时解析 YAML 的性能损耗，配套类豆包对话前端项目使用。
2026-07-02 21:37:15
249
原创 简述Vite与Webpack原理
Vite与Webpack核心差异在于构建方式：Vite利用浏览器原生ESModule实现按需加载，开发环境通过esbuild预构建依赖（CJS转ESM）和实时单文件编译，配合精准HMR实现秒级启动与更新；生产环境则切换为Rollup进行完整打包。其优势源于去中心化编译和原生ESM支持，但存在旧浏览器兼容性限制。整体呈现"开发极速、生产稳健"的特点，尤其适合现代前端项目的敏捷开发需求。（149字）
2026-06-30 09:58:38
687
原创 为什么 react 需要 fiber 架构，而 Vue 却不需要？
Vue2底层依靠Object.defineProperty 响应式 Dep-Watcher 机制 + 异步 scheduler 更新队列。依靠响应式精准收集依赖，只更新用到变化数据的组件，再通过 nextTick 批量执行更新；没有链表式 Fiber 架构，组件更新一旦启动无法中途暂停。Vue3底层是Proxy 响应式 ReactiveEffect + Block 虚拟 DOM 树 + 增强版 scheduler 调度器编译阶段静态提升、PatchFlags 标记动态节点，大幅减少 diff 计算；
2026-06-28 16:16:41
219
原创 vue3的diff算法的优化在哪
"编译时多标记，运行时少比对"。编译时：通过静态提升、Block Tree、Patch Flags 提前标记"哪些会变、怎么变"。运行时：利用 LIS 算法最小化 DOM 移动次数，结合缓存复用事件和静态 Props。这些优化让 Vue 3 在处理大型表格、长列表、频繁更新的动画场景时，性能远超 Vue 2。
2026-06-27 22:22:32
746
原创 vue3优化SSR在哪
SSR优化需要从多维度入手。核心在于减轻服务器CPU负担：通过组件缓存（v-once/serverCacheKey）、流式渲染、代码分割减少渲染压力；利用页面缓存（LRU）、CDN、集群模式提升吞吐量；配合预加载、数据合并等网络/数据层优化。Nuxt3已内置部分优化方案。实施时需平衡效果与复杂度，优先采用缓存、懒加载等高效手段，将计算压力从服务端向客户端和CDN转移。
2026-06-27 09:56:51
268
原创 Webpack 基础核心内容总结
Webpack 是现代 JavaScript 应用的静态模块打包工具，核心是从入口文件构建依赖图，将项目中分散的 JS、CSS、图片等静态模块，经过转译、压缩、整合后生成浏览器可识别的 bundle 打包文件，是前端工程化的核心工具。它的核心解决思路：把开发时的高级语法、零散资源，转换成生产环境的兼容、优化资源，同时自动处理模块依赖，告别手动引入脚本的繁琐。新建mode: 'development', // 开发模式entry: './src/index.js', // 自定义入口output: {
2026-03-26 21:47:44
427
原创 AI基本概念（大厂面试必问）
定义：MCP (Model Context Protocol) 是一个通信协议，专门用于规范 Agent 与 Tool 服务之间的交互方式。核心组件MCP Server：运行 Agent Tool 服务的服务器。MCP Client：调用 MCP Server 上 Agent Tool 服务的 Agent。MCP 规范内容定义了 MCP Server 与 MCP Client 之间的通信方式。
2026-03-09 16:11:33
414
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人