解决前端性能瓶颈:高效处理大量数据渲染与复杂交互的策略与优化方法


✨✨祝屏幕前的小伙伴们每天都有好运相伴左右,一定要天天开心!✨✨ 
🎈🎈作者主页: 喔的嘛呀🎈🎈

目录

引言

一、分页加载数据

二、虚拟滚动

三、懒加载

四、数据缓存

五、减少重绘和回流

六、优化图片和资源:

七、合并压缩文件

八、使用Web Workers 


引言

在前端开发中,遇到需要渲染大量数据或者实现复杂交互的情况是很常见的。这些情况可能会导致页面加载缓慢或者交互体验不佳。下面是一些优化策略,可以帮助你解决这类问题:

一、分页加载数据

当需要展示大量数据时,将数据分页加载是一种常见的优化方法,可以减少首次加载时的数据量,提高页面加载速度和用户体验。以下是一个简单的示例代码,演示了如何使用JavaScript实现分页加载数据的功能:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>分页加载数据示例</title>
</head>
<body>
<div id="data-container"></div>
<button id="load-more-btn">加载更多</button><script>
const dataContainer = document.getElementById('data-container');
const loadMoreBtn = document.getElementById('load-more-btn');
let currentPage = 1;
const pageSize = 10; // 每页数据量// 模拟获取数据的函数,返回一个Promise对象
function fetchData(page) {return new Promise((resolve, reject) => {// 模拟异步请求数据setTimeout(() => {const data = [];for (let i = 0; i < pageSize; i++) {data.push(`Item ${(page - 1) * pageSize + i + 1}`);}resolve(data);}, 500); // 模拟延迟});
}// 加载更多数据的函数
async function loadMore() {const data = await fetchData(currentPage);if (data.length > 0) {// 渲染数据到页面data.forEach(item => {const itemElement = document.createElement('div');itemElement.textContent = item;dataContainer.appendChild(itemElement);});currentPage++;} else {loadMoreBtn.disabled = true; // 没有更多数据可加载时禁用按钮}
}// 初始化页面,加载第一页数据
loadMore();// 点击按钮加载更多数据
loadMoreBtn.addEventListener('click', loadMore);
</script>
</body>
</html>

在这个示例中,我们使用了一个fetchData函数来模拟异步请求数据的过程,每次请求返回一页数据。然后使用loadMore函数来加载更多数据,并将数据渲染到页面上。点击按钮时,会触发加载更多数据的操作,直到没有更多数据可加载为止。这样就实现了简单的分页加载数据的功能。

二、虚拟滚动

虚拟滚动是一种优化技术,用于处理大量数据的列表,在滚动时只渲染可见区域的数据,而不是渲染整个列表,从而提高页面的渲染效率。下面是一个使用JavaScript实现虚拟滚动的示例代码: 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>虚拟滚动示例</title>
<style>
#container {height: 300px; /* 可视区域高度 */overflow-y: scroll; /* 垂直滚动条 */border: 1px solid #ccc;
}.item {height: 50px; /* 每项高度 */line-height: 50px;border-bottom: 1px solid #ddd;text-align: center;
}
</style>
</head>
<body>
<div id="container" onscroll="handleScroll()"><div id="content" style="height: 5000px;"></div> <!-- 模拟大量数据 -->
</div><script>
const container = document.getElementById('container');
const content = document.getElementById('content');
const itemHeight = 50; // 每项高度
let visibleItemCount = Math.ceil(container.clientHeight / itemHeight); // 可见项数量
let start = 0; // 可见区域的起始索引// 更新可见区域的内容
function updateVisibleItems() {start = Math.floor(container.scrollTop / itemHeight);content.style.marginTop = start * itemHeight + 'px'; // 设置内容的marginTopcontent.style.marginBottom = (content.scrollHeight - (start + visibleItemCount) * itemHeight) + 'px'; // 设置内容的marginBottom
}// 滚动事件处理函数
function handleScroll() {updateVisibleItems();
}// 初始渲染可见区域的内容
updateVisibleItems();
</script>
</body>
</html>

在这个示例中,我们通过设置container元素的heightoverflow-y: scroll样式,创建了一个固定高度的可滚动区域。列表的实际内容由content元素表示,其高度为所有项的总高度。然后通过计算可见区域的起始索引start,并设置content元素的marginTopmarginBottom,实现了虚拟滚动的效果。只有可见区域的内容会被实际渲染,从而减少了不可见区域的渲染,提高了页面的渲染效率。

三、懒加载

懒加载是一种常见的优化技术,用于延迟加载页面中的图片、视频等资源,只有当它们进入用户的可视区域时才加载,从而减少了页面首次加载时的资源消耗,提高了页面的加载速度。下面是一个使用JavaScript实现图片懒加载的示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>懒加载示例</title>
<style>
img {width: 100%;height: auto;
}
</style>
</head>
<body>
<div id="container"><img data-src="image1.jpg" alt="Image 1"> <!-- 设置data-src属性存放真实图片地址 --><img data-src="image2.jpg" alt="Image 2"><img data-src="image3.jpg" alt="Image 3"><img data-src="image4.jpg" alt="Image 4"><img data-src="image5.jpg" alt="Image 5">
</div><script>
function lazyLoadImages() {const images = document.querySelectorAll('img');images.forEach(img => {const rect = img.getBoundingClientRect();if (rect.top < window.innerHeight && rect.bottom >= 0 && !img.src) {img.src = img.getAttribute('data-src'); // 加载真实图片}});
}function handleScroll() {lazyLoadImages();
}// 监听滚动事件
window.addEventListener('scroll', handleScroll);// 初始加载可视区域内的图片
lazyLoadImages();
</script>
</body>
</html>

在这个示例中,我们将真实的图片地址存放在data-src属性中,而src属性为空。当图片进入用户的可视区域时,通过getBoundingClientRect方法获取图片相对于视口的位置,如果图片的顶部已经进入可视区域且底部未超出可视区域,则将data-src属性的值赋给src属性,从而实现图片的懒加载。这样可以减少首次加载时对图片资源的请求,提高页面加载速度。

四、数据缓存

据缓存是一种常见的优化技术,可以减少重复请求,提高数据访问速度。下面是一个简单的示例代码,演示了如何使用JavaScript实现数据缓存的功能:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据缓存示例</title>
</head>
<body>
<button id="fetch-data-btn">获取数据</button>
<div id="data-container"></div><script>
const dataContainer = document.getElementById('data-container');
const fetchDataBtn = document.getElementById('fetch-data-btn');
let cachedData = null; // 缓存数据// 模拟获取数据的函数,返回一个Promise对象
function fetchData() {return new Promise((resolve, reject) => {// 模拟异步请求数据setTimeout(() => {const data = ['Data 1', 'Data 2', 'Data 3'];resolve(data);}, 500); // 模拟延迟});
}// 加载数据的函数
async function loadData() {if (!cachedData) {cachedData = await fetchData(); // 如果缓存数据为空,则从服务器获取数据}renderData(cachedData);
}// 渲染数据到页面
function renderData(data) {dataContainer.innerHTML = '';data.forEach(item => {const itemElement = document.createElement('div');itemElement.textContent = item;dataContainer.appendChild(itemElement);});
}// 点击按钮加载数据
fetchDataBtn.addEventListener('click', loadData);// 初始化页面,首次加载数据
loadData();
</script>
</body>
</html>

五、减少重绘和回流

减少重绘和回流是优化页面性能的重要策略之一。重绘(Repaint)是指重新绘制元素的外观而不改变其大小和位置,而回流(Reflow)是指重新计算元素的大小和位置,会导致整个页面布局的重新排列。这些操作都会消耗大量的计算资源,影响页面的性能。以下是一些减少重绘和回流的方法:

  1. 使用transformopacity代替topleft等属性transformopacity不会触发回流,可以用来移动元素或实现淡入淡出效果。

  2. 避免频繁操作样式:尽量一次性修改多个样式,而不是分开多次修改,可以减少重绘和回流的次数。

  3. 使用文档片段(DocumentFragment):在DOM操作时,可以先将要操作的元素添加到文档片段中,然后再一次性将文档片段添加到页面中,减少了多次操作DOM元素导致的重绘和回流。

  4. 批量修改样式:可以使用classList来添加、移除或切换多个类,而不是直接操作元素的className,这样可以减少重绘和回流。

  5. 避免强制同步布局(Forced Synchronous Layouts):在获取某些元素的布局信息(如宽高、位置等)时,会触发回流,可以通过getComputedStyle获取样式而不是直接访问offsetWidthoffsetHeight等属性来避免。

下面是一个简单的示例代码,演示了如何减少重绘和回流的操作:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>减少重绘和回流示例</title>
<style>
.box {width: 100px;height: 100px;background-color: red;transition: transform 0.3s ease; /* 添加过渡效果 */
}
</style>
</head>
<body>
<button onclick="moveBox()">移动盒子</button>
<div class="box"></div><script>
const box = document.querySelector('.box');function moveBox() {// 避免直接修改top和left属性,改为使用transformbox.style.transform = 'translateX(100px)';
}
</script>
</body>
</html>

在这个示例中,通过点击按钮移动盒子,使用transform属性而不是直接修改topleft属性,可以减少重绘和回流的次数,提高页面的性能。

六、优化图片和资源:

优化图片和其他资源是提高页面加载速度的重要步骤之一。通过压缩图片、使用适当的图片格式以及懒加载等方法,可以减少资源加载时间,提高用户体验。以下是一些优化图片和资源的常用方法:

  1. 压缩图片:使用图片压缩工具(如TinyPNG、ImageOptim等)对图片进行压缩,减小图片文件大小,加快加载速度。

  2. 使用适当的图片格式:根据图片内容选择适当的图片格式,如JPEG、PNG、WebP等。JPEG适用于照片和渐变色图片,PNG适用于图标和透明图片,WebP是一种现代的图像格式,支持有损和无损压缩,通常可以取得更好的压缩效果。

  3. 懒加载图片:对于页面中的图片,可以使用懒加载技术,只有当图片进入用户的可视区域时才加载,减少首次加载时的资源消耗。

  4. 使用CSS Sprites:将多个小图标合并成一个图片文件,并通过CSS的background-position属性来显示不同的图标,减少HTTP请求次数,提高加载速度。

  5. 延迟加载非关键资源:对于一些非关键的资源(如广告、统计代码等),可以延迟加载,等页面主要内容加载完毕再加载这些资源,提高页面加载速度。

  6. 使用CDN加速:使用内容分发网络(CDN)来加速图片和其他静态资源的加载,让用户从离他们更近的服务器获取资源,减少网络延迟。

下面是一个简单的示例代码,演示了如何使用懒加载技术加载图片:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>懒加载图片示例</title>
<style>
img {width: 100%;height: auto;
}
.placeholder {width: 100%;height: 200px; /* 设置一个占位高度,避免图片加载时页面布局抖动 */background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="container"><div class="placeholder"></div><img data-src="image.jpg" alt="Image">
</div><script>
function lazyLoadImages() {const images = document.querySelectorAll('img[data-src]');images.forEach(img => {const rect = img.getBoundingClientRect();if (rect.top < window.innerHeight && rect.bottom >= 0) {img.src = img.getAttribute('data-src'); // 加载真实图片img.removeAttribute('data-src');}});
}function handleScroll() {lazyLoadImages();
}// 监听滚动事件
window.addEventListener('scroll', handleScroll);// 初始加载可视区域内的图片
lazyLoadImages();
</script>
</body>
</html>

在这个示例中,我们将真实的图片地址存放在data-src属性中,而src属性为空。当图片进入用户的可视区域时,通过getBoundingClientRect方法获取图片相对于视口的位置,如果图片的顶部已经进入可视区域且底部未超出可视区域,则将data-src属性的值赋给src属性,从而实现图片的懒加载。这样可以减少首次加载时对图片资源的请求,提高页面加载速度。

七、合并压缩文件

合并和压缩CSS和JavaScript文件是优化页面加载速度的有效方法之一。合并文件可以减少HTTP请求次数,而压缩文件可以减小文件大小,从而提高文件加载速度。以下是一些常用的工具和技术来合并和压缩CSS和JavaScript文件:

  1. 使用构建工具:使用构建工具如Webpack、Gulp或Grunt等,可以方便地将多个CSS和JavaScript文件合并为一个文件,并对文件进行压缩处理。

  2. CSS压缩:可以使用工具如cssnano、CleanCSS等来对CSS文件进行压缩,去除空格、注释和不必要的代码,减小文件大小。

  3. JavaScript压缩:可以使用工具如UglifyJS、Closure Compiler等来对JavaScript文件进行压缩,去除空格、注释和不必要的代码,减小文件大小。

  4. 使用CDN:将合并和压缩后的文件托管到内容分发网络(CDN)上,可以加速文件的加载速度,提高用户访问网站的体验。

下面是一个简单的示例代码,演示了如何使用Gulp来合并和压缩CSS和JavaScript文件:

首先,安装Gulp及相关插件:

npm install gulp gulp-concat gulp-uglify --save-dev

然后,创建一个gulpfile.js文件,配置Gulp任务:

const gulp = require('gulp');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');// 合并压缩JavaScript文件
gulp.task('scripts', function() {return gulp.src('src/js/*.js').pipe(concat('all.min.js')).pipe(uglify()).pipe(gulp.dest('dist/js'));
});// 默认任务
gulp.task('default', gulp.series('scripts'));

在上面的示例中,我们定义了一个scripts任务,用于合并和压缩src/js目录下的所有JavaScript文件,并将结果保存为all.min.js文件到dist/js目录中。然后通过运行gulp命令来执行该任务。

需要注意的是,合并和压缩文件可能会影响代码的可读性和调试性,因此在生产环境中使用这些优化方法时,应该保留源文件的备份以便于调试。

八、使用Web Workers 

使用 Web Workers 可以在浏览器中运行脚本,这些脚本运行在与主线程分离的线程中。这样可以避免在主线程中执行复杂的计算任务,从而提高页面的响应速度。以下是一个简单的示例代码,演示了如何使用 Web Workers 来执行一个计算任务:

首先,创建一个名为 worker.js 的文件,内容如下:

// worker.js
self.addEventListener('message', function(e) {// 接收主线程传递过来的数据const data = e.data;// 模拟一个耗时的计算任务let result = 0;for (let i = 0; i < data; i++) {result += i;}// 向主线程发送计算结果self.postMessage(result);
});

然后,在主线程中,可以这样使用 Web Workers:

// main.js
let resultElement = document.getElementById('result');
let calculateBtn = document.getElementById('calculate');// 创建一个新的 Web Worker
let worker = new Worker('worker.js');// 监听 Web Worker 返回的消息
worker.addEventListener('message', function(e) {resultElement.textContent = e.data;
});// 监听计算按钮的点击事件
calculateBtn.addEventListener('click', function() {let number = document.getElementById('number').value;// 向 Web Worker 发送数据worker.postMessage(number);
});

 在这个示例中,当用户点击计算按钮时,主线程将用户输入的数据发送给 Web Worker,在 Web Worker 中执行耗时的计算任务,并将结果返回给主线程,最终在页面上显示出来。这样可以避免在主线程中执行耗时的计算任务,提高页面的响应速度。

通过以上优化策略,可以有效地提高页面的加载速度和交互体验,为用户提供更好的使用体验

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/798637.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

第十四届蓝桥杯c++组B组做题笔记

A题&#xff1a;日期统计&#xff1a; 【问题描述】 小蓝现在有一个长度为 100 的数组&#xff0c;数组中的每个元素的值都在 0 到 9 的范围之内。数组中的元素从左至右如下所示&#xff1a; 5 6 8 6 9 1 6 1 2 4 9 1 9 8 2 3 6 4 7 7 5 9 5 0 3 8 7 5 8 1 5 8 6 1 8 3 0 3 7 …

基本乐理(识别和构成和弦一)阅读记录一

和弦、 和弦是非常好听的&#xff0c;顾名思义。我现在阅读的书籍是《基本乐理》- 作者李重光&#xff0c;直接跳跃到第十九章进行阅读。 理解和弦 书中介绍对理解和弦的前提要素是要对音程要掌握。 如&#xff1a;大三度 如&#xff1a;小三度 如&#xff1a;纯五度 音程 音…

如何使用Java和RabbitMQ实现延迟队列?

前言 今天我们使用Java和RabbitMQ实现消息队列的延迟功能。 前期准备&#xff0c;需要安装好docker、docker-compose的运行环境。 需要安装RabbitMQ的可以看下面这篇文章。 如何使用PHP和RabbitMQ实现消息队列&#xff1f;-CSDN博客 今天讲的是依赖RabbitMQ的延迟插件实现…

Python---Numpy线性代数

1.数组和矩阵操作&#xff1a; 创建数组和矩阵&#xff1a;np.array, np.matrix 基本的数组操作&#xff1a;形状修改、大小调整、转置等 import numpy as np# 创建一个 2x3 的数组 A np.array([[1, 2, 3], [4, 5, 6]]) print("数组 A:\n", A)# 将数组 A 转换为矩阵…

SpringBoot项目打包和部署

目录 1.插件 2.打包 3.运行 1.插件 此插件会在pom中自动添加 <build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></bu…

HTML:HTML事件汇总

html事件是用户和页面交互的一些效果 &#xff0c;用户通过点击&#xff0c;触摸等等方式更新数据&#xff0c;页面在加载完成之后的交互效果就需要通过触发事件来完成&#xff0c;事件大概分为&#xff0c;鼠标事件&#xff0c;窗口事件&#xff0c;表单事件&#xff0c;键盘事…

Golang 创建一个简单的内存池

内存池主要作用是减少内存分配和释放的开销&#xff0c;提高程序的性能和效率。内存池通过预先分配一块较大的内存区域&#xff0c;然后将这块区域分割成多个小块&#xff0c;用于存储特定类型的数据。这样&#xff0c;当程序需要分配内存时&#xff0c;可以直接从内存池中获取…

深入了解 JavaScript 中的 Promise 相关方法:all、race 和 allSettled

在 JavaScript 开发中&#xff0c;处理异步操作是很常见的需求。随着 ECMAScript 6&#xff08;ES6&#xff09;的引入&#xff0c;Promise 成为了处理异步操作的主要方式之一。而在 Promise 的方法中&#xff0c;Promise.all()、Promise.race() 和 Promise.allSettled() 是一些…

【软考】23种设计模式详解,记忆方式,并举例说明

23种设计模式详解&#xff0c;举例说明 一、创建型模式1.1、抽象工厂模式&#xff08;Abstract Factory&#xff09;1.1.1、简介1.1.2、意图与应用场景1.1.3、结构1.1.4、优缺点1.1.4、示例代码&#xff08;简化版&#xff09; 1.2、建造者模式&#xff08;Builder&#xff09;…

c++的学习之路:16、string(3)

上章有一些东西当时没学到&#xff0c;这里学到了将在补充&#xff0c;文章末附上代码&#xff0c;思维导图。 目录 一、赋值重载 二、带模板的创建 三、析构函数 四、代码 五、思维导图 一、赋值重载 这里的赋值重载就是直接利用交换函数进行把传参生成的临时数据和需要…

【iOS】UITableView性能优化

文章目录 前言一、优化的本质二、卡顿产生原因三、CPU层面优化1.使用轻量级对象2.cellForRowAtIndexPath方法中不要做耗时操作3.UITableView的复用机制4.提前计算好布局了解tableView代理方法执行顺序cell高度计算rowHeightestimatedRowHeight 高度计算进行时机rowHeight计算时…

基于Spring boot+Vue的业余排球俱乐部会员管理系统

5 系统功能模块的具体实现 5.1超级会员角色 5.1.1 登录 超级管理员登录通过用户名和密码去数据库查询用户表&#xff0c;该名称是否在用户表中存在&#xff0c;如果存在&#xff0c;则通过用户名和密码查询密码是否正确&#xff0c;然后吧用户的信息存在jwt的负载里&#xf…

【CicadaPlayer】demuxer_service的简单理解

G:\CDN\all_players\CicadaPlayer-github-0.44\mediaPlayer\SMPMessageControllerListener.cppplayer的demuxer服务类 std::unique_ptr<demuxer_service> mDemuxerService{nullptr};根据option (Cicada::options),可以决定音视频的不同操作,通过 hander可以获得具体使…

探究“大模型+机器人”的现状和未来

基础模型(Foundation Models)是近年来人工智能领域的重要突破&#xff0c;在自然语言处理和计算机视觉等领域取得了显著成果。将基础模型引入机器人学&#xff0c;有望从感知、决策和控制等方面提升机器人系统的性能&#xff0c;推动机器人学的发展。由斯坦福大学、普林斯顿大学…

Deepin20.9下用docker安装oracle12c企业版

1.下载oracle的docker镜像制作工具 链接URL&#xff1a; https://github.com/oracle/docker-images/archive/refs/heads/main.zip 或 https://codeload.github.com/oracle/docker-images/zip/refs/heads/main 下载docker-images-main.zip 解压至目录~/下。 2.下载oracle12c安…

【Linux】在 Linux 上进行网络测速

文章目录 内网节点间测速(iperf3)公网测速(speedtest) 内网节点间测速(iperf3) iperf3是一种网络性能测试工具&#xff0c;它可以测量TCP和UDP数据传输的带宽、延迟、抖动等指标。要使用iperf3&#xff0c;你需要在两台计算机上安装这个工具&#xff0c;一台作为服务器&#x…

AI推介-多模态视觉语言模型VLMs论文速览(arXiv方向):2024.03.31-2024.04.05

文章目录~ 1.Know Your Neighbors: Improving Single-View Reconstruction via Spatial Vision-Language Reasoning2.DeViDe: Faceted medical knowledge for improved medical vision-language pre-training3.Is CLIP the main roadblock for fine-grained open-world percept…

目标检测YOLO实战应用案例100讲-基于特征融合和预测细化的遥感图像目标检测

目录 前言 国内外研究现状 传统遥感目标检测方法 基于模板匹配的方法

Redis中的Sentinel(六)

Sentinel 选举领头Sentinel. 当一个主服务器被判断为客观下线时&#xff0c;监视这个下线主服务器的各个Sentinel会进行协商&#xff0c;选举出一个领头Sentinel,并由领头 Sentinel对下线主服务器执行故障转移操作。以下是Redis选举领头Sentinel的规则和方法: 1.所有在线的S…

display grid 概要

display grid 概要 Grid 基本概念: 什么是 CSS Grid 布局&#xff1f; CSS Grid 布局是一个二维布局系统&#xff0c;允许开发者创建复杂的网格布局&#xff0c;这是一个在行和列上同时控制布局的方法。 Grid 布局与 Flexbox 有什么不同&#xff1f; 与 Flexbox 相比&#xff…