问答

大致相同的处理,为什么消耗的内存却差很多

作者:admin 2021-09-30 我要评论

现状描述 1.使用了datatable.js,用来表示1.4万条数据。 2.ajax取的数据也大致一样 3.俩个画面表示的时间也基本一样。 为什么画面A要比画面B花的内存多很多 画面A...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

现状描述
1.使用了datatable.js,用来表示1.4万条数据。
2.ajax取的数据也大致一样
3.俩个画面表示的时间也基本一样。

为什么画面A要比画面B花的内存多很多
画面A
图片1
画面B
2020-02-07_19h47_13.png

想请教占用内存大小的问题,不是时间的问题,画面表示时间没有问题。

###

特别感谢TensionMax的回复。
现在已经找了导致消耗大量内存的处理地方。
datatable.js有个columnDefs的属性,用来设置表的表示项目。
修改前代码是这样的:

mainCols = [{
            targets: 0,
            data: 'logon',
            searchable: true,
            render: function (value, type, row) {
                return sanitize(value);
            },
            className: 'tooltip_div'
        }, {
            targets: 1,
            data: 'last_name',
            searchable: true,
            render: function (value, type, row) {
                return sanitize(value);
            },
            className: 'tooltip_div'
        }, {
            targets: 2,
            data: 'first_name',
            searchable: true,
            render: function (value, type, row) {
                return sanitize(value);
            },
            className: 'tooltip_div'
        }, {
            targets: 3,
            data: 'group_name',
            searchable: true,
            render: function (value, type, row) {
                return sanitize(value);
            },
            className: 'tooltip_div'
        }, {
            targets: 4,
            data: 'user_id',
            visible: false,
            searchable: false
        }, {
            targets: 5,
            data: 'group_id',
            visible: false,
            searchable: false
        }, {
            targets: 6,
            data: 'bottom_group_id',
            visible: false,
            searchable: false
        }]

修改以后是这样的

    mainCols = [{
            targets: 0,
            data: 'logon',
            searchable: true,
            render: function (value, type, row) {
                return sanitize(value);
            },
            className: 'tooltip_div'
        }, {
            targets: 1,
            data: 'last_name',
            searchable: true,
            render: function (value, type, row) {
                return sanitize(value);
            },
            className: 'tooltip_div'
        }, {
            targets: 2,
            data: 'first_name',
            searchable: true,
            render: function (value, type, row) {
                return sanitize(value);
            },
            className: 'tooltip_div'
        }, {
            targets: 3,
            data: 'group_name',
            searchable: true,
            render: function (value, type, row) {
                return sanitize(value);
            },
            className: 'tooltip_div'
        }],

一般的话,从第4-6这三项因为设置了不可见,所以就忽略了。
实际上在表示大量数据的时候(我的项目是2万左右),这些项目都会占用很大的内存开销。
所以如果画面表示不需要的话,最好不要写。

还有就是扩展方法里不写的项目也能正常取到(rowData),不用担心。

    $.fn.dataTable.ext.search.push(
        function (settings, searchData, index, rowData, counter) {
###

这得看代码是不是新增什么变量,并且没有摧毁,造成内存占用过大,单纯这样看是看不出来的,按F12看看什么原因

###

这个问题通过“望”我实在是“望”不出来啥。。还得配合“闻问切”才行。。

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 大致相同的处理,为什么消耗的内存却差

    大致相同的处理,为什么消耗的内存却差

  • 大屏页面自适应

    大屏页面自适应

  • 纯css如何能实现鼠标移入图片变为文字

    纯css如何能实现鼠标移入图片变为文字

  • H5页面视频封面图片的问题

    H5页面视频封面图片的问题

腾讯云代理商
海外云服务器