马优晨-CSDN博客

原创 Agent策略是什么

AI智能体(Agent)策略是让大语言模型从被动应答升级为主动执行的关键技术。它通过四大核心策略(规划、工具使用、反思和多代理协作)和五大组件(大脑、记忆、规划模块、工具调用和反思模块)，实现复杂任务的自主执行。相比传统Chatbot，Agent具备主动规划、工具调用和长期记忆等优势，可应用于个人服务、企业办公、金融和科研等多个领域。这种"思考-行动-观察-调整"的闭环执行模式，使AI系统能够真正实现从语言交互到任务落地的跨越。

2026-01-08 15:58:44 674

原创前端开发中 Data URL、Blob和 Base64 的核心区别及用途关联

摘要 Data URL、Blob和Base64在前端开发中各有特点： Base64是二进制数据的文本编码方式，体积增大约33%，适用于文本兼容场景（如URL、JSON）。 Blob是浏览器端的二进制数据容器，直接操作性能高，用于文件处理（如切片上传），可通过URL.createObjectURL生成临时URL。 Data URL是内嵌数据的URL协议，直接嵌入资源（如小图标），减少请求但体积大且无法缓存。三者关联在于：Base64可编码Blob生成Data URL，而Blob也能通过解码Base64还原二进

2026-01-08 11:26:55 774

原创 Vue3 组件通信（defineProps 和 defineEmits ）

Vue3 的 <script setup> 语法糖提供了 defineProps 和 defineEmits 两个编译宏用于组件通信。defineProps 用于声明组件接收的 props（父传子），支持类型校验和默认值；defineEmits 用于声明组件可触发的自定义事件（子传父），通过 emit 触发事件传递数据。父组件通过属性传递 props，通过监听事件接收子组件数据。两者共同实现了 Vue3 组件间的双向通信机制，是组合式 API 的标准用法。

2026-01-07 18:03:30 330

原创前端Network性能优化场景解析

本文总结了8种常见网络性能问题的调试方法：1）通过Time列定位慢请求；2）用Waterfall分析资源加载各阶段耗时；3）检查缓存未命中问题；4）优化跨域请求性能；5）调整资源加载优先级；6）控制请求/响应头大小；7）解决HTTP/1.1并发限制；8）压缩大体积资源。每种场景都提供了核心指标和辅助指标的组合分析方法，以及针对性的优化建议，如启用CDN、HTTP/2升级、资源压缩等技巧，帮助开发者快速定位和解决网络性能瓶颈。

2026-01-07 15:33:04 762

原创 Network 面板性能调试常用列组合

谷歌Network 面板调试与分析

2026-01-07 15:12:16 786

原创前端组件级权限控制

前端组件级权限控制通过统一管理权限数据，采用声明式或编程式方式在组件层面进行校验。核心方案包括：1）指令式控制（适合按钮/小组件），通过自定义指令如v-permission实现；2）组件封装式控制（适合通用组件），封装<Permission>容器组件；3）编程式控制（适合复杂逻辑），在JS中直接判断权限。所有方案都需配合后端接口校验防止权限篡改，并适配不同框架如Vue、React和Angular。关键点是先规范权限数据管理，再选择适合的控制方式，同时确保后端兜底校验。

2026-01-06 19:45:54 415

原创前端 try catch 的核心目的与应用场景

前端 try catch 主要用于同步代码的异常捕获与处理，其核心目的是保障程序健壮性、实现优雅异常兜底和可控化异常处理。它能有效解决单个模块异常导致全局崩溃、异常信息不明确、用户体验差、同步代码无法兜底以及业务流程中断等问题。应用场景包括数据解析、第三方SDK调用、接口请求等可能出错的代码块。使用时需注意避免滥用，合理配合 finally 块，并对异步异常采用 Promise.catch() 或 async/await 进行特殊处理。通过精准捕获错误并提供友好提示，try catch 能显著提升前端应用的

2025-12-31 16:17:29 907

原创 UMD 模式下的加载器（Loader）

本文探讨了UMD模式打包的加载器（loader）的概念与特点。首先区分了loader的核心作用和UMD打包的特殊要求，指出UMD格式封装的加载器是一种跨环境兼容的工具类模块。文章分析了UMD打包loader的三个核心特性：跨环境兼容性、单一文件交付和独立无依赖。通过一个资源加载器的实际示例，展示了UMD打包配置和在不同环境下的使用方式。最后总结了UMD打包loader的核心价值在于复用性、易用性和稳定性，同时提出了禁止代码拆分、控制体积和环境适配等注意事项。UMD打包的loader本质是将加载功能封装为跨环

