本人需要解决的问题（#需求）

设备端批量发送数据过来，数据已按照特定字段进行排序，现在本人需要按照传过来的数据动态更新表格，表格的显示区域有限制

因为一些原因，最终确定使用 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组件不同使用方法的效率各有差异的更多相关文章

  1. 基于AngularJS的个推前端云组件探秘

    基于AngularJS的个推前端云组件探秘 AngularJS是google设计和开发的一套前端开发框架,帮助开发人员简化前端开发的负担.AngularJS将帮助标准化的开发web应用结构并且提供了针 ...

  2. WebIM技术---编写前端WebSocket组件

    过去我们想要实现一个实时Web应用通常会考虑采用ajax轮循或者是long polling技术,但是因为频繁的建立http连接会带来多余的请求以及消息精准性的问题,让我们在实现实时Web应用时头疼不已 ...

  3. 关于微信小程序前端Canvas组件教程

    关于微信小程序前端Canvas组件教程 微信小程序Canvas接口函数 ​ 上述为微信小程序Canvas的内部接口,通过熟练使用Canvas,即可画出较为美观的前端页面.下面是使用微信小程序画图的一些 ...

  4. IVIEW组件的render方法在Table组件中的使用

    后端项目地址:https://gitee.com/wlovet/table-server 前端项目地址:  https://gitee.com/wlovet/table-project 一.Rende ...

  5. 基于Vue的前端UI组件库的比对和选型

    大家好,我是张飞洪,感谢您的阅读,我会不定期和你分享学习心得,希望我的文章能成为你成长路上的垫脚石,让我们一起精进. 由于录制视频的需要,要做前端UI组件库的选型.平时国内外也见了不少基于Vue的UI ...

  6. 测试数组push和unshift方法的效率

    先贴代码,之后再来补内容 <!DOCTYPE HTML> <html> <head> <title>测试数组push和unshift方法的效率</ ...

  7. win10 64位专业版系统中显示32位dcom组件配置的方法

    word.excel是32位的组件,当用户64位系统在运行窗口中输入dcomcnfg命令时,在打开的组件服务管理窗口,是找不到Microsoft Excel.word程序的.另外,Windows 环境 ...

  8. 清空StringBuilder的三种方法及效率

    清空StringBuilder的三种方法及效率 大家知道对于字符串频繁拼接是使用stringbuilder.Append方法比使用string+=方法效率高很多,但有时需要清空stringbuilde ...

  9. 对 COM+ 组件进行了方法调用，但该组件有一个已被中止的或正在被中止的事务。 (异常来自 HRESULT:0x8004E003)

    错误: 对 COM+ 组件进行了方法调用,但该组件有一个已被中止的或正在被中止的事务. (异常来自 HRESULT:0x8004E003)   解决办法: 程序连接的数据库换到本地.   具体原因没搞 ...

随机推荐

  1. 【转载】linux 设备管理器 图形hardinfo 字符 lshw lspci

    在ubuntu中怎样启动类似windows中的 设备管理器 sudo apt-get install hardinfo lspci sudo lshw everestubuntu下的"设备管 ...

  2. 对狂神说的MybatisPlus的学习总结

    1.什么是MybatisPlus? 需要的基础:spring,spring mvc,mybatis 作用:可以节省大量的工作时间,所有的CRUD代码都可以自动完成,简化Mybatis MyBatis- ...

  3. .Net Core gRPC 实战(二)

    概述 gRPC 客户端必须使用与服务相同的连接级别安全性.  如调用服务时通道和服务的连接级别安全性不一致,gRPC 客户端就会抛出错误. gRPC 配置使用HTTP gRPC 客户端传输层安全性 ( ...

  4. Locust入门

    Locust入门   Locust是一款Python技术栈的开源的性能测试工具.Locust直译为蝗虫,寓意着它能产生蝗虫般成千上万的并发用户: Locust并不小众,从它Github的Star数量就 ...

  5. Go语言网络通信---一个简单的UDP编程

    Server端: package main import ( "fmt" "net" ) func main() { //创建udp地址 udpAddr, _ ...

  6. VB 老旧版本维护系列---迷之集合- ArrayList

    迷之集合- ArrayList '定义一个字符串 Dim dataType_ImageStr As String = "2023,2091,2092,2096,2212" '将字符 ...

  7. python_selenium 之logging模块入门及调用实战

    一.logging模块是什么? 是Python内置的标准模块,主要用于输出运行日志 二.日志的作用 日志是代码的必要组成部分 记录日志能显示程序当前运行状态 出问题后定位当时问题 三.python日志 ...

  8. 负载均衡算法: 简单轮询算法, 平滑加权轮询, 一致性hash算法, 随机轮询, 加权随机轮询, 最小活跃数算法(基于dubbo) java代码实现

    直接上干活 /** * @version 1.0.0 * @@menu <p> * @date 2020/11/17 16:28 */ public class LoadBlance { ...

  9. flume采集MongoDB数据到Kafka中

    环境说明 centos7(运行于vbox虚拟机) flume1.9.0(自定义了flume连接mongodb的source插件) jdk1.8 kafka(2.11) zookeeper(3.57) ...

  10. 【零基础学深度学习】动手学深度学习2.0--tensorboard可视化工具简单使用

    1 引言 老师让我将线性回归训练得出的loss值进行可视化,于是我使用了tensorboard将其应用到Pytorch中,用于Pytorch的可视化. 2 环境安装 本教程代码环境依赖: python ...