什么是前端性能优化
通常来讲，前端性能优化是指：从用户开始访问网站到整个页面完整地展现出来的过程中，通过各种优化策略和优化方法，让页面加载得更快，让用户的操作相应更及时，给用户更好的使用体验。
前端性能优化全过程
1、静态资源优化
静态资源优化包括html、css、js、图片等资源的性能优化。包括：
- 图片的应用场景和使用
- html、css、js的具体优化策略
- 资源文件的优化：比如文件压缩合并策略、打包方案、版本号更新方案
- 前端工程化工具等。
2、页面渲染架构设计及相关的技术方案选型
按照技术方案的分类，包括：
- 前后端分离技术
- SPA单页应用
- BigPipe
- 同构直出
- PWA
- 页面加载策略
- 接口服务调优、接口缓存策略
- 大型网站背后的实际性能优化案例
- 前端组件化、模块化，加速业务开发
3、原生App优化、混合开发优化
- 浏览器的整体优化方案。比如导航条、登录态、滚动条优化等。
- 前端缓存策略和优化
- H5静态资源请求代理的技术原理
- H5离线技术，达到页面秒开的目标
- 混合式开发解决方案
- RN、小程序、flutter等
4、服务端与网络优化
- CDN 和 DNS 优化
- 如何减少 http 请求数、减少cookie大小
- nginx缓存配置和优化
- 开启和配置 gzip 压缩
- 如何开启全站 https
- 升级 Http2.0 的好处和方法
5、研发流程优化
- 技术调用的方法
- 前后端接口约定、加快前后端接口联调
- 前端自动化测试
- 自动化部署和上线
- 从研发的整体流程层面梳理出提升研发效率的方式和方法。
6、全链路质量监控体系建设
主要是对性能优化的结果进行衡量、打分、考核：
- 上线前，页面质量及时检测
- 上线后，页面性能和错误监控
- 线上运行时，页面的可用性监控
- 愿生App的性能和错误监控
前端性能优化包括哪些方面
1、性能优化指标与测量工具
- 性能测量指标
- 性能监控工具：了解性能情况，并对比
2、渲染优化
- 现代浏览器的渲染原理
- 可优化的渲染环节和方法
3、代码优化
- JS优化：了解JS的开销、解析、优化方案，以及如何配合V8引擎做更有效的优化。
- html优化
- css优化
4、资源优化
- 压缩合并
- 图片格式
- 图片加载
- 字体优化
5、构建优化
- webpack 优化配置
- 代码拆分
- 代码压缩
- 持久化缓存
- 监测与分析
- 按需加载
6、传输和加载优化
- gZip
- KeepAlive
- HTTP缓存
- Service Worker
- HTTP/2
- SSR 服务端渲染
- Nginx
7、更多主流优化方案
- SVG 优化图标
- FlexBox 布局
- 预加载
- 预渲染
- 窗口化提高列表性能
- 骨架屏
