Vue2 - 延迟加载(requestAnimationFrame实现)+ 效果展示

这篇具有很好参考价值的文章主要介绍了Vue2 - 延迟加载(requestAnimationFrame实现)+ 效果展示。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1,背景

当一个页面需要加载较多个组件时,并且组件自身又比较复杂。如果一次性加载,可能等待时间较长,体验不好。

一种解决办法:分批次的来渲染子组件。

2,实现

通过 requestAnimationFrame(callback) 实现,同时能够控制按照指定顺序来渲染

简单理解为:浏览器会按照一定的频率来重绘页面,大概 60次/s。每次重绘前都会执行 callback 函数。这样的话,我们可以在每次重绘前都只渲染一个组件,来实现组件的延迟加载。

示例代码:

2.1,延迟加载的核心代码

通过 mixin 来实现。大致逻辑:

  1. 首先会传入一个最大重绘次数。
  2. 定义一个计数当前重绘次数的变量,每次调用 callback 时自增,重绘次数达到最大则结束 requestAnimationFrame 的执行。
  3. 定义一个方法,参数为指定的顺序,返回值用于判断组件是否展示。
    比如 v-if="deferItem(5)" 表示浏览器第5次重绘时渲染该组件。
export default function defer(maxFrameCount) {
  return {
    data() {
      return {
        frameCount: 0,
      };
    },
    mounted() {
      const refreshFrame = () => {
        requestAnimationFrame(() => {
          this.frameCount++;
          if (this.frameCount < maxFrameCount) {
            refreshFrame();
          }
        });
      };
      refreshFrame();
    },
    methods: {
      deferItem(showFrameCount) {
        return this.frameCount >= showFrameCount;
      },
    },
  };
}

2.2,模拟的复杂组件

子组件内部有 20000 个元素需要渲染,来模拟复杂的组件。

<template>
  <div class="container">
    <div v-for="n in 20000" class="item"></div>
  </div>
</template>

<script></script>
<style scoped>
.container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 300px;
  height: 300px;
}

.item {
  width: 5px;
  height: 5px;
  background-color: #eee;
  margin: 0.1em;
}
</style>

2.3. 父组件

模拟渲染 25 个复杂子组件。

<template>
  <div class="container">
    <div v-for="n in 25" :key="n" class="wrapper">
      <HeavyComp v-if="deferItem(n)" />
    </div>
  </div>
</template>

<script>
import HeavyComp from "./components/HeavyComp.vue";
import defer from "./mixins/defer";
export default {
  components: {
    HeavyComp,
  },
  mixins: [defer(25)],
};
</script>
<style scoped>
.container {
  display: flex;
  flex-wrap: wrap;
}
.wrapper {
  border: 1px solid salmon;
}
</style>

3,效果

Vue2 - 延迟加载(requestAnimationFrame实现)+ 效果展示,vue2,前端,vue.js,延迟加载,性能优化


requestAnimationFrame 相关解释

以上。文章来源地址https://www.toymoban.com/news/detail-824311.html

到了这里,关于Vue2 - 延迟加载(requestAnimationFrame实现)+ 效果展示的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue2+Echarts+SpringBoot+Websocket+Scheduled实现大屏图表数据实时展示

    近期在学习websocket的相关技术,用于做前后端的数据实时交互,结合网上资料和个人理解,整理了一个小白入门案例,不喜勿喷!!!!! WebSocket是HTML5下一种新的协议(websocket协议本质上是一个基于tcp的协议) 它实现了浏览器与服务器全双工通信,能更好的节省服务器资源

    2024年02月20日
    浏览(52)
  • JavaScript、Vue实现大数据大屏展示3D旋转动画效果

    最近在写一些数据大屏的时候客户需要做个3D旋转动效的效果,简单整理之后写了一个小demo做下记录,先看一下效果: 当点击next的时候,整个模块旋转切换到下个菜单,点击prev的时候也可以切换到上一个菜单效果。 首先我们先构建一个大体的dom结构,如下: 编写基本的css样

    2024年02月11日
    浏览(37)
  • vue实现弹出框内嵌页面展示,添加tab切换展示实时加载

    最近做业务的时候,发现产品的原型图上有一个弹出框,上面包含了两个窗口要进行切换。 每个窗口都有分页列表展示、搜索、添加和删除,感觉就是两个完整的页面,如果全写在一个页面会很麻烦,还可能会出现一系列的问题,后期改起来比较麻烦,所以我就准备分开来写

    2024年02月16日
    浏览(36)
  • vue2+three.js实现类似VR、3D全景效果

    效果图: 俩图标是我自己加的前进后退按钮,也是百度了好久,再加上GPT的帮助,才给搞出来。因为需求急,都不看官方文档,百度到一个能跑的demo之后改吧改吧,就先用着了。 下面是代码: 这里 代码有很多用不到的地方和需要优化的地方,我是来不及改了,就先这样吧

    2024年02月15日
    浏览(49)
  • 若依前后端分离+Vue2+Element UI实现根据列数据展示不同页面的数据

    多个表格中存在同一字段,并且可通过该字段查到与之对应的数据。举个简单的例子,比如我有一个学生表、一个老师表、一个课程表,假设老师表和学生表里都有课程ID这一字段,那么我可以在课程表里通过课程ID来,查找需要上这门课的学生,以及教这门课的老师,并且在

    2024年01月19日
    浏览(46)
  • vue3 实现简单计数器示例——一个html文件展示vue3的效果

    目的 :作为一个新手开发,我想使用 Vue 3 将代码封装在 HTML 文件中时,进行界面打开展示。 学了一个简单计数器界面展示,代码如下: 在 上述HTML 文件里,包含了文件头标题 title , 接着定义了一个内容 div id=\\\"app\\\" 而后定义了一个内容,包含标题和数字,以及两个按钮的 templa

    2024年01月18日
    浏览(41)
  • vue2+three.js+blender(实现3d 模型引入并可点击效果)

    2023.9.13今天我学习了如何把3d建模里面的模型引入到vue中,并可以实现拖动,点击的效果: 首先安装: npm install three 相关代码如下:  如果没有图片可以去 Three.js--》建模软件如何加载外部3D模型?_threejs加载3d模型_亦世凡华、的博客-CSDN博客

    2024年02月03日
    浏览(61)
  • 【vue2】element-ui el-transfer扩展 实现多列效果一对多

    vue2 el-transfer 穿梭框实现多类别 template 复制Transfer源码中的template,并拓展我们需要的列表2和button script 这里重写了Transfer的addToLeft方法,按着element-ui的逻辑写出第二个列表的逻辑即可。源码就不做解释了,这个组件比较简单,感兴趣的朋友可以去看看 style GitHub地址

    2024年02月08日
    浏览(59)
  • Vue2 + element ui el-select 远程搜索分页懒加载功能实现

    新建指令 :         1、 在 src 目录下 新建文件夹 directive / loadmore         2、在 loadmore 文价夹下新建 elSelectLoadmore.js 和 index.js 文件:            elSelectLoadmore.js index.js 3、在main 文件中注册该指令 4、 基于 el-select 封装 懒加载 远程搜索框 remoteSelect.vue 组件提示

    2024年01月21日
    浏览(50)
  • vue2组件库:表格数据展示通用页面

    2024年02月11日
    浏览(32)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包