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

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

因为一些原因，最终确定使用 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. rsync同步遇到的报错和解决办法

    rsync同步遇到的报错和解决办法   科技小能手 2017-11-12 18:27:00 浏览1125 配置 code 同步 open stream file read   在同步的客户端操作: [ ...

  2. Linux创建RAID1_实战

    Linux创建RAID1实战 Linux创建RAID1 RAID1俗称镜像,它最少由两个硬盘组成,且两个硬盘上存储的数据均相同,以实现数据冗余 RAID1读操作速度有所提高,写操作理论上与单硬盘速度一 ...

  3. 006.Python循环语句while循环

    循环结构 优点 减少代码冗余 提升效率 while循环 语法结构 while 条件表达式: 循环体 code1 code2 打印0-100 i = 0 while i <= 100: print ...

  4. IDEA 打包和导入 Jar 包

    Jar 包介绍 Jar 包 ( Java Archive,Java 归档文件) 是与平台无关的压缩文件格式,它允许将多个 Java 源文件编译生成的 class 文件(即字节码文件)打包成一个压缩文件 ...

  5. HTTP、TCP、UDP，Socket，HTTPS

    TCP   HTTP   UDP三者的关系如下: TCP/IP是个协议组,可分为四个层次:网络接口层.网络层.传输层和应用层. 在网络层有IP协议.ICMP协议.ARP协议.RARP协议和BOOTP协 ...

  6. Centos7 LVM管理的逻辑卷根目录扩容和/var目录扩容

    Centos7 LVM管理的逻辑卷根目录扩容 fdisk /dev/sdb #对新加磁盘进行分区操作pvcreate /dev/sdb1 #创建一个物理卷vgs #查看现有的卷组vgextend ce ...

  7. 矩阵中的路径 DFS+剪枝

    给定一个 m x n 二维字符网格 board 和一个字符串单词 word .如果 word 存在于网格中,返回 true :否则,返回 false . 单词必须按照字母顺序,通过相邻的单元格内的字母 ...

  8. selenium常用代码

    from selenium import webdriver # 1. 添加浏览器设置参数对象 options = webdriver.ChromeOptions() # 2. 设置中文,与下载无弹窗 ...

  9. Python+Selenium自动化 模拟鼠标操作

    Python+Selenium自动化 模拟鼠标操作   在webdriver中,鼠标的一些操作如:双击.右击.悬停.拖动等都被封装在ActionChains类中,我们只用在需要使用的时候,导入这个类就 ...

  10. MindSpore部署图像分割示例程序

    MindSpore部署图像分割示例程序 本端侧图像分割Android示例程序使用Java实现,Java层主要通过Android Camera 2 API实现摄像头获取图像帧,进行相应的图像处理,之后调 ...