2025-12-24 14:34:47 868

原创 UMD 与 manualChunks 的区别

本文解析了UMD格式与manualChunks代码分割的冲突本质：UMD要求打包为单一文件以兼容各种环境，而manualChunks则强制拆分代码。文章通过快递包裹的类比形象说明两者"合"与"拆"的对立关系，并指出inlineDynamicImports是实现UMD的必要条件。针对该冲突，提出三种解决方案：1)放弃代码分割，通过压缩优化UMD单文件；2)改用ES或CJS格式；3)分场景打包。最后强调UMD不能拆分的原因在于浏览器和Node环境对单文件的依赖要求，而ES

2025-12-24 14:23:06 337

原创 cssnano 在前端工程化中的应用

cssnano是一款开源的CSS压缩优化工具，通过移除冗余代码、精简语法和合并规则等方式，有效减小CSS文件体积，提升网页加载速度。它默认进行无损优化，不影响样式表现，也可配置有损优化进一步压缩。cssnano通常集成在PostCSS或webpack/vite等构建工具中使用，是前端工程化的标配步骤。使用时需注意先编译预处理CSS，避免重复压缩，并在开发环境关闭以便调试。该工具兼顾性能优化与安全可控，支持最新CSS语法和浏览器兼容处理。

2025-12-24 14:11:28 454

原创使用帧加载解决页面白屏问题

本文介绍了一种优化页面加载性能的方案，通过使用requestAnimationFrame API实现组件分批加载。核心思路是创建一个useDefer.js工具函数，利用浏览器动画帧控制组件加载节奏。在APP.vue中，通过v-for循环渲染100个HeavyComp组件，但每个组件只在defer(n)返回true时才会渲染，实现组件按顺序分帧加载的效果。这种方法能有效避免一次性加载大量组件导致的白屏问题，提升用户体验。代码示例展示了具体实现方式，包括工具函数封装和组件条件渲染的应用。

2025-12-17 17:10:15 218

原创发布订阅模式详解

发布订阅模式通过中间媒介（事件总线）实现对象间解耦通信，发布者发送消息而不需知道接收者，订阅者通过订阅特定消息类型接收通知。与观察者模式不同，发布订阅模式完全隔离发布者和订阅者。前端常用于组件通信、事件监听等场景，具有解耦、灵活等优势，但需注意内存泄漏和事件命名规范等问题。

2025-12-10 16:38:15 420

原创封装一个和AIGC 相关的 socket包

本文提出了一种面向AIGC场景的高可用Socket封装方案，采用分层架构设计：1）核心连接层处理底层Socket连接与重连机制；2）协议解析层适配多种AIGC协议格式；3）业务服务层管理会话上下文和消息分发；4）API层提供简洁的开发者接口。方案重点解决了流式响应处理、多模态消息支持、会话状态保持等AIGC特有需求，通过自动重连、心跳检测、错误分类等机制保障稳定性，并采用插件化设计支持扩展。该架构实现了业务逻辑与技术实现的解耦，为AIGC应用提供了可靠的实时通信基础。

2025-12-10 15:36:56 693

原创 ES中Proxy 和 Reflect的用法和示例

本文详细介绍了ES6中的Proxy和Reflect对象。Proxy用于创建对象代理，通过handler拦截器自定义对象操作行为，如属性读取、赋值、删除等，适用于数据校验、权限控制等场景。Reflect提供标准化的对象操作方法，与Proxy拦截器一一对应，通过静态方法实现更规范的操作，如属性读写、删除等。两者结合使用时，Reflect能优化Proxy拦截逻辑，自动处理this绑定问题，使代码更简洁可靠。

2025-12-08 19:34:22 446

原创为什么 Vue和react需要虚拟DOM，svelte 不需要虚拟DOM

摘要：Vue/React依赖虚拟DOM实现运行时动态更新视图，通过diff算法对比新旧虚拟DOM差异，具有强动态性和跨平台优势，但带来运行时性能开销。Svelte采用编译时静态分析，直接生成精准更新DOM的代码，无需虚拟DOM，运行效率更高且打包体积更小，但在动态场景和跨平台支持上较弱。三者技术路径差异源于对"运行时灵活性"和"编译时优化"的不同取舍，虚拟DOM是通用框架实现动态性的必要妥协，而Svelte通过编译优化实现了更高效的更新机制。

2025-12-05 16:44:52 934

原创什么情况下浏览器里面有navigator.clipboard

摘要：navigator.clipboard API的使用需满足三个核心条件：现代浏览器支持（Chrome 66+等）、安全上下文（HTTPS/localhost）和用户交互授权。常见不可用场景包括：本地文件直接打开、HTTP公网页面、无交互调用、旧版浏览器和未授权iframe。建议先检测API可用性，绑定用户交互事件，并提供传统execCommand降级方案。典型代码示例展示了安全写入剪贴板的实现方法和兼容处理技巧，确保在API不可用时仍能通过替代方案完成复制操作。

2025-12-05 15:15:57 481

原创谷歌浏览器sources调试代码

本文介绍了代码调试的核心按钮及其使用场景，包括继续/暂停、单步跳过/进入/跳出、执行到光标处等功能按钮。详细说明了典型调试流程：从定位问题代码、添加断点、单步排查到分析变量和调用栈。提供了实用调试技巧，如快速修改变量值、条件断点和捕获报错断点等。这些工具和方法能帮助开发者高效定位和修复代码问题，提升调试效率。

2025-12-05 14:43:07 436

原创 ts 中 export type 与 export 的区别

摘要：TypeScript中导出类型(interface/type)和值(enum/class/const)有本质区别。类型通过export type {...}导出，编译后会被移除；值通过export {...}导出，会保留在运行时代码中。最佳实践是分开导出，因为：1)类型和值本质不同；2)避免误用；3)工具支持更好。TypeScript 5.0+虽允许合并导出(使用type前缀标记类型)，但不推荐。分离导出更清晰且符合最佳实践。

2025-12-04 10:07:05 176

原创 Ant Design 6.0 深度解读：从“笨重黑盒”到“现代开放”的十年革新

Ant Design 6.0带来四大革新：采用CSS Variables实现零运行时架构，提升性能与主题切换效率；全面语义化组件支持精准样式定制；彻底放弃IE兼容；同步推出AI交互组件库Ant Design X 2.0。升级建议需分情况处理：v5用户可平滑迁移，v4用户建议先过渡到v5，IE项目可继续使用v5。这次升级标志着Antd从"笨重黑盒"向"现代开放"的转型，重新成为B端开发的可靠选择。

2025-12-03 09:24:04 740

原创默认插槽、具名插槽、作用域插槽的作用和区别是什么

Vue插槽分为三种类型，各有其核心作用和适用场景。默认插槽用于单区域内容自定义，父组件直接传入内容；具名插槽允许在多区域独立自定义内容，通过命名区分位置；作用域插槽则实现子组件向父组件传递数据，由父组件决定渲染逻辑。三者的主要区别在于：默认插槽处理单一内容，具名插槽管理多个内容区域，作用域插槽实现数据驱动渲染。插槽机制为组件提供了灵活的内容分发能力，使组件复用性大幅提升。

2025-11-26 14:54:25 743

原创 AI写代码提示词一般有什么注意点

让 AI 高效写出符合需求的代码，核心是让提示词具备「明确性、完整性、结构化」——AI 无法猜你的隐含需求，提示越精准，产出质量越高。

2025-11-07 11:57:05 656

原创 git bebase 的作用和用法

GitRebase详解：让Git历史更清晰 GitRebase是优化分支历史的利器，相比git merge有三项核心优势：线性历史 - 避免冗余合并节点，形成单线程提交记录冲突分散 - 按提交顺序逐个解决冲突，逻辑更清晰提交优化 - 可合并/修改冗余提交，保持每个提交的独立性主要使用场景：整合分支更新：git rebase <目标分支> 优化提交历史：交互模式git rebase -i 修改历史提交：使用reword指令调整提交信息注意事项：仅用于个人分支公共分支避免使用冲突处

2025-11-05 11:55:43 697

原创 ElementPlus 如何支持移动端

