前端
HTML/CSS/JavaScript等前端技术
共 168 篇文章前端埋点与数据监控体系：从事件设计到上线放量
埋点是数据产品的地基：埋点口径一旦错了，后面的指标看板、漏斗分析、AI 数据解读都会在错误的数据上得出错误结论。这篇文章把埋点当作一个完整的工程体系来讲：事件设
Core Web Vitals 实战：LCP、INP、CLS 的定位与优化路径
性能优化最大的浪费，是在错误的数据上优化错误的问题：本地 Lighthouse 跑了 98 分，线上真实用户的 LCP 却是 4 秒，因为真实用户用的是四年前的
前端错误监控：捕获、降噪、定位与恢复
错误监控的目标不是"收集所有报错"，而是在用户大规模受损之前发现、定位、修掉。生产环境里真正难的不是捕获——捕获是十行代码的事——难的是捕获之后：上百条堆栈怎么
图片优化全链路：格式、尺寸、懒加载与缓存策略
内容型站点里，图片常年占页面总重量的六成以上，也是 LCP 最常见的元素。图片优化不是"把图片压小"一个动作，而是一条链路：构建期决定格式与尺寸、加载期决定下载
首屏加载优化：从路由拆包到预加载的完整清单
首屏是用户对站点质量的第一判断，也是最多"改了一处、慢了两处"的重灾区：加个依赖、埋点 SDK 升级、一张首图换了未压缩版本，都能让首屏悄悄劣化一个等级。这篇按
虚拟列表与大数据渲染：从原理到实现取舍
"渲染一万条数据页面卡死"是前端最高频的性能工单之一。直觉解法是分页或无限加载，但很多场景（表格滚动、时间线、聊天记录、日志查看器）就是要在一个滚动容器里放几万
TypeScript 类型进阶：从泛型约束到类型体操的工程边界
TypeScript 的价值不在于"把 JS 变难"，而在于把接口契约从注释和口头约定升级成编译器可校验的东西。这篇文章按使用频率组织进阶内容：泛型约束与推断、
React 进阶：渲染模型、Hooks 边界与性能优化
多数 React 性能问题不是"React 慢"，而是把状态放错了位置、在错误的时机触发了不必要的渲染、或者用 memo 掩盖了本该修的数据流。这篇文章自底向上
Vue 3 组合式 API：响应式原理与逻辑组织
Vue 3 的组合式 API 不是把选项式 API 换个写法，而是换了一种组织逻辑的单位：从"按选项类型分块"（data 一块、methods 一块）变成"按功
前端状态管理选型：本地、全局与服务器状态的边界
"这个状态应该放哪"是前端日常里最高频的架构决策，而多数团队的回答是"全部塞进 Redux/Pinia"或者"全部 useState 加 Context"。两种
前端测试体系：单测、组件测试与端到端的分层实践
前端的测试比后端更难做好：同一个功能涉及渲染、交互、网络、时序，把它们全塞进一种测试里，要么慢得没人跑，要么脆得没人敢动。分层的答案是：纯逻辑给单测，用户行为给
前端安全防御：XSS、CSRF、注入与传输的攻防清单
浏览器端安全有一条主线：所有攻击都发生在"不可信数据流动"的路径上。用户输入、URL 参数、第三方脚本、网络传输，每一处都是入口。这篇文章按攻击类型组织——XS
移动端适配实战：视口、单位、安全区与触控
移动端适配的坑，八成不是"新知识不够"，而是"对浏览器行为理解错位"：以为 viewport 就是宽度、以为 vh 就是屏幕高、以为点击和鼠标是同一种事件。这篇
微前端实践：拆分边界、路由与样式隔离的取舍
微前端不是技术升级，是组织结构在代码上的投影：多个团队、多个技术栈、独立发布的节奏，共同挤在一个仓库或一个 SPA 里，冲突越来越多，才需要"把整块的东西拆开"
Web Components 实战：从自定义元素到跨框架复用
Web Components 是浏览器原生的组件模型：不依赖任何框架，React、Vue、原生页面都能直接使用同一个组件。它的价值场景很明确——跨框架复用与长期
PWA 实战：Service Worker 生命周期、缓存策略与离线体验
Service Worker（下文简称 SW）是一个常驻在浏览器与网络之间的可编程代理：页面发起的请求先经过它的 `fetch` 处理，你可以决定命中缓存、放行
CSS 动画与编排：合成层、FLIP 与动效性能
动效做不做是产品决策，做得卡不卡是工程问题。同一个展开动画，用 `width` 驱动和用 `transform` 驱动，在低端手机上的表现可以差一个量级。这篇文
拖拽与手势实现：Pointer Events、DnD 与触控细节
"把这个列表做成可拖拽排序"听起来是个小需求，落到代码上是一串细节：鼠标和触摸事件怎么统一、指针移出元素后事件去哪了、放进滚动容器后怎么自动滚动、两根手指同时按
Canvas 与 SVG 深入：选型、渲染循环与离屏优化
Canvas 和 SVG 都能"画图"，但它们是两种完全不同的东西：SVG 是保留模式的文档（DOM 里每个图形都是节点），Canvas 是即时模式的位图（画完
Three.js 进阶：场景管理、性能与加载策略
Three.js 把 WebGL 的复杂度包掉了，但"能跑起来"和"在生产环境长期稳定"之间隔着一整层工程问题：场景怎么组织、几何体和材质怎么复用、纹理和模型怎
ECharts 数据可视化：配置体系、交互与按需加载
ECharts 的用法概括成一句话：**把数据与规则写成 `option` 对象，交给 `setOption`，剩下的交给库**。这句话掩盖了大量工程细节：op
WebSocket 协议深入：握手、心跳、重连与断线消息补偿
多数前端对 WebSocket 的理解停留在 `new WebSocket(url)` 加四个事件回调。这在演示里够用，在生产环境里远远不够：连接为什么会"莫名
Vite 构建优化：依赖预构建、分包与产物分析
Vite 的开发体验被广泛验证，但很多项目"dev 很快、build 很迷"：冷启动慢、改一行代码全页刷新、产物里混着几 MB 的 vendor、首屏路由加载了
WebAssembly 前端场景：什么时候值得、怎么接入
WebAssembly（Wasm）在浏览器里提供了一种接近原生的执行格式，但把它当"JS 加速器"是最常见的误用。同一段逻辑搬到 Wasm 有时快一个数量级，有
浏览器任务调度：长任务拆分、requestIdleCallback 与优先级
页面卡顿的第一元凶几乎总是长任务（long task）：一段超过 50ms 的同步 JS 占住主线程，期间点击不响应、滚动掉帧、动画停住。解决它的手段不是"把代
跨源通信安全实践：postMessage 的 origin 校验与消息协议
把第三方页面嵌进 iframe、让它们通过 `postMessage` 互相通信，是支付收银台、SSO 登录、嵌入式编辑器、广告与埋点SDK 的标准结构。这套
Web 开发黑魔法资源手册：90 条前端与工程实践索引
按七个主题整理 90 条公开资源，保留原始标题与链接，并标注历史内容、现代兼容性和安全阅读边界。
React 管理端认证与请求拦截：源码观察和修复边界
基于脱敏源码复盘路由 basename、Axios 401 恢复、令牌存储和 API 类型边界。
Web Worker 实战：任务切分、可取消计算与 OffscreenCanvas
从 Worker 选型、structured clone 与可取消任务，到 transferable 和 OffscreenCanvas，补齐主线程之外的性能工程边界。
AI 评测结果双轮对比：稳定配对、语义差异与安全导出
双轮评测结果并排展示的通用实现：稳定 ID 配对、空值与缺项表达、语义差异高亮，以及导出与屏幕一致的校验思路。
一个旧版 uni-app 牌局原型的代码复盘
基于公开静态源码复盘原型中的计时器、牌型比较、余额模拟和跨端边界；明确没有运行真机或验证真实结算。
前端面试题库 README 25 项清点：旧题状态与现代化路线
审阅旧版前端题库的 25 项索引、占位正文、过期答案和 Service Worker 缓存边界；说明这是静态源码复盘，不是完整题目搬运。
Chrome DevTools MCP 安全接入：隔离配置、调试端口与扩展边界
用独立 profile 和受限调试端口接入 Chrome DevTools MCP，并厘清 CDP 权限、MDM 策略与扩展传输边界。
React 管理端库存与报价列表：扫码状态、分页与请求竞态
从扫码历史闭包、搜索分页和敏感字段展示出发，整理管理端异步状态与数据边界的实战检查方法。
Taro 多端客户端状态一致性：登录、收藏、主题与评论
源码级复核 Taro 客户端的会话清理、账号隔离、主题持久化与评论异步竞态，并明确跨端验证边界。
浏览器二进制文件下载：Blob、文件名与资源释放
梳理 Fetch 二进制响应、Blob URL 生命周期、Content-Disposition 文件名、CORS 和大文件下载边界。
前端日历与时区：别用固定小时差换算城市时间
区分瞬间、预约墙上时间与日期值，正确处理 IANA 时区、夏令时、日历单元格和跨端显示。
资源列表的稳定身份：类型归一、树形数据与跨页多选
以稳定 ID 管理资源树和跨页选择，用不可变 view model、安全兜底与服务端授权收住批量操作。
uni-app 跨端 Canvas 图表：交互、层级与生命周期
从画布层级、触摸转发和尺寸变化，到页面重入、定时器清理与跨端验收，整理交互式图表的工程边界。
Taro 详情页请求状态机：失败不能永远像加载中
从跨端详情页源码定位无 id、空结果与请求异常卡在加载态的问题，并给出状态建模、重试和乱序响应验收方案。
Vite/React 运营管理台复盘：路由权限、图片上传与列表竞态
从一个脱敏的个人运营管理台源码，复盘前端角色门禁、持久化会话不一致、第三方图片凭据与异步状态竞态。
Taro 车型筛选复盘：筛选项与查询参数必须闭环
从多条件车辆目录的真实源码出发，定位 UI 选项与请求参数脱节，并整理筛选计数、输入校验和过期响应的验收方法。
浏览器跨标签页通信实战：API 选型与本地演示
按通知、状态持久化和并发互斥区分 BroadcastChannel、storage 事件、Web Locks 与 Worker 通信。
AI 流式输出实战：SSE、WebSocket 与前端增量渲染
从 HTTP/SSE/WebSocket 选型到 Agent 工具事件状态机、取消、增量渲染、安全边界和代理链路验收。
浏览器图片编辑插件复盘：Canvas 管线、撤销历史与文档回写
复盘图片导入、reducer 历史、Canvas 处理、跨域限制与文档回写，并标出内存预算和宿主验收边界。
跨端小程序架构复盘：统一请求层、身份状态与缓存边界
从一次脱敏的多端客户端源码审阅，复盘请求认证、会话失效、账号缓存隔离和跨平台主题适配。
React 管理台的路由、权限与统一请求边界
复盘管理台的部署前缀、路由门禁、401 会话清理、持久化状态与移动端导航验收。
多引擎在线绘图插件：从宿主协议到 Excalidraw、Fabric、X6 与 Three.js
复盘多引擎创作插件的宿主协议、按需加载、文档数据 schema、自动保存与只读权限边界。
IntersectionObserver 实战：图片懒加载、无限列表与有效曝光
从 API 模型出发，实现图片懒加载、列表分页和可验证的有效曝光，并厘清边界与清理方式。
React 管理后台登录态复盘：路由守卫、请求竞态与批量表单
从个人管理端源码审阅路由认证、401/403、搜索分页竞态和库存批次表单，厘清客户端体验与服务端授权的边界。
Taro + Zustand 跨端购物清单：本地持久化与报价边界
从真实多端客户端的购物清单实现出发，拆解存储校验、身份键、失败恢复、金额精度与报价提交边界。
移动端页面生命周期与 bfcache：保存草稿、暂停任务、恢复连接
区分隐藏、冻结、恢复与终止，设计可靠的草稿保存、后台任务暂停和前进后退恢复流程。
View Transition API 实战：SPA、跨文档导航与渐进增强
区分同文档与跨文档转场，用渐进增强、唯一快照名称和减少动态效果偏好改善导航连续感。
老前端面试题库仓库复盘：Docsify、Service Worker 与知识维护
逐项盘点公开题库的 25 条索引，区分本地占位与原始外链，再复核 Docsify、Service Worker、移动端和内容质量。
Uni-app 红黑扑克模拟游戏复盘：跨端边界、计时器与牌型 Bug
基于公开源码静态审阅一款红黑扑克模拟游戏，定位首局计时器崩溃、错误同花判断、偏差洗牌、H5 API 跨端失配与固定布局问题。
jQuery 维护与迁移：选择器、事件委托、表单和 Ajax
用现代方式维护已有 jQuery 页面：理解集合、委托事件、表单值、异步请求和渐进迁移边界。
jQuery 入门与遗留项目维护：选择器、事件和安全更新
保留旧笔记的核心知识，修正 ready、DOM 对象和事件写法，并补充安全更新与渐进迁移方法。
jQuery 选择器与筛选：把旧页面交互改成可维护结构
重整交集、并集、层级和索引筛选，解释零基序号陷阱，并用语义 HTML 管理菜单与高亮。
jQuery 类名、DOM 生命周期与动画队列：修复重复触发
用幂等 class 状态和有边界的事件管理替代旧式开关灯脚本，正确处理节点清理、动画队列和减少动态效果。
jQuery 筛选、轮播与几何测量：区别 offset、position 和滚动距离
用准确的盒模型和坐标系替代旧式 left/top 口诀，并把城市筛选与轮播改成可访问、可触屏的交互。
jQuery 旧项目维护与迁移地图：ready、事件、Ajax、性能和 jQuery 4
把分散的 jQuery 口诀整理成项目维护清单，区分 DOM ready/load、原生节点与包装集合，并拆分不属于前端的 PHP 内容。
React 组件实战：渲染、状态快照、Effect 与稳定身份
以纯渲染、状态快照和稳定 key 为主线，理解组件组合、Effect 清理、表单状态与交互测试。
React 核心概念速查：JSX、Render、状态与事件
梳理 JSX、组件身份、Render 与 Commit、状态更新、事件表单和开发代理等 React 核心概念。
React 项目入门：脚手架、JSX、组件与挂载
从项目模式与工具选型开始，覆盖 JSX、组件、状态、React DOM 挂载、CRA 存量维护和生产部署边界。
React 状态与 Props：单向数据流、更新队列和状态提升
说明 props 与 state 的职责、更新队列、函数式 updater、状态提升、不可变更新和表单建模。
React 条件与列表渲染、组件复用和表单状态
掌握条件渲染、空状态、稳定 key、组件复用、高阶组件与受控/非受控表单。
React 生命周期：Render、Commit 与 Effect 清理
把类组件生命周期放回 Render/Commit 模型，对比 Effect 同步与清理、错误边界和 Strict Mode。
React 组件通信、Context、懒加载与 Portal
梳理 props 传递、状态提升、Context、PropTypes 与 TypeScript、ref、lazy/Suspense 和 Portal。
React Hooks 实战：状态、Effect、异步请求与性能边界
从 Hooks 规则和状态快照出发，理解 Effect 依赖与清理、异步竞态及性能优化的判断依据。
React Router：从旧版路由迁移到现代路由
围绕 React Router 模式、嵌套路由、数据加载、权限边界和旧版路由迁移。
React 面试题：从渲染模型到工程实践
用场景题解释 React 渲染、key、Hooks、Effect、Context、路由、性能与测试边界。
ahooks 使用指南：按场景选 Hook 与治理异步请求
按场景选择 ahooks，实战 useRequest 与缓存，并处理异步竞态、闭包、SSR 和依赖治理。
Vue 3 实战：响应式、组件通信、侦听副作用与生命周期
从 ref/reactive 与 computed 开始，讲清 props/emit、watch 清理、生命周期和可复用组合式函数。
Vue 基础与现代实践：响应式、模板、组件与生命周期
把旧 Vue 基础问答改成版本明确的学习路线，涵盖指令、组件、状态、生命周期和安全。
Vue Router 与状态管理：参数、导航和 Pinia 选型
识别 Vue Router 3/4 API 差异，正确组织动态路由、导航守卫和应用状态。
Vue Router 导航守卫实战：路由复用、离开确认与异步竞态
区分 Vue Router 3 的 next 回调与现代返回式守卫，处理动态参数复用、异步加载、未保存离开和导航失败。
Vue Mixins 迁移指南：隐式合并、Composables 与状态边界
保留旧 mixin 的维护知识，说明命名冲突与钩子合并，并用 composable 建立清晰依赖。
前端安全基础：XSS、CSRF、CSP 与敏感信息泄露
从公开博客和后台系统视角整理前端常见安全风险和落地防护方式。
前端微交互设计：让技术博客更像一个好产品
围绕状态反馈、滚动揭示、阅读进度、投票、图片对话框和减少动态效果，设计不打扰阅读的微交互。
技术文档里的多媒体能力：图片、视频、音频、3D 和可运行 Demo
技术博客不必只靠文字，图片预览、视频、音频、3D 模型和在线 Demo 可以让复杂知识更容易理解。
现代 CSS 布局与样式系统：级联、Grid、Flex 和容器查询
用级联层管理样式优先级，用 Grid/Flex 表达布局，用容器查询和逻辑属性构建真正响应式的组件。
CSS 基础与层叠：选择器、优先级和 DevTools 排错
从规则语法到层叠算法，定位声明为何未生效，避免把所有问题归结为选择器权重。
CSS 圆角实战：border-radius、椭圆半径与内容裁切
掌握四角简写、椭圆半径和百分比参照，并区分圆角绘制与子元素裁切。
CSS 2D 变换：坐标系、原点、顺序与布局边界
用 translate、rotate、scale 和 skew 理解视觉坐标变换，避免把 transform 当成布局。
CSS 3D 变换：透视、preserve-3d 与可访问交互
厘清透视、3D 空间保留和背面可见性，构建内容仍可读的轻量翻转效果。
CSS 过渡实战：状态变化、性能、事件与减少动态效果
从旧 transition 属性清单升级为可维护的状态过渡，处理 hover 抖动、transitionend 和减少动态效果。
CSS 动画工程实践：关键帧、性能、取消与减少动态效果
从关键帧、动画生命周期到性能与无障碍偏好，避免动态效果拖垮体验。
Flexbox 布局实战：主轴、弹性尺寸与移动端溢出
从一维轴线和 free space 入手，理解 grow/shrink/basis、换行、对齐和 min-content 溢出。
响应式 CSS 实战：媒体查询、容器查询与无障碍偏好
从设备宽度清单转向内容驱动布局，覆盖视口、组件容器、打印和减少动态效果。
HTML 语义化与可访问性：文档结构、导航和表单
用原生 HTML 表达页面结构、操作类型和表单约束，让浏览器、搜索引擎与辅助技术都能理解内容。
HTML 入门：从文档结构到语义、可访问性与浏览器解析
重整旧 HTML 简介，讲清文档树、标签属性、语义结构、链接表单和浏览器错误恢复。
HTML head 元素实战：标题、元数据、资源与脚本加载
更新 title、meta、base、link 与 script 的实际行为，避免旧式 head 示例带来的全站链接和加载陷阱。
HTML 通用容器与链接：从 body、div、a 到语义化页面
把旧 body/div/a 属性表改成页面结构实践，区分导航链接、操作按钮与纯视觉样式。
HTML 标题、列表与表格：让内容结构可理解
用标题、列表和真正的数据表格表达内容关系，不再依赖旧式 type、align、cellpadding 属性。
HTML 图片、列表与链接：从旧属性迁移到响应式语义
重整旧图片、图像映射、自定义列表、文本语义、URL、实体与颜色笔记，补上无障碍、移动端和安全边界。
HTML 表单与浏览器约束验证：标签、校验和提交安全
把 label、原生约束、错误反馈、文件上传和服务端复核组合成完整、可键盘操作的表单流程。
现代 HTML 与 HTML5：文档解析、语义结构和 Web API 边界
纠正过时的 HTML5 版本叙述和文档大纲误区，说明 doctype、字符编码、语义元素、解析恢复与能力检测。
Canvas 2D 路径与形状：从坐标系到可维护绘制
用完整渲染循环讲清 Canvas 上下文、矩形、路径、弧线、贝塞尔曲线、描边/填充和画布重置边界。
Canvas 2D 样式、渐变与图案：管理绘图状态和跨域图片
串起颜色、透明度、线型、渐变、纹理、阴影、save/restore 与跨域画布污染，说明绘图状态如何影响后续命令。
Canvas 绘字与坐标变换：TextMetrics、基线和状态栈
厘清文字基线、测量宽度、局部变换和设备像素比，写出清晰且不模糊的 Canvas 示例。
Canvas 动画工程实践：requestAnimationFrame、停启与时间步长
用时间戳驱动状态而不是按帧计数，处理后台暂停、减少动态效果和动画销毁。
HTML input 类型选择：语义、原生校验与安全边界
按数据语义选择输入控件，理解原生约束、自动填充、文件上传提示与服务端校验。
HTML 表单扩展元素：datalist、output 与 keygen 的现代边界
讲清 datalist 只是建议、output 不参与表单提交，并纠正已经从标准移除的 keygen。
HTML 表单属性实战：autocomplete、form、约束与提交行为
逐个厘清自动填充、跨位置关联、提交按钮覆盖与原生约束验证，不再照抄过期兼容表。
离线缓存迁移：从已淘汰的 AppCache 到 Service Worker
识别 AppCache 遗留配置，按资源类型迁移到 HTTP 缓存、Service Worker 与 Cache API。
HTML 音视频实战：格式回退、字幕、加载与无障碍
从容器与编码、source 回退到字幕和移动端加载，整理浏览器原生媒体的可靠实现边界。
HTML 拖放 API：DataTransfer、文件投放与触屏替代方案
梳理拖放事件、数据边界和文件投放，为触屏与键盘用户提供同等操作路径。
移动端 Web 与响应式布局：从 WAP 时代到内容优先
把 WAP 与 UA 判断旧笔记更新为内容优先布局、响应式图片和跨设备验收。
JavaScript 核心机制：作用域、异步模型、模块与调试
用短例子串起值与类型、词法作用域、闭包、this、事件循环、Promise、模块和可验证调试。
现代 JavaScript 日常手册：数据、异步、模块与 DOM 安全
把零散语法清单整理成日常判断方法：值与引用、数组对象、异步控制、模块边界和安全 DOM 更新。
JavaScript 常见问题排查：类型、异步、闭包与 DOM
把零散高频坑整理成可复现的排查路径，覆盖类型转换、异步请求、事件和安全渲染。
JavaScript 核心概念地图：作用域、原型、this、闭包与 DOM
用现代规范替换预解析口诀，串起值语义、原型、闭包、this 与事件处理。
JavaScript 对象实战：属性访问、浅拷贝与安全字典
掌握对象属性与拷贝语义，处理动态键、可选值和不可信对象输入。
JavaScript 字符串实战：Unicode、搜索、替换与安全输出
区分 UTF-16、码点和用户感知字符，并正确处理搜索、格式化、URL 与不可信文本。
JavaScript 数组实战：筛选、转换、排序与不可变更新
按任务选择数组方法，避免误用 reduce、原地排序和浅拷贝造成的状态串改。
ES2015（常称 ES6）核心特性：作用域、模块、集合与异步
用现代代码理解 ES2015 核心语法，并分清语法糖、浅拷贝和运行时支持。
DOM 就绪与异步请求：从 jQuery Ajax/JSONP 迁移到 Fetch
区分 DOMContentLoaded 与 load，处理请求失败、取消、竞态和跨域边界。
JavaScript 高频问题：数组回调、变量作用域与跨域边界
修正集合方法与变量提升误区，并用同源策略、CORS 与 JSONP 的真实边界排查跨域问题。
前端登录态与 Token 管理：Cookie、BFF、刷新和退出
从登录态架构选择开始，厘清 Cookie、浏览器存储、刷新、401/403、多标签登出与服务端授权边界。
ES2016–ES2019 新特性：按版本理解数组、对象与异步
按年份梳理 ES2016 到 ES2019 的代表能力，澄清 ES2020 特性和构建兼容边界。
跨标签页事件总线设计：消息协议、存储降级与并发控制
按消息广播、持久化、共享执行和互斥锁分别选 API，解决多标签登出、缓存失效与重复后台任务。
前端 Agent 流式展示：产品状态机、Fetch 与 SSE 分帧
从传输选择、UTF-8 分片和 SSE 协议解析，到取消、重连、增量渲染与读屏体验，搭建可靠的 Agent 输出链路。
Web 开发黑魔法技术手册：语言机制、框架、Node 与安全实践
把 awesome-blackmagic 的七类资源主题展开为独立技术章节，补充原理、原创示例、现代实践和安全边界。
小而专的 npm 包：如何从清单走到可靠依赖
离线收录原清单 17 类、130 个包名和逐项职责说明，并补上依赖维护、许可证、安全与选型核验流程。
读 awesome-1kb：1 KB JavaScript 小库的价值与边界
把原目录中的 21 个微型项目链接整理成索引，并用生产构建、运行时、维护和安全边界建立现代依赖选型方法。
前端状态管理实战：从组件状态到服务端缓存
依据跨框架、React、Vue、小程序、Angular 六类资源，讲清 UI 状态、URL 状态、服务端缓存、SSR 和跨标签同步的边界。
读前端源码解析仓库：React、Vue 与微前端的学习路线
把 React render/commit、Fiber、Vue 响应式、Redux/SWR 服务端缓存和微前端边界整理成版本可复核的源码阅读实践。
读 awesome-web-dev-books：按问题建立前端书单
用 JavaScript、HTML/CSS、Node.js 与综合类四条路径安排阅读，不转载书籍文件。
读 fe-awesome-demos：让旧 Demo 成为今天可运行的练习
逐项梳理 14 个基础、CSS、插件、QA、Canvas、框架、构建与设计模式目录，附安全隔离和可验证动画示例。
读 JavaScript 资源大全中文版：从语言到 UI 的生态地图
完整映射原仓库 64 个主题，扩展为现代 JavaScript 工程选型指南，覆盖模块、测试、浏览器 API、媒体交互、供应链与维护。
前端工具生态选型手册：构建、测试、状态与依赖治理
把 awesome-f2e-libs 固定快照中的 25 个分类逐项展开，结合现代官方资料讲清工具边界、场景选择、安全门槛和落地验收。
uni-app 跨端工程实战：平台差异、适配层与发布验证
把官方资源、开源项目、组件、工具、文章和应用案例转成 H5/小程序/App 的架构、兼容和真机验收方法。
前端能力全景图：完整资源归档与现代工程选型实践
保留固定版本 README 全部 453 条链接引用与原始说明，并补充编辑器、上传、图形、微前端等场景的选型与安全方法。
读 JavaScript Guidebook：用规范和实例搭知识图谱
按固定版本 468 篇 Markdown 页面重组 8 个知识域，覆盖语言语义、BOM/DOM、网络、模块、内置对象、面向对象与模式，并给出现代版本核验路线。
前端知识全景图：从浏览器基础到全栈交付的学习路线
完整保留 F2E-Awesome 固定快照的 63 个目录标题，并把它们串成浏览器、前端工程、网络后端、AI 实时交互与上线运维的可验收路径。
Front-End-Develop-Guide 完整学习地图：前端基础到全栈延伸
固定归档版本的完整 README 与 MIT License 已收录，另将 HTML/CSS、JavaScript、生态、算法、Node、扩展、桌面、移动、WebGL 和 V8 整理成可执行学习路线。
JavaScript 算法题库实战指南：从数据结构到边界测试
逐项整理 18 类 JavaScript 算法主题，配套不变量、复杂度、边界测试和 4 个可运行示例。
读小程序雷达：从资源清单升级到技术选型
固定归档 237 条小程序资源，拆解 Radar、Compare、Advisor、Doctor 与跨端工程选型。
读 awesome-webpack-cn：从入门到 Loader/Plugin 的构建地图
从模块图、Loader/Plugin 到缓存、分包、HMR、Source Map 与 Module Federation，建立适用于 Webpack 5 的构建排障和迁移路线。
现代前端面试知识地图：从浏览器原理到工程决策
把旧题库升级成可验证的知识地图：每个问题都从机制、适用边界、失败模式和验证方法作答。
IntersectionObserver 实战：曝光、懒加载、目录高亮和无限列表
用明确 root、threshold 和生命周期管理实现可去重的懒加载、阅读目录与无限列表。
WebSocket 实战：连接状态、心跳、重连和消息协议
以有界状态机处理断线、鉴权、心跳、消息确认、顺序与浏览器生命周期。
Web Worker 实战：把重活从主线程搬出去
以可取消任务、消息协议、可转移对象和容量限制将计算移出主线程。
前端性能预算：从 Lighthouse 分数到真实用户体验
用字段数据、实验室测试、资源体积和主线程预算共同管理性能，避免单看 Lighthouse 分数。
浏览器缓存策略：HTTP 缓存、Service Worker 与前端资源版本
按资源可变性和隐私划分缓存层，处理协商验证、Service Worker 更新和旧版本回滚。
前端错误监控体系：从白屏、接口异常到用户行为回放
把错误采集、白屏检测、版本关联、隐私脱敏与告警处置连成可验证的线上闭环。
Three.js 入门：在技术博客中嵌入一个不会空白的 3D 场景
从容器尺寸、相机、加载状态、移动端预算到 GPU 资源释放，搭建稳定的文章内 3D 预览。
前端权限 UI 设计：按钮隐藏、路由守卫与后端校验的边界
用语义化能力控制菜单与交互，同时把对象授权、默认拒绝和审计留在服务端。
JavaScript 知识地图：按问题组织基础、浏览器与工程化
把零散每日笔记整理成可以持续维护的知识目录，并按实际开发问题建立学习顺序。
JavaScript 语言基础：类型、运算符、脚本加载与精度
把早期 JS 入门笔记里的类型、短路、脚本加载和浮点问题放进现代 ECMAScript 与浏览器语境。
JavaScript 类型转换与调试：从输入值到可靠判断
厘清 Number、parseInt、truthy、NaN 和浏览器调试，避免把隐式转换当成业务校验。
JavaScript 作用域与变量提升：var、let、const 和暂时性死区
用执行上下文、块级作用域和闭包解释变量提升，淘汰“未声明变量会自动全局化”的旧说法。
JavaScript 对象与工厂函数：原型共享、属性检查和引用语义
从旧工厂模式示例延伸到 class、原型方法、own property 检查和对象引用的准确语义。
JavaScript 内置对象实战：Math、字符串、随机数与字符统计
梳理静态方法与实例方法、随机数边界、字符串替换和 Unicode 字符计数。
JavaScript 函数与字符统计：参数、Unicode 和 Map 的正确用法
从函数参数与引用语义出发，安全统计文本字符，并区分码元、码点和用户感知字符。
JavaScript 原型链与包装对象：继承查找和安全扩展
保留原型共享的核心概念，替换非标准 __proto__ 用法并说明原生对象扩展与类型判断风险。
JavaScript 原型链实战：对象继承、Unicode 映射与模块边界
从字符映射和对象查找解释原型链，避免全局变量、原型污染与过时兼容代码。
JavaScript 对象设计与 DOM 安全：封装、继承和随机布局
把表格渲染、构造函数、原型复用、浅拷贝和随机位置练习改成安全可维护的实现。
JavaScript 函数与迷你游戏对象模型：this、call、apply 和清理
以网格食物对象为例说明函数值、构造器、随机边界、this 绑定和生命周期。
JavaScript 闭包与递归：状态封装、回调和调用栈边界
从词法环境和 this 绑定讲清闭包，再为递归补上终止条件、输入约束与栈深保护。
JavaScript 深拷贝与正则校验：数据边界、Unicode 和输入契约
区别浅拷贝和结构化克隆，指出 JSON 克隆限制，并用整串格式校验而非脆弱的复杂正则。
前端表单校验与密码体验：原生约束、可访问提示和服务端验证
用 HTML 原生约束改善交互，以服务端校验和安全密码策略守住真正的信任边界。
DOM 事件、URL 与安全渲染：从点击处理到可靠导航
用事件委托和 URL API 实现可维护交互，避免把不可信文本或跳转地址直接拼进页面。
DOM 查询与安全更新：选择器、文本节点和事件清理
现代化旧 DOM 速查，解释 querySelector、文本更新、属性设置、节点创建与生命周期清理。
现代 DOM 节点与列表渲染：选择器、遍历和事件委托
替代旧浏览器节点兼容封装，讲清节点与元素、静态查询、属性操作和安全动态列表。
现代浏览器事件：监听器生命周期、冒泡与安全表格
用 addEventListener、AbortController 和事件委托替代 attachEvent，解释传播与默认行为。
浏览器事件传播与 BOM：捕获、冒泡、History 和页面生命周期
把旧式事件兼容代码升级为标准事件模型，并澄清导航、页面加载和定时器边界。
前端计时器与布局测量：用 requestAnimationFrame 和 ResizeObserver
区分计时器与渲染帧，正确清理动画和尺寸监听，并避免强迫式倒计时等误导交互。