- 博客(234)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 大模型对话中的流式响应前端实现详解(附完整示例代码)
大模型对话流式响应实现摘要 流式响应是大模型对话中的关键技术，通过逐步推送和显示响应内容，显著提升用户体验。主流实现方案包括： SSE方案：基于EventSource API实现简单，自动重连，适合单向流式响应，是大模型对话的推荐选择。 WebSockets：支持双向通信但实现复杂，适合需要交互控制的场景。 Fetch流式API：提供底层控制，适合定制化需求。 关键优化点包括： 实现打字机效果增强真实感 自动滚动保持内容可见 完善的错误处理和中断机制 加载状态反馈降低用户焦虑 OpenAI等主流平台均采用S
2025-12-31 16:18:11
1005
原创 前端性能优化工程化落地指南：从基础实践到极致性能突破
本文系统介绍了前端性能优化的工程化实践方案，从基础优化到极致性能突破。首先分析了代码构建、网络加载和运行时优化的核心可做功项，包括代码分割、资源压缩、CDN加速等。然后深入探讨了结合浏览器渲染原理的极致优化策略，如减少重排重绘、利用GPU加速。针对移动端场景，提出借助Web容器预加载等能力提升性能。最后介绍了WebAssembly在计算密集型任务中的应用，并强调建立可持续的监控体系，将性能优化融入开发流程。全文覆盖从基础规范到深度原理的全链路优化方案。
2025-12-30 12:15:02
1325
原创 WebAssembly为何能实现极致性能：从设计原理到执行优势
WebAssembly通过精简的二进制格式、静态类型系统和线性内存模型实现极致性能。其设计直接面向机器执行优化，避免了JavaScript的文本解析和JIT编译开销，内存访问模式可预测且缓存友好。在计算密集型任务中，WebAssembly执行效率接近原生代码，性能提升可达4-8倍，尤其适合图形计算、媒体处理和加密算法等场景。但与DOM操作和字符串处理相比优势不明显。WebAssembly与JavaScript形成互补，通过在关键路径使用WASM处理重计算任务，可构建高性能Web应用。
2025-12-30 11:32:09
1040
原创 AI浪潮下的前端范式转移：从代码实现者到思维架构师
AI时代，**前端开发的“技术实现”部分正在变得高度自动化与平民化**，这是一个不可逆的趋势。然而，**对问题的深刻理解、对系统的顶层设计、对体验的执着追求、以及快速学习与判断的能力，变得比以往任何时候都更加珍贵。****不变的是**，我们依然需要解决现实世界的问题，创造用户价值。**变化的是**，我们的核心工具从“记忆语法和API”变成了“驾驭AI的思维模型与方法论”。因此，前端开发者真正的“护城河”，不再是记忆了多少CSS属性或API参数，而是**能否用更宏观的视角定义问题、设计解决方案，并高效
2025-12-26 15:46:34
1397
原创 前端跨端技术全景解析：从本质到未来
本文全面解析前端跨端技术，从本质概念到主流方案对比，再到未来发展趋势。跨端技术的核心是"一次编写，多端运行"，旨在提升开发效率和保证体验一致性。文章详细对比了Web Hybrid、React Native、Flutter等方案的原理与优劣势，指出各自适用的场景。同时提出AI时代下的智能化变革，包括智能开发助手、设计稿转代码等创新方向。未来跨端将更注重"逻辑跨端"理念，结合AI和WebAssembly等新技术，开发者角色也将向架构设计和质量监督转变。跨端技术始终围绕开发
2025-12-22 19:36:08
1643
原创 Spec Coding：AI时代前端开发的范式革新
Spec Coding：AI时代前端开发的范式革新 Spec Coding是一种基于规范驱动的AI辅助开发范式，通过自然语言需求文档自动生成高质量代码。其核心特点包括规范先行、AI驱动实现、高度自动化和流程标准化。GitHub Spec-Kit是典型工具，提供从项目宪法（/constitution）、详细规范（/specify）、实施计划（/plan）到任务拆解（/tasks）和代码生成（/implement）的完整工作流。以Vue3智能图表应用为例，展示了如何通过结构化文档指导AI生成组件代码、API封装
2025-12-22 16:18:51
1546
原创 AI时代下的规范驱动开发：重塑前端工程实践
AI时代下，规范驱动开发（SDD）正重塑前端工程实践。SDD以结构化规范为起点，在AI编码时代具有特殊价值：它能有效应对"氛围编程"风险，为AI生成代码提供精准约束。当前开发范式正从"编写代码"转向"定义规范"，工具生态快速兴起。典型SDD工作流包含规范编写、计划制定、任务拆解和AI辅助实现四步循环。在前端领域，SDD可应用于组件开发、状态管理、API集成等场景，通过明确规范指导AI生成符合要求的代码。这一变革要求开发者提升规范制定能力，从&quo
2025-12-17 14:35:28
2090
原创 算法：资深前端开发者的进阶引擎
摘要：算法训练对前端开发者至关重要，能提升问题拆解能力、优化代码性能并深入理解框架原理。学习路径应从基础数据结构开始，逐步掌握递归、动态规划等思想，并与前端场景结合（如DOM操作、状态管理）。推荐采用刻意练习方法，利用LeetCode等平台，按专题攻克问题。核心算法思想如空间换时间、双指针、回溯等能显著提高开发效率。掌握算法是前端开发者突破技术天花板的关键，建议每天投入时间系统学习，将计算机思维融入日常开发。
2025-12-11 20:52:59
608
原创 前端架构(二)：构建可持续演进与AI增强的现代化体系
本文提出了一种现代化前端架构方案，其核心理念包括关注点分离、轻量化和AI就绪性。架构采用整洁架构分层，将系统划分为领域层、基础设施层和视图层，确保核心业务逻辑独立。推荐使用面向对象领域建模和Class单例模式进行轻量状态管理，同时建立完整的代码质量保障体系。创新性地引入"Rules"规则体系，将架构约束、代码规范和业务规则沉淀为机器可读的文档，作为AI辅助开发的核心输入，形成"开发-评审-沉淀"的闭环工作流。这种架构通过清晰分层和约束保障构建坚实基础，利用AI能力实现
2025-12-11 16:12:01
2033
原创 前端整洁架构(一)：构建可持续维护的现代Web应用
本文介绍了前端整洁架构（Clean Architecture）的设计理念与实践。整洁架构通过分层设计将业务逻辑与技术细节分离，核心原则包括依赖倒置、关注点分离和独立于框架等。架构分为四个层次：实体层（核心业务规则）、用例层（具体用户操作）、接口适配器层（数据转换）和框架驱动层（具体实现）。这种分层结构确保了系统的长期可维护性、测试友好性和技术债务可控性，使前端应用能够灵活应对技术栈变更和业务需求变化。
2025-12-11 14:27:53
1696
原创 前端性能优化：成本收益权衡下的实践路径
本文探讨前端性能优化的实践路径与成本收益权衡。首先通过时序图分析URL输入到Vue组件可交互的全流程，识别关键性能节点。其次阐述性能优化对用户体验、商业指标和技术成本的多维收益，特别指出1-3秒是优化性价比最高的区间。然后提出网络层、渲染层、Vue框架层等关键优化措施，包括HTTP/2、CDN分发、资源压缩、懒加载等。最后建立优化决策框架，建议优先执行高收益低成本的优化，并持续监控核心Web指标。整体强调在业务目标和技术投入间取得平衡，实现性能优化的最大价值。
2025-12-09 17:29:14
665
原创 ios跳转页面回退不刷新问题&&解决方案
文章目录问题分析解决方案问题用react开发的H5项目在移动端中遇到了兼容性的问题：在页面a，点击提交按钮后，按钮状态置灰，并跳转到页面b，再从b页面退回到a页面，在Android手机中没有问题，a页面正常显示。在IOS手机中，a页面的提交按钮仍然是置灰状态，不可点击。分析Android：跳转路由再回来后触发了页面刷新，触发componentDidMount等生命周期，按钮状态刷新，重新变为了可点击状态。ios:跳转路由再回来，不会触发页面刷新，也不会触发componentDidMoun
2021-06-17 15:19:07
3176
8
原创 前端页面填加水印方案及实现
文章目录一、背景二、实现1.利用canvas绘制水印信息2.页面展示水印三、完整代码四、调用五、验证一、背景最近有个项目需要在页面上加上水印。这里尝试了一个实现方案。二、实现1.利用canvas绘制水印信息 var can = document.createElement('canvas'); can.width = 250; can.height = 150; var cans = can.getContext('2d'); cans.rotate(-20 *
2021-04-06 15:28:04
1878
8
原创 前端项目(React)接入eslint静态代码检查及一些问题解决方案
Using this.refs is deprecatedUsing string literals in ref attributes is deprecated‘xxx‘ is missing in props validation和 组件变量 is assigned a value but never used解决方案eslint安装配置初始化检验代码
2021-03-29 10:19:58
4358
15
原创 前端性能优化-白屏时间(白屏经历了什么&白屏优化方案&CSS性能优化&内联关键CSS)
从输入url，到页面的画面展示的过程一、白屏时间二、白屏时间的重要性三、白屏的过程四、白屏-性能优化1. DNS解析优化2. TCP网络链路优化3. 服务端处理优化4. 浏览器下载、解析、渲染页面优化内联关键CSS
2021-03-28 23:48:27
5034
2
原创 移动端1px实现和问题踩坑
效果要实现移动端上的一像素线，window.devicePixelRatio=物理像素 /CSS像素目前主流的屏幕DPR=2或者3。拿2倍屏来说，设备的物理像素要实现1像素，而DPR=2，所以css 像素只能是 0.5。一般设计稿是按照750来设计的，它上面的1px是以750来参照的，而我们写css样式是以设备375为参照的，所以我们应该写的0.5px先看看效果：Chrome浏览器PCChrome浏览器移动端IE浏览器下，显示问题实现代码<div class="wrap"
2021-03-19 13:35:44
971
8
原创 不使用插件实现一个移动端日期选择器
React不使用滚动插件实现移动端日期选择器背景需要做一个只包含年月的日期选择器，但目前大多数的日期选择器中，手指滑动使用了better-scroll插件作为移动端滚动插件,需要先安装依赖better-scroll，这无疑会增加项目的体积，所以决定自己实现一个不使用插件的日期选择器。效果图先附上效果图实现实现思路不使用滚动插件利用 touchmove 实现监听手指滑动用两个列表分别展示年份和月份列表固定三行展示上一年，当前年，下一年的数值滑动的时候，通过判断手指滑动的方向改变数值，
2021-02-08 19:04:51
1502
7
原创 深入解析服务端渲染（SSR）：从原理到实践
服务端渲染(SSR)是一种将Vue/React组件在服务器端渲染为完整HTML的技术，能显著提升首屏加载速度和SEO效果。其核心流程包含服务端渲染和客户端水合两个阶段，通过同构代码实现两端运行。SSR架构需要分别配置客户端和服务端Webpack构建，生成不同的产物：客户端包包含交互逻辑，服务端包负责初始渲染。该技术解决了传统SPA的首屏性能问题，特别适合对SEO和弱网环境有要求的应用场景。
2026-01-08 23:34:15
289
原创 深潜而非浮潜：前端开发者拥抱AI的演进之路
摘要：AI正在重塑前端开发，从代码生成到智能交互设计。开发者需从工具使用者转变为AI架构师，掌握提示工程、边缘计算和RAG等技术。学习路径分为三阶段：先精通AI编码工具，再构建AI原生应用，最后深入机器学习原理。关键是将AI智能与前端的交互体验深度融合，成为"智能体验塑造者"而非简单实现者。这要求开发者持续更新知识结构，拥抱从编码范式到产品思维的全方位变革。（149字）
2026-01-08 13:04:56
376
原创 WebGPU与浏览器边缘智能：开启去中心化AI新纪元
WebGPU是W3C推出的下一代Web图形API，旨在彻底解决其前身WebGL在**性能、功能扩展性及多线程支持**上的根本性局限。WebGPU远不止是一个图形API的升级，它是将**高性能通用计算能力民主化**并注入Web平台的关键技术。通过释放用户设备GPU的潜力，它使得浏览器从一个内容消费终端，转变为一个具备强大**本地智能处理能力**的边缘节点。
2026-01-07 16:32:00
956
原创 简单认识AI模型服务平台：Hugging Face和Replicate
Hugging Face和Replicate是两种不同类型的AI服务平台：Hugging Face定位为开源AI模型社区（类似"AI界的GitHub"），专注于模型托管、研究和分享，适合研究人员和开发者深入定制模型；而Replicate是云端推理平台（类似"AI界的Vercel"），提供开箱即用的API服务，按秒计费，适合应用开发者快速集成AI功能。两者形成互补关系，Hugging Face托管原始模型，Replicate提供运行服务。选择取决于需求：研究定制选Hug
2026-01-07 16:04:01
504
原创 【每日算法】LeetCode215. 数组中的第K个最大元素
摘要： 本文探讨了前端开发者学习算法的必要性，并以LeetCode215题（数组中的第K个最大元素）为例，分析三种解法： 直接排序法：排序后取第K个元素（O(n log n)），简单但效率低 最小堆法：维护大小为K的最小堆（O(n log k)），适合处理数据流 快速选择法：基于快速排序分区思想（平均O(n)），通过随机化避免最坏情况，为最优解。 文章结合前端场景（如排行榜、性能监控）说明算法实际价值，强调算法能力能帮助开发者从功能实现者进阶为系统设计者。
2026-01-06 23:02:51
724
原创 Rust代码打包为WebAssembly二进制文件详解
Rust代码通过Cargo工具链可高效打包为WebAssembly二进制文件。该流程包括环境配置（安装Rust、添加Wasm目标）、项目创建（配置Cargo.toml为cdylib类型）、编写带wasm-bindgen宏的Rust代码、发布构建（--target wasm32-unknown-unknown --release），最后用wasm-bindgen生成JS绑定和优化Wasm。相比Emscripten（C/C++）和AssemblyScript方案，Rust+Cargo提供了更轻量、高性能的Was
2026-01-06 13:01:37
1246
原创 【每日算法】LeetCode 72. 编辑距离
编辑距离算法解析 编辑距离（Levenshtein距离）是衡量两个字符串相似度的经典算法，计算将一个字符串转换为另一个所需的最少操作次数（插入、删除或替换字符）。本文介绍了三种实现方法： 基础动态规划：使用二维数组存储中间结果，空间复杂度O(mn) 优化动态规划：仅使用一维数组，空间复杂度降为O(min(m,n)) 递归+记忆化：自上而下的递归解法，配合记忆化提高效率 该算法在前端开发中有广泛应用，如文本差异对比、拼写检查等场景。通过动态规划的状态转移方程，可以高效解决这个序列比对问题。
2026-01-05 13:25:21
847
原创 【每日算法】LeetCode 35. 搜索插入位置
摘要：LeetCode 35. 搜索插入位置 本文介绍了在有序数组中查找目标值或确定其插入位置的算法解决方案。关键点包括： 问题本质：处理有序数组中的查找与插入位置确定 前端应用场景：虚拟列表、表单自动补全等实际开发需求 两种主要解法：暴力解法（O(n)）和二分查找（O(log n)） 代码实现：提供了标准二分查找及两种变体（左闭右闭/左闭右开区间）的实现 重点分析：详细解释了二分查找终止条件及返回left的原因 该算法能有效提升前端开发中处理有序数据的效率，是开发者进阶必备技能。
2026-01-05 13:22:50
581
原创 【每日算法】LeetCode 295. 数据流的中位数
本文探讨了前端开发者学习算法的重要性，并以LeetCode 295题"数据流的中位数"为例进行详细解析。该问题要求设计一个能动态维护数据流中位数的数据结构，核心挑战在于处理数据的动态性和有序性。文章提出了最优的双堆解法：使用最大堆存储较小一半数字，最小堆存储较大一半数字，通过平衡两个堆的大小，实现O(logn)时间添加元素和O(1)时间查询中位数。代码实现展示了如何用JavaScript模拟最大堆、平衡堆大小以及计算中位数。该算法在前端实时统计、性能监控等场景具有实用价值，能帮助开发者从
2026-01-04 13:51:00
859
原创 【每日算法】LeetCode 34. 在排序数组中查找元素的第一个和最后一个位置
二分查找边界定位算法解析 核心思路 该算法通过两次二分查找分别定位目标值的起始和结束位置： 左边界查找：找到第一个等于目标值的位置 右边界查找：找到最后一个等于目标值的位置 关键步骤分析 以示例 nums = [5,7,7,8,8,10], target = 8 为例： 左边界查找过程 初始范围：[0,5]，mid=2(7) → 7<8 → 右移 新范围：[3,5]，mid=4(8) → 找到8，记录位置4，继续左移 新范围：[3,3]，mid=3(8) → 找到8，更新位置3，继续左移 结束 → 左
2026-01-04 13:49:41
918
原创 【每日算法】LeetCode 153. 寻找旋转排序数组中的最小值
摘要： 本文探讨了在旋转排序数组中寻找最小值的算法问题。通过分析数组特性（部分有序），提出了暴力解法（O(n)）和二分查找（O(log n)）两种解决方案。重点介绍了二分查找的实现方法，包括标准实现和简洁优化版本，并通过示例详细演示了查找过程。文章还对比了不同方法的复杂度与优缺点，总结了通用解题模板和核心思路，最后推荐了相关扩展题目。该算法在前端开发中可应用于时间轴组件、无限滚动列表等场景，帮助开发者从功能实现者提升为高效解决方案设计者。
2026-01-01 08:02:34
931
原创 Vue.js 中的 XSS 攻击防护机制详解
Vue.js 内置了多层 XSS 防护机制，默认对所有动态内容进行 HTML 转义，包括文本插值（{{}}）和属性绑定（v-bind）。核心防护措施通过 escapeHTML 函数实现特殊字符转义，并在编译阶段对文本节点进行安全处理。虽然 v-html 指令存在直接插入 HTML 的风险，但可通过只使用可信内容或集成消毒库（如 DOMPurify）来确保安全。服务器端渲染时同样会进行内容转义，并检查客户端与服务端渲染内容的一致性以防止攻击。最佳实践建议：避免直接使用 v-html，对用户输入进行严格验证和消
2025-12-31 14:13:28
379
原创 深入理解XSS攻击：前端防御指南(附:现代框架XSS防护详解)
XSS攻击是一种常见的客户端代码注入威胁，主要分为反射型、存储型和DOM型三类。其危害包括窃取会话、账户劫持等直接风险，以及品牌损害等间接影响。前端防御措施包括：严格的输入验证与过滤、上下文相关的输出编码、使用安全的DOM API（如textContent替代innerHTML）。关键防护工具如内容安全策略(CSP)可限制资源加载，配合安全HTTP头增强保护。现代浏览器特性如Trusted Types API和Subresource Integrity进一步提升了防护能力。实施时应采用分层防御策略，结合验证
2025-12-31 10:28:17
655
原创 图片懒加载技术详解与多种实现方案
图片懒加载技术通过延迟加载非关键图片资源优化页面性能。核心原理是将真实图片URL存储在data-src属性中，当图片进入可视区域时才加载。实现方案包括：1）传统JavaScript方案，通过监听滚动事件和位置计算触发加载；2）现代Intersection Observer API方案，利用浏览器原生API更高效地监测元素可见性。两种方案都支持预加载、错误处理和性能优化，开发者可根据浏览器兼容性需求选择适合的方案。该技术能显著提升页面加载速度，减少不必要资源请求，改善用户体验。
2025-12-30 19:39:38
655
原创 Intersection Observer API 详解
Intersection Observer API 是一种异步监测元素与视口交叉状态的现代浏览器API，可高效检测元素是否进入可视区域。它解决了传统滚动监听带来的性能问题，避免了频繁的DOM查询和重排。核心原理是通过观察者监测目标元素与根元素（通常是视口）的交叉比例，当达到预设阈值时触发回调。该API广泛应用于图片懒加载、无限滚动、广告曝光统计、动画触发等场景。使用时需注意浏览器兼容性，合理配置rootMargin等参数，并及时清理不再需要的观察者以提高性能。相比传统方法，它能显著提升页面性能，减少卡顿现象
2025-12-30 19:30:25
386
原创 【性能优化】图片渲染性能优化全流程方案详解
本文系统介绍了图片渲染性能优化的全流程方案。首先解析浏览器加载与渲染图片的机制，包括解码、布局和合成等关键步骤。随后针对三大场景提出具体优化策略：大图片推荐使用WebP/AVIF格式、响应式设计和懒加载；超多图片建议虚拟滚动、请求合并和内存管理；小图片推荐雪碧图、SVG和Base64内联。最后通过电商和新闻网站案例，展示了如何综合应用这些技术。全文覆盖从格式选择到CDN加速的完整优化链条，为提升页面加载速度和渲染性能提供实用指南。
2025-12-30 00:06:38
528
原创 浏览器渲染图层详解
浏览器渲染图层是提升网页性能的关键机制，将满足特定条件的元素（如应用CSS 3D变换、动画或will-change属性）提升为独立图层，实现硬件加速。合理使用图层可优化动画性能、减少重绘范围，但过度创建会增大内存消耗。优化方案包括：针对性使用transform/opacity动画、控制will-change使用、监控图层数量。实际应用中，复杂动画、滚动列表等场景可通过分层渲染显著提升流畅度，需配合Chrome开发者工具进行调试，在性能与资源消耗间取得平衡。
2025-12-29 23:55:17
1066
原创 【每日算法】LeetCode 416. 分割等和子集(动态规划)
本文探讨了LeetCode 416题"分割等和子集"的解题方法。该问题要求判断一个正整数数组是否能被分割成两个和相等的子集。关键分析指出，该问题可转化为0-1背包问题，即寻找子集使其和等于数组总和的一半。文章对比了回溯法、二维动态规划、一维优化动态规划等多种解法，其中一维优化动态规划因其O(n×target)时间复杂度和O(target)空间复杂度被推荐为最优解。代码实现部分展示了从基础回溯到最优解法的完整演进过程，包括位运算优化等高级技巧，为前端开发者提供了从理论到实践的完整解决方案。
2025-12-29 12:41:21
765
原创 【每日算法】LeetCode 5. 最长回文子串(动态规划)
前端开发者学习算法有助于从"页面构建者"进阶为"复杂系统设计者"，提升问题解决能力。LeetCode第5题"最长回文子串"考察字符串处理能力，其最优解为中心扩散法，时间复杂度O(n²)，空间复杂度O(1)。该算法利用回文串的对称性，遍历每个可能的中心并向两侧扩展，比动态规划法更节省空间。掌握此类算法能提升前端开发中字符串处理、性能优化等核心技能，是技术进阶的关键。
2025-12-29 12:39:07
911
原创 【每日算法】LeetCode 1143. 最长公共子序列
摘要： 最长公共子序列（LCS）是前端开发者进阶必须掌握的动态规划经典问题。本文通过三个示例分析LCS问题，提出二维动态规划解法，其核心在于定义dp[i][j]表示text1前i个字符与text2前j个字符的LCS长度。状态转移分两种情况：当字符相等时，dp[i][j]=dp[i-1][j-1]+1；不等时取dp[i-1][j]和dp[i][j-1]的最大值。给出标准版（O(mn)空间）和优化版（O(min(m,n))空间）两种实现，后者通过滚动数组显著降低空间消耗。该算法不仅本身高效，其思想对理解虚拟DO
2025-12-28 13:50:23
1003
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人