性能优化作为前端关键的职位，职位的年薪是很高的，当然你需要精通性能的优化所有手段，并且保持技术的前瞻性，工具的调优，页面的监控等等手段。来跟笔者一起看看性能监控的入门内容吧~~，相信你了解这些后，再去实践实战，很快会步入高阶行列。

第一章: 页面生命周期

• 1.1 资源请求
  • DNS解析: 解析域名以获取服务器的IP地址
  • TCP握手: 建立与服务器的连接
  • TLS握手: 加密连接的握手
  • HTTP请求和响应
• 1.2 HTML解析与DOM构建
  • 预解析: 预加载资源链接
  • 词法分析: 转化HTML字符串为节点
  • DOM构建: 节点组织成DOM树
• 1.3 CSS解析与CSSOM构建
  • CSSOM构建: 规则组织成CSSOM树
  • 词法分析: 转化CSS字符串为规则
• 1.4 依赖关系解析和文档完整事件
  • 执行阻塞脚本
  • DOMContentLoaded事件
• 1.5 JavaScript执行
  • JS解析
  • 字节码生成或JIT编译
  • 执行
• 1.6 渲染
  • Render Tree构建
  • 布局
  • 绘制
  • 合成
• 1.7 页面加载事件
  • window.load事件
• 1.8 页面运行和互动
  • 事件监听和处理
  • 异步操作
  • 动画和帧率
• 1.9 页面卸载
  • beforeunload和unload事件

第二章: 加载优化

2.1 异步加载

• Async Loading

2.2 延迟加载

• Deferred Loading

2.3 懒加载

• Lazy Loading

2.3.1 图像加载优化

• 懒加载
  • 图像懒加载
  • JS懒加载
  • 模块懒加载
• 使用Lottie加载动画
• 图片格式选择
• 响应式图像
• 图像压缩
• 图像CDN
• 图像精灵
• 背景图片与内联图像
• 图像解码优化
• 动画和图像性能
• 艺术方向
• 视觉占位符
• 图片加载策略控制
• 图片解析

2.3.2 资源懒加载

• 占位符或者骨架屏
• 优先加载关键资源
• 使用第三方库
• 懒加载脚本和模块

2.3.3 视频懒加载

• 使用IntersectionObserver
• 使用loading="lazy"属性 (原生懒加载)
• 使用占位符图像
• 使用第三方库

2.4 预加载

• Preloading

2.5 预渲染

• Prerendering

2.6 预连接

• Preconnecting

2.7 预解析DNS

• DNS Prefetch

2.8 模块加载

• Module Loading

2.9 HTTP/2 Server Push

2.10 使用CDN

• Content Delivery Network

2.11 资源内联

第三章: 构建优化

3.1 代码拆分

• Code Splitting

3.2 摇树优化

• Tree Shaking

3.3 代码压缩

3.4 资源优化

3.5 CSS模块与局部作用域

3.6 自动添加CSS前缀

3.7 转换现代JavaScript

3.8 处理第三方库

3.9 运行时性能

3.10 缓存优化

3.11 提取CSS

3.12 使用现代化的模块格式

3.13 使用Source Maps

3.14 监控构建性能

第四章: 浏览器优化

4.1 渲染优化

• 避免强制同步布局
• GPU加速以及陷阱
• 优化层合成

4.2 字体与性能

• 字体对性能的影响

4.3 DOM操作

• DOM操作很慢

4.4 异步处理

• 异步任务和性能

4.5 内存管理

• 内存为什么会影响性能

4.6 优化技术

• ServiceWorker改善性能
• Web Workers
• WebAssembly

4.7 缓存

• 缓存机制

4.8 事件处理

• 事件循环与任务队列

4.9 加载策略

• 非阻塞加载

4.10 网络优化

4.11 浏览器APIs与工具

4.12 代码优化

• 优化CSS
• 优化Javascript

4.13 内容加载策略

• 懒加载和虚拟化

4.14 浏览器兼容性

4.15 响应式设计与性能

第五章: 缓存优化

5.1 浏览器缓存

5.2 内容地址缓存

5.3 Service Workers缓存

5.4 CDN优化

• CDN（内容分发网络）缓存

5.5 应用级缓存

5.6 图片与多媒体

• 图片和多媒体缓存

5.7 第三方资源缓存

5.8 预加载策略

• Prefetching
• Preloading

5.9 数据管理

• 数据缓存
• 更新策略

第六章: 网络优化

6.1 压缩技术

• 开启Gzip

6.2 CDN优化

• CDN内容分发

6.3 域名管理

• 域名发散
• DNS预解析

6.4 Cookie管理

• 减少不必要的Cookie

6.5 服务器响应

• 优化TTFB

6.6 HTTP版本优化

• HTTP2性能
• HTTP3性能与QUIC

6.7 Ajax优化

• 缓存Ajax

第七章: 性能检测工具

7.1 Lighthouse

• 简介及主要特性
• 如何使用Lighthouse
• 解读Lighthouse报告

7.2 WebPageTest

• 简介及主要特性
• 如何使用WebPageTest
• 解读WebPageTest报告

