前端BootstrapTable组件不同使用方法的效率各有差异
本人需要解决的问题（#需求）
设备端批量发送数据过来，数据已按照特定字段进行排序，现在本人需要按照传过来的数据动态更新表格，表格的显示区域有限制
因为一些原因，最终确定使用 Bootstrap Table 组件实现该功能
遇到的问题（#问题）
使用 bootstrapTable('load', {data: data})进行数据更新时，无法使用滚动条。每次刷新滚动条都会恢复到滚动条顶部（即无法滑动滚动条，体验很差）
使用 bootstrapTable('updateRow', {index : updateIndex, row : showRow}) 动态维护数据时，占用CPU太多（30%+），导致 浏览器的IndexedDB数据库无法使用等问题
使用 bootstrapTable('updateByUniqueId', {id: id, row : showRow}) 动态维护数据时，占用CPU太多（30%+），导致 浏览器的IndexedDB数据库无法使用等问题
测试前端页面（#基本页面）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Jquery 引用 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<!-- bootstrap && bootstrap-table -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>
</head>
<body>
<div id="table-wrapper">
<table id="table"
data-toggle="table"
data-show-columns="true"
data-height="300"
data-unique-id="uid"
>
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>
</div>
<script>
// 解决思路代码放在该处
var $table = $('#table');
var times = 0;
var total = 0;
var maxTotal = 0;
function refresh(){
// 问题代码
}
$(function() {
setInterval(() =>{refresh();}, 2000);
});
</script>
</body>
</html>
本人使用的基本思路
测试时的数据对象基本对象结构为 { 'id' : id, 'uid' : uid, 'name' : name, 'price' : price}
生成空对象的方法如下
function generateRow()
{
var result = {
'id' : 0
, 'uid' : 0
, 'name' : ''
, 'price' : ''
};
return result;
}
Mock数据生成方法如下
function generateData()
{
var data = [];
let len = 20 + Math.floor(Math.random() * 30);
for(let i = 0; i<len; i++)
{
let id = total + i + 1;
data.push({
'id' : id
, 'uid' : (i+1)
, 'name' : 'Item' + id
, 'price' : '$' + id
});
}
return data;
}
问题一 实现代码
function refresh()
{
var data = generateData();
total += data.length;
// 动态更新数据
$table.bootstrapTable('load', data);
}
问题录屏
无法正确使用滚动条
内存占用率
问题二 实现代码
function refresh()
{
var data = generateData();
var len = data.length;
total += len;
let updateIndex = 0;
// 动态更新数据
for(; updateIndex<maxTotal; updateIndex++)
{
let showRow = updateIndex<len ? data[updateIndex] : generateRow();
$table.bootstrapTable('updateRow', {
index : updateIndex
, row : showRow
});
}
// 插入数据
for(;updateIndex<len; updateIndex++)
{
$table.bootstrapTable('insertRow',
{
index : updateIndex
, row : data[updateIndex]
});
}
maxTotal = maxTotal >= len ? maxTotal : len;
}
问题截屏
CPU占用过高
问题三 实现代码
function refresh()
{
var data = generateData();
var len = data.length;
total += len;
let updateIndex = 0;
// 动态更新数据
for(; updateIndex<maxTotal; updateIndex++)
{
let showRow = updateIndex<len ? data[updateIndex] : generateRow(updateIndex);
$table.bootstrapTable('updateByUniqueId', {
id : updateIndex
, row : showRow
});
}
// 插入数据
for(;updateIndex<len; updateIndex++)
{
$table.bootstrapTable('insertRow',
{
index : updateIndex
, row : data[updateIndex]
});
}
maxTotal = maxTotal >= len ? maxTotal : len;
}
问题截屏
CPU占用过高
最后的解决方法
在问题一的基础上，外面嵌套 一层div，在这层 div中增加css属性固定该div的高度，不用 bootstrapTable 的 data-height进行高度固定。
#table-wrapper {
height : 400px;
overflow : scroll;
}
建议
问题结论，使用 load 直接刷新加载 数据不会费太多CPU资源；使用动态 update 表格 刷新数据会导致CPU占用过高。建议使用 bootstrapTable直接 load 数据刷新界面。
能够使用CSS解决的问题，尽量别用JS。过程中走了弯路，经验教训
测试文件
文件下载地址： 在此下载
前端BootstrapTable组件不同使用方法的效率各有差异的更多相关文章
- 基于AngularJS的个推前端云组件探秘
基于AngularJS的个推前端云组件探秘 AngularJS是google设计和开发的一套前端开发框架,帮助开发人员简化前端开发的负担.AngularJS将帮助标准化的开发web应用结构并且提供了针 ...
- WebIM技术---编写前端WebSocket组件
过去我们想要实现一个实时Web应用通常会考虑采用ajax轮循或者是long polling技术,但是因为频繁的建立http连接会带来多余的请求以及消息精准性的问题,让我们在实现实时Web应用时头疼不已 ...
- 关于微信小程序前端Canvas组件教程
关于微信小程序前端Canvas组件教程 微信小程序Canvas接口函数 上述为微信小程序Canvas的内部接口,通过熟练使用Canvas,即可画出较为美观的前端页面.下面是使用微信小程序画图的一些 ...
- IVIEW组件的render方法在Table组件中的使用
后端项目地址:https://gitee.com/wlovet/table-server 前端项目地址: https://gitee.com/wlovet/table-project 一.Rende ...
- 基于Vue的前端UI组件库的比对和选型
大家好,我是张飞洪,感谢您的阅读,我会不定期和你分享学习心得,希望我的文章能成为你成长路上的垫脚石,让我们一起精进. 由于录制视频的需要,要做前端UI组件库的选型.平时国内外也见了不少基于Vue的UI ...
- 测试数组push和unshift方法的效率
先贴代码,之后再来补内容 <!DOCTYPE HTML> <html> <head> <title>测试数组push和unshift方法的效率</ ...
- win10 64位专业版系统中显示32位dcom组件配置的方法
word.excel是32位的组件,当用户64位系统在运行窗口中输入dcomcnfg命令时,在打开的组件服务管理窗口,是找不到Microsoft Excel.word程序的.另外,Windows 环境 ...
- 清空StringBuilder的三种方法及效率
清空StringBuilder的三种方法及效率 大家知道对于字符串频繁拼接是使用stringbuilder.Append方法比使用string+=方法效率高很多,但有时需要清空stringbuilde ...
- 对 COM+ 组件进行了方法调用，但该组件有一个已被中止的或正在被中止的事务。 (异常来自 HRESULT:0x8004E003)
错误: 对 COM+ 组件进行了方法调用,但该组件有一个已被中止的或正在被中止的事务. (异常来自 HRESULT:0x8004E003) 解决办法: 程序连接的数据库换到本地. 具体原因没搞 ...
随机推荐
- Python 送你一棵圣诞树
Python 送你一棵圣诞树 2019-01-02阅读 8800 今天是圣诞节,先祝大家圣诞快乐!??? 有人要说了,圣诞节是耶稣诞生的日子,我又不信基督教,有啥好庆祝的.这你就有所不知了,Pyt ...
- gcc 版本
$ gcc --versiongcc (Ubuntu 5.4.0-6kord1~16.04.4k2) 5.4.0 20160609Copyright (C) 2015 Free Software Fo ...
- Python-名片管理器
# 需要完成的基本功能: # 添加名片 # 删除名片 # 修改名片 # 查询名片 # 退出系统 # 程序运行后,除非选择退出系统,否则重复执行功能 list_info = [] # 创建一个空列表 # ...
- 通过Maven打jar包&运行
运行命令:java -jar [包名] https://www.cnblogs.com/jinjiyese153/p/9374015.html
- .Net Core gRPC 实战(二)
概述 gRPC 客户端必须使用与服务相同的连接级别安全性. 如调用服务时通道和服务的连接级别安全性不一致,gRPC 客户端就会抛出错误. gRPC 配置使用HTTP gRPC 客户端传输层安全性 ( ...
- python操作mongodb根据_id查询数据的实现方法
python操作mongodb根据_id查询数据的实现方法 python操作mongodb根据_id查询数据的实现方法,实例分析了Python根据pymongo不同版本操作ObjectId的技巧, ...
- nginx 重定向到系统维护页面
上周末兄弟项目准备扩展服务器以便提供更好的服务,兄弟项目有一些功能是实时提供到我这边的,需要我这边暂时把对应系统功能屏蔽,因为使用nginx,所以可以直接配置nginx重定向到固定系统维护页面. ng ...
- 点云配准的端到端深度神经网络：ICCV2019论文解读
点云配准的端到端深度神经网络:ICCV2019论文解读 DeepVCP: An End-to-End Deep Neural Network for Point Cloud Registration ...
- 2020年Yann Lecun深度学习笔记（下）
2020年Yann Lecun深度学习笔记(下)
- Geo-CNN的三维点云
Geo-CNN的三维点云 Modeling Local Geometric Structure of 3D Point Clouds using Geo-CNN 摘要 深度卷积神经网络(CNNs)的最 ...