【前端】-【性能优化常识】

本文探讨了前端性能优化的关键指标,如首屏速度和白屏时间,强调了减少首屏资源体积、按需引入和使用tree-shaking的重要性。文章还介绍了异步加载(如prefetch和script)的区别,以及如何通过切片思想优化大量数据的滚动加载和el-table的渲染性能。
摘要由CSDN通过智能技术生成

前端性能优化指标

首屏速度、白屏时间

在这里插入图片描述
页面一打开的白屏时间,主要是由资源加载(耗时多)、JS执行造成的,在这段时间里,如果没有做骨架屏的话,页面都是白屏。JS执行完成后,已经知道页面要渲染什么了(此时页面已经能看到一些东西了,但是还不能看到完整的页面),就开始渲染页面,进行数据请求和DOM渲染

性能优化

收效很大的操作:减少首屏资源体积
  • 打包工具的压缩:webpack、vite的压缩,如webpack的tree-shaking

参考资料:webpack+vite前端构建工具全掌握

  • 异步加载:体积较大但又不是马上就需要的功能适合做异步加载,比如图片压缩功能使用了一个很大的第三方库,但该功能只在上传图片且选择选择了压缩时才会被用到,这一场景使用的第三方库很大且该功能和首屏渲染无关,可能用户都不会用这个功能,所以该功能的所有代码可以做异步加载
  • 更新为体积更小的新版本:有些老版本的库不支持tree-shaking,更新为新版本就支持了,比如xlsx0.1.2版本不支持按需引入,体积会很大,而换成最新版本就支持,可以大大减少体积

手段:按需引入配合tree-shaking可以极大的减少代码体积,一一排查项目中老版本的库,把他们升级为可以支持tree-shaking的新版本的库,优化了项目体积,加快首屏渲染

  • 能不用第三方库就不用第三库:如果只用到少量方法,尽量自己写,比如时间格式化的方法自己写可能就1k代码,没必要为了这一个方法引入一个库进来
  • 编写代码尽量减少体积:代码写得简洁

手段:将项目中使用了第三方库的工具方法改成自己写,优化重构代码,使代码精简,因此减少代码体积

  • 去除大的base64体积:打包工具会默认将小图标转成base64,这就相当于图片的体积计入JS或CSS里了,但是如果没有配置好,会将大图片也转成base64,图片(img标签)不会影响首屏的加载,因为图片(img标签)的加载不会阻塞页面的渲染,也就是DOM结构会先出来,再慢慢加载图片,所以,打的图片或者媒体资源都不要转base64。
收效不大或者特殊情况的优化操作
  • 首屏数据尽量并行,如果可行让小数据量接口合并到其他接口:
    (1)非必须不要等上一个接口请求完毕后再发下一个接口,尽量并行调用接口
    (2)如果一个接口只返回一个很小的字符串,如果后端业务允许的话,可以将其合并到其他接口中。接口请求的时间包括数据传输和三次握手的的时间,传输数据多了接口肯定会慢,为了一点点数据还要进行三次握手实属没必要。
  • 页面包含大量dom可以分批随滚动渲染:和虚拟滚动、大数据量加载是一个思想

参考视频:
el-table大数据量渲染

  • 骨架屏,loading,先让屏幕不白,减少用户焦虑:有时因业务场景要求,实在是无法减少体积,加快速度了,做骨架屏和loading遮罩,让用户先看到一些东西

操作速度、渲染速度

造成操作卡顿和渲染慢的场景

  • 一次性操作大量dom
  • 进行了复杂度很高的运算(常见于循环)
  • vue和react项目中,不必要的渲染太多

