Question

问题：加载并显示Ajax数据后浏览器冻结

我在使用数据表时遇到性能问题，在使用ajax /服务器端处理时遇到了问题，但是遇到了一些非常严重的性能问题。

在已加载的一定数量的行上（50+），该行将显示在表中，但是2-3秒后，根据几秒钟的行数，浏览器选项卡将冻结（无可点击，无工具提示..）。超过1000行会永久冻结，必须关闭标签页并重新加载页面。

过去有人经历过这种行为吗？就像处理行一样，一切准备就绪后，浏览器突然冻结了几秒钟。

后端： Debian 10 Laravel 5.8（+ yajra / laravel-datatables）

浏览器：：Chrome 77（在当前的Firefox版本中也会出现问题）

我的数据表配置：

    var table = $('#tblCashflow').DataTable({
    processing: false,
    serverSide: true,
    searching: true,
    bfilter: false,
    paging: true,
    bLengthChange: false, //dropdown show x entries
    info: true,
    searchDelay: 3000,
    ajax: {
        url:$('#routeCashflowTable').val(),
        method:'post'
    },
    columns: [
        { data: 'client_name',  name: 'client_name',   orderable: false,   searchable: true   },
        { data: 'study_name',   name: 'study_name',    orderable: false,   searchable: false  },
        { data: 'product_name', name: 'product_name',  orderable: false,   searchable: true   },
        { data: 'body_area',    name: 'body_area',     orderable: false,   searchable: false  },
        { data: 'date_time',    name: 'date_time',     orderable: false,   searchable: false  },
        { data: 'price',        name: 'price',         orderable: false,   searchable: false  },
        { data: 'client_id',    name: 'client_id',     orderable: false,   searchable: true, visible: false   },
    ],

    "language": {
        "url": "/custom/datatables/dataTables.german.lang"
    },

});

Answer 1

我押注一些javascript处理。在浏览器中打开事件探查器，看看吃了什么CPU。一遍又一遍地重新计算可能是“琐碎的”计算值。 Profiler会告诉您。

Answer 2

这是Laravel-Debugbar的存储行为导致冻结。可以先禁用存储空间

config / debugbar.php

    'storage' => [
    **'enabled'    => true,**
    'driver'     => 'file', 
    'path'       => storage_path('debugbar'), 
    'connection' => null,   
    'provider'   => '' 
],

将“启用”设置为false，性能问题消失了，但是如果显示的值对于http标头而言太长，则控制台中可能会出现错误。

数据表：加载ajax后浏览器冻结

2 个答案: