- 博客(39)
- 收藏
- 关注
RSS订阅原创 前端虚拟列表与无限滚动性能优化实战：从万级数据到丝滑体验
在前端开发中，长列表渲染是最常见的性能瓶颈之一。无论是电商商品列表、聊天记录、还是数据表格，当数据量达到千级甚至万级时，直接渲染所有 DOM 节点会导致：页面初次加载时间飙升（FCP > 3s）滚动卡顿掉帧（FPS < 30）内存占用过高，低端设备直接崩溃虚拟列表（Virtual List）就是为了解决这个问题而生的核心技术。只渲染可视区域内的 DOM 节点，其余数据用占位符代替。配合无限滚动（Infinite Scroll），可以实现"数据无上限、性能不下降"的用户体验。
2026-05-15 10:52:42
370
原创 前端状态管理新范式：Zustand、Jotai 与 Preact Signals 深度对比
2025 年的前端状态管理已经告别了"唯一正确答案"的时代。Zustand 以极简 API 和成熟生态成为最稳妥的选择；Jotai 以原子化模型和派生计算提供了最优雅的架构方案；Preact Signals 以细粒度响应式带来了最极致的性能表现。实际项目中，不必拘泥于单一方案。Zustand 管理全局状态 + Signals 处理高频局部更新，或者 Jotai 管理业务状态 + Zustand 做持久化层，都是可行的混合架构。关键是根据团队技术栈、项目规模和性能需求做出务实的选择。推荐延伸阅读。
2026-05-15 10:49:32
98
原创 Vue3 组合式函数设计模式：从基础封装到高级复用实战
输入是响应式的，输出也是响应式的— 用refcomputed包装输入输出，保证数据流可追踪组合优于继承— 小 Composable 组合成大 Composable，每个只做一件事副作用必须清理— 定时器、事件监听、WebSocket 连接，在中清理阶段掌握内容典型案例入门状态封装useCounteruseToggle进阶异步数据 + 生命周期useFetch高级组合模式 + 依赖注入专家测试 + 类型设计泛型 Composable、Vitest 测试。
2026-05-13 16:00:39
342
原创 Vite 插件开发实战：从原理到自定义构建流水线
构建时转换→transformload（代码转换、注入）开发服务器增强→（HMR、代理）HTML 注入→（脚本、样式注入）产物处理→（分析、压缩）掌握这 5 个插件的实现思路，你就能应对 90% 的定制构建需求。建议从简单的环境变量注入开始，逐步挑战路由生成和产物分析。插件开发是前端工程化的高级技能，值得深入投入。
2026-05-13 15:58:50
429
原创 CSS @layer 级联层实战指南：从样式冲突到分层架构
layer是 CSS Cascading and Inheritance Level 5 规范中引入的级联层（Cascade Layer）机制。它允许开发者显式声明样式所属的「层」，浏览器按照层的顺序来决定优先级，而不是单纯依赖选择器的特异性。你在越靠后的层中定义的样式，优先级越高，无论选择器怎么写。来看最直观的对比。没有@layer时，优先级完全由选择器决定：/* 样式 A：class 选择器，优先级 (0,1,0) *//* 样式 B：ID 选择器，优先级 (1,0,0) */。
2026-05-08 17:13:24
382
原创 前端监控与可观测性实战：从数据采集到告警闭环
一套完善的前端监控体系应该包含以下层次：│ 可视化大盘 & 告警 │ ← 决策层│ 数据聚合 & 分析 & 存储 │ ← 数据层│ 异常捕获 │ 性能采集 │ 行为追踪 │ ← 采集层关键实践建议先抓异常，再做性能：JS 错误直接影响功能可用性，优先级最高采样率要合理：行为追踪建议 10% 采样，避免数据爆炸用sendBeacon：保证页面关闭时的数据不丢失设置告警阈值：不要只看报表，要让系统主动通知你。
2026-04-17 11:56:25
385
原创 现代 CSS 黑科技：Container Queries、:has() 与嵌套语法实战
让组件真正"组件化"，不再依赖视口大小:has()选择器：打破了"子选择器"的限制，实现父级样式的条件判断CSS 嵌套：减少重复代码，提升样式表可读性。
2026-04-16 17:33:13
389
原创 2026 年 AI 编程助手全面对比评测：Cursor vs Copilot vs Claude Code vs GitHub Copilot Free
如果你只能选一个→Cursor Pro（$20/月），体验最好，效率提升最明显。如果你想零成本起步→组合，覆盖 80% 的场景。AI 编程不是替代你，而是放大你。同样的 8 小时工作日，用好这些工具，你的产出可以是之前的 2-3 倍。关键是学会在合适的场景用合适的工具，而不是盲目追求最新最贵的方案。最后提醒：AI 生成的代码一定要人工审核，尤其是涉及安全性、数据校验、边界处理的逻辑。AI 是副驾驶，你才是机长。
2026-04-15 13:42:52
2741
原创 TypeScript 类型安全与类型体操实战：从入门到精通
// ref 类型推断const name = ref('张三');const user = ref({ name: '张三' });// 显式指定泛型// reactive 类型count: 0,user: { name: '张三', age: 30 },});// 显式类型定义});// computed 类型（自动推断）// 带 get/set 的 computed});// Props 类型定义id: string;
2026-04-10 11:06:57
338
原创 微前端架构深度实践：从 qiankun 到 Module Federation 的企业级方案
微前端架构不是银弹，它解决了单体应用的部分问题，但也引入了新的复杂度。技术选型建议：qiankun适合多技术栈混合、快速落地的场景适合技术栈统一、深度模块共享的场景无论选择哪种方案，都需要配套的工程化体系支撑关键成功因素：统一的开发规范- 样式隔离、通信协议、错误处理完善的监控体系- 加载性能、错误率、资源消耗清晰的边界划分- 业务边界、数据边界、技术边界渐进式迁移策略- 先易后难，逐步拆分子应用懒加载 + 预加载策略依赖共享，避免重复打包缓存策略，减少网络请求错误边界，保证用户体验。
2026-04-08 10:57:04
341
原创 React 18+ 并发特性深度解析：从原理到企业级性能优化实战
在现代前端开发中，React 18 引入了革命性的并发渲染（Concurrent Rendering）机制，彻底改变了我们构建用户界面的方式。作为在多个企业级项目中深度使用 React 生态的开发者，我在 SaaS 平台、微前端架构以及大型数据可视化系统中，亲身体验了并发特性带来的性能飞跃。本文将深入剖析 React 18+ 的核心并发 API，结合真实项目场景，分享可落地的性能优化方案。在 React 18 之前，React 的渲染过程是同步且不可中断的。
2026-04-07 10:38:52
450
原创 [特殊字符] MonkeyCode AI 核心功能详解
JavaScript、TypeScript、Python、Java、Go、Rust、C++、PHP、SQL、HTML/CSS、Vue、React、Node.js 等 20+ 语言。console.log(sum(1, '2')) // 输出 '12'，不是 3。： "创建一个 React 登录表单，包含邮箱验证、密码强度检查、提交按钮"：一定要用这个链接，否则你少 500 积分，我也少 1000 积分！： 完整的登录组件代码（含状态管理、验证逻辑、错误提示）✅ 正则表达式（匹配邮箱、手机号、URL）
2026-04-03 23:07:34
357
原创 Vue3 响应式系统深度解析：从原理到性能优化实战
Vue3 的响应式系统是前端工程化的一次重大升级。选择合适的响应式类型- 基础类型用ref，复杂对象用reactive，大数据用shallowRef优化依赖追踪- 避免不必要的深层响应式，减少 effect 收集开销合理拆分状态- 将大型状态拆分为多个小型响应式单元善用只读包装readonly和防止意外修改TypeScript 类型安全- 利用类型系统确保响应式数据的正确使用。
2026-04-02 17:09:37
458
原创 [特殊字符] 程序员的 AI 编程助手来了！CodeBuddy WorkBuddy 免费体验
WorkBuddy 是 CodeBuddy 平台的 AI Agent 助手，专注于编程辅助场景，可以帮助你：💻 代码编写与优化🐛 Bug 分析与修复建议📖 技术问题解答🔍 代码审查AI 编程助手已经成为现代开发者的必备工具，WorkBuddy 作为一个专注于编程场景的 AI Agent，值得一试。现在注册还有 Credits 赠送福利，感兴趣的朋友赶紧行动吧！
2026-04-02 17:04:34
498
原创 TypeScript 5.4 新特性详解：让类型系统更智能
/ 新增 Array.prototype.groupBy特性用途推荐指数NoInfer<T>精确控制类型推断⭐⭐⭐⭐⭐闭包类型推断改进减少类型报错⭐⭐⭐⭐⭐标准化模块导入⭐⭐⭐⭐自动导入改进更智能的代码补全⭐⭐⭐⭐建议：尽快升级到 TypeScript 5.4，享受更智能的类型系统！
2026-04-01 11:40:05
357
原创 Vue3 性能优化实战：从 10s 到 1s 的加载速度提升
路由懒加载组件异步加载第三方库按需引入Gzip/Brotli 压缩图片资源压缩性能优化是一个持续迭代的过程，需要根据实际业务场景选择合适的方案。减少体积：代码分割、按需引入、压缩减少请求：缓存策略、资源合并优化渲染：虚拟列表、懒加载持续监控：埋点统计、定期审计核心指标：首屏加载 < 1s，LCP < 2.5s，TTI < 3s希望本文能对你有所帮助！如有疑问，欢迎在评论区交流～
2026-03-31 14:02:08
450
原创 微前端架构下的状态管理与通信机制深度解析：从 qiankun 源码到性能优化实战
本文深入探讨了qiankun微前端框架的核心实现与优化实践。首先分析了微前端架构的必要性及其面临的三大通信场景挑战，详细解析了qiankun的沙箱隔离机制和样式隔离方案。接着提出基于发布订阅的全局状态管理方案，并给出Vue3和React的集成实现。重点分享了从10s加载优化到1s的实战经验，包括依赖预加载、资源预取、数据请求前置等策略。最后总结了生产环境的最佳实践，涵盖错误边界、安全加固和性能监控体系。文章为大型前端应用的微前端架构落地提供了系统性解决方案。
2026-03-30 10:35:25
436
原创 Vue 3 组合式 API 最佳实践：从入门到精通
组合式 API 为 Vue 开发带来了前所未有的灵活性和可维护性。合理使用 composable 函数进行逻辑复用理解 ref 和 reactive 的区别，选择合适的数据管理方式避免常见陷阱，如解构丢失响应性遵循 TypeScript 最佳实践，获得更好的开发体验关注性能优化，合理使用 markRaw 和 shallowRef组合式 API 不是银弹，但在中大型项目中，它能显著提升代码的可维护性和团队协作效率。
2026-03-27 10:17:41
337
原创 【技术日报】2026-03-18 AI 领域重磅速递
大模型负责规划和决策，小模型负责快速执行，形成高效的"大小模型协作"架构。2026年初，DeepSeek-V3.2、GLM-5、Qwen3-Max 等国产大模型密集发布，在多项国际基准测试中性能逼近甚至超越 GPT-5。OpenClaw 代表了 AI Agent 时代的黎明，监管是"前置防控"而非否定技术。开发者在使用 AI Agent 时，应遵循最小权限原则，将运行环境隔离，及时更新版本，谨慎安装第三方插件。3月17日，阿里巴巴发布全球首个企业级 AI 智能体平台"悟空"，能够协调多个智能体协同工作。
2026-03-18 15:46:52
225
原创 Cursor中Prettier格式化失效？一招降级解决踩坑实录
此次踩坑让我深刻意识到，编辑器插件的版本更新虽能带来新功能，但也可能引发兼容性问题。当Cursor中Prettier格式化失效时，降低Cursor版本并非最优解，优先降级Prettier - Code formatter插件版本，往往能高效解决问题。希望这篇实录能帮到遇到同类问题的开发者，节省排查时间。如果大家还有其他Cursor与Prettier适配的小技巧，欢迎在评论区交流分享～ 祝大家编码顺利，格式无忧！
2026-01-28 14:00:59
918
1
原创 1Panel 快速部署 Node+MongoDB+Nginx 项目实操流程（附避坑指南）
在 Linux 服务器上通过 1Panel 面板部署 Node+MongoDB+Nginx 技术栈的项目，能大幅简化环境配置和运维操作，本文整理了完整的部署步骤，同时标注实操中遇到的关键坑点，帮助快速完成项目上线。
2026-01-23 17:45:04
1392
原创 阿里ESA免费CDN来了，体验如何？附教程
界面逻辑相比 EdgeOne，个人认为会复杂一些，但提供了非常多的“细调”选项；整体对于中小站长来说是挺好的，又多了一个选择，😄不用怕一觉醒来，天价 CDN 账单。活动提供了免费1个月的基础款体验，相信多数人还是会用免费版，🙂 后面也会教打架如何免费续费。如果你的站点面向国内，就不用怎么考虑了😅。阿里云 ESA 的基础添加域名等操作，这里就不再赘述，直接添加你的。设置回源端口，但会对主域名下 所有需要接入的域名生效.，提供了全球CDN节点（含国内地区节点）也提供了免费套餐，且两者都提供了。
2025-12-31 09:41:25
1071
原创 DeepSeek（问小白） + TripoAI 打造自己的3D模型
最近又发现2个免费有强大的组合工具，问小白（deepseek满血版）+ TripoAI能够打造自己的3D模型。小伙伴们，快来试试吧，打造自己的3D模型！根据提示词会生成图片，目前来看生成图片比较符合期望值。将上面保存本地的图片上传上去，就会生成一个3D模型。打开网址进行注册登录，进入下面页面。可以将图片生成3D模型。将图片保存到本地备用。
2025-02-24 17:27:36
1092
原创 拒绝繁忙！免费使用 deepseek-r1:671B 参数满血模型
相信大家都已经有体验过deepseek-r1的强大推理能力，由于其网页版本免费使用的原因，用户量激增、同时据传还遭受了大量的网络攻击，这使得过程不是很流程，经常收到类似下图的问题：虽然借助类似Ollama这样的工具可以帮我们快速的自己部署deepseek，但是由于我们个人的计算资源有限，在本地无法部署具备671b参数的deepseek-r1满血模型。大部分用户只能部署1.5b或7b参数呃蒸馏小参数版本，这使得本地部署之后，虽然使用不卡顿了，但推理效果大打折扣！那么是否有方法来低成本的使用671b参数的满血模
2025-02-12 15:08:26
738
原创 本地部署DeepSeek,带你领略AI
注意： 如果模型下拉框没有数据，一定要执行命令 ollama run deepseek-r1:1.5b。安装完成后，进行测试是否安装成功，cmd输入ollama -v。但是没有ui界面，感觉很不方便，下面就整一个ui界面。选择1.5b（个人一般是1.5，看自己的电脑配置）打开设置——搜索环境变量——选择编辑账户的环境变量。如果有漏掉的，欢迎指出哈！ok，本地部署完成！
2025-02-05 15:04:52
841
原创 项目中的优化-tab页频繁切换，页面数据混乱
最近在项目中，遇到这种情况，频繁切换tab后，之前tab页面请求回来的数据，会渲染到当前页面，导致页面数据会来回的变化。
2024-12-11 18:16:49
1297
原创 XSS攻击
XSS攻击又称为跨站脚本，XSS的重点不在于跨站点，而是在于脚本的执行。XSS是一种经常出现在Web应用程序中的计算机安全漏洞，是由于Web应用程序对用户的输入过滤不足而产生的，它允许恶意web用户将代码植入到提供给其它用户使用的页面中。
2024-11-04 10:37:52
1763
原创 Vite 优化配置方案
Vite 是一个快速的前端构建工具，特别适用于现代前端框架如 Vue 和 React。为了进一步提升项目的性能和开发体验，我们可以对 Vite 进行一些优化配置。本文将介绍一些常见的优化策略，并提供详细的配置示例和注释。
2024-10-23 16:56:47
992
原创 如何使用CDN进行加速
CDN，全称是内容分发网络（Content Delivery Network），通过将网站内容缓存到全球各地的服务器节点上，使用户可以从离自己最近的节点获取内容，从而加快网站的加载速度。
2024-10-23 16:22:46
1187
原创 微前端（二）—— micro-app （子应用接入）
/ 是否在微前端环境中// 订阅主应用中分发过来的路由跳转if (!// 当主应用下发跳转指令时进行跳转});// 订阅主应用中的全局用户信息数据if (!// 向主应用分发路由-控制主应用的路由跳转if (!// 获取主应用路由// 控制主应用跳转// 路由跳转到详情页面 first:一级目录 route：路由path，query：参数} else {main.ts中引用。
2024-10-18 12:00:01
2838
2
原创 微前端（二）—— micro-app （基座配置改造）
看他官网介绍说，使用方式上比qiankun、wujie更加简洁，对子系统侵入性较小，并且提供了。之前写过使用微前端（qiankun）框架，这次我发现京东前端团队推出的一款微前端框架。基座配置完成，有问题可以私信我呦！下一节为子应用如何接入基座。在原有的项目中进行改造，安装依赖。话不多说，开整，试试好不好用。修改permission文件。在appstore中添加。建立config 文件。等一系列完善的功能。自定义两个hooks。main.ts 修改。
2024-10-17 17:56:41
2006
原创 js复制到剪切板功能遇到的问题
在电脑浏览器上,点击然后去粘贴一点问题都没有，但是。，问题就出现，把链接复制到微信上面，通过微信打开浏览器页面浏览，在点击分享，就会出现这个链接。在微信中打开H5页面时，微信会对链接进行重定向和处理，以确保安全性和防止恶意链接。前几天有个这个需要，h5页面点击一个按钮，能够把当前的url分享出去，于是我就直接写了这样一个方法。获取到的是一个微信的重定向链接，而不是你期望的H5页面的URL。1、复制的时候，直接使用固定地址。微信为何会对链接进行重定向？如何避免链接被重定向？原因可能会有以下几点。
2024-10-12 14:14:27
504
原创 大文件上传2（后端）
这篇主要是后端实现大文件上传的功能，使用的是node + nestjs。创建file-upload相关文件。启动 nest 就可以了。
2024-09-29 15:15:27
463
原创 记录一下vue3项目使用video.js
2、组件中要引入css， import "video.js/dist/video-js.css"1、video标签class 一定要有"video-js"3、在相应页面引用这个组件，就可以了， 传入参数参考。2、创建 组件 videoPlayer。
2024-09-24 17:43:41
691
原创 记录一下前端手动部署服务器
（1）、首先在部署前端的时候，你要先看一下服务器的默认d的安全组是哪一个，我买的是华为云，有两个安全组，一个是sg-default-smb，一个是default，我一直以为默认绑定的安全组是default，然后我就在这个安全组上面开端口，但是永远也访问不到。(5)、如果没有报错，说明启动成功，访问你所开通的那个地址，ip:端口，就会出现nginx 404页面，说明成功了。在使用终端工具，我用的是xshell，链接你的公网地址，及端口，输入账户密码后，会进入这个页面。（3）、创建你所需要的config文件，
2024-09-23 14:07:48
632
原创 vue3前端组件库的搭建与发布（一）
最近在做公司项目中，有这么一件事情，很是头疼，就是同一套代码，不同项目，要改相同bug，改好多遍，改的都想吐，于是就想做一个组件库，这样更新一下就全都可以了，当然也是第一次主导组件库的搭建，有哪些不对的，还请各位大佬指出来哈。
2024-09-19 18:01:53
2482
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人