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

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

因为一些原因，最终确定使用 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. ARM64平台编译stream、netperf出错解决办法 解决办法：指定编译平台为alpha [root@localhost netperf-2.6.0]# ./configure –build=alpha

    ARM64平台编译stream.netperf出错解决办法 http://ilinuxkernel.com/?p=1738 stream编译出错信息: [root@localhost stream]# ...

  2. 云计算OpenStack---虚拟机获取不到ip（12）

    一.现象描述 openstack平台中创建虚拟机后,虚拟机在web页面中显示获取到了ip,但是打开虚拟机控制台后查看网络状态,虚拟机没有ip地址,下图为故障截图: 二.分析 1.查看neutron服务 ...

  3. linux 服务开机自启动systemd方式 （Centos7）

    linux 服务开机自启动systemd方式 (Centos7) 1.编写一个 /opt/hello.sh 脚本 [root@jws-ftp prometheus]# cat /opt/hello.s ...

  4. 11.15 dmidecode：查询系统硬件信息

    dmidecode命令可以用来在Linux系统下获取硬件方面的信息.dmidecode遵循SMBIOS/DMI标准,其输出的信息包括BIOS.处理器.内存.缓存等. dmidecode命令的参数选项及 ...

  5. 2.5if语句

    判断(if)语句 目标 开发中的应用场景 if 语句体验 if 语句进阶 综合应用 01. 开发中的应用场景 生活中的判断几乎是无所不在的,我们每天都在做各种各样的选择,如果这样?如果那样?-- 程序 ...

  6. SystemVerilog 激励发生器

    simulator(激励发生器) 主要来的职责是模拟与DUT相邻设计的接口协议,只需要关注如何模拟接口信号,时期能够以真实的接口协议来发送激励给DUT. simolator不应该违反协议,但是不约束于 ...

  7. GO学习-(15) Go语言基础之包

    Go语言基础之包 在工程化的Go语言开发项目中,Go语言的源码复用是建立在包(package)基础之上的.本文介绍了Go语言中如何定义包.如何导出包的内容及如何导入其他包. Go语言的包(packag ...

  8. 单线程service服务

    1.@Service修饰类名,同时类继承Thread类 @Service public class MasterSchedulerService extends Thread { /** * logg ...

  9. 机器学习PAL基本概念

    机器学习PAL基本概念 本文介绍PAI-Studio.PAI-DSW及PAI-EAS的基本概念. PAI-Studio PAI-DSW PAI-EAS

  10. 使用Keil语言的嵌入式C编程教程（上）

    使用Keil语言的嵌入式C编程教程(上) Embedded C Programming Tutorial with Keil Language Embedded System 嵌入式系统是指以单片机为 ...