👨‍💻

前端笔记

记录前端路上的每一次探索与成长

关于我

一个狂热的前端开发者,喜欢折腾各种新技术。从jQuery时代一路走来,经历了Angular、React、Vue的更迭,始终保持着对前端技术的热爱。

日常工作主要是开发企业级中后台系统,业余时间喜欢研究性能优化、工程化方案,偶尔也会写写小程序和移动端项目。

这个博客主要记录我在开发过程中遇到的问题和解决方案,希望能帮助到同样在路上的你。

5+
年开发经验
36
踩坑案例
50
知识笔记

踩坑记录

前端知识沉淀

JavaScript核心 ▼

事件循环机制

宏任务、微任务执行顺序与队列调度原理

闭包与内存管理

闭包的形成条件、内存泄漏风险与优化

原型链继承

原型链查找机制与多种继承方案对比

Promise实现原理

手写Promise理解异步流程控制

Generator与迭代器

生成器函数与可迭代协议的应用

模块化规范

ESM、CommonJS、AMD模块系统对比

TypeScript进阶 ▼

泛型约束与推断

泛型参数约束、条件类型推断技巧

映射类型

Partial、Required、Readonly实现原理

模板字面量类型

字符串类型操作与类型推导

类型守卫

类型收窄与自定义类型守卫函数

声明合并

接口、命名空间的声明合并规则

类型体操实战

DeepReadonly、DeepPartial等高级类型

React深度 ▼

Fiber架构原理

时间切片、优先级调度与可中断渲染

Diff算法策略

同层比较、key的作用与优化策略

Hooks实现原理

链表结构存储状态与更新队列

并发模式

Concurrent Mode与优先级调度机制

服务端渲染

Next.js SSR/SSG/ISR渲染策略

状态管理演进

Flux、Redux、Zustand架构对比

Vue生态 ▼

响应式系统原理

Proxy依赖收集与触发更新机制

编译器优化

静态提升、PatchFlag与Block Tree

组合式API设计

setup函数与Composable设计模式

虚拟DOM diff

Vue3双端diff算法优化点

KeepAlive原理

组件缓存与LRU缓存策略

Teleport组件

DOM传送门与模态框实现

浏览器原理 ▼

渲染流水线

DOM树、样式计算、布局、绘制、合成

V8引擎优化

JIT编译、内联缓存、隐藏类

垃圾回收机制

分代回收、增量标记、并发回收

缓存策略

强缓存、协商缓存与Service Worker

跨域解决方案

CORS、JSONP、代理与postMessage

安全防护

XSS、CSRF攻击原理与防御策略

工程化实践 ▼

Webpack核心概念

Entry、Loader、Plugin、Chunk关系

Vite原理

ESM开发服务器与Rollup生产构建

Babel编译流程

解析、转换、生成三阶段原理

CI/CD流程

GitHub Actions自动化构建部署

Monorepo管理

Turborepo、Nx多包构建优化

代码规范工具

ESLint、Prettier、Husky配置实践

性能优化 ▼

Core Web Vitals

LCP、FID、CLS指标优化策略

代码分割

动态import与路由懒加载

资源预加载

preload、prefetch、preconnect使用

长列表优化

虚拟滚动与时间分片渲染

内存优化

内存泄漏检测与对象池模式

网络优化

HTTP/2、压缩、CDN加速策略

CSS进阶 ▼

BFC原理与应用

块级格式化上下文与布局隔离

层叠上下文

z-index层叠规则与层叠上下文形成

CSS Containment

contain属性与渲染性能优化

动画性能

GPU加速、will-change与合成层

容器查询

Container Queries响应式组件设计

CSS Houdini

自定义属性与绘制API扩展

Node.js后端 ▼

事件驱动架构

EventEmitter与发布订阅模式

Stream流处理

管道、背压与大文件处理

Cluster集群

多进程模型与负载均衡

Koa中间件

洋葱模型与async/await处理

数据库连接池

连接管理、事务与性能调优

进程通信

IPC、SharedArrayBuffer多进程协作

×