通过媒体查询（@media1、基础配置在全局样式文件（如global.css/* 针对手机屏幕（≤768px）的适配 *//* 调整组件间距 */.el-card {important;/* 减小字体大小 */important;/* 调整弹窗宽度为屏幕宽度的 90% */width: 90%!important;important;2、修复移动端交互问题/* 增大上下内边距，扩大点击范围 */优化下拉组件（如el-selectimportant;

2025-10-24 17:43:26 1436

原创 Babel 与 Legacy插件与 core-js polyfills 的区别

Babel、core-js和Legacy插件是前端兼容性方案的三大工具：Babel负责语法转换，将ES6+代码转为ES5；core-js提供API补丁，为旧浏览器实现Promise等新特性；Legacy插件则处理废弃语法提案的历史兼容问题。三者各司其职，通常配合使用：Babel处理语法层面，core-js补充API功能，Legacy插件解决特殊历史语法兼容，共同确保代码在旧环境中的正常运行。

2025-10-23 11:29:30 658

原创代码开发中，不同的命名格式

代码命名格式指南：驼峰式（camelCase）用于变量/函数；帕斯卡式（PascalCase）适用于类/组件；蛇形（snake_case）常见于Python/数据库；烤肉串（kebab-case）用于HTML/CSS；全大写蛇形（UPPER_SNAKE_CASE）表示常量；匈牙利命名法已不推荐。不同语言有偏好规范，核心原则是命名清晰且保持一致性。

2025-10-23 09:53:28 403

原创 JavaScript 生态系统常见库

本文汇总了前端开发常用工具库，涵盖函数式编程、日期处理、DOM操作、状态管理、UI组件等12个类别。重点推荐了React/Vue生态的流行库如Redux、Pinia、Material-UI、ElementPlus，以及现代替代方案如date-fns替代moment.js、Vite替代Webpack。同时介绍了专业级工具如GSAP动画库和D3.js可视化库，并强调选择库时需综合评估项目需求、生态兼容性和学习成本。这些工具库构成了完整的前端开发技术栈，可满足各类开发场景需求。

2025-10-21 11:53:09 203

原创多人开发使用git rebase

这段文字解释了Git协作中的关键指令：首先将功能分支合并到develop主分支，要求接收者通过rebase操作同步个人分支到最新develop代码，避免冲突。接着指导从最新的develop创建新的个人分支进行后续开发，以保持代码库的稳定性和提交历史的整洁性。整个过程体现了Git分支管理的最佳实践，包括定期同步主分支、隔离开发环境等原则。

2025-10-20 13:51:39 335

原创清理页面缓存

摘要：清理http://localhost:5173/dataV/#/缓存可通过Chrome设置或开发者工具（Application选项卡）清除。清理HSTS缓存需访问chrome://net-internals/#hsts，在"Delete domain security policies"区域输入localhost并删除。两种方法分别针对网页缓存和HSTS安全策略，操作简便 Justice。

2025-10-17 16:23:24 337

原创 CSS 中 transation 主要作用是什么

在 CSS 中，transition（过渡）是用于实现元素样式平滑变化的动画效果的属性。它可以让元素的样式变化（如颜色、尺寸、位置等）在指定时间内逐渐完成，而不是瞬间变化，从而提升页面的交互体验和视觉效果。

2025-10-09 17:05:55 456

原创 Git 中的某个分支打标签

Git提供了两种标签类型：轻量标签（仅引用提交）和附注标签（包含作者、日期和描述信息）。创建标签后需显式推送至远程仓库，使用git push origin <tag_name>或git push origin --tags。常用操作包括查看(git tag)、删除(git tag -d)本地/远程标签。附注标签因包含更多元数据而被推荐用于版本发布等重要节点。注意删除远程标签需同步操作本地和远程仓库。

2025-10-09 15:48:33 208

原创前端性能平台选型

本文分析了主流前端性能监控工具的优缺点及应用场景。Grafana、Kibana、PowerBI等可视化平台各有特色，Grafana扩展性强但配置复杂，Kibana与Elasticsearch深度集成但处理关系型数据较弱。Lighthouse、NewRelic等采集工具中，Lighthouse免费易用但测试环境单一，NewRelic功能全面但成本较高。针对不同规模项目，推荐了三种技术方案：小型项目可采用Prometheus+Grafana低成本方案；中型项目建议Flink+InfluxDB+ClickHous

2025-09-04 09:04:45 862

SVELTE调研，关于SVELTE使用，性能，数据存储，数据分析等

ejs常用操作.zip

空空如也