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

Web前端性能优化

Vue-SSR+PWA 新技术，快速突破Web页面性能的瓶颈

已完结难度中级时长 12小时学习人数 1054 综合评分 9.93

报名人数已满该课程已出新版，查看新课 >>

从构建、浏览器渲染、缓存、PWA、服务端优化等多方面，梳理前端性能优化的技术点、综合分析技术的原理，根据不同的业务场景选择合适的性能优化点进行应用，最终为你的网站带来显著的速度提升和整体性能提升。

千迦

讲师

资深前端工程师

课程预览

检测到您还没有关注慕课网服务号，无法接收课程更新通知。请扫描二维码即可绑定

重新观看

100%前端开发者最想解决的网页加载问题

几乎所有的开发者都会面临着开发的网站存在加载问题，想要加快网页的加载速度
前端的页面更需要在性能优化上下功夫，只有这样才能实现更好的用户体验

用专业的技术排除你一直以来对网页性能的困扰

资源合并压缩、图片格式
及加载方式的优化
CSS和JS的装载与执行
重绘与回流
浏览器存储
PWA，缓存
SSR服务端渲染

构建层减少资源请求
的大小和数量
优化浏览器渲染提升
动画体验
显著提升网站
二次访问体验
首屏渲染性能优化

只需三步学会优化出高性能网站

真正理解每个细节的性能优化点与适用的场景，有效改善前端页面优化，极大提高页面加载效率

基础

构建层面

结合FIS3构建工具，自动化地进行资源的打包和压缩

图片层面

深入不同格式图片的编解码过程结合业务场景选择合适的图片格式：png、svg、webp

进阶

缓存

缓存相关的浏览器和服务端能力

浏览器渲染

Html、JavaScript 和 CSS 在浏览器端的加载机制、重绘与回流渲染树的生成

浏览器存储

LocalStorage、 Cookie、 IndexedDB、 sessionStorage PWA、 Service Worker

服务器: Vue-SSR

基于Node.js结合Vue-SSR和PWA实战，讲解Vue-SSR和
PWA的原理实现，核心解决Vue框架的首屏渲染问题

熟练运用前端性能优化的亮点技术

浏览器渲染

缓存机制

浏览器存储

PWA

Vue-SSR

改善前端页面优化的全过程

理论讲解: CSS和JS的装载与执行概述
懒加载与预加载原理分析
SSR（服务端渲染）原理

经典案例分析: Google
Facebook
手机淘宝

代码实战: 新闻网站

前端性能优化

学员专享增值服务

问答专区

讲师集中答疑

关于课程的问题都可在问答区随时提问，
讲师会进行集中答疑

源码开放

整套代码下载

课程案例代码完全开放给你，你可以根据
所学知识自行修改、优化

技术储备要求

至少有一个前端项目的开发经验，遇到发展瓶颈、想提升自己技术的同学
技术储备：
1、Html、CSS、JavaScript基础知识
2、Webpack、FIS等构架工具的使用经验
3、有Node.js开发经验
4、具备一定的自学能力

环境参数

语言 Javascript
框架 vue.js
操作系统不限

万事俱备只等你来

咖啡色的自由3984265

好评

课程体系结构不错，在每章节的知识点归纳的比较清楚，不过在讲解每个知识点的时候，全部都是以口头语言描述，我觉得如果在描述的过程中添加一些关键性的点，对于听课的人来学习和记录更有帮助，总之，课程还是很好的，能够学到很多实用的东西
回7

好评

课程覆盖得很全面，还提供了很多实例和工具网站，听老师的课学到了很多。而且老师的知识面很丰富，让我大开眼界，跟着这样的老师相信无论是技术、眼界还是思考问题的能力方面都能有很大的成长。以后老师出课程我还会继续支持的，老师一定要再出更多的课程，不要停！
梦回学堂

好评

老师深入浅出地从原理层面讲解Web前端性能优化的各个方面，解决了我困扰很长时间的web前端问题，让我更有自信地深入学习前端知识。这么良心的老师不多见。物超所值，必须给老师怒赞~O(∩_∩)O