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

Web前端性能优化

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

让你页面速度飞起来 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

查看全部292条用户评价
提问
数据加载中...
意见反馈 帮助中心 APP下载
官方微信

学习咨询

选课、学习遇到问题?

扫码添加指导老师 1V1 帮助你!

添加后老师会第一时间解决你的问题