性能优化的方案

一般来说。性能优化没什么系统化的文档供人学习。完全靠一些经验和自己的实践。

我们常提到性能好坏是由什么来衡量呢？

• 访问页面地址 --> 页面首次加载数据 --> 渲染出完整页面的时长
• 非首次情况下，命中缓存的加载缓存数据 --> 渲染出完整页面的时长。

一般我从下面几个方面着手去做，一般问题都不大。

减小资源（静态资源，后端加载的数据）大小

• 压缩代码HTML/CSS/JS
• 压缩图片、音视频大小
• Tree-Sharking 消除无用代码

避免同一时间的过多次数请求

• CSS 实现雪碧图：使用background-position共享一张图
• 图片懒加载：监听滚动后offsetTop, 使用data-src 替换 src（真实路径）
• 列表懒加载（分批加载）：监听滚动后offsetTop， 发送请求加载下一页的数据
• 路由懒加载
• 代码分包分块加载 (truck)
• 预加载技术

利用缓存（空间换时间）

• CDN 内容分发：获取更近网络节点缓存下来的静态资源
• 浏览器缓存

其他

• SSR 服务端渲染：解决SPA框架带来JS动态渲染页面带来的延迟和白屏问题。