- 博客(39)
- 收藏
- 关注
RSS订阅原创 一文打尽：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
477
原创 前端性能与监控指标采集系统设计方案
本文提出了一套完整的前端性能与监控指标采集系统设计方案。系统采用分层架构，包含6个核心模块：前端SDK采集层负责自动/手动采集性能指标、错误和用户行为；数据传输层实现高效可靠的数据上报；数据处理层进行数据清洗、聚合和异常检测。关键技术包括Web Vitals指标采集、批量上报策略、采样机制以及数据压缩传输等。该系统可全面监控前端性能问题，为优化用户体验提供数据支持。
2025-12-13 21:08:49
751
原创 从零到一：构建一个实时语音翻译应用（Vue3 + Web Speech API）
本文介绍了一个基于Vue3和Web Speech API的实时语音翻译应用开发过程。该应用支持语音识别、多语言翻译和语音播报功能，采用Web Speech API进行语音识别，集成MyMemory和Google翻译服务，并实现文字转语音功能。项目通过环境检测自动选择最佳API，包含错误处理和降级策略，确保应用稳定性。核心功能包括持续语音识别、临时/最终结果区分、多翻译服务支持以及移动端优化。
2025-12-13 18:52:56
1053
原创 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
801
原创 CDN 引入 与 npm 引入的区别
CDN引入和npm引入是前端集成第三方库的两种主要方式，各有特点。CDN通过<script>标签直接加载远程JS文件，适合简单页面、原型开发，具有快速加载和缓存优势，但缺乏模块化、依赖管理和构建优化。npm通过包管理器下载依赖，配合构建工具实现模块化、Tree Shaking和版本控制，更适合现代工程化项目，提供更好的开发体验和维护性。实际应用中，简单场景推荐CDN，复杂项目应选择npm，也可混合使用两者优化性能。总体趋势是npm逐渐成为主流开发方式。
2025-12-03 20:53:42
744
原创 系统性整理组件传参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
1123
原创 如何处理大模型幻觉问题？
摘要：减少LLM幻觉的多维度策略 本文从数据、模型、应用和评估四个维度系统归纳了减少大语言模型(LLM)幻觉的策略。在数据层面，强调高质量数据清洗、事实一致性微调和知识注入；模型层面采用不确定性感知、思维链提示和自我校准等方法；应用层面通过检索增强生成(RAG)、外部工具调用等增强输出可靠性；评估层面则建立事实性指标、用户反馈和红队测试机制。这些策略贯穿模型全生命周期，共同构建了减少幻觉的完整解决方案，在保持模型性能的同时提高输出准确性。
2025-11-30 16:58:37
514
原创 面向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
899
原创 一篇“连爸妈都能看懂”的 MCP 入门小短文
本文用通俗易懂的方式介绍了MCP（Model Context Protocol）协议。通过超市购物类比，解释MCP是AI的"导购系统"，让不同AI模型能统一识别和使用插件。文章指出MCP解决了AI插件接口不统一的问题，实现"一次开发，多平台通用"的效果。作者用非技术语言描述了MCP的工作原理：只需编写包含插件名称、功能和调用方式的"说明书"即可。最后强调MCP将像USB-C接口一样，让AI插件使用变得简单便捷，普通用户也能轻松为不同AI安装功能插件
2025-11-29 20:56:47
381
原创 我整理的大文件上传方案设计
摘要： 本文提出了一种基于分块和断点续传的大文件上传前端设计方案。通过文件分片（5MB/块）、WebWorker计算MD5标识、预检查询实现秒传/续传，采用并发控制（3-6线程）提升效率。系统包含分片上传、合并通知、异常处理三阶段，支持暂停/取消（AbortController）、自动重试（3次）及资源清理。关键优化包括进度实时反馈、动态并发调整和错误分类提示，有效解决了传统大文件上传的稳定性问题，显著提升用户体验。（149字）
2025-11-26 22:10:34
918
原创 Webpack 常用插件生命周期
initialize 配置期 → make 解析期 → processAssets 产出期 → emit 写盘期 → done 收尾期」在任何钩子插入逻辑，就能让 webpack 按你的规则跳舞。
2025-11-01 22:56:13
530
原创 手搓一个 Webpack5 插件：让每一行代码都自带「回声」——BannerWebpackPlugin 从 0 到全球下载
摘要：本文带你从 0 到 1 实现一个「BannerWebpackPlugin」——自动为 JS/CSS 插入版权 banner，并额外生成独立版权文件。过程中，我们将深入 Webpack5 的钩子宇宙、Source 家族与时间戳陷阱，最后附赠「发布 npm + CI 自动注入」一条龙方案。读完，你可以自信地在简历里写下：「写过 Webpack 插件，线上日下载 3k+」。
2025-11-01 22:54:51
503
原创 一文讲透 npm 包版本管理规范
本文系统梳理了npm版本管理规范，重点解析语义化版本(SemVer)规则：主版本号(不兼容改动)、次版本号(新增功能)、修订号(bug修复)。详解package.json中的版本符号(^、~、*等)差异及使用场景，强调npm默认使用^的原因与潜在风险。特别说明package-lock.json锁定机制对团队协作的重要性，提供依赖升级策略和工程实践建议，最后总结面试表达思路。核心要点：package.json控制依赖范围，lock文件锁定具体版本，SemVer规范版本变更规则，三者结合确保项目稳定性和可重现性
2025-11-01 22:52:51
893
原创 秋招被问到的常见问题
一、原型链的继承优点：父类方法可以复用缺点：父类所有的引用类型的会被共享二、构造函数继承，无法使用父类的 prototype优点：缺点;三、组合式继承将原型链继承和构造函数继承结合会使得实例对象时，原型中会存在两份相同的属性/方法，每个实例一份，原型上也有一份四、寄生组合式继承结合借用构造函数传递参数和寄生模式实现继承。
2025-10-19 02:26:46
504
原创 秋招前端手写基础题（一）
/ false（原始类型不装箱）// 如果此时存在定时器的话，则取消之前的定时器重新记时。// 如果此时存在定时器的话，则取消之前的定时器重新记时。// 设置定时器，使事件间隔指定事件后执行。// 设置定时器，使事件间隔指定事件后执行。// 函数防抖的实现。
2025-10-19 00:36:38
475
原创 请求时携带一个RequestId的作用
请求时携带一个RequestId的作用UUID的实现：其中 Math.random() * 16生成一个[0,16)的随机小数，一般去除小数使用Math.floor,但由于每次接口请求都会生成，需要考虑性能，所以使用'｜0位运算十分巧妙。
2025-10-14 15:32:35
213
原创 前端面试经常被问到的八股
是 HTML5 提供的浏览器端存储机制，而 session是服务器端的会话管理技术，两者本质不同：数据存储在服务器内存或数据库中，通过唯一的Session ID标识用户会话。客户端需通过 Cookie 或 URL 参数传递Session ID以维持状态2存储位置与作用域属于浏览器本地存储，数据保存在客户端浏览器内存中，仅对当前页面所在域名有效。即使同一域名下不同页面也无法直接共享（需通过或通信）1。session数据存储在服务器内存或数据库中，通过唯一的Session ID标识用户会话。
2025-07-05 21:30:57
901
原创 (二)（详解！！！）浏览器本地缓存之localStorage、sessionStorage与session的区别
是 HTML5 提供的浏览器端存储机制，而 session是服务器端的会话管理技术，两者本质不同：!数据存储在服务器内存或数据库中，通过唯一的Session ID标识用户会话。客户端需通过 Cookie 或 URL 参数传递Session ID以维持状态2存储位置与作用域属于浏览器本地存储，数据保存在客户端浏览器内存中，仅对当前页面所在域名有效。即使同一域名下不同页面也无法直接共享（需通过或通信）1。session数据存储在服务器内存或数据库中，通过唯一的Session ID标识用户会话。
2025-03-04 20:40:48
1198
原创 （一）浏览器本地缓存之Cookie 详解！！！
http是无状态的协议，会话结束了也就终止了联系，为了能在下次发送请求可以直接让服务器端知道是谁，于是就诞生了cookie。删除一组cookie字段的方法，通常是设置过期时间expire或者max-age=-999999。记录自己的学习过程，共勉！
2025-03-04 20:01:53
285
原创 【无标题】
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
832
原创 前端面试最喜欢问的浏览器强制缓存和协商缓存
expires:绝对时间协商缓存：public:cache-control常用设置字段：2. -no-cache （协商缓存）禁止浏览器存储数据，每次用户请求都要向服务器发送请求4. -public；可以被所有用户缓存，包括终端用户和CDN等中间代理服务器只能被终端用户的浏览器缓存etag:hash值。
2025-02-28 19:47:20
228
原创 JS基本知识
state` 是一个表示新状态的对象，`title` 是新页面的标题，`url` 是新页面的 URL 地址。可以通过索引访问数组中的元素，索引从 `0` 开始。例如，要访问数组中的第一个元素，可以使用 `arr[0]`，获取第三个元素可以使用 `arr[2]`，依此类推。需要注意的是，使用 `history.pushState()` 和 `history.replaceState()` 方法不会触发页面的刷新和加载，因此需要结合 `popstate` 事件来监听 URL 地址的变化，并做相应的处理。
2025-02-28 19:43:23
386
原创 当面试过程中问到git的使用该如何回答？
git branch -d (branchname)：删除分支命令。- git checkout (branchname)：切换分支命令。- git branch (branchname)：创建分支命令。- git status：查看文件的状态命令。- git diff：查看更新的详细信息命令。- git add：添加文件到缓存命令。- git branch：查看分支命令。- git merge：合并分支命令。- git commit：提交命令。- git rm：删除命令。
2025-02-28 19:30:03
297
原创 你可体验简单聊天小demo（可发照片与表情版）
1. 只能发截图之类的照片，拍摄照片内存过大，为了防止资源过度消耗，不允许发送哦。2.目前可进行注册新账号，和修改密码，但不允许和其他人聊天嘞。已有两个账号可供尝试体验。
2024-10-22 01:37:04
276
2
原创 compted(计算属性)与watch的区别！！！
有明显的副作用需求（类如日志记录，外部数据操作，深度对象观察） coputed(()=>{当需要在数据变化的时候执行复杂的操作时候（异步请求，访问dom元素，手动触发其他函数）console.log('count变化了'，newvalue,oldvalue)}) 会利用缓存功能，适合计算复杂逻辑的属性，减少不必要的计算，会默认缓存结果。当需要根据根据其他数据的变化，返回一个新的处理结果，并且该结果会频繁使用时。3.watch函数：监听数据变化，数据变化时候执行回调函数。监听某一个属性:watch(
2024-10-14 10:47:47
243
原创 v-model的原理
等价于v-model是数据的双向绑定，渲染的界面与数据本身两个方面都能改变数据v-model也是单项数据流：总结就是数据向下，事件向上。
2024-10-14 10:41:33
408
原创 仿QQWeb即时聊天系统课设
综上所述，通过这个项目利用vue3+websocket+vite+js+router+vant4，我掌握了多种前端技术的应用和整合，还积累了丰富的开发经验,这些都是未来在软件开发领域中非常宝贵的财富，希望这些经历能为我的未来学习和职业发展带来更多的启发和成长机会,为将来在软件开发领域的探索和发展奠定了坚实的基础。传统的 HTTP 请求-响应模型不同，WebSocket 允许服务器和客户端之间实时、低延迟的双向通信，减少了因频繁创建连接所带来的开销，适合用于聊天系统、实时通知、在线游戏等应用。
2024-06-19 17:22:06
1695
原创 在做仿QQ聊天的界面时，使用flex布局不知道如何顶出输入框下的聊天消息
这样的声明时，实际上这样的写法是不标准的，并且大多数情况下不会按预期工作。Flex属性是一个简写属性，用于设置flex-grow, flex-shrink, 和 flex-basis这三个属性。正确的语法通常涉及无单位的数字、百分比或者auto值，而不是直接指定像素值。加上flex-shrink: 0;时，最后一天消息就能显示出来了，一开始不知道为什么，消息一直藏在了输入框下面。当不加flex-shrink: 0;其中f在Flex布局中使用。
2024-06-06 15:21:31
332
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人