<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[2401_83227843的博客]]></title><description><![CDATA[]]></description><link>https://blog.csdn.net/2401_83227843</link><language>zh-cn</language><generator>https://blog.csdn.net/</generator><copyright><![CDATA[Copyright &copy; 2401_83227843]]></copyright><item><title><![CDATA[其他安全风险与策略]]></title><link>https://blog.csdn.net/2401_83227843/article/details/169838119</link><guid>https://blog.csdn.net/2401_83227843/article/details/169838119</guid><author>2401_83227843</author><pubDate>Thu, 05 Nov 2026 10:30:00 +0800</pubDate><description><![CDATA[点击劫持：攻击者使用透明iframe嵌套目标网站，上层诱导按钮，诱骗用户点击执行非自愿操作；防御：X-Frame-Options、CSP frame-ancestors、JS跳出iframe（辅助）。
前端数据泄露：敏感数据下发前端、存本地存储、URL传参、控制台打印、接口返回多余字段；防御：最小返回、脱敏、敏感信息不下发前端、禁用localStorage存隐私。
依赖安全：第三方npm/maven等包存在CVE漏洞、供应链投毒；防御：依赖扫描、固定版本、定期升级高危包、清理无用依赖。]]></description><category></category></item><item><title><![CDATA[CSRF攻击与防御]]></title><link>https://blog.csdn.net/2401_83227843/article/details/169837711</link><guid>https://blog.csdn.net/2401_83227843/article/details/169837711</guid><author>2401_83227843</author><pubDate>Wed, 04 Nov 2026 06:00:00 +0800</pubDate><description><![CDATA[利用用户当前已登录的身份，诱导用户在不知情的情况下发起跨站请求，执行非自愿操作。 和 XSS 对比简单记忆：XSS 是偷你的身份凭证，以攻击者身份执行；CSRF 是借用你浏览器自带的身份（Cookie），以你的身份偷偷发请求。]]></description><category></category></item><item><title><![CDATA[XSS 攻击与防御]]></title><link>https://blog.csdn.net/2401_83227843/article/details/169837184</link><guid>https://blog.csdn.net/2401_83227843/article/details/169837184</guid><author>2401_83227843</author><pubDate>Tue, 03 Nov 2026 09:30:00 +0800</pubDate><description><![CDATA[XSS 的本质可以类比为在网页里混入一段不受信任的剧本，浏览器无法区分脚本是业务本身的代码还是攻击者注入的内容，会直接解析执行，窃取数据、劫持页面、诱导跳转。]]></description><category></category></item><item><title><![CDATA[常见交互性能问题优化]]></title><link>https://blog.csdn.net/2401_83227843/article/details/169836634</link><guid>https://blog.csdn.net/2401_83227843/article/details/169836634</guid><author>2401_83227843</author><pubDate>Mon, 02 Nov 2026 13:09:13 +0800</pubDate><description><![CDATA[页面卡顿的本质可以类比为一条单向通行的公路，主线程就是这条公路，所有 JS 执行、样式计算、布局、绘制任务都要在这条路上依次通行，一旦有任务占用时间过长，后续任务就会排队堵塞，用户感知为卡顿、点击无响应、滚动掉帧。]]></description><category></category></item><item><title><![CDATA[性能监控与质量]]></title><link>https://blog.csdn.net/2401_83227843/article/details/168964401</link><guid>https://blog.csdn.net/2401_83227843/article/details/168964401</guid><author>2401_83227843</author><pubDate>Fri, 30 Oct 2026 09:45:00 +0800</pubDate><description><![CDATA[本章节聚焦前端性能数据采集、监听与指标体系，核心价值是量化页面性能表现，定位加载、交互卡顿瓶颈；区别于主观体感，依靠浏览器原生API获取高精度时序数据，为性能优化提供客观依据，广泛用于埋点上报、线上监控平台、A/B实验对比、回归巡检等场景。]]></description><category></category></item><item><title><![CDATA[多线程与计算优化]]></title><link>https://blog.csdn.net/2401_83227843/article/details/168964168</link><guid>https://blog.csdn.net/2401_83227843/article/details/168964168</guid><author>2401_83227843</author><pubDate>Thu, 29 Oct 2026 09:00:00 +0800</pubDate><description><![CDATA[本章节围绕浏览器单线程模型下的计算瓶颈展开，核心价值是利用 Web Worker 开辟后台线程，将耗时计算移出主线程，避免阻塞渲染、交互事件，解决页面卡顿、无响应问题；适用于大数据运算、密集型算法等场景，是前端性能优化中针对CPU密集任务的标准方案。]]></description><category></category></item><item><title><![CDATA[长列表性能优化]]></title><link>https://blog.csdn.net/2401_83227843/article/details/168958461</link><guid>https://blog.csdn.net/2401_83227843/article/details/168958461</guid><author>2401_83227843</author><pubDate>Wed, 28 Oct 2026 06:00:00 +0800</pubDate><description><![CDATA[长列表是前端常见的性能瓶颈场景，当列表数据量达到数百上千条时，全量渲染 DOM 节点会造成页面加载慢、滚动卡顿、内存占用过高等问题。虚拟列表（Virtual List）是长列表性能优化的标准方案，核心是仅渲染可视区域内的列表项，通过占位高度模拟完整滚动条，将 DOM 节点数量控制在固定量级，从根本上解决海量数据的渲染性能问题。]]></description><category></category></item><item><title><![CDATA[拖拽交互体系]]></title><link>https://blog.csdn.net/2401_83227843/article/details/168957770</link><guid>https://blog.csdn.net/2401_83227843/article/details/168957770</guid><author>2401_83227843</author><pubDate>Tue, 27 Oct 2026 10:00:00 +0800</pubDate><description><![CDATA[拖拽交互是桌面端、移动端通用的核心交互模式，广泛应用于元素排序、布局调整、弹窗拖动、画布操作等业务场景。前端拖拽分为原生拖放 API 与自定义拖拽两套实现方案，分别适配不同的业务复杂度与交互需求；配合多端事件兼容、边界限制、磁吸吸附等扩展能力，可以构建出体验流畅、约束清晰的完整拖拽交互体系。]]></description><category></category></item><item><title><![CDATA[滚动交互体系]]></title><link>https://blog.csdn.net/2401_83227843/article/details/168956866</link><guid>https://blog.csdn.net/2401_83227843/article/details/168956866</guid><author>2401_83227843</author><pubDate>Mon, 26 Oct 2026 10:30:00 +0800</pubDate><description><![CDATA[滚动交互是 Web 页面最常见的交互场景之一，覆盖资源加载、列表浏览、布局联动等多个业务场景。传统滚动交互依赖 scroll 事件配合位置计算实现，存在高频触发、性能开销大、实现繁琐等问题。结合 IntersectionObserver、CSS 粘性定位等原生能力，可以实现高性能、低代码量的滚动交互方案，同时配套滚动穿透等边界问题的处理，构建完整的滚动交互体系。]]></description><category></category></item><item><title><![CDATA[浏览器内存管理]]></title><link>https://blog.csdn.net/2401_83227843/article/details/168235078</link><guid>https://blog.csdn.net/2401_83227843/article/details/168235078</guid><author>2401_83227843</author><pubDate>Thu, 22 Oct 2026 09:45:00 +0800</pubDate><description><![CDATA[浏览器内存管理直接决定了页面的长期运行稳定性与流畅度。V8 引擎通过自动垃圾回收机制管理堆内存的分配与回收，但不合理的代码逻辑会造成对象意外持续引用，导致内存无法释放，形成内存泄漏，最终引发页面卡顿、响应变慢甚至浏览器崩溃。理解垃圾回收的底层原理、识别常见内存泄漏场景、掌握通用优化手段，是构建高稳定工业级前端应用的必备底层能力。]]></description><category></category></item><item><title><![CDATA[渲染流水线]]></title><link>https://blog.csdn.net/2401_83227843/article/details/168234764</link><guid>https://blog.csdn.net/2401_83227843/article/details/168234764</guid><author>2401_83227843</author><pubDate>Wed, 21 Oct 2026 08:00:00 +0800</pubDate><description><![CDATA[渲染流水线是浏览器将 DOM、CSSOM 转化为屏幕可视化像素的完整执行流程，与事件循环深度协同，按固定帧率周期性执行。完整的渲染流水线分为样式计算、布局、绘制、合成四个核心阶段，不同阶段对应不同的性能开销。配合 requestAnimationFrame 精准控制渲染时机、requestIdleCallback 利用空闲时间调度低优先级任务，可以实现渲染性能的精细化管控。]]></description><category></category></item><item><title><![CDATA[任务的分类]]></title><link>https://blog.csdn.net/2401_83227843/article/details/168234609</link><guid>https://blog.csdn.net/2401_83227843/article/details/168234609</guid><author>2401_83227843</author><pubDate>Tue, 20 Oct 2026 10:30:00 +0800</pubDate><description><![CDATA[事件循环的核心是任务调度，浏览器将异步任务按优先级划分为**宏任务（MacroTask / Task）与微任务（MicroTask / Job）**两大类，分别维护独立的任务队列。两类任务遵循不同的调度规则，微任务具备更高的执行优先级，能够在两次宏任务之间插队执行，以此实现高优先级任务的及时响应，是理解异步代码执行顺序的核心依据。]]></description><category></category></item><item><title><![CDATA[Javascript执行机制]]></title><link>https://blog.csdn.net/2401_83227843/article/details/168234071</link><guid>https://blog.csdn.net/2401_83227843/article/details/168234071</guid><author>2401_83227843</author><pubDate>Mon, 19 Oct 2026 08:15:00 +0800</pubDate><description><![CDATA[JavaScript 执行机制是前端异步编程、性能优化的底层核心，基于单线程执行模型，通过调用栈管理同步代码的执行顺序，配合事件循环与任务队列实现异步任务的调度。理解这一整套机制，是掌握异步编程、排查性能问题、理解浏览器运行逻辑的基础。]]></description><category></category></item><item><title><![CDATA[OSS对象存储]]></title><link>https://blog.csdn.net/2401_83227843/article/details/168230659</link><guid>https://blog.csdn.net/2401_83227843/article/details/168230659</guid><author>2401_83227843</author><pubDate>Sun, 18 Oct 2026 07:30:00 +0800</pubDate><description><![CDATA[OSS自带业务权限系统  OSS只识别RAM权限、签名；业务权限（A用户能不能看B的文件）完全由业务后端实现。STS临时凭证：按需设置有效期，限制可上传的OSS目录前缀，缩小权限范围。可选加固方案 OSS防盗链（Referer白名单）、CDN加速访问、上传后异步内容审核。预签名URL是动态生成、带时效的临时地址。必须由后端校验用户和文件的权限关系，鉴权通过才生成签名。备选上传：后端接收文件再上传OSS（敏感文件）（图片、PDF、视频、Excel、压缩包等），备选上传：后端接收文件再上传OSS（敏感文件）]]></description><category></category></item><item><title><![CDATA[算法模板总结]]></title><link>https://blog.csdn.net/2401_83227843/article/details/168228645</link><guid>https://blog.csdn.net/2401_83227843/article/details/168228645</guid><author>2401_83227843</author><pubDate>Sat, 17 Oct 2026 10:34:05 +0800</pubDate><description><![CDATA[涵盖：DFS、BFS、回溯、二分、滑动窗口、并查集、前缀和、单调栈、动态规划等，网格连通/最短路径用BFS/DFS；枚举方案用回溯；有序最值用二分；子串区间用滑动窗口、前缀和；集合连通用并查集；嵌套结构用栈；相邻大小找单调栈；状态递推用DP。]]></description><category></category></item><item><title><![CDATA[交互状态规范]]></title><link>https://blog.csdn.net/2401_83227843/article/details/167482204</link><guid>https://blog.csdn.net/2401_83227843/article/details/167482204</guid><author>2401_83227843</author><pubDate>Fri, 16 Oct 2026 10:00:00 +0800</pubDate><description><![CDATA[交互状态规范是前端交互体系的标准化准则，通过统一的状态定义、视觉反馈与交互行为，保证用户在所有交互场景中获得一致、可预期的操作反馈，消除认知负担，提升操作效率。四态设计是交互组件的标准状态模型，配合通用反馈原则，构建完整的交互状态体系。]]></description><category></category></item><item><title><![CDATA[动画无障碍与降级]]></title><link>https://blog.csdn.net/2401_83227843/article/details/167481945</link><guid>https://blog.csdn.net/2401_83227843/article/details/167481945</guid><author>2401_83227843</author><pubDate>Thu, 15 Oct 2026 09:00:00 +0800</pubDate><description><![CDATA[动效设计在提升视觉体验的同时，需要兼顾特殊用户的可访问性需求与交互的功能性本质。无障碍降级机制适配前庭功能障碍用户的动效耐受度，避免动效引发的身体不适；交互状态联动则回归动画的交互本质，让动效服务于状态反馈而非独立装饰，二者共同构建了普惠、高效、合理的前端动效体系。]]></description><category></category></item><item><title><![CDATA[高级动画技巧]]></title><link>https://blog.csdn.net/2401_83227843/article/details/167481686</link><guid>https://blog.csdn.net/2401_83227843/article/details/167481686</guid><author>2401_83227843</author><pubDate>Wed, 14 Oct 2026 09:45:00 +0800</pubDate><description><![CDATA[随着前端动效复杂度提升，布局变化、列表重排、大规模元素动画等场景容易出现渲染卡顿、掉帧、内存占用过高等性能问题。高级动画技巧围绕渲染层级优化、硬件加速利用、渲染流程优化展开，将高开销的布局级动画转化为低开销的合成级动画，在保证视觉效果的同时大幅提升动效流畅度，是复杂交互动效的必备实践能力。]]></description><category></category></item><item><title><![CDATA[Web Animation API]]></title><link>https://blog.csdn.net/2401_83227843/article/details/167481189</link><guid>https://blog.csdn.net/2401_83227843/article/details/167481189</guid><author>2401_83227843</author><pubDate>Tue, 13 Oct 2026 06:30:00 +0800</pubDate><description><![CDATA[Web Animations API（简称 WAAPI）是 W3C 标准化的原生 JavaScript 动画接口，它将 CSS 动画、SVG 动画的底层能力统一暴露给 JavaScript，既保留了 CSS 动画的 GPU 加速、合成线程渲染的性能优势，又具备 JavaScript 的动态性与可控性。它弥补了 CSS 动画难以动态传参、无法实时控制播放流程的不足，是复杂交互动画、动态业务动效的标准实现方案。]]></description><category></category></item><item><title><![CDATA[CSS 动效基础]]></title><link>https://blog.csdn.net/2401_83227843/article/details/167480903</link><guid>https://blog.csdn.net/2401_83227843/article/details/167480903</guid><author>2401_83227843</author><pubDate>Mon, 12 Oct 2026 05:00:00 +0800</pubDate><description><![CDATA[CSS 动效是前端交互反馈与视觉体验的核心实现方式，基于浏览器合成线程原生渲染，具备 GPU 加速能力，性能远优于 JavaScript 动画。CSS 动效体系分为过渡动画与关键帧动画两大核心类型，配合原生动画事件实现动画生命周期的回调控制，能够覆盖状态反馈、入场出场、循环装饰等绝大多数动效场景，是构建流畅交互体验的基础。]]></description><category></category></item></channel></rss>