“响应表”javascript

Question

我网站上的页面通常有10个表，每列有15列，每行30行。

在桌面上，这很棒。在移动设备上它很糟糕。

我的数据是这样的，我不想要任何包装，也不需要“堆叠”解决方案。但是，我的列具有明确的优先级，这是解决此问题的关键。

我想做的是让JS决定哪些列可以显示，从最重要的列开始。然后，它会逐渐添加不太重要的列，直到它在用户设备中非常适合。

理论上听起来很简单。

在实践中，我一直在使用dataTables.net的响应式附加组件，在i5 XPS13笔记本电脑上渲染这样一个页面的时间是3.5秒。如果没有JS代码，它将在半秒内完成。

你认为我所要求的是可能的，还是那种级别的DOM操作总是花费几秒钟？

编辑：jsFiddle显示示例：

https://jsfiddle.net/2caay477/

        $(document).ready(function() {
        var start = performance.now();
        $('table').DataTable( {
            paging:   false,
            ordering: false,
            info:     false,
            autoWidth: false,
            deferRender: false,
            orderClasses: false,
            jQueryUI: false,
            lengthChange: false,
            processing: false,
            scrollX: false,
            scrollY: false,
            searching: false,
            serverSide: false,
            stateSave: false,
            responsive: {
                details: {
                   // display: '',
                   // type: ''
                }
            }
        });

        alert(performance.now() - start);
    });

在我的机器上平均为250毫秒，而这只是一个33行的表格。