前端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占用过高

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占用过高

CPU占用过高

最后的解决方法

在问题一的基础上,外面嵌套 一层div,在这层 div中增加css属性固定该div的高度,不用 bootstrapTable 的 data-height进行高度固定。

#table-wrapper {
    height : 400px;
    overflow : scroll;
} 

建议

问题结论,使用 load 直接刷新加载 数据不会费太多CPU资源;使用动态 update 表格 刷新数据会导致CPU占用过高。建议使用 bootstrapTable直接 load 数据刷新界面。

能够使用CSS解决的问题,尽量别用JS。过程中走了弯路,经验教训

测试文件

文件下载地址: 在此下载

posted @ 2021-07-07 12:04  信息技术的风采  阅读(351)  评论(0编辑  收藏  举报