- 博客(51)
- 收藏
- 关注
RSS订阅转载 提高文档翻译效率神器：VS Code 插件之 Translator Helper
微软Docs中文文档存在机器翻译可读性差的问题。作者开发了VSCode插件TranslatorHelper，支持一键翻译英文段落并插入原文后，显著提升文档本地化效率。插件支持Google/GoogleCN翻译API，通过快捷键(Alt+T)实现快速翻译，还能显示选中文本翻译(Ctrl+T)。目前已在VSCode应用商店发布，未来计划整合微软翻译API。该工具简化了开发者在GitHub参与Docs本地化的工作流程，鼓励更多人贡献高质量中文技术文档。
2026-06-28 11:27:53
96
原创 别再只会用 WebSocket 了：从“能用”到“可靠”的完整工程实践
本文从WebSocket原理出发，剖析其在生产环境中的局限性，提出了构建可靠实时通信系统的完整方案。文章指出WebSocket仅是传输通道，无法解决消息丢失、重复、乱序等问题，必须通过ACK确认、消息ID、重连补偿、心跳检测和CRC校验等应用层机制，才能实现可靠通信。同时强调指数退避重连、多端登录处理等工程实践，最终将WebSocket升级为具备业务可靠性的消息系统。文章揭示了实时通信的核心在于"正确+稳定"，而非单纯追求速度。
2026-04-22 19:25:14
456
原创 手写高性能虚拟列表（详解！！！）
本文系统梳理了虚拟列表的实现与优化方案，从基础架构到高级优化策略。核心实现包括占位容器、索引映射、数据裁剪和偏移渲染；优化方案涵盖节流、缓冲区和动态调整。针对不定高列表，提出高度缓存、前缀和数组和ResizeObserver解决方案。文章对比了各种方案的优缺点，强调在性能、复杂度和用户体验间取得平衡。最终形成完整的虚拟列表设计体系，为不同场景提供工程化实现路径，特别适合需要处理大数据量渲染的前端性能优化场景。
2026-04-11 19:48:29
380
原创 别再只会用 axios 了！我写了个 SDK 统一 fetch / axios，还顺手做了前端容灾系统（附架构图 + 时序图）
本文提出了一种统一前端请求库（axios/fetch）的SDK设计方案，重点解决了接口容灾和错误处理问题。通过三层架构设计：Adapter层实现请求库适配，Core层统一错误模型（网络/服务端/客户端错误），Strategy层实现重试和容灾策略。方案采用指数退避重试、多域名切换、跨Tab状态同步等技术，使前端具备自主容灾能力，不依赖特定请求库。核心价值在于将容灾能力前移、解耦请求库依赖，并为监控、熔断等扩展功能提供统一基础。
2026-04-11 16:31:02
255
原创 手撕LRU缓存：从面试必考题到Redis内存淘汰的底层逻辑
本文深入解析LRU缓存淘汰算法，从核心原理到工业级应用。LRU（最近最少使用）通过HashMap+双向链表实现O(1)时间复杂度的读写操作，广泛应用于Redis内存淘汰、操作系统页面置换和Vue的keep-alive组件缓存。文章对比了不同淘汰策略的优劣，提供三种实现方案：最优的双向链表方案、利用Map有序性的简化版，以及警示性的低效数组方案。重点剖析了LeetCode 146题的链表实现，展示如何通过虚拟头尾节点简化边界处理，实现高效的缓存淘汰机制。最后指出LRU在突发流量下的局限性，引出改进算法LRU-
2026-04-10 18:41:33
206
原创 Chrome内核揭秘：一文吃透渲染流水线，性能优化不再玄学
本文深入解析浏览器从输入URL到页面渲染的全过程。首先介绍现代浏览器的多进程架构，包括主进程、GPU进程、网络进程和渲染进程等模块。然后详细拆解关键渲染路径：1）构建DOM树时的流式解析机制和脚本阻塞处理；2）CSSOM树的并行构建及其对JS执行的阻塞影响；3）合并DOM和CSSOM生成渲染树；4）布局阶段计算节点精确位置；5）绘制和合成最终像素。文章还提供了DNS预解析、资源优先级控制、CSS/JS加载优化等性能优化技巧，通过伪代码示例和架构图帮助理解浏览器底层工作原理。
2026-04-09 15:38:35
655
原创 大四双非春招学习记录-K 个一组反转链表
本文详细讲解了如何实现「K 个一组反转链表」的算法。主要思路包括：1）使用虚拟头节点简化边界处理；2）每次找到当前组的头尾节点；3）反转当前组后连接回原链表；4）迭代或递归处理所有分组。文章提供了两种实现方案（迭代法和递归法），并配有详细图解和代码注释，帮助理解反转过程中的指针操作。关键点在于正确处理组间连接和边界条件，确保时间复杂度为O(n)，空间复杂度为O(1)。
2026-04-08 22:16:14
415
原创 JavaScript 深拷贝完全指南：从入门到精通
JavaScript深拷贝完全指南：从浅拷贝到结构化克隆 本文系统介绍了JavaScript中深拷贝的各种实现方案及其优缺点。浅拷贝仅复制第一层属性，而深拷贝需要完全独立副本。主要方案包括： JSON序列化法：简单但丢失特殊类型 递归实现：支持循环引用和多种类型 MessageChannel：异步结构化克隆 structuredClone API：现代浏览器原生支持 lodash.cloneDeep：工业级解决方案 性能方面，JSON方法最快但功能有限，递归实现最通用，structuredClone是未来趋
2026-04-08 18:39:02
548
原创 前端域名容灾的四种实现方案对比：为什么我们最终选择“请求封装（Request Wrapper）
本文探讨了前端域名容灾机制的四种技术方案：请求封装、请求重写、ServiceWorker和网关层处理。通过对比各方案的优缺点，最终选择了请求封装（RequestWrapper）作为最优解。该方案具有低侵入性、高可控性、易维护等优势，能有效解决网络波动、服务故障等问题，提升前端可靠性。文章详细分析了四种方案的适用场景和实现难度，并阐述了选择请求封装的核心原因：策略完全可控、调试便捷、兼容性好且部署成本最低。该方案已成功应用于实际业务，未来还将扩展更多智能容灾功能。
2026-03-24 16:30:27
398
原创 Vue 递归组件实战：手写一个文件/文件夹树形组件
Vue递归组件实现文件树摘要 本文详细介绍了如何使用Vue递归组件实现可展开的文件树组件。主要内容包括： 数据结构设计：采用统一的节点格式，通过type区分文件和文件夹，文件夹包含children子节点 递归组件实现： 组件内部调用自身实现递归渲染 通过depth控制缩进层级 文件与文件夹采用不同模板和交互 状态管理： 采用受控模式，由父组件统一管理expandedIds 通过事件冒泡实现状态同步 完整实现： 提供组件接口设计 展示模板递归写法 说明样式和逻辑要点 该组件可直接用于项目，也适合作为递归组件的
2026-03-12 23:11:48
442
原创 Markdown流式渲染组件技术文档
Markdown流式渲染组件技术文档摘要 本项目实现了一个基于Vue 3的通用Markdown流式渲染组件，具有以下核心特性： 流式渲染能力：支持增量解析和批次渲染Markdown内容，实现逐字/逐块展示效果 完整语法支持：涵盖标题、列表、表格等标准Markdown语法 专业内容渲染：支持代码高亮（Monaco Editor）和LaTeX公式（KaTeX） 性能优化：采用内存管理、图片缓存、智能调度等技术确保流畅体验 模块化架构：包含StreamDown（流式管理）、NodeRenderer（渲染调度）和多
2026-02-26 17:49:34
1043
原创 切图仔面试被说缺乏产品思维
摘要： 缺乏产品思维表现为技术自嗨而忽视用户价值与商业目标，典型症状包括盲从需求、过度设计、忽视数据等。改进方法：1）接需求时反问用户、场景与指标；2）技术方案评审时对比用户价值与商业收益；3）上线后关注核心数据闭环（前端看性能、后端看稳定性、算法看转化）。核心要义是将“用户留存”和“商业收益”置于技术实现之前，避免陷入“技术正确但价值缺失”的陷阱。
2026-02-08 19:56:37
758
2
原创 一文打尽：Content-Type 到底有多少种？区别与使用场景全梳理
本文全面梳理了HTTP协议中的Content-Type字段，详细介绍了其MIME标准语法和常见参数。文章提供主类型速查表，涵盖text、image、audio、video等常见类型及其应用场景，并总结了7种开发中最常用的Content-Type使用场景，包括网页返回、API数据交换、文件上传等。同时强调容易被忽视的charset和boundary参数的重要性，给出选型口诀帮助开发者快速选择合适类型。文章指出Content-Type是HTTP数据的"解析说明书"，选错类型会导致解析失败或性
2025-12-21 19:35:58
1226
原创 前端性能与监控指标采集系统设计方案
本文提出了一套完整的前端性能与监控指标采集系统设计方案。系统采用分层架构，包含6个核心模块：前端SDK采集层负责自动/手动采集性能指标、错误和用户行为；数据传输层实现高效可靠的数据上报；数据处理层进行数据清洗、聚合和异常检测。关键技术包括Web Vitals指标采集、批量上报策略、采样机制以及数据压缩传输等。该系统可全面监控前端性能问题，为优化用户体验提供数据支持。
2025-12-13 21:08:49
899
原创 从零到一：构建一个实时语音翻译应用（Vue3 + Web Speech API）
本文介绍了一个基于Vue3和Web Speech API的实时语音翻译应用开发过程。该应用支持语音识别、多语言翻译和语音播报功能，采用Web Speech API进行语音识别，集成MyMemory和Google翻译服务，并实现文字转语音功能。项目通过环境检测自动选择最佳API，包含错误处理和降级策略，确保应用稳定性。核心功能包括持续语音识别、临时/最终结果区分、多翻译服务支持以及移动端优化。
2025-12-13 18:52:56
1396
原创 Claude Skills：系统性解析与技术对比
摘要： Claude Skills是Anthropic为Claude AI设计的模块化能力包，通过封装脚本、模板和资源文件（如SKILL.md），将通用AI转化为特定领域专家。其核心价值在于： 标准化与自动化：确保输出一致性（如品牌规范、文档生成），提升任务效率40%以上； 按需加载：通过渐进式披露技术动态调用技能，避免上下文过载； 复用性：跨平台（网页、API）通用，降低重复开发成本。 技术对比： vs MCP：Skills专注任务执行（如PPT生成），MCP侧重系统连接； vs RAG：Skills解决
2025-12-05 00:00:47
1025
原创 CDN 引入 与 npm 引入的区别
CDN引入和npm引入是前端集成第三方库的两种主要方式，各有特点。CDN通过<script>标签直接加载远程JS文件，适合简单页面、原型开发，具有快速加载和缓存优势，但缺乏模块化、依赖管理和构建优化。npm通过包管理器下载依赖，配合构建工具实现模块化、Tree Shaking和版本控制，更适合现代工程化项目，提供更好的开发体验和维护性。实际应用中，简单场景推荐CDN，复杂项目应选择npm，也可混合使用两者优化性能。总体趋势是npm逐渐成为主流开发方式。
2025-12-03 20:53:42
872
原创 系统性整理组件传参14种方式
本文系统梳理了Vue组件通信的14种方式，包括props、$emit、v-model、provide/inject等常用方法，以及EventBus、Vuex/Pinia等状态管理方案。针对每种方式详细说明了原理、用法、适用场景、优缺点及Vue2/Vue3的支持情况，并标注推荐程度。文章强调最佳实践：优先使用props+emits保持组件清晰，跨层级推荐provide/inject，共享状态用Pinia而非EventBus，避免直接操作子组件。通过对比表格直观展示各方式的特点，帮助开发者根据实际需求选择最合适
2025-12-03 20:12:05
1194
原创 如何处理大模型幻觉问题？
摘要：减少LLM幻觉的多维度策略 本文从数据、模型、应用和评估四个维度系统归纳了减少大语言模型(LLM)幻觉的策略。在数据层面，强调高质量数据清洗、事实一致性微调和知识注入；模型层面采用不确定性感知、思维链提示和自我校准等方法；应用层面通过检索增强生成(RAG)、外部工具调用等增强输出可靠性；评估层面则建立事实性指标、用户反馈和红队测试机制。这些策略贯穿模型全生命周期，共同构建了减少幻觉的完整解决方案，在保持模型性能的同时提高输出准确性。
2025-11-30 16:58:37
697
原创 面向Nodejs开发人员MCP快速入门
摘要 Model Context Protocol (MCP) SDK 为AI模型提供了标准化接口，使其能够安全调用外部工具服务。本文通过TypeScript实现一个计算器工具服务，演示了MCP的核心功能：1) 通过ListToolsRequest声明工具功能；2) 使用CallToolRequest处理实际调用；3) 利用Zod进行参数验证确保安全性。该模式可扩展至天气查询、数据库操作等复杂场景，显著增强AI模型的能力边界。MCP标准化协议既方便开发者构建工具服务，又确保AI模型能可靠地调用这些功能。
2025-11-29 21:57:45
1143
原创 一篇“连爸妈都能看懂”的 MCP 入门小短文
本文用通俗易懂的方式介绍了MCP（Model Context Protocol）协议。通过超市购物类比，解释MCP是AI的"导购系统"，让不同AI模型能统一识别和使用插件。文章指出MCP解决了AI插件接口不统一的问题，实现"一次开发，多平台通用"的效果。作者用非技术语言描述了MCP的工作原理：只需编写包含插件名称、功能和调用方式的"说明书"即可。最后强调MCP将像USB-C接口一样，让AI插件使用变得简单便捷，普通用户也能轻松为不同AI安装功能插件
2025-11-29 20:56:47
534
原创 前端面试必问：大文件上传慢、卡顿、失败怎么办？这里有标准答案
摘要： 本文提出了一种基于分块和断点续传的大文件上传前端设计方案。通过文件分片（5MB/块）、WebWorker计算MD5标识、预检查询实现秒传/续传，采用并发控制（3-6线程）提升效率。系统包含分片上传、合并通知、异常处理三阶段，支持暂停/取消（AbortController）、自动重试（3次）及资源清理。关键优化包括进度实时反馈、动态并发调整和错误分类提示，有效解决了传统大文件上传的稳定性问题，显著提升用户体验。（149字）
2025-11-26 22:10:34
1006
原创 Webpack 常用插件生命周期
initialize 配置期 → make 解析期 → processAssets 产出期 → emit 写盘期 → done 收尾期」在任何钩子插入逻辑，就能让 webpack 按你的规则跳舞。
2025-11-01 22:56:13
604
原创 手搓一个 Webpack5 插件：让每一行代码都自带「回声」——BannerWebpackPlugin 从 0 到全球下载
摘要：本文带你从 0 到 1 实现一个「BannerWebpackPlugin」——自动为 JS/CSS 插入版权 banner，并额外生成独立版权文件。过程中，我们将深入 Webpack5 的钩子宇宙、Source 家族与时间戳陷阱，最后附赠「发布 npm + CI 自动注入」一条龙方案。读完，你可以自信地在简历里写下：「写过 Webpack 插件，线上日下载 3k+」。
2025-11-01 22:54:51
530
原创 一文讲透 npm 包版本管理规范
本文系统梳理了npm版本管理规范，重点解析语义化版本(SemVer)规则：主版本号(不兼容改动)、次版本号(新增功能)、修订号(bug修复)。详解package.json中的版本符号(^、~、*等)差异及使用场景，强调npm默认使用^的原因与潜在风险。特别说明package-lock.json锁定机制对团队协作的重要性，提供依赖升级策略和工程实践建议，最后总结面试表达思路。核心要点：package.json控制依赖范围，lock文件锁定具体版本，SemVer规范版本变更规则，三者结合确保项目稳定性和可重现性
2025-11-01 22:52:51
1080
原创 秋招被问到的常见问题
一、原型链的继承优点：父类方法可以复用缺点：父类所有的引用类型的会被共享二、构造函数继承，无法使用父类的 prototype优点：缺点;三、组合式继承将原型链继承和构造函数继承结合会使得实例对象时，原型中会存在两份相同的属性/方法，每个实例一份，原型上也有一份四、寄生组合式继承结合借用构造函数传递参数和寄生模式实现继承。
2025-10-19 02:26:46
537
原创 秋招前端手写基础题（一）
/ false（原始类型不装箱）// 如果此时存在定时器的话，则取消之前的定时器重新记时。// 如果此时存在定时器的话，则取消之前的定时器重新记时。// 设置定时器，使事件间隔指定事件后执行。// 设置定时器，使事件间隔指定事件后执行。// 函数防抖的实现。
2025-10-19 00:36:38
503
原创 请求时携带一个RequestId的作用
请求时携带一个RequestId的作用UUID的实现：其中 Math.random() * 16生成一个[0,16)的随机小数，一般去除小数使用Math.floor,但由于每次接口请求都会生成，需要考虑性能，所以使用'｜0位运算十分巧妙。
2025-10-14 15:32:35
277
原创 前端面试经常被问到的八股
是 HTML5 提供的浏览器端存储机制，而 session是服务器端的会话管理技术，两者本质不同：数据存储在服务器内存或数据库中，通过唯一的Session ID标识用户会话。客户端需通过 Cookie 或 URL 参数传递Session ID以维持状态2存储位置与作用域属于浏览器本地存储，数据保存在客户端浏览器内存中，仅对当前页面所在域名有效。即使同一域名下不同页面也无法直接共享（需通过或通信）1。session数据存储在服务器内存或数据库中，通过唯一的Session ID标识用户会话。
2025-07-05 21:30:57
944
原创 (二)（详解！！！）浏览器本地缓存之localStorage、sessionStorage与session的区别
是 HTML5 提供的浏览器端存储机制，而 session是服务器端的会话管理技术，两者本质不同：!数据存储在服务器内存或数据库中，通过唯一的Session ID标识用户会话。客户端需通过 Cookie 或 URL 参数传递Session ID以维持状态2存储位置与作用域属于浏览器本地存储，数据保存在客户端浏览器内存中，仅对当前页面所在域名有效。即使同一域名下不同页面也无法直接共享（需通过或通信）1。session数据存储在服务器内存或数据库中，通过唯一的Session ID标识用户会话。
2025-03-04 20:40:48
1381
原创 （一）浏览器本地缓存之Cookie 详解！！！
http是无状态的协议，会话结束了也就终止了联系，为了能在下次发送请求可以直接让服务器端知道是谁，于是就诞生了cookie。删除一组cookie字段的方法，通常是设置过期时间expire或者max-age=-999999。记录自己的学习过程，共勉！
2025-03-04 20:01:53
318
原创 【无标题】
W3C标准：网页由三部分构成结构：HTML表现：CSS行为：JavaScriptHTML（HyperText Markup Language）是一种用于创建网页结构和内容的标记语言。通过使用HTML标签，可以组织和呈现文本、图像、链接、表格、表单等元素，从而构建出丰富的网页。<html><head><title><body><h1><h6>:粗体:斜体:文本下划线<br><br><p><a><img><ul><ol><li><ul><ol><table><tr><td><th><form>
2025-03-02 15:51:56
855
原创 前端面试最喜欢问的浏览器强制缓存和协商缓存
expires:绝对时间协商缓存：public:cache-control常用设置字段：2. -no-cache （协商缓存）禁止浏览器存储数据，每次用户请求都要向服务器发送请求4. -public；可以被所有用户缓存，包括终端用户和CDN等中间代理服务器只能被终端用户的浏览器缓存etag:hash值。
2025-02-28 19:47:20
262
原创 JS基本知识
state` 是一个表示新状态的对象，`title` 是新页面的标题，`url` 是新页面的 URL 地址。可以通过索引访问数组中的元素，索引从 `0` 开始。例如，要访问数组中的第一个元素，可以使用 `arr[0]`，获取第三个元素可以使用 `arr[2]`，依此类推。需要注意的是，使用 `history.pushState()` 和 `history.replaceState()` 方法不会触发页面的刷新和加载，因此需要结合 `popstate` 事件来监听 URL 地址的变化，并做相应的处理。
2025-02-28 19:43:23
429
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人