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

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

因为一些原因，最终确定使用 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. [刷题] 437 Paths Sum III

    要求 给出一棵二叉树及一个数字sum,判断这棵二叉树上存在多少条路径,其路径上的所有节点和为sum 路径不一定始于根节点,终止于叶子节点 路径要一直向下 思路 分情况讨论:根节点在路径上(8) / 根 ...

  2. git使用简单教程-（转自linux人）

    什么是Git Git是目前世界上最先进的分布式版本控制系统.最初由Linus Torvalds编写,用作Linux内核代码的管理.如果你是windows用户,看到这里你可能会担心"是不是只能 ...

  3. DLL重定向处理

    说明 目前正在做的项目批次功能涉及第三方插件,而第三方插件需依赖4.* 版本的Newtonsoft.Json.dll,由于现有功能已经使用6.*版本的Newtonsoft.Json.dll,故采用了d ...

  4. 详解 WebRTC 高音质低延时的背后 — AGC（自动增益控制）

    前面我们介绍了 WebRTC 音频 3A 中的声学回声消除(AEC:Acoustic Echo Cancellation)的基本原理与优化方向,这一章我们接着聊另外一个 "A" - ...

  5. 简单读读源码 - dubbo多提供者(provider)配置方法

    简单读读源码 - dubbo多提供者(provider)配置方法 消费者端dubbo的yml配置 dubbo: consumer: timeout: 300000 protocol: name: du ...

  6. 大作！webpack详细配置

    webpack学习之旅 好好学习 天天向上!遇到bug,不要慌! 文章目录 webpack学习之旅 大一统的模块化规范--ES6模块化 1.node.js中通过babel体验ES6模块化 2.ES6模 ...

  7. unity UGUI填坑 之 HorizontalLayoutGroup 和 ContentSizeFitter配合使用

    今天在项目中遇到一个问题,我们的ui过来找我,问为什么Content里的Item显示的不完全 花了半个小时看了一下,发现个小小的坑,记录一下 这些属性是用来实现,Content下的Item的偏移和间隔 ...

  8. PVD与CVD性能比较

    PVD与CVD性能比较 CVD定义: 通过气态物质的化学反应在衬底上淀积一层薄膜材料的过程. CVD技术特点: 具有淀积温度低.薄膜成分和厚度易于控制.均匀性和重复性好.台阶覆盖优良.适用范围广.设备 ...

  9. mybatis入门案例——IDEA版

    环境:IDEA2017,jdk1.8.0,maven3.5.2 步骤: 1.创建一个普通Maven工程,删掉src目录,再创建一个maveb的model命名为mybatis-01 2.配置 pom.x ...

  10. 聊一聊.NET Core结合Nacos实现配置加解密

    背景 当我们把应用的配置都放到配置中心后,很多人会想到这样一个问题,配置里面有敏感的信息要怎么处理呢? 信息既然敏感的话,那么加个密就好了嘛,相信大部分人的第一感觉都是这个,确实这个是最简单也是最合适 ...