性能优化

页面渲染

减少页面重绘（repaint）和回流（reflow）

回流：计算可见节点的位置和几何信息
重绘：重新绘制节点，将渲染树的每个节点都转换成屏幕上的实际像素

通过修改className来批量修改元素样式
复杂的动画元素要脱离文档流，定位设置成absoult或者fixed，避免回流
不使用table布局，table元素一旦触发回流就会导致其中所有其他元素都回流
DOM元素上下移动用translate
需要创建多个节点时，使用DocumentFragment文档片段一次性创建
减少层级较深的选择器，提高css渲染效率
大量修改某元素样式时，可先用display:none隐藏,修改完在设置block，这样只会造成两次回流

图片压缩、图片分割、精灵图

图片压缩：如果没有自带压缩功能的话，可以在tinypng网站压缩
图片分割：不允许压缩的图片，可以使用分割，再用css拼接到一起
精灵图：通过background-position来定位要使用的小图片，后期不好维护

字体包压缩

字体包过大会阻塞页面渲染，可以使用font-spider字蛛将要使用到的文字提取处理

懒加载/预加载资源

懒加载：当图片出现在浏览器的可视区域才让图片显示出来（此前可用同一张1*1px的图片占用）
js
```
    offsetTop - scrollTop  <= innerHeight  //判断出现在可视区域
```

预加载：

    <link rel = 'dns-prefetch'>  
    <link rel = 'preconnect'>  
    <link rel = 'prefetch'>  
    <link rel = 'preload'>  
    <link rel = 'prerender'>

不要过度使用预加载，因为会消耗访问者的流量

打包优化

webpack优化resolve.alias配置和resolve.extensions配置(vite同理)
- resolve.alias配置通过别名来将原导入路径映射成一个新的导入路径，可以减少查找过程，也优化了使用
- resolve.extensions代表后缀匹配列表，列表尽可能要小，不存在的情况不要放在尝试列表中，并且高频率的放前面，做到尽快退出，自己在导入的时候，如果确定也可以自己把后缀加上
  js
```
    resolve :{
      extensions:['.js','.vue','.json']，
      alias: {
        'vue$' : 'vue/dist/vue.esm.js',
        '@' : resolve('src')
        '@variable' : resolve('src/common/theme/default/variable.less') //即简化使用，又减少查找过程
      }
    }
```

webpack缩小loader范围

loader是很消耗性能的一个点，在配置的时候，可以使用include和except来缩小loader执行范围

  {
    test: /\.svg$/,
    loader: 'svg-sprite-loader',
    include: [resolve('src/icons')]
  }     
  {
    test: /\.js$/,
    loader: 'babel-loader',
    include: [resolve('src')，resolve('test'),resolve('mock'),resolve('node_modules/@ares-vue-base')]         
  }

split chunks代码分包
tree shaking(摇树)清除项目中的无用代码

vite关闭一些打包配置项

  build:{
    terserOptions:{
      compress:{
        drop_console:true,
        drop_debugger:true //生产环境移除console
      }
    }，
    reportCompressedSize:false，//关闭文件计算    
    sourcemap：false//关闭生产map文件，可以达到缩小打包体积
  }

总体优化

SSR服务端渲染
- SSR就是渲染过程在服务端完成，最终的渲染结果HTML页面通过HTTP协议发送给客户端，又叫同构
- SSR的好处就是SEO和首屏加载速度大大提高
开启Gzip压缩
- Gzip对文件进行压缩，能提高首屏加载速度，对于纯文本文件我们可以至少压缩到原来的40%，图片最好不要用
- productionGzip设置为true
Brotli算法压缩
缓存
- 浏览器缓存、CDN、反向代理、本地缓存、分布式缓存、数据库缓存
- 对于静态资源文件实现强缓存和协商缓存（扩展:文件有更新，如何保证及时刷新?）
- 对于不经常更新的接口数据采用本地存储做数据缓存（扩展: cookie / localStorage / vuex|redux区别?）
组件按需引入

动态加载

    if(location.host !== '正式环境域名'){
      import('@/utils/vconsole')//非生产环境引入vconsole
    }

组件异步加载

    () => import('@/pages/xxx.vue')    //import懒加载   
    resolve => require(['@/pages/xxx.vue'],resolve) //使用require

路由懒加载

    {
      path:'/index',
      name:'index',
      component:() => import('@view/xxx.vue') //或者require(['@view/xxx.vue'],resolve)
      meta:{ title:'首页' }
    }

cdn内容分发
- 即内容分布网络，静态文件、音频、视频、js资源、图片都可以放CDN上，访问资源时，会请求重定向到离用户最近的服务节点
域名发散（域名收敛）
- 将同一站点下的静态资源分布在不同域名下
- 可以突破浏览器的并发限制，浏览器针对同一个域名内资源请求的并发数量有限制（防止DDOS攻击）
- 可以节省cookie带宽，与主域名不同，对于静态资源的请求不需要携带cookie
- 更方便CDN缓存
DNS预解析
- 当你的网站第一次请求某个跨域域名时，需要先解析该域名
web worker

性能优化 ​

页面渲染 ​

打包优化 ​

总体优化 ​

性能优化

页面渲染

打包优化

总体优化