让你页面速度飞起来，Web前端性能优化 - 带源码课件

Web 前端性能优化实战：从原理到自动化工具的落地

页面加载缓慢是前端开发中最常见也最致命的体验问题。本套课程不纠结于理论堆砌，而是直击资源体积过大、请求次数过多以及解析阻塞等核心痛点，旨在通过代码层面的重构和工程化手段，让网页响应速度实现质的飞跃。课程涵盖了从 HTTP 协议层面的请求优化，到代码层面的合并与压缩，再到构建工具链的自动化配置，是一套可立即投入生产环境的解决方案。

夯实基础与手动优化：掌握核心原理

建议初学者先观看课程开头的简介及 HTTP 请求过程分析部分。你需要理解浏览器缓存机制、DNS 解析耗时以及 TCP 连接建立对首屏加载的影响，这是后续优化的逻辑基石。在此基础上，课程详细拆解了 HTML、CSS 和 JS 资源的压缩策略。例如，HTML 的注释清理与标签自闭合能显著减少字节数；CSS 和 JS 则涉及去除多余空格、注释以及将代码压制成单文件以减少 HTTP 请求。

这一阶段的重点在于“手动优化”的思维训练。你会看到具体的代码对比，理解为何某些写法会导致渲染阻塞，以及如何通过内联关键 CSS、延迟加载非关键图片等手段提升用户体验。这部分内容适合有一定基础但尚未系统接触性能调优的开发者，通过对照示例代码，你可以亲手修改项目中的冗余部分，观察加载时间的变化，从而建立对性能瓶颈的直观感知。

工程化进阶：利用构建工具实现自动化

当手动优化遇到瓶颈或项目规模扩大时，课程后半部分引入了构建工具（如 fis3）的实战应用。这里不讲死记硬背的配置项，而是演示如何搭建自动化的资源处理流水线。通过配置构建工具，你可以在代码提交或打包阶段自动执行合并、压缩、Gzip 压缩等操作，彻底告别手动维护压缩文件的繁琐过程。

学完这部分，你将能够独立搭建一套前端性能优化规范。你不仅知道如何压缩单个文件，更懂得如何在 CI/CD 流程中集成自动化脚本，确保上线代码的质量。资料包中的源码课件展示了完整的配置示例和实战项目结构，你可以直接将其作为模板fork下来，针对自己的业务场景调整压缩策略和合并规则。

配合视频课程，务必将资料包中的源码文件夹作为练习对象。不要只看视频，要尝试关闭浏览器的缓存，使用 Lighthouse 或 WebPageTest 等工具对比优化前后的性能得分。针对项目中具体的 JS 模块过大或 CSS 文件过多问题，动手调整构建工具的配置文件，观察打包体积的变化。只有经过实际操作的验证，你才能真正掌握将性能优化从“知道”转化为“做到”的能力，开发出既快速又稳定的前端应用。

