网站性能优化

1. 资源合并：

   1. 减少http请求数量
   2. 减少请求资源大小
   3. html压缩
   4. js压缩
   5. 文件合并

2. 图片相关优化

   1. 业务场景：
      1. jpg-大部分不需要透明图片的场景
      2. png-大部分需要透明图片的场景
      3. webp-安卓全部
      4. svg矢量图-图片样式相对简单的业务场景
   2. 使用css精灵图优化
      1. 原理：将多个小图标使用精灵图技术拼接成一张大图，图片请求只需要一次就可以完成
   3. Image inline
      1. 将图片的内容内嵌到html当中（将图片转为base64编码加载）
      2. 减少http请求数量
   4. 使用矢量图：
      1. 使用SVG进行矢量图的绘制
      2. 使用iconfont解决icon问题
   5. 在安卓下使用webp图片格式
       

3. 缓存优化

   1. 浏览器缓存：
      1. 强制缓存
         1. 初次发送请求时，浏览器会向服务器发起请求，服务器收到浏览器请求后，返回资源中有一个Cache-Control给客户端，Cache-Control一般用来设置缓存最大的时间。当浏览器再次发送请求时，判断Cache-Control是否过期，如果没有过期，直接从缓存中拉去资源。
      2. 协商缓存
         1. 当强制缓存过期后，进入协商缓存；在第一次给浏览器发送请求时返回一个Etag和Last-Modified，浏览器会使用If-None-Match，并且保存在浏览器的请求头中，之后发送请求时，服务器会判断If-None-Match是否与自己最后一次修改的Etag相等，如果相等，则返回304，表示数据并未修改，如果不相等，则返回200，并返回新的资源和新的Etag值。
   2. 应用缓存：
      1. 实现应用级别缓存，用户在无网络情况下也能访问应用程序？
      2. 如何实现应用缓存?
         1. 在需要缓存的地方，先判断是否有缓存，如果有缓存读取显示，继续调用接口更新缓存数据
         2. 使用请求拦截器将数据缓存到本地，利用find方法查询时更新缓存数据还是添加缓存数据

         3. // 保存应用缓存
            export const cache = (url: string, data: any) => {
                const cache = localStorage.getItem('CACHE-DATA') || '[]'
                const cacheList = JSON.parse(cache)
                const obj = {name: url, content: data}
                if(cacheList) {
                    const cacheItem = cacheList.find((item: any) => item.name === url)
                    if(cacheItem) {
                        cacheItem.content = data
                    } else {
                        cacheList.push(obj)
                    }
                } else {
                    cacheList.push(obj)
                }
                localStorage.setItem('CACHE-DATA', JSON.stringify(cacheList)) 
            }
            
            
            // 获取应用缓存
            export const getCache = (url: string) => {
                const cacheList = JSON.parse(localStorage.getItem('CACHE-DATA') || '[]')
                const cacheItem = cacheList?.find((item: any) => item.name == url )
                return cacheItem.content
            }
            

4. 减少重排与重绘

   1. 使用translate替代top
   2. 使用opacity替换visibility
   3. 不要一条一条地修改 DOM 的样式，预先定义好 class，然后修改 DOM 的 className
   4. 把 DOM 离线后修改，比如：先把 DOM 给 display:none (有一次 Reflow)，然后你修改100次，然后再把它显示出来
   5. 不要把 DOM 结点的属性值放在一个循环里当成循环里的变量
   6. 不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局
   7. 动画实现的速度的选择
   8. 对于动画新建图层
   9. 启用硬件GPU加速

5. 第一次加载访问比较慢，出现白屏问题解决方案

   1. 组件按需引入
   2. 路由懒加载
   3. 开启浏览器gzip压缩
   4. 应用程序使用script加载第三方包减少主包，异步下载第三方包