- 博客(366)
- 收藏
- 关注
RSS订阅原创 同源策略、跨域与CORS安全风险
本章前面讲了XSS、CSRF、各类前端风险，而同源策略是浏览器所有前端安全的底层基石，XSS、CSRF、跨域请求都建立在同源策略之上，放最后一节非常合适，把底层原理补齐，闭环整个章节。 类比：同源策略相当于小区门禁，规定哪些网页之间可以互相读取数据；门禁规则配置错了（CORS配置不当）就会造成跨域安全漏洞。
2026-11-06 14:30:00
681
原创 其他安全风险与策略
点击劫持：攻击者使用透明iframe嵌套目标网站，上层诱导按钮，诱骗用户点击执行非自愿操作；防御：X-Frame-Options、CSP frame-ancestors、JS跳出iframe（辅助）。前端数据泄露：敏感数据下发前端、存本地存储、URL传参、控制台打印、接口返回多余字段；防御：最小返回、脱敏、敏感信息不下发前端、禁用localStorage存隐私。依赖安全：第三方npm/maven等包存在CVE漏洞、供应链投毒；防御：依赖扫描、固定版本、定期升级高危包、清理无用依赖。
2026-11-05 10:30:00
505
原创 CSRF攻击与防御
利用用户当前已登录的身份，诱导用户在不知情的情况下发起跨站请求，执行非自愿操作。 和 XSS 对比简单记忆：XSS 是偷你的身份凭证，以攻击者身份执行；CSRF 是借用你浏览器自带的身份（Cookie），以你的身份偷偷发请求。
2026-11-04 06:00:00
236
原创 XSS 攻击与防御
XSS 的本质可以类比为在网页里混入一段不受信任的剧本，浏览器无法区分脚本是业务本身的代码还是攻击者注入的内容，会直接解析执行，窃取数据、劫持页面、诱导跳转。
2026-11-03 09:30:00
192
原创 常见交互性能问题优化
页面卡顿的本质可以类比为一条单向通行的公路，主线程就是这条公路，所有 JS 执行、样式计算、布局、绘制任务都要在这条路上依次通行，一旦有任务占用时间过长，后续任务就会排队堵塞，用户感知为卡顿、点击无响应、滚动掉帧。
2026-11-02 13:09:13
145
原创 性能监控与质量
本章节聚焦前端性能数据采集、监听与指标体系，核心价值是量化页面性能表现，定位加载、交互卡顿瓶颈；区别于主观体感，依靠浏览器原生API获取高精度时序数据，为性能优化提供客观依据，广泛用于埋点上报、线上监控平台、A/B实验对比、回归巡检等场景。
2026-10-30 09:45:00
51
原创 多线程与计算优化
本章节围绕浏览器单线程模型下的计算瓶颈展开，核心价值是利用 Web Worker 开辟后台线程，将耗时计算移出主线程，避免阻塞渲染、交互事件，解决页面卡顿、无响应问题；适用于大数据运算、密集型算法等场景，是前端性能优化中针对CPU密集任务的标准方案。
2026-10-29 09:00:00
185
原创 长列表性能优化
长列表是前端常见的性能瓶颈场景，当列表数据量达到数百上千条时，全量渲染 DOM 节点会造成页面加载慢、滚动卡顿、内存占用过高等问题。虚拟列表（Virtual List）是长列表性能优化的标准方案，核心是仅渲染可视区域内的列表项，通过占位高度模拟完整滚动条，将 DOM 节点数量控制在固定量级，从根本上解决海量数据的渲染性能问题。
2026-10-28 06:00:00
519
原创 拖拽交互体系
拖拽交互是桌面端、移动端通用的核心交互模式，广泛应用于元素排序、布局调整、弹窗拖动、画布操作等业务场景。前端拖拽分为原生拖放 API 与自定义拖拽两套实现方案，分别适配不同的业务复杂度与交互需求；配合多端事件兼容、边界限制、磁吸吸附等扩展能力，可以构建出体验流畅、约束清晰的完整拖拽交互体系。
2026-10-27 10:00:00
476
原创 滚动交互体系
滚动交互是 Web 页面最常见的交互场景之一，覆盖资源加载、列表浏览、布局联动等多个业务场景。传统滚动交互依赖 scroll 事件配合位置计算实现，存在高频触发、性能开销大、实现繁琐等问题。结合 IntersectionObserver、CSS 粘性定位等原生能力，可以实现高性能、低代码量的滚动交互方案，同时配套滚动穿透等边界问题的处理，构建完整的滚动交互体系。
2026-10-26 10:30:00
859
原创 浏览器内存管理
浏览器内存管理直接决定了页面的长期运行稳定性与流畅度。V8 引擎通过自动垃圾回收机制管理堆内存的分配与回收，但不合理的代码逻辑会造成对象意外持续引用，导致内存无法释放，形成内存泄漏，最终引发页面卡顿、响应变慢甚至浏览器崩溃。理解垃圾回收的底层原理、识别常见内存泄漏场景、掌握通用优化手段，是构建高稳定工业级前端应用的必备底层能力。
2026-10-22 09:45:00
317
原创 渲染流水线
渲染流水线是浏览器将 DOM、CSSOM 转化为屏幕可视化像素的完整执行流程，与事件循环深度协同，按固定帧率周期性执行。完整的渲染流水线分为样式计算、布局、绘制、合成四个核心阶段，不同阶段对应不同的性能开销。配合 requestAnimationFrame 精准控制渲染时机、requestIdleCallback 利用空闲时间调度低优先级任务，可以实现渲染性能的精细化管控。
2026-10-21 08:00:00
523
原创 任务的分类
事件循环的核心是任务调度，浏览器将异步任务按优先级划分为**宏任务（MacroTask / Task）与微任务（MicroTask / Job）**两大类，分别维护独立的任务队列。两类任务遵循不同的调度规则，微任务具备更高的执行优先级，能够在两次宏任务之间插队执行，以此实现高优先级任务的及时响应，是理解异步代码执行顺序的核心依据。
2026-10-20 10:30:00
159
原创 Javascript执行机制
JavaScript 执行机制是前端异步编程、性能优化的底层核心，基于单线程执行模型，通过调用栈管理同步代码的执行顺序，配合事件循环与任务队列实现异步任务的调度。理解这一整套机制，是掌握异步编程、排查性能问题、理解浏览器运行逻辑的基础。
2026-10-19 08:15:00
601
原创 OSS对象存储
OSS自带业务权限系统 OSS只识别RAM权限、签名；业务权限（A用户能不能看B的文件）完全由业务后端实现。STS临时凭证：按需设置有效期，限制可上传的OSS目录前缀，缩小权限范围。可选加固方案 OSS防盗链（Referer白名单）、CDN加速访问、上传后异步内容审核。预签名URL是动态生成、带时效的临时地址。必须由后端校验用户和文件的权限关系，鉴权通过才生成签名。备选上传：后端接收文件再上传OSS（敏感文件）（图片、PDF、视频、Excel、压缩包等），备选上传：后端接收文件再上传OSS（敏感文件）
2026-10-18 07:30:00
335
原创 算法模板总结
涵盖：DFS、BFS、回溯、二分、滑动窗口、并查集、前缀和、单调栈、动态规划等，网格连通/最短路径用BFS/DFS；枚举方案用回溯；有序最值用二分；子串区间用滑动窗口、前缀和；集合连通用并查集；嵌套结构用栈；相邻大小找单调栈；状态递推用DP。
2026-10-17 10:34:05
417
原创 交互状态规范
交互状态规范是前端交互体系的标准化准则，通过统一的状态定义、视觉反馈与交互行为，保证用户在所有交互场景中获得一致、可预期的操作反馈，消除认知负担，提升操作效率。四态设计是交互组件的标准状态模型，配合通用反馈原则，构建完整的交互状态体系。
2026-10-16 10:00:00
267
原创 动画无障碍与降级
动效设计在提升视觉体验的同时，需要兼顾特殊用户的可访问性需求与交互的功能性本质。无障碍降级机制适配前庭功能障碍用户的动效耐受度，避免动效引发的身体不适；交互状态联动则回归动画的交互本质，让动效服务于状态反馈而非独立装饰，二者共同构建了普惠、高效、合理的前端动效体系。
2026-10-15 09:00:00
227
原创 高级动画技巧
随着前端动效复杂度提升，布局变化、列表重排、大规模元素动画等场景容易出现渲染卡顿、掉帧、内存占用过高等性能问题。高级动画技巧围绕渲染层级优化、硬件加速利用、渲染流程优化展开，将高开销的布局级动画转化为低开销的合成级动画，在保证视觉效果的同时大幅提升动效流畅度，是复杂交互动效的必备实践能力。
2026-10-14 09:45:00
190
原创 Web Animation API
Web Animations API（简称 WAAPI）是 W3C 标准化的原生 JavaScript 动画接口，它将 CSS 动画、SVG 动画的底层能力统一暴露给 JavaScript，既保留了 CSS 动画的 GPU 加速、合成线程渲染的性能优势，又具备 JavaScript 的动态性与可控性。它弥补了 CSS 动画难以动态传参、无法实时控制播放流程的不足，是复杂交互动画、动态业务动效的标准实现方案。
2026-10-13 06:30:00
205
原创 CSS 动效基础
CSS 动效是前端交互反馈与视觉体验的核心实现方式，基于浏览器合成线程原生渲染，具备 GPU 加速能力，性能远优于 JavaScript 动画。CSS 动效体系分为过渡动画与关键帧动画两大核心类型，配合原生动画事件实现动画生命周期的回调控制，能够覆盖状态反馈、入场出场、循环装饰等绝大多数动效场景，是构建流畅交互体验的基础。
2026-10-12 05:00:00
581
原创 高级表单能力
高级表单能力是面向复杂业务场景的表单扩展技术体系，覆盖富文本内容创作、动态字段配置、无障碍可访问性三个核心维度，解决基础表单无法满足的内容编辑、动态业务、普惠可访问等高阶需求，是工业级复杂表单的标准能力集合。
2026-10-09 08:15:00
274
原创 文件上传交互
文件上传是 Web 表单交互的核心场景之一，覆盖本地文件读取、预览、提交、传输的完整链路。从基础的表单上传到拖拽交互，再到大文件分片传输，形成了覆盖不同文件体积、不同体验需求的完整上传体系，是附件提交、资源上传、文件分享等业务的核心技术支撑。
2026-10-08 09:00:00
714
原创 表单验证体系
表单验证是保障输入数据合法性、规范性与业务正确性的核心环节，是表单交互的第一道防线。完整的验证体系涵盖格式校验、业务校验、分层触发机制与原生API能力，通过正则表达式实现规则匹配，结合实时校验与提交校验的双层策略，配合浏览器原生验证API，能够构建体验流畅、管控严格的表单校验体系。
2026-10-07 10:15:00
282
原创 FormData数据处理
FormData 是浏览器原生提供的表单数据构造与处理接口，用于以键值对形式构建结构化表单数据，原生支持文件、二进制数据的封装与提交。它是异步表单提交、文件上传、表单数据快速序列化的核心工具，能够直接对接 HTTP 请求的 multipart/form-data 编码格式，无需手动拼接数据与处理分隔边界。
2026-10-06 08:15:00
618
原创 输入事件进阶
基础输入事件仅能覆盖通用的输入状态反馈，在中文等输入法场景、高频实时输入场景下会出现中间状态误触发、性能压力过大等问题。输入法合成事件与防抖校验策略共同构成了进阶输入处理体系，能够精准区分输入的合成状态与最终状态，平衡实时反馈体验与性能开销，是复杂表单交互、搜索交互的核心处理方案。
2026-10-05 06:00:00
306
原创 表单控件操作基础
表单控件是表单交互的核心载体，负责用户输入采集、选项选择与状态交互，是表单数据录入、校验与提交的底层基础。按交互类型可分为文本类、选择类、按钮类三大体系，各类控件具备统一的状态控制机制与操作接口。精准掌握控件的基础操作、状态特性与边界行为，是实现复杂表单交互逻辑的前提。
2026-10-04 07:39:39
269
原创 前端状态管理基础
随着前端应用从页面驱动向数据驱动演进，状态的维护、共享、同步与变更管控逐渐成为前端架构的核心问题。从最基础的闭包私有状态封装，到发布订阅模式的状态通信，再到集中式内存状态管理，构成了前端状态管理体系的底层演进路径，也是理解工业级状态管理库的核心基础。
2026-09-25 09:00:00
435
原创 IndexedDB 本地数据库
IndexedDB 是浏览器原生提供的事务型结构化本地数据库，专为解决 Web Storage 容量上限低、仅支持字符串存储、查询能力弱的问题。它支持大容量存储、索引查询、事务处理，能够存储海量结构化业务数据与二进制资源，是复杂离线应用、大数据本地缓存的核心存储方案。
2026-09-24 10:00:00
586
原创 缓存与离线存储
缓存与离线存储是提升Web应用加载性能、实现断网可用的核心技术体系。不同于Web Storage的纯业务数据存储，Cache Storage专注于HTTP网络资源的可编程缓存，配合运行在浏览器后台的Service Worker线程，可以实现对网络请求的拦截与自定义响应，进而构建完整的离线应用。这套体系也是PWA（渐进式Web应用）的核心技术底座，能够让Web应用具备接近原生应用的加载速度与离线可用性。
2026-09-23 10:30:00
292
原创 Web Storage 体系
Web Storage 是 HTML5 标准推出的客户端键值对存储机制，专为解决 Cookie 存储容量过小、请求自动携带造成的传输冗余问题，提供了更大的存储空间、更简洁的同步操作 API。它分为 localStorage（持久化本地存储）与 sessionStorage（会话级存储）两种类型，二者共享完全一致的操作接口，仅在生命周期与作用域上存在差异，是前端本地数据缓存、状态持久化、跨页面通信的核心基础方案。
2026-09-22 06:45:00
252
原创 Cookie存储机制
Cookie 是浏览器最早支持的客户端数据存储机制，诞生于 HTTP 协议的会话管理需求，数据以小型文本片段的形式存储在浏览器端，且会在对应域名的 HTTP 请求中自动携带到服务端。它是会话状态保持、用户身份识别、个性化配置存储的经典方案，具备完善的安全属性与作用域控制机制，是 Web 状态管理的底层基础之一。
2026-09-21 06:30:00
497
原创 工业级请求工具体系
工业级请求工具是前端网络层的标准化封装方案，基于原生 XMLHttpRequest 或 fetch API 深度封装，通过实例化配置、切面拦截器、统一错误处理等核心机制，解决原生 API 配置分散、逻辑重复、错误处理繁琐、业务耦合度高的问题。
2026-09-20 05:45:00
256
原创 跨域问题与解决方案
跨域的根源是浏览器的同源策略，它是浏览器的安全机制，不是HTTP本身的限制。只有浏览器端JS发起的跨域请求才会触发同源校验；后端之间互相调用、Postman、curl不存在跨域限制。
2026-09-19 08:30:00
305
原创 实时通信方案
常规 HTTP 请求属于单向短连接通信，仅支持客户端主动发起请求、服务端被动响应，请求结束后连接立即断开，服务端无法主动向客户端推送数据。在消息通知、实时日志、AI 流式输出、在线聊天、协同编辑等需要服务端主动推送、实时数据同步的业务场景中，普通 HTTP 模式无法满足需求。目前前端主流实时通信方案包含：轮询与长轮询、SSE 服务器推送事件、WebSocket 双向长连接，本节将全面讲解各方案的原理、代码实现、优缺点及适用场景。
2026-09-19 05:45:00
154
原创 原生网络请求 API
前端原生网络 API 两代方案：XMLHttpRequest（传统）、Fetch API（现代标准）。二者底层都是浏览器 HTTP 请求能力，Fetch 基于 Promise，是现代开发首选；XHR 为早期方案，仍存在于老项目中。同时配套 AbortController 请求取消、ReadableStream 流式读取响应。
2026-09-17 16:00:00
966
原创 异步进阶能力
基础 Promise / async-await 只能处理简单异步流程；在真实前后端交互场景，网络不稳定、接口并发量大、请求耗时不可控，需要额外封装：超时中断、失败重试、并发数量限制、任务调度。
2026-09-16 09:00:00
403
原创 异步编程演进体系
JavaScript 是单线程语言，异步是为了解决耗时操作（网络请求、文件读写、定时器）阻塞主线程的问题，异步方案经历了：回调函数 → Promise → async/await
2026-09-15 07:15:00
366
原创 自定义事件与通信机制
浏览器原生事件体系仅覆盖浏览器内置的交互与状态事件，自定义事件则允许开发者根据业务需求定义专属事件类型，配合事件驱动模式实现模块间、组件间的解耦通信。自定义事件完全复用原生事件流机制，结合发布订阅模式封装的事件总线，是前端跨组件、跨模块通信的基础方案，也是事件驱动架构的核心载体。
2026-09-14 10:30:00
952
原创 高频事件性能优化
高频事件（如 scroll、mousemove、touchmove、resize、输入联想等）触发频率极高，每秒可达数十次甚至上百次。若直接在回调中绑定复杂计算、DOM操作、接口请求，会造成主线程阻塞、页面卡顿、交互延迟等性能问题。防抖、节流是业务层通用的频率控制方案，配合浏览器原生的 passive 监听机制，可以从代码层面到浏览器层面全方位优化高频事件的执行性能。
2026-09-13 11:15:00
76
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人