通过页面性能测试概念+页面加载过程+页面性能指标+页面性能测试工具的学习，可以学到如下内容：

①WEB网站页面性能的指标(白屏时间、首屏加载完成时间、FP、FCP、DCL、CLS、FPS等）；

②WEB网站页面性能测试策略；

③WEB网站页面加载过程（前端基础语言：HTML+CSS+JavaScript，DOM、CSSOM、渲染树、布局、绘制）；

④WEB网站页面性能测试工具的实际操作和功能介绍（开发者工具：控制台、网络、性能、Lighthouse、FPS渲染统计等）；

⑤WEB网站页面性能测试报告编写。

⑥WEB网站页面性能测试步骤和实际操作。

课程内容：

第一章：课程简介

1、课程介绍

2、课程大纲

第二章：页面性能测试

1、页面性能测试概念

2、页面性能测试专业术语

3、页面性能测试策略

第三章：页面加载过程

1、HTML概念，HTML5实例，HTML5文档

2、CSS概念，CSS实例，CSS文档

3、JavaScript概念，JavaScript脚本实例和作用

4、DOM和CSSOM理解

5、HTML5渲染引擎理解

6、HTML5页面内容渲染的过程，HTML渲染树

第四章：页面性能测试工具

1、页面性能测试具体工具

2、Chrome开发者工具介绍

第五章：页面性能测试工具-控制台：window.performance

1、控制台：window.performance介绍

2、window.performance.timing执行结果加载字段理解

3、window.performance.timing执行结果属性对应页面阶段理解

4、window.performance页面性能参数计算

5、window.performance页面性能关键指标计算

第六章：页面性能测试工具-网络面板

1、Chrome-开发者工具-网络面板介绍

2、Chrome-开发者工具-网络-瀑布流指标

第七章：页面性能测试工具-性能面板

1、Chrome-开发者工具-性能面板-使用方法

2、Chrome-开发者工具-性能面板介绍

3、Chrome-开发者工具-性能面板-控制按钮区域

4、Chrome-开发者工具-性能面板-Overview区域

5、Chrome-开发者工具-性能面板-火焰图区域

6、Chrome-开发者工具-性能面板-内存图区域

7、Chrome-开发者工具-性能面板-统计汇总区域

8、Chrome-开发者工具-性能面板-统计汇总区域-摘要内容

9、Chrome-开发者工具-性能面板-统计汇总区域-事件时长、调用、发生顺序

第八章：页面性能测试工具-FPS监控

1、Chrome-开发者工具-FPS监控-FPS介绍、FPS视觉效果、FPS查看方法

第九章：页面性能测试-Lighthouse面板

1、Chrome-开发者工具-Lighthouse介绍、操作方法、运行的生命周期

2、Chrome-开发者工具-Lighthouse报告指标分析

3、Chrome-开发者工具-Lighthouse的报告优化建议

第十章：页面性能测试工具-Performance insights面板

1、Chrome-开发者工具-Performance insights操作方法

2、Chrome-开发者工具-Performance insights分析报告

第十一章：网速调研

1、全国网速的调研和本机网速测试

第十二章：页面性能测试总结

1、页面性能测试指标采集方式

2、页面性能测试报告

3、页面性能测试-操作步骤

​