性能优化是一个前端必然会面对的问题。前端技术日新月异,优秀的性能优化方案在近几年也层出不穷。本课程,我会带你使用当今行业中非常前沿&专业的方案,解决前端性能优化问题。
性能永远是第一需求 能够解决性能问题的人才永远是香饽饽
只要比别人掌握更多的性能优化方案,你就比别人更有竞争力
项目越大,对性能要求越高
企业级项目标配
大厂项目,性能永远是第一需求没有做性能优化的项目,都不是企业级的
中高级开发者能力标准
懂性能才能对技术更理解
不懂性能优化,永远成不了高级工程师每一个技术,背后的原理一定和性能有关联
世界500强架构师,拿出压箱底前端性能优化方案
大牛总结性能优化方案用了10年,而你只需要这一门课
性能优化的指标和工具
性能指标和
优化目标
RAIL测量模型
WebPageTest评估
网站性能
使用LightHouse
分析性能
使用Chrome DevTools
分析性能
常用的性能测量APIs
渲染优化
现代浏览器网页渲染原理——大厂面试考点
深入了解关键渲染路径,减少回流与重绘
防止布局抖动(Layout Thrashing)
GPU加速避免重绘,加速页面呈现
代码优化
JS的开销&缩短JS解析时间&JS代码优化
前端修仙之路 - V8编译原理
HTML优化-前端必知必会
CSS优化-现代优化方案
资源优化
资源的合并与压缩
图片格式的选择: JPG vs PNG vs WebP
图片加载优化: 懒加载、渐进式图片、响应式图片
字体优化
构建优化
webpack的优化配置
webpack的依赖优化
基于webpack的代码拆分/资源压缩/资源持久化缓存
React按需加载实现方式
传输加载优化
必学必会: Gzip& Keep Alive
HTTP资源缓存
Service Worker 实现渐进式应用
HTTP/2加速传输
SSR加速渲染
前沿优化解决方案
拯救移动端图标 – SVG/Flexbox优化布局
优化资源加载的顺序/预渲染页面
Windowing(窗口化)提高列表性能
使用骨架组件减少布局移动(Layout Shift)
性能优化---晋级提升的尚方宝剑
前端的流行技术的“内幕”+技术背后的优秀设计思想+一线大厂正在使用的前沿解决方案
世界500强架构师
带来大师级性能优化思维
测量工具+解决方案(专业!)
了解行业性能标准,针对性解决
详解性能优化大厂方案
学完拿去用在自己的项目中
对比学生实例
看到性能解决方案之间的差距
搞定性能优化面试问题
互联网公司面试点+实际应用
学习大牛思维
提高能力的捷径就是跟随大牛
适合人群
1-3年开发经验的前端开发者
初入社会的毕业生
技术储备要求
HTML/CSS/JS基础
基本的Webpack, React, Node.js知识