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

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

因为一些原因，最终确定使用 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. [Qt] 编译问题

    shadow build https://blog.csdn.net/cjmcp/article/details/14135191 https://blog.csdn.net/josephfeng/a ...

  2. 用户添加到sudoer列表## Allow root to run any commands anywhere root ALL=(ALL) ALL Iron ALL=(ALL) ALL

    将用户添加到sudoer列表 李序锴关注 2017.12.20 15:03:25字数 605阅读 4,067 默认情况下,linux没有将当前用户列入到sudoer列表中(在redhat系列的linu ...

  3. at在指定的时间执行命令+atq列出用户待处理作业（jobs）

    按下crtl+d取消定时任务 # at now+1hourat> echo"a">aat> <EOF>at> <EOT>job 4 ...

  4. 删除rpc01

    vim /opt/ltp/runtest/stress.part3 修改/opt/ltp/runtest/stress.part3 删除rpc01: 142 systemctl status gdm ...

  5. k8s总结复习

    一.k8s介绍 Kubernetes(k8s)是Google开源的容器集群管理系统.在Docker技术的基础上,为容器化的应用提供部署运行.资源调度.服务发现和动态伸缩等一系列完整功能,提高了大规模 ...

  6. LNMP/LAMP

    LNMP/LAMP 环境: 名称 Linux Nginx MySQL PHP Apache 版本 Centos7 nginx-1.14.1 mysql-5.6.25 php-5.6.36 Apache ...

  7. shell应用之下载rpm包

    1 #!/bin/bash 2 read -p "选择下载老师的哪种源:(adv,base,cobbler,docker,mysql,mysql57,open,auto)" dow ...

  8. fprintf函数

    描述 C 库函数 int fprintf(FILE *stream, const char *format, ...) 发送格式化输出到流 stream 中. 声明 下面是 fprintf() 函数的 ...

  9. 用华为MindSpore框架训练数据库类型的数据集

    技术背景 在前面一篇博客我们讲到三种用python去读取一个文件的指定行的操作,最终给出的一个结论大概是,对于大型的数据而言,最快的找到指定行的方法是Linux系统自带的sed指令,那么是否只有这一种 ...

  10. GO学习-(18) Go语言基础之并发

    Go语言基础之并发 并发是编程里面一个非常重要的概念,Go语言在语言层面天生支持并发,这也是Go语言流行的一个很重要的原因. Go语言中的并发编程 并发与并行 并发:同一时间段内执行多个任务(你在用微 ...