人工精选让你页面速度飞起来,Web前端性能优化 - 带源码课件
这门课解决什么问题 前端页面加载缓慢直接影响用户体验和搜索引擎排名。这门课专注资源合并与压缩技术,通过实例讲解 http 请求优化、文件压缩方法,以及如何借助工具实现自动化性能提升。主要解决开发中手动处理资源耗时的痛点,帮助开发者改善网站速度,优化开发流程。学完后能独立完成资源合并、压缩配置,并运用
会员可免费下载本篇月会员、年会员、永久会员可免费领取。
开通会员 ›会员 · 按档位
游客按标价购买,不享受上表折扣。
支付成功后自动发放网盘链接,链接失效可找客服免费补
这门课解决什么问题
前端页面加载缓慢直接影响用户体验和搜索引擎排名。这门课专注资源合并与压缩技术,通过实例讲解 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)





