虚拟表格和懒加载有什么区别

简介: 虚拟表格和懒加载有什么区别

虚拟表格和懒加载都是前端优化技术,用于提高大量数据渲染的效率和性能。

虚拟表格是一种通过只渲染可视区域内的数据而不是所有数据来提高渲染性能的方法。它可以大大减少需要加载的DOM元素数量,从而提高了渲染速度和响应时间。当用户滚动页面时,虚拟表格会自动加载新的数据以确保可视区域内的数据始终处于最新状态。这种技术通常用于处理庞大的数据集,如数千行的表格或列表。

懒加载是一种在需要时动态加载数据的技术。它允许页面在加载时只加载必要的数据,而不是所有内容。当用户向下滚动页面时,更多的数据将动态加载以确保用户能够浏览整个页面。这种技术通常用于处理包含大量图片或视频的网站,以加速页面加载速度和减少带宽消耗。

以下是示例代码:

虚拟表格:

<div class="table">
  <div v-for="(item, index) in visibleData" :key="index">{{ item }}</div>
</div>
data() {
  return {
    data: [/*长数组*/],
    visibleData: []
  }
},
computed: {
  tableHeight() {
    return this.$refs.table.clientHeight;
  },
  itemHeight() {
    return this.$refs.table.children[0].clientHeight;
  },
  visibleCount() {
    return Math.ceil(this.tableHeight / this.itemHeight) + 1;
  }
},
mounted() {
  this.updateVisibleData();
},
methods: {
  updateVisibleData() {
    this.visibleData = this.data.slice(0, this.visibleCount);
  },
  handleScroll() {
    const scrollTop = this.$refs.table.scrollTop;
    const start = Math.floor(scrollTop / this.itemHeight);
    this.visibleData = this.data.slice(start, start + this.visibleCount);
  }
},

懒加载:

<div class="gallery">
  <div v-for="(image, index) in images" :key="index">
    <img v-if="image.loaded" :src="image.url" />
    <div v-else>
      <div class="placeholder"></div>
    </div>
  </div>
</div>
data() {
  return {
    images: [
      { url: 'url1.jpg', loaded: false },
      { url: 'url2.jpg', loaded: false },
      { url: 'url3.jpg', loaded: false },
      // more images...
    ]
  }
},
mounted() {
  this.lazyLoad();
  window.addEventListener('scroll', this.lazyLoad);
},
beforeDestroy() {
  window.removeEventListener('scroll', this.lazyLoad);
},
methods: {
  lazyLoad() {
    const windowHeight = document.documentElement.clientHeight;
    this.images.forEach(image => {
      if (!image.loaded) {
        const rect = image.el.getBoundingClientRect();
        if (rect.top < windowHeight) {
          image.loaded = true;
          const img = new Image();
          img.src = image.url;
          img.onload = () => {
            image.el.children[0].src = image.url;
          }
        }
      }
    });
  }
}
目录
相关文章
|
3月前
|
前端开发 JavaScript 索引
前端性能优化:虚拟滚动技术原理与实战
前端性能优化:虚拟滚动技术原理与实战
424 80
|
10月前
|
JavaScript 前端开发
vue2的响应式数据原理
`Object.defineProperty` 是 Vue 2 实现响应式数据的核心方法,通过定义 getter 和 setter 来追踪属性的变化。当访问或修改属性时,会触发相应的函数,从而实现数据的动态更新。本文介绍了该方法的基本用法、响应式原理及其简单实现,展示了如何通过监听属性变化来自动更新视图,体现了前端框架设计中的巧妙之处。
188 1
|
SQL 监控 Oracle
DynaTrace应用监控工具安装说明V1.0
DynaTrace是一款应用监控工具,通过安装服务器端、客户端和代理,可以监测应用系统性能并快速定位故障,同时提供用户响应时间和事务处理过程的详细报告。
212 0
|
关系型数据库 MySQL 网络安全
Docker-compose 运行MySQL 连接不上
mysqld: [Warning] World-writable config file '/etc/mysql/conf.d/my.cnf' is ignored.、MySQL 连接不上、MySQL8、docker-compose、docker
614 0
Docker-compose 运行MySQL 连接不上
|
编解码 Java Linux
开源文档预览项目 kkFileView (9.9k star) ,快速入门
kkFileView 是一款文件文档在线预览解决方案,采用流行的 Spring Boot 框架构建,易于上手和部署。 该项目基本支持主流办公文档的在线预览,包括但不限于 doc、docx、xls、xlsx、ppt、pptx、pdf、txt、zip、rar,以及图片、视频、音频等格式。
1235 6
开源文档预览项目 kkFileView (9.9k star) ,快速入门
|
SQL 关系型数据库 MySQL
使用mysql数据库的binlog应对故障
【6月更文挑战第1天】本文介绍`mysql的 binlog`工具用于解析MySQL的二进制日志,转换为可执行的SQL语句,主要用于数据库主从复制和增量恢复。定期备份和binlog推送能实现故障时的数据恢复。
483 9
使用mysql数据库的binlog应对故障
|
传感器 JavaScript 前端开发
TypeScript高频面试题汇总
大家好,我是 CoderBin,本次总结了关于TypeScript的一些高频面试题,希望对大家有所帮助,谢谢。 如果文中有不对、疑惑的地方,欢迎在评论区留言指正🌻
2571 1
TypeScript高频面试题汇总
|
前端开发 Serverless Shell
函数计算操作报错合集之遇到错误信息为HandlerNotFound,该怎么办
在使用函数计算服务(如阿里云函数计算)时,用户可能会遇到多种错误场景。以下是一些常见的操作报错及其可能的原因和解决方法,包括但不限于:1. 函数部署失败、2. 函数执行超时、3. 资源不足错误、4. 权限与访问错误、5. 依赖问题、6. 网络配置错误、7. 触发器配置错误、8. 日志与监控问题。
336 0
Visual paradigm社区版下载及中文菜单的设置
Visual paradigm社区版下载及中文菜单的设置
519 0
|
Java Maven Windows
一个命令解决maven依赖下载失败后无法重新下载依赖的问题-批量删除repository库目录下所有后缀名是.lastUpdated的文件
一个命令解决maven依赖下载失败后无法重新下载依赖的问题-批量删除repository库目录下所有后缀名是.lastUpdated的文件
1036 0