第八章: JS性能优化

8.1 Console性能问题

• console的使用与其性能开销
• 如何避免和优化

8.2 DOM重绘

• 什么是DOM重绘
• 为何它会影响性能
• 如何减少不必要的重绘

8.3 切换页面变量丢弃问题

• 变量的生命周期
• 如何管理和优化

8.4 递归调用性能问题

• 递归的性能开销
• 替代方案和优化策略

8.5 正则效率提高方法

• 正则表达式的性能考量
• 如何编写高效的正则表达式

8.6 DOM和变量关系未解除

• 内存泄漏与DOM引用
• 如何避免和修复

8.7 事件委托作用

• 事件冒泡与事件委托
• 如何利用事件委托提高性能

8.8 防抖和节流

• 防抖和节流的定义及差异
• 实现方法和应用场景

8.9 JS动画的弊端

• JS与CSS动画的对比
• 如何优化JS动画

8.10 多线程避免页面假死

• 浏览器的单线程模型
• 如何使用多线程技术优化性能

8.11 Web Worker

• Web Worker简介
• 如何利用Web Worker优化前端性能

第九章: 脚手架优化

9.1 启用模块的摇树优化（Tree Shaking）

9.2 代码拆分和动态导入

9.3 优化开发服务器

9.4 压缩和优化输出

9.5 优化图片和媒体资源

9.6 启用持久化缓存

9.7 使用现代JavaScript标准

9.8 减少构建工具的插件和加载器

9.9 优化第三方库的使用

9.10 配置性能预算

9.11 优化Source Maps

9.12 并行执行

9.13 定期更新依赖和工具

• 第十章: 框架优化
  

10.1 Vue

• Vue的性能考虑
  • 
    

10.2 React

• React性能策略

10.3 类原生JS框架：Jquery等

• Jquery优化策略
  • 
    
• 其他类原生JS框架的性能策略
  • 
    

第十一章: 指标优化

11.1 了解性能指标有哪些

• FMP (First Meaningful Paint)

  • 
    

• FP (First Paint)

  • 
    

• CLS (Cumulative Layout Shift)

  • 
    

• TBT (Total Blocking Time)

  • 
    

• LCP (Largest Contentful Paint)

  • 
    

• SI (Speed Index)

  • 
    

• FCP (First Contentful Paint)

  • 
    

11.2 性能指标计算方法

• 第十二章: SEO优化
  

12.1 关键词研究

• 如何选择关键词
• 工具和技术
• 竞争关键词分析

12.2 高质量内容

• 内容的重要性
• 创建引人入胜的内容
• 内容更新策略

12.3 网页优化

• 网页结构
• 标题和描述
• 图像优化

12.4 内部链接

• 重要性和策略
• 锚文本优化
• 链接结构

12.5 外部链接策略

• 建立权威外链的方法
• 分析外链质量
• 避免恶劣的链接

12.6 移动优化

• 响应式设计
• AMP (Accelerated Mobile Pages)
• 移动友好性测试

12.7 页面加载速度

• 重要性
• 优化策略
• 工具和技术

12.8 结构化数据和Schema标记

• 介绍和重要性
• 如何实施
• 工具和资源

12.9 建立站点地图

• 为何重要
• 创建和提交方法

12.10 避免技术性错误

• 常见错误
• 诊断和修复

12.11 安全和访问

• HTTPS和SSL
• 安全的网站架构

12.12 社交媒体和分享

• 社交媒体的重要性
• 优化社交媒体分享

12.13 本地SEO

• 优化Google My Business
• 本地评论和评分
• 本地链接建设

12.14 国际和多语言SEO

• hreflang标签
• 多语言内容策略
• 优化多地区目标

第十三章: 布局优化

13.1 减少不必要的DOM元素

• DOM简介
• 如何识别和删除多余的元素

13.2 避免使用表格布局

• 表格布局的历史和局限性
• 现代布局方法

13.3 使用CSS Flexbox和Grid

• Flexbox基础和优势
• Grid布局和使用案例
• 组合Flexbox和Grid的策略

13.4 避免固定定位产生的复杂性

• 固定定位的陷阱
• 替代方法

13.5 批量DOM操作

• 批量操作的重要性
• 实现方法和技术

13.6 避免强制同步布局

• 强制同步布局的问题
• 优化策略

13.7 使用requestAnimationFrame

• requestAnimationFrame简介
• 用例和实现

13.8 使用硬件加速

• 硬件加速的概念
• 如何利用硬件加速

13.9 避免使用昂贵的CSS属性

• 昂贵的CSS属性列表
• 替代方法和技巧

13.10 懒加载内容

• 懒加载的基础
• 实现方法

13.11 响应式设计的优化

• 响应式设计原则
• 优化策略

13.12 避免使用内联样式

• 内联样式的问题
• 外部样式表的优势

13.13 虚拟化长列表

• 为何需要虚拟化
• 虚拟化的实现方法和库

第十四章: Web性能的未来

第十五章: 监控与性能管理

第十六章: 13条性能最佳实践

每月更新优惠券（如果未更新，请耐心等待）：

免费3天加入观看：

限时折扣：