性能优化

  1. 一次性操作大量dom:和前面一样,分批渲染,虚拟滚动,切片渲染等
  2. 不进行复杂度很高的运算:循环中的操作尽量精简(其实意义不大)
  3. vue和react的渲染性能优化:
    (1)频繁切换的显隐的内容用v-show也就是display来控制隐藏,只有打开就一次性决定显示与否的用v-if不去创建
    (2)循环,动态切换内容加好key值
    (3)keep-alive缓存
    (4)区分请求粒度,减少请求范围,也能减少更新:修改了数据,要请求接口,只请求所涉及的接口,其他接口不请求

手段:很多增删改查操作后,更新页面时会一股脑的把所有接口请求一遍,对其进行重构

数据缓存

  1. 谨慎缓存接口数据。只有不变数据,定期时效可以缓存在cookies或者localstorage中,比如token,用户名等
  2. 对于接口数据,可以考虑做一个缓存队列存于内存中(全局对象,vuex)。这样能保证刷新就更新数据,也能一定程度上缓存数据

参考资料:axios二次封装

补充知识

异步加载

首屏速度影响最大的决定性因素是资源的加载速度,资源的加载速度=资源大小+网速,资源大小影响的方面有:

  1. 压缩:打包;传输时gzip压缩
  2. 一部分代码分割出来做异步加载,需要的时候再加载
  3. 写代码尽量精简

加载方式一:prefetch加载

page3异步加载的代码会从App.js中拆分出来,单独作为一个js,并为其标记prefetch,而同步加载的代码会放在App.js中,vendor中存放同步加载代码使用到的第三方库
在这里插入图片描述
异步加载就是用import方法引入,about页面做的就是异步加载,home页面做的同步加载
在这里插入图片描述
当有多个prefetch的时候,可以使用webpackPrefetch为每个设置优先级,优先级越高(数字越大)越先加载,其中,webpackPrefetch:true等同于webpackPrefetch:0
在这里插入图片描述

加载方式二:script加载

在这里插入图片描述
vue3已经内置了webpack配置,所以我们需要手动关闭prefetch配置,在vue.config.js中添加以下代码:
在这里插入图片描述

两种方式的对比和思考

  1. script加载:
    (1)做到了充分按需引入,用到的时候再加载,不用则永不加载,充分节省了带宽
    (2)最大的问题在于,切换需要等待,体验不是很流畅
  2. prefetch加载:
    (1)充分利用使用者不占用带宽的浏览时间,切换到异步加载的页面是可能已经加载好了,用户体验更流畅
    (2)一些本次行为不会打开的页面也会加载,一定程度上浪费了带宽
    (3)使用该方式需考虑流量的问题,比如说移动端使用该方式需考虑手机流量

优化经验

  1. 使用按需引入(函数式版本):针对老项目,检查第三方库,有没有可以换成按需引入的库
    按需引入代码:import { read } from 'xlsx';
  2. 在组件mounted阶段再引入库,或者用到这个功能时再引入
    请添加图片描述

切片思想优化项目

一、切片的思想:如果一个长时间运行的js操作,可能会阻塞浏览器的渲染,这样我们页面就看不到反应,导致长时间白屏,或者页面不展示任何效果。如果这个长时间的js操作无法缩短,那么我们可以把操作切成一片的,先操作一片,把结果交给页面去渲染,渲染完成之后去操作下一片。

这种思想类似于,工厂要造很多东西,一次性造出来很慢,那么可以造一件卖一件。

二、实现:可以使用requestAnimation实现这一想法,requestAnimation类似于settimeout,requestAnimation定义的任务会在浏览器渲染完成后去执行,所以我们只需要把每个切片放到requestAnimation,他执行完一个后,会等着浏览器渲染完成再执行下一个
三、示例代码:假如页面要一次性展示5万条数据,可以将没500条数据切片并返回给
请添加图片描述
示例代码:全选功能,500个500个的选
在这里插入图片描述
其实我们要优化项目,不只是追求绝对得速度提升,我们在无法进一步提升速度得前提下,可以想办法让体验更好。比如切片思想,对一些操作做异步加载,这些操作对于整体速度都没有提升,但是我们通过合理安排执行顺序,可以让体验更好。再举个例子,一个页面要画大量得echart,同事绘制太慢,所以先画一个,渲染完成再画下一个

