- 博客(18)
- 收藏
- 关注
RSS订阅原创 当面试官问：“介绍下 Fiber” —— 一篇深入浅出的 React Fiber 解析
React Fiber 是 React 16 引入的核心协调引擎，它采用可中断的链表数据结构替代传统的递归渲染方式。Fiber 通过任务切片和优先级调度实现异步渲染，将工作分为协调（可中断）和提交（不可中断）两个阶段，显著提升了应用响应性。其核心优势包括支持时间分片、多优先级任务调度，为并发模式奠定基础，解决了复杂更新导致的卡顿问题，是现代 React 高性能的关键机制。
2025-12-24 19:42:54
354
原创 webpack构建流程
本文详细解析了Webpack构建流程的三个核心阶段：初始化阶段读取配置并创建Compiler对象；编译阶段从入口出发构建依赖图谱；输出阶段将模块组合成Chunk并生成最终Bundle文件。文章还深入探讨了事件流机制和关键概念（Module/Chunk/Bundle），并提供了流程总结表格，帮助理解Webpack如何通过分析模块依赖关系实现资源打包。
2025-12-21 11:24:37
502
原创 用 `@microsoft/fetch-event-source` 实现可靠的 SSE 对话流：从原理到封装实践
摘要：基于 @microsoft/fetch-event-source 实现 AI 对话流式响应 本文探讨了使用 SSE（Server-Sent Events）技术实现 AI 对话流式响应的方法，重点介绍了 @microsoft/fetch-event-source 库的封装实践。原生 EventSource 存在无法发送 POST 请求、错误处理薄弱等缺陷，而 @microsoft/fetch-event-source 通过结合 fetch API 和 SSE 协议，解决了这些问题。文章详细展示了如何封装
2025-12-18 16:32:26
871
原创 TypeScript 中 type 与 interface 的区别详解
TypeScript 中 type 和 interface 是两种主要的类型定义方式，它们有以下关键区别：1) type 是类型别名，可以为任意类型创建新名称，而 interface 只能描述对象结构；2) type 使用 & 扩展，interface 用 extends 并支持多继承；3) type 支持联合、元组等复杂类型，interface 不行；4) interface 支持声明合并，type 不允许重复定义。建议对象结构优先用 interface，复杂类型用 type，团队项目保持一致性。
2025-12-17 17:58:36
400
原创 什么是原型方法
本文从数组的 map() 方法入手，通俗易懂地讲解了 JavaScript 的原型机制。核心观点是：数组方法并非数组实例自身拥有，而是通过原型链从 Array.prototype 继承而来。文章首先通过 Dog 构造函数的例子引入原型概念，然后揭示 [1,2,3].map() 实际上是调用 Array.prototype.map，并通过 hasOwnProperty 验证方法来源。最后解释了原型链的工作原理和这种设计的内存节省优势，总结出原型方法、共享特性和原型链查找三个关键要点，帮助初学者理解 JavaS
2025-12-14 16:24:41
538
原创 前端自动化测试全解析：从单元测试到端对端测试
本文系统介绍了前端自动化测试的四大类型：单元测试（验证最小代码单元）、集成测试（检查模块交互）、UI测试（确认界面呈现）和端对端测试（模拟用户完整流程）。针对每种测试类型，文章详细阐述了其核心价值、适用场景和主流技术方案（如Jest、Cypress等），并通过代码示例展示具体实现。作者强调自动化测试对预防Bug、提升重构信心和团队效率的重要作用，建议团队根据项目阶段逐步建立测试体系，从单元测试开始，最终实现完整的E2E测试流水线。
2025-12-02 23:45:31
864
原创 从“点击按钮”到“AI 理解”：前端工程师也能看懂的 Transformer 全流程
《前端视角：从点击到AI理解的Transformer全流程》 本文以前端工程师视角解析Transformer架构，用通俗类比揭示AI思考过程：1）输入文本通过分词和嵌入层转为向量；2）位置编码标记词序；3）编码器通过自注意力机制（类似JS的map和权重计算）分析词间关系；4）多头注意力像"阅读时圈重点"，前馈网络增强语义表达。Transformer的并行处理和全局感知能力使其成为GPT等大模型的基石。前端开发者理解该流程可优化加载动画、调试RAG应用并设计高效Prompt，让AI交互更自
2025-11-09 18:45:56
900
原创 从“点击按钮”到“AI 决策”：前端工程师也能看懂的神经网络入门
摘要： 神经网络是一种模仿人脑的数学模型，通过输入数据经多层计算输出结果。它由输入层、隐藏层和输出层组成，通过线性变换和非线性激活函数处理数据，利用反向传播和梯度下降自动调参。前端工程师虽不直接训练模型，但在AI应用中需理解神经网络的输入输出关系，以优化交互设计、提升用户体验。神经网络并非神秘黑盒，而是复杂数学函数的组合，前端作为AI的“眼睛和嘴巴”，需与其协同工作。理解神经网络原理有助于前端开发者在智能客服、推荐系统等场景中更好地与算法协作，实现更高效的人机交互。
2025-11-09 15:45:06
636
原创 从“传统模型”到大模型：我们是如何一步步走向智能的
文章摘要：本文探讨了从传统模型到大模型的技术演进历程。传统模型采用"输入→映射→输出"的数学工具模式，通过固定格式的数据训练，在特定领域表现稳定可靠。随着深度学习发展，大模型凭借多模态输入、通用预训练和万亿级参数等优势，实现了从"专业工匠"到"通才学生"的转变。当前行业正致力于构建大模型开发平台和智能Agent系统，推动AI从被动响应向主动思考的进阶。理解这一演进过程，对把握AI技术发展方向具有重要意义。（149字）
2025-11-08 18:27:12
448
原创 在 UmiJS 工程中集成 TailwindCSS
TailwindCSS 是一个功能类 utility-first的 CSS 框架，它不提供预设组件（如按钮、卡片等），而是通过一系列原子化的类名来构建界面。例如：</这里的text-white等都是 Tailwind 提供的“实用类”，它们直接映射到具体的 CSS 属性。TailwindCSS 以其极简的设计哲学和强大的灵活性，正在改变我们编写样式的习惯。而在 UmiJS 这样的现代化框架中集成它，不仅简单高效，还能充分发挥其潜力。
2025-11-05 11:05:16
1071
原创 前端工程师如何理解实体
“单个实体”是软件系统中可唯一标识的具体实例，如ID为123的任务。它与实体集合（如所有任务列表）在操作逻辑上有本质区别：单个实体支持精确的增删改查，而集合主要用于查询和批量创建。在数据库、API设计和面向对象编程中，区分单个实体和集合是构建清晰系统的关键。RESTful接口中，单个实体通过/tasks/{id}等路径标识，体现唯一性和独立性。理解这一概念有助于规范数据建模和接口设计。
2025-11-03 17:52:36
276
原创 rem是什么？
摘要： rem 是基于根元素（<html>）字体大小的相对单位，默认 1rem = 16px（浏览器预设）。与固定单位 px 不同，rem 会随根字体大小变化，支持响应式布局和无障碍适配。相比 em（继承父级字体），rem 更稳定，适合全局尺寸控制。通过修改 html { font-size } 可统一调整所有 rem 元素比例，推荐用于现代CSS开发以实现一致性、可扩展性和用户友好性。
2025-11-03 14:01:03
354
原创 踩坑！类数组HTMLCollection遍历
文章摘要：作者遇到一个JavaScript问题，发现document.getElementById返回的值无法直接使用forEach遍历。文中提出了两种解决方案：一是使用Array.from进行强制转换，二是为HTMLCollection原型添加forEach方法。作者通过代码示例展示了第二种方案，利用Array.prototype.slice将类数组对象转为数组后调用forEach。这个方法适用于HTMLCollection和NodeList等类数组对象，解决了直接遍历DOM集合的问题。（149字）
2023-08-07 18:26:10
1277
1
原创 Cookie 中的 SameSite 属性详解
本文详细介绍了Cookie的SameSite属性及其在防范CSRF攻击中的作用。SameSite有三种取值：Strict（完全禁止跨站请求携带Cookie）、Lax（默认值，允许安全GET请求携带）、None（需配合Secure属性允许所有跨站请求）。文章解释了同站与跨站的区别，建议大多数网站使用Lax，高安全场景用Strict，仅在必要时用None并确保HTTPS。该属性能有效平衡安全性与用户体验。
2023-06-04 21:43:55
594
1
原创 封装 Axios：构建健壮、统一的前端请求层
本文介绍了如何封装Axios构建统一的前端请求层。指出Axios相比原生请求工具的优势包括Promise支持、跨平台兼容、自动JSON转换和拦截器功能等。通过封装示例展示了如何实现统一请求头、表单序列化、请求取消、自动重试等特性，并分析了封装带来的好处：简化调用、统一错误处理、增强安全性、便于扩展和提升健壮性。最终目的是创建更易用、可靠的HTTP请求工具，提高开发效率和代码质量。
2023-03-30 20:07:51
21
原创 Vue.js 入门指南（初学者友好）
1.为什么要用前端框架？js框架对一下几点操作都有自己近乎趋近完美的解决方案渲染数据操作DOM操作cookie等存储机制api2.MV*模式介绍阮一峰MVC模型(Model):数据保存视图(View):用户假面控制器(controller):数据保存1.View 传送指令到 Controller2.Controller 完成业务逻辑后，要求 Model 改变状态3....
2019-10-17 20:21:44
152
原创 NoSql非关系型数据库
MongoDB是一种非关系型(NoSQL)数据库，采用文档形式存储数据，核心概念包括数据库、集合和文档。文档采用BSON格式存储，是JSON的二进制扩展，支持更多数据类型。MongoDB提供完整的CRUD操作：插入文档(insert/save)、查询文档(find)、更新文档(update)和删除文档(remove)，并支持排序、限制等查询功能。其特点包括灵活的文档模型、高性能、强大的扩展能力、高可用性以及丰富的查询语言。相比传统SQL数据库，MongoDB没有固定表结构，更适合处理半结构化或非结构化数据。
2019-10-15 11:22:11
196
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人