getfromcode

让你页面速度飞起来 Web前端性能优化​

前端开发
课程简介

前端性能优化:提升页面加载速度的实战方法 这门课聚焦于 Web 前端性能优化,主要解决页面加载速度慢、交互卡顿、资源浪费等问题。通过系统讲解前端性能优化的核心原理与工程实践,帮助开发者掌握如何从资源加载、渲染机制、存储策略等多个层面优化页面性能。 适合什么基础? 课程适合已掌握基础 HTML、CSS 和 JavaScript 的前端开发者,尤其是对页面性能…

已有 24 人浏览 发布 2026-01-12 更新 2026-10-06

前端性能优化:提升页面加载速度的实战方法

这门课聚焦于 Web 前端性能优化,主要解决页面加载速度慢、交互卡顿、资源浪费等问题。通过系统讲解前端性能优化的核心原理与工程实践,帮助开发者掌握如何从资源加载、渲染机制、存储策略等多个层面优化页面性能。

适合什么基础?

课程适合已掌握基础 HTML、CSS 和 JavaScript 的前端开发者,尤其是对页面性能有初步了解但仍缺乏系统方法论的工程师。如果你在实际项目中遇到加载延迟、首屏渲染慢、资源冗余等问题,本课程能为你提供清晰的解决思路和可复用的优化手段。

如何高效学习?

建议优先学习“资源合并与压缩”与“图片相关的优化”两章,这两个模块是提升页面性能的基础。合并 CSS、JS 文件,减少 HTTP 请求;使用 WebP、SVG 等格式优化图片资源,能快速看到效果。随后可深入“CSS 和 JS 的装载与执行”、“懒加载与预加载”等关键环节,理解如何控制资源加载顺序与时机。对于重绘与回流、浏览器存储、缓存策略等较深入的内容,建议结合实际项目进行针对性练习。

学完本课程,你应能独立分析页面性能瓶颈,并通过代码层面的优化手段提升页面加载速度和渲染效率。例如,你可以实现图片懒加载、动态加载 JS 代码、减少重绘操作、合理使用浏览器缓存等常见优化方案。

资料包中的 PPT 文件提供了详细的性能优化知识结构和工程实践方法,建议结合课程内容逐章对照学习。每章都有具体的优化策略和代码示例,可直接用于项目中。开发者可通过阅读 PPT、观看讲解视频并动手编写代码,逐步掌握前端性能优化的完整流程。

课程目录

