- 博客(207)
- 收藏
- 关注
RSS订阅原创 MCP、Agent、大模型应用架构解读
大语言模型应用开发架构解析：MCP、Agent与AI应用的三层协作 摘要： 本文阐述了现代AI系统开发中三个核心组件的协同工作机制。大模型应用作为顶层容器，提供用户交互和系统管理；智能代理(Agent)作为执行引擎，负责意图理解、任务规划和工具调用；MCP协议则标准化工具交互，实现即插即用。三者形成"应用-代理-协议"的层次架构：应用接收用户请求，代理通过MCP发现和调用工具，循环执行直至任务完成。该架构将大模型的推理能力与外部工具执行能力有机结合，为复杂AI系统开发提供了标准化框架。
2026-01-20 17:57:47
66
原创 Vite开发环境按需编译是怎么实现的？
Vite的快，我们并不陌生，主要体现在开发环境时的体验。而相较于其他构建工具，Vite核心是依靠了现代浏览器对于原生esm模块的支持+按需实时编译将性能达到了极致。我们基于源码来看看esbuild编译的完整过程。
2025-12-11 14:54:43
414
原创 Webpack中的插件流程是怎么实现的？
最近在学习许多框架的底层插件化实现，如ice.jsumi.js，在这些框架中，我们都可以在介绍中看到，那插件化的本质是怎么实现的？此时不如回归本质，在我们学习Webpack的时候，都遇到过面试题——当我们思考插件化的实现，不如回到Webpack，从源码看看在前端工程化领域看看插件化是怎么设计的。
2025-10-30 18:44:12
612
原创 从renderToString到hydrate，从0~1手写一个SSR框架
上一篇文章，我们从ice.js源码学习了SSR的底层框架运行过程。React组件App路由基于这整个过程，你有没有思考过？SSR框架是如何把我们本地的组件（页面 - pages、组件 - components等等）串联成这个渲染链路的？本文我们基于上述的渲染流程和主流的SSR框架技术实现原理，实现一个mini版本可跑通的SSR框架，从而深入理解SSR的全链路系统原理。
2025-10-24 17:45:15
1107
原创 开源的SSR框架都是怎么实现的？
SSRCSR是每一个前端开发者耳闻熟知的词。那业界优秀的支持SSR的框架都是怎么实现的呢？本文以来举例，源码级剖析SSR是如何实现的、与CSR的共性、不同点在哪里。
2025-10-23 18:16:07
449
原创 如何设计一个架构良好的前端请求库？
本文探讨了如何设计一个健壮的前端请求库，以统一不同项目中的请求技术方案（如xhr、axios、fetch等）。作者提出了"client请求器+adapter适配器"的架构设计： 核心思想是解耦通用逻辑与特定请求实现，通过适配器模式统一入参和出参标准 Client层处理通用逻辑（拦截器、埋点等） Adapter层负责参数转换和实际请求处理 文中提供了类型设计和代码实现，包括Adapter基类及Fetch/XHR适配器的具体实现 这种架构能有效避免代码耦合，提高可维护性，适用于多平台、多技术
2025-10-11 22:31:15
941
原创 手写一个Webpack HMR插件——彻底搞懂热更新原理
Webpack热更新(HMR)原理解析与实现 本文深入探讨了Webpack热更新(HMR)的实现原理，并提供了手写实现方案。核心内容包括： 概念解析：HMR能实现代码修改后浏览器自动更新，无需手动刷新 实现原理：依赖WebSocket服务、HTTP服务和客户端运行时三部分协作 详细实现流程：通过流程图展示了从代码修改到页面更新的完整过程 手写实现步骤： 创建基础应用结构 开发HTML生成插件 构建Webpack HTTP服务 集成WebSocket通信 实现方案通过自定义中间件和插件，完整复现了Webpac
2025-09-28 18:54:05
1078
原创 0~1构建一个mini blot.new（无AI版本）
本文介绍了如何使用@webcontainer/api在浏览器中运行Node.js环境，实现AI生成前端代码的在线运行。主要步骤包括：1) 创建前端项目并安装必要依赖；2) 配置webpack和TypeScript；3) 使用React构建应用界面；4) 通过预置文件模拟完整的Vite+React项目结构。该技术使浏览器能直接执行npm install等命令，无需后端服务器即可运行前端服务，适用于在线IDE、AI代码生成等场景。文章提供了完整的配置示例和文件结构，展示如何从零构建一个基于WebContaine
2025-09-12 15:20:41
474
原创 【AI解读源码系列】ant design mobile——CapsuleTabs胶囊选项卡
本文解读了Ant Design Mobile的CapsuleTabs组件实现，主要包含以下要点： 组件通过类型声明和子组件占位（CapsuleTab）建立结构基础 核心实现流程： 收集有效子元素构建panes数组和key映射 使用usePropsValue处理受控/非受控状态 实现自动滚动定位功能 渲染带有交互效果的tab列表 按需渲染内容面板 关键工具函数： traverseReactNode遍历子元素 usePropsValue统一状态管理 useResizeEffect响应尺寸变化 ScrollMas
2025-08-26 16:45:19
433
原创 【AI解读源码系列】ant design mobile——Space间距
本文解读了antd-mobile的Space组件实现。该组件通过CSS变量(--gap等)控制子元素间距，支持水平/垂直排列、换行和对齐方式。核心实现包括：1)合并props并注入原生属性；2)用flex布局处理不同方向；3)通过margin/padding组合和负边距控制间距；4)使用CSS变量灵活控制间隙大小。组件采用inline-flex布局，通过包裹子项并设置flex:none保证布局稳定性，适合在H5开发中快速实现元素间距控制。
2025-08-25 16:51:40
516
原创 【AI解读源码系列】ant design mobile——Divider分割线
本文解析了antd-mobile的Divider组件实现原理。该组件支持横向/竖向分割线，内容可居左/右/中显示。通过flex布局和伪元素实现分割线效果：横向使用flex布局，伪元素绘制线条；竖向直接使用border-left实现。内容位置通过flex的max-width控制间距。组件采用props合并机制，支持原生属性透传，使用classnames动态生成类名实现样式切换。关键点包括：1)参数合并处理 2)flex布局实现线条 3)伪元素绘制技术 4)内容位置控制逻辑 5)原生属性透传机制。该设计展示了如
2025-08-25 11:42:23
909
原创 【AI解读源码系列】ant design mobile——Avatar头像
本文解析了antd-mobile的Avatar组件实现流程。核心步骤包括：合并默认props并预处理图片地址；使用Image组件渲染头像，设置统一的fallback和placeholder；Image组件自动处理空src或加载失败情况；Fallback组件提供默认SVG头像，并支持memo优化和自定义。整个过程将复杂逻辑封装在Image组件中，Avatar组件主要实现属性处理和视图渲染。文章还指出可通过AI辅助解读组件源码提高效率。该分析帮助开发者理解组件设计思路和实现细节。
2025-08-25 11:01:22
371
原创 【AI解读源码系列】ant design mobile——Image图片
本文解读了antd-mobile的Image组件实现流程，重点分析了其懒加载机制。组件通过参数合并、状态管理、事件处理等步骤实现图片加载功能，其中懒加载由LazyDetector通过IntersectionObserver实现。当图片进入视口时触发加载，优化了页面性能。文章详细解析了组件初始化、状态判断、图片显示逻辑等关键环节，并展示了如何通过useInViewport钩子实现懒加载检测。这种AI辅助解读源码的方式能有效提升前端开发效率。
2025-08-21 15:58:31
1024
原创 【AI解读源码系列】ant design mobile——Button按钮
本文解读了antd-mobile的Button组件实现流程。主要包含：1)定义props类型和默认参数；2)合并默认和用户参数；3)处理loading与disabled状态；4)管理原生DOM引用；5)增强异步事件处理；6)动态渲染按钮结构；7)灵活的样式管理。组件亮点包括优秀的异步loading体验、一体式props注入、CSS变量支持、原生DOM操作兼容等。通过AI辅助解读组件源码，能有效提升前端开发效率。
2025-08-21 15:21:52
780
原创 H5大视频上传治理
本文针对H5环境下大视频上传导致的内存不足问题，提出了一套优化方案。核心思路是将视频上传过程拆分为分片上传模式，并实现单片重试机制。方案采用阿里云OSS标准API，将上传流程分解为初始化分片、多轮分片上传（含单片3次重试）和完成上传三个步骤。同时引入webworker异步计算MD5，优化了原有SDK中无法识别失败分片的问题。该方案通过规范化的分片上传流程和重试机制，有效解决了低端设备上传大视频时的崩溃问题，提升了上传稳定性和用户体验。
2025-08-14 15:27:58
1176
原创 CSR秒开有可能么？（附AI驱动学习实践推理过程）
本文探讨了一种通过快照方案提升CSR应用首屏加载速度的创新方法。文章分析了SSR实现秒开的原理，并指出CSR应用因依赖JS资源加载而导致的性能瓶颈。作者受淘宝闪购启发，提出了一种将页面DOM存入localStorage的快照方案：首次访问时存储页面快照，后续访问时优先渲染快照，待真实DOM加载完成后再替换。实践表明，该方案配合HTML缓存可将页面渲染时间缩短至250ms左右。文章还指出了需要解决的首屏CSS样式注入和版本控制问题，并强调了AI在技术研究和实现过程中的重要作用。这种方案为提升纯前端应用的性能指
2025-08-13 16:47:43
850
原创 React SSR同构渲染方案是什么？
目前主流的前端架构分为SSRCSRSSG，比较适合首屏直出的方案除了CSR都还不错，因为服务端会直接返回路由对应的html + css，浏览器直接解析DOM即可，而水合的作用是什么？服务端首次返回的是静态页面，页面需要”动“起来的话，则需要水合，即将页面所需的JS引入并加载、给DOM绑定交互等等，核心的API即。
2025-06-13 19:40:02
1197
原创 钉钉红包性能优化之路
饿了么请客红包H5性能优化实践 本文介绍了饿了么自研的请客红包业务在钉钉环境下H5页面的性能优化方案。针对用户反馈的白屏、卡顿等问题，从构建产物瘦身、预加载/预解析、分包策略三个方向进行优化。通过按需加载组件、引入CDN、图片裁剪等多项措施，构建包体积减少39.1%，首屏加载时间显著提升。优化后页面实现接近秒开效果，有效提升了用户体验。文章详细列举了各项优化措施的具体实现代码和最终优化效果，为类似业务场景提供参考。
2025-05-31 13:41:41
1230
原创 前端OOM内存泄漏如何排查？
现代前端开发中，随着应用的复杂性和交互性的增加，OOM（Out Of Memory，内存不足）问题和内存泄漏逐渐成为影响用户体验和应用性能的关键挑战。排查和解决这些问题需要开发人员具备良好的调试技巧和优化策略。
2025-03-23 16:58:24
1838
原创 解读Ant Design X API流式响应和流式渲染的原理
AI是未来世界的趋势，的出现让在国内构建更多的大模型出现了更多的可能。而从前端出发，团队最近很有意思，基于这个背景，提供了一套面向构建平台化产品的组件。本篇结合的、api来分析。仔细看一下官方文档的内容，发现篇幅并不多，对比市面上比较多的，核心增加了以流的形式进行片段式响应的能力。核心能力需要在入参中传递，即可开启流式响应的能力，直接在api的callback中处理渲染逻辑即可，那我们看一下源码，开启后做了些什么。请求创建实例的前半部分，与标准请求没什么区别，只是在响应后，中对response header
2025-03-15 21:30:22
1898
原创 基于H5请求劫持能力如何设计一款异常监听SDK？
最近对于前端稳定性的方向研究较多，主要负责的项目基于ARMS进行系统监控，而接口稳定性是系统稳定性最核心的参考指标之一，那设计一款类似ARMS这样的监听SDK，核心思路是怎样的？
2024-12-29 20:25:08
985
原创 基于workbox实现PWA预缓存能力
之前仅采用了 Workbox 的默认配置。具体的完整配置可参照文档。这里仅介绍一些常用的简单自定义配置，配置使用key->value});
2024-10-11 17:49:24
1095
原创 ant-design源码解析——Upload上传组件
文件上传是我们开发中不可或缺的一部分，我们将在本文深入解析组件的实现。相信看完以后对于React以及Ant Design的工作原理理解能更上一层楼。
2024-08-14 18:04:54
1633
原创 彻底搞懂ahooks State实现原理
State可以是string或undefined。它表示 cookie 的值。Options继承了，用于配置 cookie 的属性（如过期时间、路径等）。：可以是一个初始值或者一个返回初始值的函数。: S) => S);: boolean;serializer?onError?: 同步存储的事件名称。: 定义状态的类型，可以是一个值或一个接受当前状态的函数。Options: 用于配置 Hook 行为的选项，包含默认值、是否监听存储变化、序列化和反序列化函数，错误处理函数等。
2024-08-14 18:01:44
1140
原创 彻底精通ahooks原理【Effect篇】
ahooks是优秀的库，也是我们日常中开发一直会用到的库，学习理解这些Hooks的源码可以让我们深入理解ahooks，也能让我们对React基础Hook的理解更上一层楼。本文我们将对ahooks中所有副作用的钩子函数进行源码剖析。
2024-08-09 17:14:32
2243
原创 主流的用户身份认证方案？都在这里！
在现在的互联网服务中，用户认证是至关重要的环节。用户向服务器发送用户名和密码，以发起登录请求。服务器对用户提供的信息进行验证。验证通过后，在当前会话（session）中保存相关数据，例如用户角色、登录时间等关键信息。服务器向用户返回一个唯一的 session_id，并将其写入用户的 Cookie 中。用户后续的每一次请求，都会通过 Cookie 将 session_id 传递回服务器。
2024-07-02 14:17:19
1646
原创 彻底搞懂Webpack插件
首先我们先回忆一下Webpack插件是如何使用的？下面是一份基础的Webpack可以看到，插件都在plugins中，并且这是一个数组，包含了每一个插件的实例化调用，可以给这个实例传一些参数，因此不难看出来，Webpack插件就是一个类。
2024-07-02 13:59:32
883
原创 如何通过流式渲染提升用户体验？
本文从理论层面深入探讨了流式渲染的相关实现方案。理论上，流式渲染的概念和实现相对简单。HTTP 标准和 Node.js 早在很久以前就对这一特性提供了支持。然而，在实际的工程应用中，流式渲染并非易事。以 React 为例，要实现流式渲染，不仅需要 React 自身作为用户界面（UI）框架提供支持，还需要借助像 nextjs 这样的元框架（meta framework）来赋予服务端相应的能力。
2024-06-27 01:15:45
1653
原创 深入理解前端缓存
前端缓存是所有前端程序员在成长历程中必须要面临的问题，它会让我们的项目得到非常大的优化提升，同样也会带来一些其它方面的困扰。等，但是我相信大部分的前端程序员不了解它们的缓存机制。接下来我将带你们深入理解缓存的机制以及缓存时间的判断公式，如何合理的使用缓存机制来更好的提升优化。我将会把前端缓存分成HTTP缓存和浏览器缓存两个部分来和大家一起聊聊。
2024-06-21 18:48:11
1712
原创 绝大部分的场景你并不需要localStroage
在实际业务开发中，有很多的使用场景，如：用户偏好设置、购物车信息、用户信息等等，如果只是把网站的主题色，就像使用暗黑还是明亮模式的信息存在里也还好，毕竟不涉及敏感信息，就像umi的官网一样，本地存储存了主题偏好、github stars这些信息。或者是像掘金Web端，通过来保存用户的搜索历史作持久化。这样即使我懂技术，把这个存储删了也无所谓，只是我的搜索历史被清了而已。但在很多场景下，我发现会有同学把用户信息、ID、或者是会话鉴权的token存在中，这其实是很危险的技术方案。
2024-05-01 22:35:31
177
原创 写出好代码的底层逻辑
到底什么是编程，知乎上这样的一个问题，编程的本质是什么？很多人都给了自己的回答，但我发现很多回答，要么长篇大论各种编程范式，要么说得特别抽象，比如下面的回答，毫无指导意义。其实，很多人对于事物本质的理解，似乎都有道理，但是我们希望这个答案可以指导我们编程的行为，知道如何写出好代码，如果我们从这个角度来看，那这个问题的答案就需要非常地具体，可执行。这么多解释里，陈皓老师的解释最为具体，当然他也是引用的国外大佬的研究结论，但分析得相当好。简单的两个公式表达得比较透彻。程序 = 算法 + 数据结构。
2024-04-08 14:50:09
1077
原创 手机抓包也太简单好玩了吧！
我们选择Charles来作为抓包工具，本文将从0到1讲解从电脑端抓包到手机端抓包。Charles是一款被广泛使用的网络抓包工具，它可以用来监控和调试通过HTTP和HTTPS协议发送和接收的所有网络请求和响应。Charles通常用于网页和网络应用的开发过程中，帮助开发人员理解他们的应用是如何与互联网通信的，以及调试网络相关的问题。以下是Charles。
2024-03-22 00:38:48
993
原创 【转载】深度学习笔记——详解损失函数
原文链接: https://blog.csdn.net/weixin_53765658/article/details/136360033CSDN账号: Purepiscesgithub账号: purepisces希望大家可以Star Machine Learning Blog https://github.com/purepisces/Wenqing-Machine_Learning_Blog损失函数根据您使用的神经网络类型和数据类型，不同的损失函数可能会变得有用，例如分类问题的交叉熵损失，回归
2024-03-01 17:17:11
1267
1
原创 彻底搞懂OAuth2.0第三方授权免登原理
OAuth 2.0是一个授权框架，允许第三方应用程序获取对资源拥有者（例如，用户）资源的有限访问权限，而不需要向第三方暴露资源拥有者的凭据（通常是一个密码）。这种授权通常用于允许用户让一个应用程序对另一个系统进行安全访问，通常用于“登陆”的场景。免登（免密码登录）原理在OAuth 2.0框架中可以通过几种不同的grant类型实现，最常见的是使用“授权码”（Authorization Code）流程。
2024-02-28 17:36:25
2359
原创 深入浅出扫码登录
扫码登录是一种便捷的身份验证方式，用户通过扫描屏幕上显示的二维码（QR码）来登录应用或网站。这种登录方式在移动设备普及的背景下变得越来越流行，因为它提供了一个无需记忆密码的安全登录选项。二维码的展示当用户想要登录时（通常在Web应用或者PC软件中），服务器会生成一个包含特定登录信息的二维码并展示给用户。二维码的扫描用户使用手机上的应用（例如移动端的App内置扫码功能或通用的二维码扫码应用）扫描二维码。扫码功能得以识别出二维码内包含的登录信息。登录验证。
2024-02-27 16:22:08
1053
原创 使用Animate.css让你你的网页添加眼前一亮的动画
默认情况下，动画只播放一次，持续1秒。/* 持续时间改为2秒 *//* 延迟1秒开始动画 *//* 设置无限次重复动画 */在HTML中，只需要给元素添加class.myElement。
2024-02-26 16:32:08
3322
原创 探索TypeScript：装饰器
最近在学习Nest.js的内容，发现装饰器本质和Java的面向切面编程。装饰器用于给类,方法,属性以及方法参数等增加一些附属功能而不影响其原有特性。其在Typescript应用中的主要作用类似于Java中的注解,在AOP(面向切面编程)使用场景下非常有用。是一种编程范式，它允许我们分离，藉此达到增加模块化程度的目标。它可以在不修改代码自身的前提下，给已有代码增加额外的行为（通知）,例如: 一个类方法的执行耗时统计或者记录日志,可以单独拿出来写成装饰器。看一下官方的解释更加清晰明了。
2024-02-24 13:34:59
1151
原创 前端首屏、白屏与卡顿性能优化？你想要的都在这里！
具体来说，在初次请求资源时，设置 Etag（比如使用资源的 md5 作为 Etag），并且返回 200 的状态码，之后请求时带上 If-none-match 字段，来询问服务器当前版本是否可用。离线化是指线上实时变动的资源数据静态化到本地。比如当我们打开一个页面，它的内容超过了浏览器的可视窗口大小，我们可以先加载前端的可视区域内容，剩下的内容等它进入可视区域后再按需加载。首先也还是问题的定位，先通过 charles 等工具抓包看一下数据接口，如果是和数据相关的问题，找后端同事，或者用数据缓存的方式解决。
2024-02-20 14:01:22
1745
原创 一对HTML标签，让你的网站白屏时间减少300ms！
简单来说，DNS 的作用是将域名解析为 IP 地址，解析的过程是耗时的，转化后会做本地缓存，我们的优化的目标主要是针对用户第一次访问站点的时候陷入长时间白屏的问题。DNS 解析可以分为两类，第一类是页面 DNS 解析，当用户输入 url 地址后（比如是第一次访问站点），便开始页面 DNS 解析，这个过程是省不了的，因为你无法在用户访问站点之前就让他提前把 DNS 解析好；
2024-02-18 23:23:12
1061
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人