课程简介：

 我是溪风欢迎大家来学习这门前端性能优化原理与实践的课程，那么在这门课程中，我们会带大家去学习前端性能优化的相关知识点，以及这些质点所涉及到的内部的原理，并且通过手淘等网站的案例分析，了解这些前端性能优化点在当前实际业务中的应用，最终在我们的Demo代码中进行开发实战的分析和运用。
这门课程会涉及到哪些功能？这门课程涉及到前端性能优化点，它是比较多的，涉及到了网络层面的、构建层面的、浏览器渲染层面的以及服务端层面的等很多方面，那么涉及到的功能点主要包括资源的合并、压缩、图片的编码的原理以及类型的选择、浏览器的渲染机制、懒加载、预加载、浏览器存储缓存机制、PWAVESSR等包含了大家在真实项目中可能会碰到的各种场景，也带大家去使用PWAUESSR这样当前比较火热的技术在前端训练优化中的应用。
这门课程涉及到技术栈的话，其实会涉及到一些VUE的知识，那么主要使用的工具是使用到了Chrome的调优工具，它的performancelayers等这样的调优工具。最重要的是我们在课程中会深入地去学习前端性能优化的一个原理，这个是我们课程中最最重要以及最最核心的部分，帮助大家去掌握性能优化点到底是为什么能起到前端性能优化的作用，以及这些优化点它是如何与真实业务场景去结合的，我们认为前端性能优化是一个非常严肃的话题理论，一定要结合实践并且量化分析才能去确定当前业务场景是否合适使用这样的性能优化点，不能去盲目优化，最终会得不偿失。所以我们是希望大家能更好地在这门课程中去理解前端性能优化的一个原理，然后原理结合实践去真正地在我们的业务中进行落地。
这门课程中我们主要将课程分为四部分：
这一部分是我们的基础优化，然后是我们的进阶优化，然后是我们结合服务端的优化。
在这三部分的内容讲完之后，我们会进行一个回顾和总结，对课程整体的内容进行一个把控，那么基础优化主要是我们的一些相对基础的一些优化点，比如说图片的编码原理，以及我们的代码中选择什么样的图片格式，我们如何进行资源的合并与压缩。
在进阶优化中主要涉及到一些比较深入的课题，比如说浏览器的渲染机制，在浏览器渲染层面我们如何进行优化？在重绘回流层面我们如何进行相关的浏览器渲染的优化，我们如何进行相关的浏览器端存储的选择和使用localstorage、cookiesessionstorage这些东西我们如何在浏览器端去合理的运用它，然后我们浏览器端以及结合服务端如何去做合适的缓存机制，这些都是在我们的进阶优化中会讲到的，我们结合服务端优化的话会结合我们的NODEjs去做我们的VoeSSR，去解决Voe这样的前端现代化框架，它的首屏渲染的问题，这是结合服务端优化我们要做的事情。
那么总体来说的话是分为这四部分，学习这门课的前提的话，其实并没有特别大的限制，因为这门课本身讲的内容它很多都是比较基础的，会涉及到很多前端知识原理的讲解。比如我们会讲解为什么我们要进行前端优化，这个不知道大家有没有思考过，但这个也是非常重要的，我们会讲解图片在前端是如何进行解码的，浏览器的渲染加载的过程到底是如何进行的，懒加载和预加载它的原理是什么样的，以及它们的应用场景是什么样的？我们会讲到PWA的相关原理，讲到VOESSR相关原理和实践，涉及到内容比较多，很多是和原理相关的，所以对于前端知识和性能优化感兴趣的同学都可以过来尝试学习。

课程截图：

课程目录：

