前端性能优化

1、加载优化（减少http请求）

• • 合并图片（精灵图、雪碧图合并为一张大图）
  • 合并压缩css样式表和js脚本
  • 减少不必要的请求
  • 懒加载（loading、layload）
  • 使用长缓存
  • 异步加载第三方资源
  • 首屏加载

1.  路由懒加载【首屏资源减少45%+】

• import metricGroup from "@/views/metricGroup/index.vue"
  const routes = [    
      // good    
      { 
          path: "/", 
          name: "home",      
           // 通过webpackChunkName设置分割后代码块的名字      
          component:  () => import(/* webpackChunkName: "home" */ "@/views/home/index.vue")    
       },   
       
        // bad    
       { 
          path: "/metricGroup", 
          name: "metricGroup",      
          // 传统引入      
          component: metricGroup,     
       }, 
  ] 
  // 注：原理是不同模块分包，按需加载
  

2、组件懒加载【首屏资源减少10%+】

• // 传统引入
  import xxxdialog from '@/components/xxxdialog'
  
  // 通过webpackChunkName设置分割后代码块的名字
  const dialogInfo = () => import(/* webpackChunkName: "dialogInfo" */ '@/components/dialogInfo');
  export default {  
      name: 'homeView',  
      components: { dialogInfo，xxxdialog }
   }  
   
      /**  
      * 注：三种适合组件懒加载的场景：  
      * * 1）该页面的 JS 文件体积大，导致页面打开慢，可以通过组件懒加载进行资源拆分，利用浏览器并行下载资源，提升下载速度（比如首页）  
      * * 2）该组件不是一进入页面就展示，需要一定条件下才触发（比如弹框组件）  
      * * 3）该组件复用性高，很多页面都有引入，利用组件懒加载抽离出该组件，一方面可以很好利用缓存，同时也可以减少页面的 JS 文件大小（比如表*格组件、图形组件等）  
      * */
  

3、tree-shaking【首屏资源减少5%+】

• // 消除无用的 JS 代码，减少代码体积
  // util.js
  export const targetType= (target) => Object.prototype.toString.call(target).slice(8, -1).toLowerCase()
  
  export const  deepClone = (target) => JSON.parse(JSON.stringify(target))
  
  // xxx.vue
  // 可以减少引入js文件大小
  
  import { targetType } from '../util';
  targetType('xxasasd')
  
  // 不可以减少引入文件大小
  import util from '../util';
  util.targetType(null)
  

4、骨架屏【白屏时间缩短80%+】

• SPA 单页应用，vue/react的 html 都是空白的，需要通过加载 JS 将内容挂载到根节点上，这套机制的副作用：会造成长时间的白屏​骨架屏插件:基于在项目打包时将骨架屏的内容直接放到 html 文件的根节点中
  

5、长列表虚拟滚动(只渲染可视区域的列表项，非可见区域不进行渲染)

2、资源加载优化

1、异步加载js文件（async、defer）

2、延迟加载图片

3、使用CDN三种方法

3、页面渲染优化

1、减少重绘、重排

•     重排：当Dom的变化影响了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，（几何大小和位置发生变化）

•     重绘：当元素的外观被改变，不会引起布局（宽高）变化而重新渲染

•     重排一定会触发重绘，重绘不一定会触发重排

2、 减少对Dom的操作

3、高效使用html标签和css样式

4、代码优化

1、代码重用

2、避免全局变量（命名空间、封闭空间、模块化mvc）

3、函数拆分（单一职责原则）

• 适当注释
• 内存管理

好了今天的内容到这里就结束，感谢观看，欢迎投稿