JS和CSS的压缩与混乱
1. 无效字符删除
2. 剔除注释
3. 代码语义缩减和优化
4. 代码优化（代码不易看懂）
图片相关优化
- 雪碧图
- svg > webp > png > jpg
- 图片压缩
- inline-image
浏览器对同一个域名的并发加载数量有限制，所以通常静态资源需要多个cdn域名
CSS的link放在header中，js的script放到body最后
一次加载过多资源的时候，可以对图片进行懒加载，需要体验图片加载0ms响应的话，可以使用预加载，预加载有几种方式，ajax请求/image load/img src display: none ajax通常有跨域问题，因为资源文件都是放在cdn上的，所以会进行降级处理
重绘和回流通常会影响性能，所以对于频繁重绘和回流的元素要进行分层，常用的制造layer的方式有：transform: translateZ(0) / will-change: transfrom
layer不能滥用，需要结合实际业务场景，否则过多的layer反而会影响页面的加载
根据业务情况，使用浏览器存储功能
1. cookie
2. localstorage + sessionstorage
3. indexdb
4. pwa + service worker
service worker的功能：
1. http请求的拦截，可以用cookiestorage做静态资源缓存，在无网络情况下，页面也可以展示，做离线页面
2. 与主线程通信，在service worker中执行耗时的任务，执行完成后，把执行结果传回主线程，传回主线程页面的时候，可以通过client区分页面
-- 陆续更新中