workspace
9-3 服务端性能优化-3 .mp4
9-2 服务端性能优化-2 .mp4
9-1 服务端性能优化-1 .mp4
8-8 缓存8-实战2 .mp4
8-7 缓存7-实战1 .mp4
8-6 缓存6-流程图 .mp4
8-5 缓存5-案例解析 mp4
8-4 缓存4-Etag-If-None-Match.mp4
8-3 缓存3-Last-Modified-If-Modified-Since .mp4
8-2 缓存2 .mp4
8-1 缓存1.mp4
7-9 浏览器存储-IndexeDB-基础操作-创建打开、关闭删除 .mp4
7-8 浏览器存储-实战演练-cookie、 localstorge、sessionStorge.mp4
7-7 浏览器存储-案例解析 .mp4
7-6 浏览器存储-PWA与Service Workers.mp4
7-5 浏览器存储-Service Workers产生的意义 .mp4
7-4 浏览器存储-案例解析 .mp4
7-3 浏览器存储-IndexedDB .mp4
7-2 浏览器存储-LocalStorage、SessionStorage .mp4
SessionStorage .mp4
7-2 浏览器存储-LocalStorage、
7-13 浏览器存储-Service Workers-如何实现Service Workers主页面之间的通信 .mp4
7-12 浏览器存储-Service Workers-离线应用 .mp4
7-11 浏览器存储-IndexeDB-事务 ,mp4
7-10 浏览器存储-IndexeDB-基础操作 .mp4
7-1 浏览器存储-cookies .mp4
6-9 重绘与回流- 实战演练 3 .mp4
6-8 重绘与回流- 实战演练 2 .mp4
6-7 重绘与回流- 实战演练 1 .mp4
6-6 重绘与回流- 实战优化点总结.mp4
6-5 重绘与回流-案例解析- chrome 浏览器自动创建图层 layer .mp4
6-4 重绘与回流-案例解析-重绘、回流及图层 .mp4
6-3 重绘与回流-避免重绘回流的两种方法 .mp4
6-2 重绘与回流-什么是重绘与回流 .mp4
6-14 重绘与回流- 实战演练 8,9 .mp4
6-13 重绘与回流- 实战演练 7 .mp4
6-12 重绘与回流- 实战演练 6 .mp4
6-11 重绘与回流- 实战演练 5.mp4
6-10 重绘与回流- 实战演练 4 .mp4
6-1 重绘与回流-css 性能让 Javacript 变慢? .mp4
5-5 懒加载与预加载-预加载原生 js 和 PreloadJS 实现 .mp4
5-4 懒加载与预加载-懒加载原生 js 和 zepto .lazyload.mp4
5-3 懒加载与预加载-懒加载、预加载使用场景 .mp4
5-2 懒加载与预加载-预加载原理 .mp4
5-1 懒加载与预加载-懒加载原理 .mp4
4-4 .mp4
4-4 Css和is的装载与执行-CSs 阻塞和 is 阻.mp4
4-3 css和js的装载与执行-顺序执行、并发加载 .mp4
4-2 css和is的装载与执行-HTML 演染过程的一些特点.mp4
4-1 Css和js的装载与执行-HTML 页面加载迫染的过程 .mp4
3-7 图片相关的优化- 图片压缩实战(下) 雪碧图、svg .mp4
3-6 图片相关的优化- 图片压缩实战(上) webp、inline-image .mp4
3-5 图片相关的优化- 图片压缩案例分析.mp4
3-4 图片相关的优化- 图片压缩几种方法-雪碧图、Image inline.mp4
3-3 图片相关的优化- 不同格式图片常用的业务场景 .mp4
3-2 图片相关的优化- png8、png24、png32之间的区别.mp4
3-1 图片相关的优化- 一张]PG图片的解析过程 .mp4
2-8 资源合并与压缩-总结.mp4
2-7 资源合并与压缩-实战-fis3 构建工具自动压缩合并-实操.mp4
2-6 资源合并与压缩-实战-fis3 构建工具自动压缩合并-流程.mp4
2-5 资源合并与压缩-实战-在线工具压缩mp4
2-4 资源合并与压缩-文件合并.mp4
2-3 资源合并与压缩-css 及 js压缩,mp4
2-2 资源合并与压缩-html 压缩.mp4
2-1 资源合并与压缩-http 清求的过程及潜在的性能优化点.mp4
1-1 课程简介.mp4