el-table加载大量数据如何利用滚动加载优化

一、需求:假如我们用el-table加载500条数据:

  1. 渲染速度下降,内容展示慢
  2. 如果有操作,操作会卡顿

二、方案:
请添加图片描述
我们想把很多东西提取出来给团队复用,我们一定要把这个东西做的开箱即用,用户需要写的东西越少越好,所以其实针对这种涉及dom监听、操作相关的复用,自定义指令是最好的方案
三、思路:

  1. 思路:
    请添加图片描述缺点:越往下滑,数据越多,滑到最后对所有数据进行操作的时候还是会卡顿
  2. 思路:
    请添加图片描述
    在main.js中封装:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import elementui from "element-ui"
Vue.config.productionTip = false
Vue.use(elementui);

Vue.directive("myscroll", {
  //
  bind(el, bind, vnode) {
    const self = vnode.context;// this
    let target = el.querySelector(".el-table__body-wrapper");

    target.addEventListener("scroll", () => {
      //检测触底
      /*if (target.scrollTop + target.clientHeight >= target.scrollHeight) {
        if (self.over >= self.dataList.length) {
          return;
        }
        self.over += 15;
      }*/
      //设置table
      setTimeout(() => {
        const _table = target.querySelector("table");
        _table.style.paddingTop = self.padding[0] + "px";
        _table.style.paddingBottom = self.padding[1] + 50 + "px";// +50是为了设置缓冲区
        self.tableHeight = target.clientHeight// 滚动时获取每条数据的高度,不在mounted中获取是因为在mounted中数据还没加载进来,当然
        self.scrollTop = target.scrollTop
      }, 200)
    })
  }
})
//mounted
Vue.mixin({
  data() {
    return {
      scrollTop: 0,
      tableHeight: 300
    }
  },
  computed: {
    start() {
      return Math.max(this.scrollTop / 40 - 5, 0);// -5可能超出数组最小长度,所以取最大值
      // -5是为了缓冲,不能让用户刚好滚动到这里时才开始加载。这里相当于还有5条滚完本页就开始加载下一页的数据,下面的+5也是一个道理
    },
    over() {
      return Math.min((this.scrollTop + this.tableHeight) / 40 + 5, this.dataList.length)// +5可能超出数组的最大长度,所以取最小值
    },
    // 实时计算上下非滚动区内容的高度,如果不计算的话,会导致无法滚动,不计算的话,相当于内容区就是可视区那么高,所以页面无法滚动
    padding() {
      let paddingBottom = (this.dataList - this.over) * 40;
      let paddingTop = this.start * 40;
      return [paddingTop, paddingBottom]
    }
  },
})
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

在html中使用:

<template>
  <div id="app">

    <el-table v-myscroll height="300" :data="dataList.slice(start, over)">
      <el-table-column prop="name" label="商品名">
      </el-table-column>
      <el-table-column prop="price" label="价格">
      </el-table-column>
      <el-table-column prop="count" label="数量">
      </el-table-column>
    </el-table>

  </div>
</template>
<script>
import axios from "axios"
export default {
  data() {
    return {
      dataList: [],
      file: null,
    }
  },
  methods: {

  },
  mounted() {









    setTimeout(() => {
      let _arr = [];
      for (let i = 0; i < 200; i++) {
        _arr.push({
          name: "电脑" + i,
          price: 1000 + 10 * i,
          count: i + 10
        })
      }
      this.dataList = _arr
      // 如果想在mounted中获取每条数据的高度,需要在数据获取到之后的nextTick中
      this.$nextTick({})
    }, 1000)
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 600px;

}

.el-table__row {
  height: 40px;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}

.el-table__body-wrapper {
  overflow-y: scroll;
  border: 1px solid red;
  overflow-x: hidden;
}
</style>

  • 19
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值