📂 让你页面速度飞起来 Web前端性能优化 - 带源码课件/ 📽️ 1-1 课程简介.mp4 (10.43 MB) 📽️ 2-1 资源合并与压缩-http 清求的过程及潜在的性能优化点.mp4 (16.87 MB) 📽️ 2-2 资源合并与压缩-html 压缩.mp4 (8.28 MB) 📽️ 2-3 资源合并与压缩-css 及 js压缩.mp4 (7.52 MB) 📽️ 2-4 资源合并与压缩-文件合并.mp4 (9.64 MB) 📽️ 2-5 资源合并与压缩-实战-在线工具压缩.mp4 (115.33 MB) 📽️ 2-6 资源合并与压缩-实战-fis3 构建工具自动压缩合并-流程.mp4 (3.63 MB) 📽️ 2-7 资源合并与压缩-实战-fis3 构建工具自动压缩合并-实操.mp4 (28.08 MB) 📽️ 2-8 资源合并与压缩-总结.mp4 (3.78 MB) 📽️ 3-1 图片相关的优化- 一张JPG图片的解析过程.mp4 (3.87 MB) 📽️ 3-2 图片相关的优化- png8、png24、png32之间的区别.mp4 (4.40 MB) 📽️ 3-3 图片相关的优化- 不同格式图片常用的业务场景.mp4 (6.51 MB) 📽️ 3-4 图片相关的优化- 图片压缩几种方法-雪碧图、Image inline.mp4 (7.28 MB) 📽️ 3-5 图片相关的优化- 图片压缩案例分析.mp4 (147.19 MB) 📽️ 3-6 图片相关的优化- 图片压缩实战（上） webp、inline-image.mp4 (119.99 MB) 📽️ 3-7 图片相关的优化- 图片压缩实战（下）雪碧图、svg.mp4 (174.65 MB) 📽️ 4-1 css和js的装载与执行-HTML 页面加载渲染的过程.mp4 (7.18 MB) 📽️ 4-2 css和js的装载与执行-HTML 演染过程的一些特点.mp4 (5.97 MB) 📽️ 4-3 css和js的装载与执行-顺序执行、并发加载.mp4 (1.78 MB) 📽️ 4-4 css和js的装载与执行-css 阻塞和 js 阻塞.mp4 (9.79 MB) 📽️ 5-1 懒加载与预加载-懒加载原理.mp4 (7.21 MB) 📽️ 5-2 懒加载与预加载-预加载原理.mp4 (4.05 MB) 📽️ 5-3 懒加载与预加载-懒加载、预加载使用场景.mp4 (97.71 MB) 📽️ 5-4 懒加载与预加载-懒加载原生 js 和 zepto.lazyload.mp4 (97.49 MB) 📽️ 5-5 懒加载与预加载-预加载原生 js 和 PreloadJS 实现.mp4 (57.88 MB) 📽️ 6-1 重绘与回流-css 性能让 Javacript 变慢？.mp4 (6.70 MB) 📽️ 6-2 重绘与回流-什么是重绘与回流.mp4 (6.87 MB) 📽️ 6-3 重绘与回流-避免重绘回流的两种方法.mp4 (15.39 MB) 📽️ 6-4 重绘与回流-案例解析-重绘、回流及图层.mp4 (68.18 MB) 📽️ 6-5 重绘与回流-案例解析- chrome 浏览器自动创建图层 layer.mp4 (136.52 MB) 📽️ 6-6 重绘与回流- 实战优化点总结.mp4 (12.08 MB) 📽️ 6-7 重绘与回流- 实战演练 1.mp4 (17.99 MB) 📽️ 6-8 重绘与回流- 实战演练 2.mp4 (22.97 MB) 📽️ 6-9 重绘与回流- 实战演练 3.mp4 (26.00 MB) 📽️ 6-10 重绘与回流- 实战演练 4.mp4 (7.08 MB) 📽️ 6-11 重绘与回流- 实战演练 5.mp4 (12.06 MB) 📽️ 6-12 重绘与回流- 实战演练 6.mp4 (18.34 MB) 📽️ 6-13 重绘与回流- 实战演练 7.mp4 (23.10 MB) 📽️ 6-14 重绘与回流- 实战演练 8 ,9.mp4 (34.65 MB) 📽️ 7-1 浏览器存储-cookies.mp4 (15.93 MB) 📽️ 7-2 浏览器存储-LocalStorage、SessionStorage.mp4 (8.16 MB) 📽️ 7-3 浏览器存储-IndexedDB.mp4 (3.40 MB) 📽️ 7-4 浏览器存储-案例解析.mp4 (143.34 MB) 📽️ 7-5 浏览器存储-Service Workers产生的意义.mp4 (3.20 MB) 📽️ 7-6 浏览器存储-PWA与Service Workers.mp4 (41.15 MB) 📽️ 7-7 浏览器存储-案例解析.mp4 (91.78 MB) 📽️ 7-8 浏览器存储-实战演练-cookie、localstorge、sessionStorge.mp4 (66.29 MB) 📽️ 7-9 浏览器存储-IndexeDB-基础操作-创建打开、关闭删除.mp4 (36.77 MB) 📽️ 7-10 浏览器存储-IndexeDB-基础操作.mp4 (46.14 MB) 📽️ 7-11 浏览器存储-IndexeDB-事务.mp4 (51.80 MB) 📽️ 7-12 浏览器存储-Service Workers-离线应用.mp4 (70.19 MB) 📽️ 7-13 浏览器存储-Service Workers-如何实现Service Workers主页面之间的通信.mp4 (99.01 MB) 📽️ 8-1 缓存1.mp4 (6.39 MB) 📽️ 8-2 缓存2.mp4 (11.86 MB) 📽️ 8-3 缓存3-Last-Modified-If-Modified-Since.mp4 (16.17 MB) 📽️ 8-4 缓存4-Etag-If-None-Match.mp4 (11.76 MB) 📽️ 8-5 缓存5-案例解析.mp4 (157.92 MB) 📽️ 8-6 缓存6-流程图.mp4 (56.23 MB) 📽️ 8-7 缓存7-实战1.mp4 (78.31 MB) 📽️ 8-8 缓存8-实战2.mp4 (113.05 MB) 📽️ 9-1 服务端性能优化-1.mp4 (40.18 MB) 📽️ 9-2 服务端性能优化-2.mp4 (65.25 MB) 📽️ 9-3 服务端性能优化-3.mp4 (165.79 MB) 📦 课件.zip (3.35 MB)