飞豹客 · 课能看,资料也能带走
飞豹客前端开发 会员免费

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

这门课解决什么问题 前端页面加载缓慢直接影响用户体验和搜索引擎排名。这门课专注资源合并与压缩技术,通过实例讲解 http 请求优化、文件压缩方法,以及如何借助工具实现自动化性能提升。主要解决开发中手动处理资源耗时的痛点,帮助开发者改善网站速度,优化开发流程。学完后能独立完成资源合并、压缩配置,并运用

单课价¥19.90新品 上架
会员价 会员免费开通会员后本篇可直接下载套餐详情
230 人关注 更新于 2026-03-25 永久有效
发货

网盘链接 · 支付成功后自动发货

保障

永久有效 · 链接失效免费补发

客服

每日 9:00-21:00 在线客服 联系客服

会员可免费下载本篇月会员、年会员、永久会员可免费领取。

开通会员 ›
购买本课销量 0 · 永久有效
会员价 · 单课标价 ¥19.90

会员 · 按档位

永久免费可领
年免费可领
月免费可领

游客按标价购买,不享受上表折扣。

支付成功后自动发放网盘链接,链接失效可找客服免费补

正版保障 极速发货 售后无忧

这门课解决什么问题

前端页面加载缓慢直接影响用户体验和搜索引擎排名。这门课专注资源合并与压缩技术,通过实例讲解 http 请求优化、文件压缩方法,以及如何借助工具实现自动化性能提升。主要解决开发中手动处理资源耗时的痛点,帮助开发者改善网站速度,优化开发流程。学完后能独立完成资源合并、压缩配置,并运用工具链实现自动化处理,减少手动操作,提升开发效率。

适合什么基础

课程假设学习者具备 HTML、CSS、JavaScript 基础,了解前端开发流程。不需要熟悉构建工具,但需要能运行和配置简单的构建脚本。建议有实际项目经验,能自己动手修改配置。资料包含演示环境,适合通过跟做掌握操作步骤。学习门槛不高,但需要一定的动手能力和逻辑思维能力,能将所学应用到实际项目中。

学完能独立做什么

学完能独立完成资源合并、压缩配置,并运用工具链实现自动化处理,减少手动操作耗时。能理解不同压缩方法的效果差异,根据项目需求选择合适方案。能通过配置构建工具,实现上线前的自动优化,保证性能稳定。能独立排查和解决资源合并压缩过程中出现的问题,提升页面加载速度。

资料怎么配合练习

资料中包含演示代码和工具配置文件。练习时,先根据视频步骤修改 FIS3 项目配置,对比不同压缩策略的效果。尝试使用在线工具压缩项目文件,对比它们与构建工具的差别。建议将练习环境部署在本地,通过修改真实项目配置来加深理解,避免只停留在代码片段上。遇到问题可参考总结部分的内容,或查阅相关工具文档。建议先学习资源合并压缩的视频,再结合资料进行实践,最后回顾总结部分的内容,形成完整认知。

课程目录

让你页面速度飞起来 Web前端性能优化 - 带源码课件/ 📽️64 集
  • 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)