/q5-025-让你页面速度飞起来 Web前端性能优化​/
│├─workspace更
│├─第1章 课程简介更
│├─第2章 资源合并与压缩
│├─第3章 图片相关的优化更
│├─第4章 css 和 js 的装载与执行
│├─第5章 懒加载与预加载更
│├─第6章 重绘与回流更
│├─第7章 浏览器存储
│├─第8章 缓存优化更
│├─第9章 SSR(服务端渲染)
workspace更/
│├─css、js的加载与执行.pptx 278.1KB
│├─图片相关的优化.pptx 144.3KB
│├─懒加载与预加载.pptx 80.3KB
│├─浏览器存储.pptx 247.8KB
│├─资源合并与压缩.pptx 2.8MB
│├─重绘与回流.pptx 89.4KB
第1章 课程简介更/
│├─1-1 课程简介.mp4 10.4MB
第2章 资源合并与压缩/
│├─2-1 资源合并与压缩-http 清求的过程及潜在的性能优化点.mp4 16.9MB
│├─2-2 资源合并与压缩-html 压缩.mp4 8.3MB
│├─2-3 资源合并与压缩-css 及 js压缩.mp4 7.5MB
│├─2-4 资源合并与压缩-文件合并.mp4 9.6MB
│├─2-5 资源合并与压缩-实战-在线工具压缩.mp4 115.3MB
│├─2-6 资源合并与压缩-实战-fis3 构建工具自动压缩合并-流程.mp4 3.6MB
│├─2-7 资源合并与压缩-实战-fis3 构建工具自动压缩合并-实操.mp4 28.1MB
│├─2-8 资源合并与压缩-总结.mp4 3.8MB
第3章 图片相关的优化更/
│├─3-1 图片相关的优化- 一张JPG图片的解析过程.mp4 3.9MB
│├─3-2 图片相关的优化- png8、png24、png32之间的区别.mp4 4.4MB
│├─3-3 图片相关的优化- 不同格式图片常用的业务场景.mp4 6.5MB
│├─3-4 图片相关的优化- 图片压缩几种方法-雪碧图、Image inline.mp4 7.3MB
│├─3-5 图片相关的优化- 图片压缩案例分析.mp4 147.2MB
│├─3-6 图片相关的优化- 图片压缩实战(上) webp、inline-image.mp4 120MB
│├─3-7 图片相关的优化- 图片压缩实战(下)雪碧图、svg.mp4 174.6MB
第4章 css 和 js 的装载与执行/
│├─4-1 css和js的装载与执行-HTML 页面加载渲染的过程.mp4 7.2MB
│├─4-2 css和js的装载与执行-HTML 演染过程的一些特点更.mp4 6MB
│├─4-3 css和js的装载与执行-顺序执行、并发加载.mp4 1.8MB
│├─4-4 css和js的装载与执行-css 阻塞和 js 阻塞.mp4 9.8MB
第5章 懒加载与预加载更/
│├─5-1 懒加载与预加载-懒加载原理.mp4 7.2MB
│├─5-2 懒加载与预加载-预加载原理.mp4 4.1MB
│├─5-3 懒加载与预加载-懒加载、预加载使用场景.mp4 97.7MB
│├─5-4 懒加载与预加载-懒加载原生 js 和 zepto.lazyload.mp4 97.5MB
│├─5-5 懒加载与预加载-预加载原生 js 和 PreloadJS 实现.mp4 57.9MB
第6章 重绘与回流更/
│├─6-1 重绘与回流-css 性能让 Javacript 变慢?.mp4 6.7MB
│├─6-10 重绘与回流- 实战演练 4.mp4 7.1MB
│├─6-11 重绘与回流- 实战演练 5.mp4 12.1MB
│├─6-12 重绘与回流- 实战演练 6.mp4 18.3MB
│├─6-13 重绘与回流- 实战演练 7.mp4 23.1MB
│├─6-14 重绘与回流- 实战演练 8 ,9.mp4 34.7MB
│├─6-2 重绘与回流-什么是重绘与回流.mp4 6.9MB
│├─6-3 重绘与回流-避免重绘回流的两种方法.mp4 15.4MB
│├─6-4 重绘与回流-案例解析-重绘、回流及图层.mp4 68.2MB
│├─6-5 重绘与回流-案例解析- chrome 浏览器自动创建图层 layer.mp4 136.5MB
│├─6-6 重绘与回流- 实战优化点总结.mp4 12.1MB
│├─6-7 重绘与回流- 实战演练 1.mp4 18MB
│├─6-8 重绘与回流- 实战演练 2.mp4 23MB
│├─6-9 重绘与回流- 实战演练 3.mp4 26MB
第7章 浏览器存储/
│├─7-1 浏览器存储-cookies更.mp4 15.9MB
│├─7-10 浏览器存储-IndexeDB-基础操作.mp4 46.1MB
│├─7-11 浏览器存储-IndexeDB-事务.mp4 51.8MB
│├─7-12 浏览器存储-Service Workers-离线应用.mp4 70.2MB
│├─7-13 浏览器存储-Service Workers-如何实现Service Workers主页面之间的通信更.mp4 99MB
│├─7-2 浏览器存储-LocalStorage、SessionStorage.mp4 8.2MB
│├─7-3 浏览器存储-IndexedDB.mp4 3.4MB
│├─7-4 浏览器存储-案例解析.mp4 143.3MB
│├─7-5 浏览器存储-Service Workers产生的意义.mp4 3.2MB
│├─7-6 浏览器存储-PWA与Service Workers.mp4 41.2MB
│├─7-7 浏览器存储-案例解析.mp4 91.8MB
│├─7-8 浏览器存储-实战演练-cookie、localstorge、sessionStorge.mp4 66.3MB
│├─7-9 浏览器存储-IndexeDB-基础操作-创建打开、关闭删除更.mp4 36.8MB
第8章 缓存优化更/
│├─8-1 缓存1.mp4 6.4MB
│├─8-2 缓存2.mp4 11.9MB
│├─8-3 缓存3-Last-Modified-If-Modified-Since.mp4 16.2MB
│├─8-4 缓存4-Etag-If-None-Match.mp4 11.8MB
│├─8-5 缓存5-案例解析.mp4 157.9MB
│├─8-6 缓存6-流程图.mp4 56.2MB
│├─8-7 缓存7-实战1.mp4 78.3MB
│├─8-8 缓存8-实战2.mp4 113MB
第9章 SSR(服务端渲染)/
│├─9-1 服务端性能优化-1.mp4 40.2MB
│├─9-2 服务端性能优化-2.mp4 65.2MB
│├─9-3 服务端性能优化-3.mp4 165.8MB

1701311357-bb25f271c3e54dc

课程购买
课程价格
金币29
290金币限时优惠会员免费
销量:0
💎 开通会员每日免费下载,比单买更划算 →
支付成功后会自动显示下载资源云盘的链接!点击链接即可下载到本地。