1. html压缩 css压缩 js压缩
2. 图片优化方案
JPG 是有损压缩的一种格式
png8 256色 + 支持透明
png24 2^24色 + 不支持透明
png32 2^24色 + 支持透明
2.1 图片使用场景
- jpg有损压缩，压缩率高，==不支持透明==
- png==支持透明==，浏览器兼容性好
- webp压缩程度更好，具有更好的图像数据压缩算法，体积更小，效果非常优秀。在iOS webview有兼容问题
- svg 矢量图，代码内嵌，相对较小，图片样式相对简单的场景
2.2 图片相关优化
- 图片压缩
- css雪碧图：减少请求（问题：导致图片过大加载慢，要是加载没加载进来，整个页面都会失去图片信息），要进行拆分。
- Image inline （bs64）：将图片的内容内嵌到html中，不用发送请求（问题：大小会变大，一般小于8kb时候使用）
- 使用svg，不用发送请求（iconfont）
2.3 图片懒加载
- 图片进入可视区域之后请求图片资源
- 减少无效的资源请求
- 并发加载的资源过多会阻塞js的加载，影响网站的正常使用
2.4 渐进式图片
2.5 响应式图片
- img标签
- picture标签
<img src="url" sizes="50vw" srcset="url1 100vw, url2 200vw" />
3. 字体优化
- 字体为下载完成时，浏览器隐藏或自动降级，导致字体闪烁
- Flash of invisible text
- Flash of unstyled text
3.1 使用font-display 控制字体行为
- auto
- block： 3s之前不显示，在3s之内没下载好字体，会使用默认字体先展示，等字体下载完再替换
- swap： 在字体下载完成之前使用默认字体，字体下载完成后，使用下载好的字体
- fallback: 100ms之前不显示，在100ms之内没下载好字体，会使用默认字体先展示，等字体下载完再替换
- optional: 100ms之前不显示，然后判断网络情况。网络好就使用下载的字体，不好的话就是用默认的，一旦做好选择就不会替换。
3.2 使用ajax + base64（不推荐）
-
解决兼容问题
-
缺点：缓存问题
