这门课解决什么工作场景

很多前端开发和测试人员在日常工作中常遇到这种困境：页面在自己电脑上跑得很顺，一旦上线，用户却抱怨白屏太久或按钮点不动。这门课正是瞄准这个断点，教你如何用工程化手段量化“慢在哪里”，而不是靠肉眼猜测。它覆盖了从浏览器发起请求到渲染完成的完整生命周期，帮你把模糊的“卡顿感”转化为可量化的指标数据。如果你经常被要求优化页面速度却不知道从何下手，或者作为转行者想补齐测试体系里的盲区，这套内容能直接套用到实际排障流程中。

适合什么基础与建议先看哪几块

这门资料适合已经掌握基本前端语法（能看懂简单的标签、样式和脚本逻辑），但缺乏系统性能分析经验的初级从业者。不建议完全零基础的人直接看，因为里面涉及网络请求和浏览器渲染机制，没有一点代码概念会听得吃力。建议拿到资料后，不要按顺序从头啃，而是先看“页面加载过程”这一块。这部分从基础的文档结构、样式解析讲到脚本执行，帮你把底层的渲染原理理顺。接着直接跳到“页面性能指标”，弄懂白屏时间、首屏时间这些核心术语到底指代哪个具体节点，最后再把“测试工具”和“测试策略”结合起来看，理解怎么在实际项目中落地。

学完能独立做什么与资料怎么配合练习

看完这套内容，你应该能独立对一个现成的网页进行全面的性能体检。具体来说，你能运用专业工具捕获加载瀑布图，准确指出是图片体积过大、脚本阻塞还是接口响应慢导致的问题，并能输出一份有理有据的性能测试报告。在配合资料练习时，不要只停留在看视频。建议每看完一个指标的讲解，就立刻打开电脑上任意一个常用网站，用浏览器自带的开发者面板去对照寻找对应的数值。讲到测试策略时，试着拿自己写过的简单页面或者开源模板跑一次完整的压测，记录下数据。只有把课里讲的专业术语和实际抓取到的网络请求对应上，这些概念才算真正变成了你手里的职场工具。


清楚页面性能测试页面性能的指标、页面性能测试策略、页面加载过程、页面性能测试工具、页面性能测试报告

课程目录

*   01 课程简介/

  *   01 课程介绍.mp4 (3.29 MB), 00:51

  *   02 课程大纲.mp4 (8.30 MB), 01:54

*   02 页面性能测试/

  *   01 页面性能测试概念.mp4 (12.77 MB), 03:16

  *   02 页面性能测试的专业术语.mp4 (34.66 MB), 07:30

  *   03 页面性能测试策略.mp4 (18.08 MB), 03:55

*   03 页面加载过程/

  *   01 HTML概念，HTML5实例，HTML5文档.mp4 (16.42 MB), 03:21

  *   02 CSS概念，CSS实例，CSS文档.mp4 (15.14 MB), 03:37

  *   03 JavaScript概念，JavaScript脚本实例.mp4 (15.94 MB), 03:31

  *   04 DOM和CSSOM理解.mp4 (18.22 MB), 03:58

  *   05 HTML5渲染引擎理解.mp4 (13.27 MB), 03:09

  *   06 HTML5页面内容渲染的过程.mp4 (29.19 MB), 05:51

*   04 页面性能测试工具/

  *   01 页面性能测试工具介绍.mp4 (19.80 MB), 04:13

  *   02 Chrome开发者工具-操作方法.mp4 (43.43 MB), 06:41

*   05 页面性能测试工具控制台-window.performace/

  *   01 控制台面板-window.performance介绍.mp4 (23.95 MB), 04:10

  *   02 window.performance的字段含义理解.mp4 (51.20 MB), 09:34

  *   03 window.performance事件对应的页面加载阶段.mp4 (25.21 MB), 05:26

  *   04 window.performance页面性能参数计算.mp4 (22.65 MB), 04:52

  *   05 window.performance页面性能关键指标计算.mp4 (16.43 MB), 03:35

*   06 页面性能测试工具-网络面板/

  *   01 网络面板介绍.mp4 (67.22 MB), 10:12

  *   02 网络面板-瀑布流时间.mp4 (17.95 MB), 03:52

*   07 页面性能测试工具-性能面板/

  *   01 性能面板操作方法.mp4 (27.00 MB), 04:35

  *   02 性能面板介绍.mp4 (43.83 MB), 07:19

  *   03 性能面板-控制按钮区域.mp4 (40.86 MB), 07:13

  *   04 性能面板-Overview区域.mp4 (42.52 MB), 06:49

  *   05 性能面板-火焰图区域.mp4 (90.80 MB), 14:13

  *   06 性能面板-内存图区域.mp4 (36.78 MB), 05:46

  *   07 性能面板-统计汇总区域.mp4 (27.67 MB), 05:02

  *   08 性能面板-统计汇总区域-摘要内容.mp4 (16.78 MB), 03:38

  *   09 统计汇总区域-事件时长、调用、发生顺序.mp4 (36.32 MB), 05:48

*   08 页面性能测试工具-FPS监控/

  *   01 FPS监控-FPS介绍、FPS视觉效果、FPS查看方法.mp4 (23.11 MB), 04:07

*   09 页面性能测试工具-Lighthouse面板/

  *   01 Lighthouse操作方法、运行的生命周期.mp4 (30.98 MB), 05:32

  *   02 Lighthouse报告指标分析.mp4 (36.73 MB), 07:22

  *   03 Lighthouse报告的优化建议.mp4 (51.66 MB), 08:28

*   10 页面性能测试工具-Performance insights/

  *   01 Performance insights操作方法.mp4 (26.13 MB), 04:29

  *   02 Performance insights性能分析报告.mp4 (55.27 MB), 08:47

*   11 网速调研/

  *   01 全国网速调研和本机网速测试.mp4 (21.76 MB), 03:30

*   12 页面性能测试总结/

  *   01 页面性能测试指标采集方式.mp4 (59.23 MB), 10:44

  *   02 页面性能测试报告.mp4 (25.58 MB), 05:25

  *   03 页面性能测试-操作步骤.mp4 (81.40 MB), 12:48