- 博客(48)
- 收藏
- 关注
RSS订阅原创 computed 与 watch 区别
computed 和 watch 是 Vue 处理响应式数据变化的两种核心方式。文章涵盖 computed 的缓存机制（依赖变化才重新计算，否则返回缓存值）、可写计算属性、watch 的多种监听方式（ref、reactive、多个源）、配置选项（immediate、deep、flush），以及 watchEffect 的自动依赖收集特性。重点对比了三者的核心区别：computed 有缓存返回值适合派生数据，watch 显式指定监听源适合执行副作用，watchEffect 自动收集依赖立即执行适合多依赖场景。
2026-06-14 09:15:00
35
原创 Vue 3 与 Vue 2 核心区别
Vue 3 是一次从底层到上层的全面重写。文章涵盖响应式系统重写（Proxy 替代 Object.defineProperty，解决了属性添加/删除检测和数组索引变更问题）、Composition API vs Options API 的代码组织方式和逻辑复用差异、模板语法变化（v-model 默认 prop 变更、v-for/v-if 优先级变化、移除 .native 修饰符）、移除的 API（$on/$off、过滤器、$children、$listeners 及替代方案）、新增特性（Fragment 多
2026-06-14 09:00:00
13
原创 前端综合实战：跨域通信、离线存储与 URL 到页面全流程
系列收尾篇，汇总面试高频手写题和综合性问题。文章涵盖同源策略与跨域解决方案（CORS、代理、JSONP）、跨标签页通信方案（BroadcastChannel、localStorage、SharedWorker）及对比、SSE 与 WebSocket 的区别（单向 vs 双向）、离线存储方案选型（Cookie/localStorage/sessionStorage/IndexedDB/Cache API）、高频手写题汇总（防抖、节流、深拷贝、Promise.all、发布订阅），以及「从输入 URL 到页面显示
2026-06-13 10:02:27
391
原创 前端安全 XSS 与 CSRF
前端安全两大核心威胁的深度解析。文章涵盖 XSS 的三种类型（存储型、反射型、DOM 型）及防御方案（输出编码、避免 innerHTML 等危险 API、DOMPurify 过滤富文本）、CSRF 的攻击原理及防御方案（SameSite Cookie、CSRF Token、验证 Origin）、CSP 内容安全策略配置，以及 Cookie 安全属性（Secure + HttpOnly + SameSite）的组合使用。重点强调了 XSS 可以绕过部分 CSRF 防御，因此防御 XSS 是根本。
2026-06-13 09:49:39
469
原创 前端性能优化综合
前端性能优化的全面指南。文章涵盖 Core Web Vitals 三大指标（LCP ≤ 2.5s、INP ≤ 200ms、CLS ≤ 0.1）及其测量方式、首屏优化策略（代码分割、预加载、SSR/SSG、骨架屏、图片懒加载）、运行时优化（虚拟列表、防抖节流、避免不必要渲染）、网络优化（HTTP 缓存、Gzip/Brotli 压缩、CDN 加速）、字体优化和缓存策略。重点区分了防抖与节流的应用场景：防抖等停执行适用于搜索输入，节流间隔执行适用于滚动事件。
2026-06-12 10:00:33
474
原创 设计 模式
设计模式是解决特定问题的成熟方案。文章涵盖单例模式（保证全局唯一实例）、观察者模式与发布订阅模式的本质区别（前者直接通知紧耦合，后者通过事件中心解耦）、策略模式（算法封装可互换）、代理模式与装饰器模式的区别（前者控制访问，后者增强功能）、工厂模式（封装对象创建逻辑），以及 Redux 中单例 + 发布订阅 + 策略模式的组合应用。
2026-06-12 09:53:34
403
原创 TypeScript 泛型
TypeScript 泛型让代码在保持类型安全的同时具备复用性。文章涵盖泛型函数、接口和类的基础用法、通过 extends 实现泛型约束（包括 keyof 约束和多重约束）、infer 关键字在条件类型中推断类型变量的用法，以及 Partial、Pick、Omit、Record、Exclude 等常用工具类型的实现原理。重点对比了泛型与 any 的本质区别：泛型保留类型信息在编译时检查，any 放弃类型检查。
2026-06-11 15:23:56
397
原创 ES 新特性九年速览：从 ES2016 到 ES2024
从 ES2016 到 ES2024 各版本重要特性的快速梳理。文章涵盖 ES2017 的 async/await、ES2018 的 Rest/Spread 属性、ES2019 的 flat/flatMap、ES2020 的可选链 ?.、空值合并 ??、BigInt、Promise.allSettled 和顶层 await、ES2021 的 Promise.any 和逻辑赋值运算符、ES2022 的 Object.hasOwn、class 私有属性和 Error.cause、ES2023 的非破坏性数组方法
2026-06-11 12:00:32
278
原创 代码 分割
代码分割是前端性能优化的核心策略，将代码拆分成多个小块按需加载，减少首屏加载时间。文章涵盖动态 import() 语法与 Webpack 自动分割机制、splitChunks 配置（提取第三方库和公共模块）、React lazy + Suspense 和 Vue 异步组件的路由级别分割方案、webpackPrefetch 与 webpackPreload 的加载时机差异，以及代码分割与 Tree Shaking 的互补关系。
2026-06-10 15:19:28
518
原创 Tree Shaking
Tree Shaking 是通过静态分析移除未使用代码的构建优化技术。文章涵盖 ESM 静态特性与 CJS 动态特性的本质区别（ESM 的 import/export 编译时确定依赖，CJS 的 require 运行时执行无法静态分析）、sideEffects 配置的作用与误标后果、Webpack 的两步优化过程（usedExports 标记 + minimize 移除），以及 default 导出不利于 Tree Shaking 的原因和解决方案。
2026-06-10 15:16:16
380
原创 Webpack
Webpack 是前端工程化的核心构建工具。文章涵盖 Entry / Output 配置、Loader（模块转换器）与 Plugin（构建流程扩展）的区别与执行顺序、devServer 与 HMR 热更新原理、contenthash 缓存策略，以及从入口到产出的完整构建流程。重点区分了 Loader 与 Plugin 的本质差异和三种 hash 类型的适用场景。
2026-06-09 15:44:56
397
原创 React Hooks
React Hooks 让函数组件拥有状态和生命周期能力。文章涵盖 Hooks 两条核心规则（只在顶层调用、只在 React 组件中调用）、useState / useEffect / useContext 的使用、useEffect 与 useLayoutEffect 的执行时机差异、自定义 Hook 的设计原则，以及 useMemo / useCallback 的正确使用场景和陈旧闭包问题的解决方案。
2026-06-09 15:43:46
370
原创 Diff 算法
承接虚拟 DOM 与 key，本篇讲清 Diff 如何求最小 DOM 变更：同层比较为何将复杂度降到 O(n)、列表为何依赖稳定 key；对比 Vue 2 双端四指针与 Vue 3 快速 Diff（Map + LIS 减移动），并纠正 findIndex !== -1 等易错点；说明 React Fiber 是调度改进而非新 Diff 公式。附口诀、框架对比表与 6 道面试题。
2026-06-08 14:30:00
415
原创 虚拟 DOM
用 JavaScript 对象树（VNode）描述真实 DOM 结构，通过 Diff 算法比较新旧树差异，只更新变化部分，实现高效批量更新。文章涵盖 VNode 结构、更新流程、key 属性的作用与 index 作 key 的陷阱、Shadow DOM 与 Virtual DOM 的区别，以及 Vue 3 编译时优化（静态提升、Patch Flag、Block Tree）。
2026-06-08 09:54:00
371
原创 Vue 响应式原理
Vue 响应式的核心是依赖收集 + 派发更新。Vue 2 用 Object.defineProperty 劫持属性，无法监听新增属性和数组索引，需要 $set。Vue 3 用 Proxy 解决了这些问题，惰性代理性能更好。ref 包装原始值，reactive 包装对象，computed 缓存计算，watch/watchEffect 监听变化执行副作用，nextTick 等待 DOM 更新完成。
2026-06-06 13:45:00
576
原创 Map / Set / WeakMap / WeakSet
Map 支持任意类型键，直接遍历和获取大小，适合动态键集合。Set 存储唯一值，常用于去重和集合运算。WeakMap/WeakSet 使用弱引用，键对象可被 GC 回收，适合 DOM 元数据关联和标记已处理对象，避免内存泄漏。
2026-06-06 09:30:00
282
原创 Proxy与Reflect
Proxy 是对象操作的拦截层，13 种 trap 覆盖属性读写、删除、遍历、函数调用等几乎所有基本操作。Reflect 与 Proxy trap 一一对应，解决 receiver 传递问题。Vue 3 选择 Proxy 替代 Object.defineProperty，因为它能自动监听新增属性、数组索引、删除操作，且支持惰性代理。
2026-06-05 14:18:22
281
原创 Symbol 与 Iterator / Generator
Symbol 解决属性名冲突，Symbol.iterator 定义迭代协议，让任意对象支持 for...of 遍历。Generator（function*）通过 yield 实现可暂停的函数，是迭代器的最简实现，也是 async/await 的底层原理。本文从设计动机讲起，覆盖 Symbol 元编程、迭代协议、Generator 协程本质及异步迭代。
2026-06-05 09:42:10
362
原创 ES6+ 模块
进入工程化阶段，讲解 ESM 静态导入与动态 import()、与 CommonJS 的实时绑定和值拷贝差异、Tree Shaking 与 sideEffects 前提，以及循环依赖与 Babel 转译注意点；
2026-06-04 09:32:24
530
原创 图片懒加载
在第 18 篇 IO 基础上展开懒加载实战：原生 loading="lazy" 与 data-src + IO 选型、unobserve 与预加载距离、避免 CLS 的占位策略，以及首屏 LCP 勿懒加载等面试要点。
2026-06-04 09:29:42
421
原创 浏览器高级 API — MutationObserver、ResizeObserver 与 postMessage
在第 18 篇 IntersectionObserver 与第 27 篇 Worker 通信基础上，梳理 MutationObserver 与微任务的关系、ResizeObserver 与窗口 resize 的区别，以及 window.postMessage 跨 iframe/页面的安全用法；附四种 Observer 选型表与面试题。
2026-06-03 09:31:22
458
原创 Service Worker、PWA 与 Web Worker — 离线缓存与主线程算力分离
讲 Service Worker 生命周期与 Cache 策略、PWA Manifest，以及 Web Worker 通信与 Transferable；对比 SW/WW 分工。
2026-06-03 09:27:20
609
原创 网络请求与实时通道
接网络与跨域篇，本篇讲 XHR 与 Fetch 区别、Fetch 的 ok 与取消请求，以及轮询、SSE、WebSocket 选型；重点说明 SSE 单向推送与 WebSocket 双向通信、wss 与断线重连策略.
2026-06-02 18:57:32
410
原创 网络与跨域
接浏览器存储篇，本篇讲网络层：HTTP 强缓存与协商缓存、CORS 与预检、Cookie/Session/JWT 鉴权，以及 TCP 三次握手与 HTTPS 要点；并区分 HTTP 缓存与 localStorage 等存储。附易混点与自测题，下一篇讲 Fetch/WebSocket。
2026-06-01 16:35:52
386
原创 浏览器存储对比
四种浏览器存储怎么选？本篇对比 Cookie、localStorage、sessionStorage、IndexedDB 的容量、生命周期、是否随请求发送与安全属性，并讲清 Token 存放、storage 事件、隐私模式与同步阻塞等面试易混点，附选型表与自测题。
2026-06-01 10:09:36
473
原创 前端路由原理
接 BOM 篇的 pushState/popstate，本篇讲 SPA 前端路由：Hash 与 History 原理与手写实现、为何 History 刷新会 404 及 Nginx fallback、Vue Router 懒加载与守卫
2026-05-29 14:47:55
620
原创 BOM 核心对象
接 CSS 阶段，本篇进入 BOM：window、location、navigator、history 常用 API 与面试易混点，重点讲 pushState 为何不触发 popstate、SPA 如何手动同步视图，并衔接 URL 改参不刷新。附练习题，下一篇讲 Hash/History 前端路由。
2026-05-28 16:45:55
839
原创 移动端与 viewport：rem、safe-area 与 1px 高清适配
接第 20 篇 CSS 布局，本篇讲移动端适配：viewport 怎么设、移动优先与 rem/vw/clamp 如何选型、safe-area 如何避刘海、Retina 下 1px 细线与 srcset 高清图，并解释 100vw 横向滚动、DPR 与最小字号等易混点。附代码示例与 5 道自测题，CSS 阶段收束，下一篇进入 BOM。
2026-05-28 14:11:51
351
原创 CSS 布局与可视化高频：居中、BFC、Flex 与 Grid
DOM 之后进入 CSS 布局：本篇串讲面试最高频的四块——居中（Flex/Grid/定位）、BFC（flow-root 清浮动与 margin 合并）、Flex（flex: 1 与 basis）、Grid（template-areas、auto-fit/minmax）。附选型口诀、易混点与 5 道自测题，帮你在居中、两栏、仪表盘布局题里快速选对方案。
2026-05-27 14:00:00
731
原创 DOM 实战案例：无限滚动、懒加载与富文本安全
学完 DOM 基础、性能与事件，还需要几个「能直接写进项目」的片段。本篇精选：底部哨兵 + IntersectionObserver 做加载更多，图片 lazy/IO 与点击预览，列表 HTML5 拖拽最小实现，以及评论富文本为什么不能 innerHTML。每个场景都标出与第 12、16～18 篇的对应关系，数据量大了何时上虚拟列表、XSS 何时靠净化+服务端。DOM 主线在此收束。
2026-05-26 19:45:00
362
原创 DOM 交互补充：事件委托、可见性与 rAF
DOM 三篇收官：在基础与性能之后，本篇补交互——事件委托为何适合动态列表、target 与 closest 怎么用；顺带讲 IntersectionObserver 懒加载/无限滚动与 loading="lazy" 选型，以及 rAF 做动画/滚动。不堆 API。附易混点与 5 道自测题，建议与第 16、17 篇连读。
2026-05-26 15:21:31
652
原创 DOM 性能与渲染
改 DOM 后浏览器在干什么？本篇串讲 渲染流水线（DOM → CSSOM → Layout → Paint → Composite），对比 回流、重绘、合成 的开销；说清 强制同步布局 与读写分离，以及 DocumentFragment 批量插入。动画为何优先 transform/opacity？will-change 为何不能滥用？另补 CSS/JS 阻塞与 FOUC。
2026-05-23 13:31:06
628
原创 DOM 基础全面解析
DOM 怎么查、怎么改？attribute 和 property 有何不同？HTMLCollection 为何 live？本篇用 JS 串讲 DOM 基础、查询 API、增删改与脚本阻塞，附易混点与练习题。
2026-05-22 19:12:22
669
原创 垃圾回收与内存
JS 不能手动 free，内存全靠 GC。本篇讲清 标记-清除、V8 分代，以及 闭包、全局变量、无界 Map、Detached DOM 等泄漏场景；对比 Map 与 WeakMap，简述 WeakRef。附 Chrome 堆快照对比 + Retainers 排查思路
2026-05-22 13:33:13
492
原创 数据结构基础：栈、队列、链表、二叉树与 Map/Set
Promise 专题之后进入数据结构主线。不只背名词——要知道 DFS 用栈还是队列、数组 shift 出队为什么是 O(n)、BST 中序为何有序、两数之和为何一遍 Map 就够。本篇按 栈 → 队列 → 链表 → 二叉树 → Map/Set 展开，与系列数组去重、LRU 等篇呼应，文末有复杂度表与易混点，适合发布前自测
2026-05-21 19:00:00
598
原创 Promise 与 async/await
Promise 本身是同步的」到底怎么理解？本篇系统讲 Promise 三态、链式 then、值穿透，对比 all / race / allSettled / any 该何时用；并给出 race 超时、async 重试、并发池 等工程写法。配合 async/await 串并行与错误处理，附易混点与 5 道自测题，建议和系列第 08 篇微任务内容对照阅读。
2026-05-21 10:35:48
764
原创 前端面试必备手写题（下）
接上篇拷贝与防抖节流，本篇专攻面试后半场：Promise 怎么手写、Promise.all 和 allSettled 差在哪、async/await 和 Generator 本质是什么；再加上 LRU 缓存 和 虚拟列表 两道性能题。每节有代码、有边界、有练习题，建议和系列第 08 篇「宏任务/微任务」对照阅读。
2026-05-20 10:20:56
637
原创 前端面试必备手写题（上）
搜索框该用防抖还是节流？JSON.parse 算不算深拷贝？循环引用怎么破？本篇把面试里最高频的三块一次讲透：深拷贝（structuredClone、WeakMap 与手写）、防抖 / 节流（immediate、时间戳与定时器两套实现）、发布订阅（on / off / emit 手写 EventBus）。附易混点与练习题，抄完能讲、能写。
2026-05-20 10:07:10
675
原创 数组常用方法
手写数组扁平化、去重、排序、交并差集，逐个拆解 map/filter/reduce/splice/slice 等常用方法的用法与陷阱，附一张「是否修改原数组」速查总表，面试前过一遍就够了。
2026-05-19 11:44:11
479
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人