优化 JavaScript 数据透视表中的内存管理：最佳实践和技巧-js教程-PHP中文网

优化 JavaScript 数据透视表中的内存管理：最佳实践和技巧

王林

发布： 2024-08-22 22:37:03

原创

415 人浏览过

TL;DR:了解在 Syncfusion JavaScript 数据透视表中优化内存管理的最佳实践，包括有关虚拟滚动、数据处理和内存分析的技巧，以确保大型数据集的平稳性能。

内存管理对于优化 Web 应用程序至关重要，尤其是在处理大型数据集和复杂的数据可视化时。

Syncfusion JavaScript 数据透视表是一个用于分析和显示数据的强大工具。然而，确保其高效运行需要有效的内存管理策略。

本博客将介绍优化 JavaScript 数据透视表中内存使用的最佳实践和技巧，从而实现更流畅的性能和更好的用户体验。

了解记忆挑战

处理大型数据集时，数据透视表可能会消耗大量内存，从而导致性能问题，例如渲染时间缓慢、交互滞后和潜在的浏览器崩溃。主要挑战包括：

大型数据集 – 渲染数千行和列可能会占用内存资源。
复杂计算 – 聚合和计算实时数据可能会占用资源。
频繁更新 – 频繁更新的动态数据如果管理不当可能会导致内存泄漏。

内存消耗测试结果

我们通过客户端和服务器引擎模式将 JSON 数据绑定到 JavaScript 数据透视表，在 Chrome 浏览器中获得测试结果。下表显示了将 100K 和 100 万个唯一数据集计数绑定到 Syncfusion JavaScript 数据透视表所消耗的浏览器内存。

Unique dataset count	Rendering mode	Memory consumption (In MB)
100K	Client	96.5
100K	Server	19.5
1 million	Client	792
1 million	Server	20.4

唯一数据集计数渲染模式内存消耗（以 MB 为单位） 10万客户 96.5 服务器 19.5 100万客户 792 服务器 20.4 表>

下图显示了使用客户端引擎时 Chrome 浏览器对于 100K 和 100 万个数据点的内存消耗。

10万数据：

Optimize Memory Management in JavaScript Pivot Table: Best Practices and Tips

Chrome 浏览器中 100K 数据的内存使用情况

100万条数据：

Memory usage for 1 million data in the Chrome browser

Chrome 浏览器中 100 万条数据的内存使用情况

注意：内存使用情况可能会有所不同，具体取决于数据透视报告配置和启用的功能。

JavaScript 数据透视表中内存管理的最佳实践

让我们看看在 JavaScript 数据透视表组件中优化内存管理的一些最佳实践：

虚拟滚动或分页

加载大数据是内存使用增加的主要原因之一。实现虚拟滚动或分页允许我们单独加载当前视口的数据并按需加载剩余数据，而不是加载数据透视表中的所有行和列。这将减少初始加载时间和内存使用量。

var pivotGridObj = new ej.pivotview.PivotView({
    enableVirtualization: true, // Enable virtualization to load data as needed.
    enablePaging: true, // Enable paging and page settings to load data as needed.
    pageSettings: {
        rowPageSize: 10,
        columnPageSize: 5,
        currentColumnPage: 1,
        currentRowPage: 1
    },
    dataSourceSettings: {
        dataSource: largeDataSet,
        columns: [{ name: 'Product' }],
        rows: [{ name: 'Country' }],
        values: [{ name: 'Sales', caption: 'Total Sales' }]
    }
});
pivotGridObj.appendTo('#PivotView');

登录后复制

处置未使用的实例

当不再需要 JavaScript 数据透视表实例时，正确处置它们以释放内存。

请参考以下代码示例。

function destroyPivotTable() {
    if (pivotGridObj) {
        pivotGridObj.destroy(); // Method used to destroy the Pivot Table.
        pivotGridObj = null;
    }
}

登录后复制

优化数据处理

尽可能通过在服务器端引擎上预处理数据来减少实时计算和聚合的次数。

var pivotObj = new ej.pivotview.PivotView({
    dataSourceSettings: {
        url: 'https://localhost:44350/api/pivot/post', // Preprocess data using the server-side engine to minimize client-side processing.
        mode: 'Server',
        rows: [{
            name: 'ProductID', caption: 'Product ID'
        }],
        columns: [{
            name: 'Year', caption: 'Production Year'
        }],
        values: [
            { name: 'Sold', caption: 'Units Sold' },
            { name: 'Price', caption: 'Sold Amount' }
        ],
    }
    //Other codes here...
});
pivotObj.appendTo('#PivotTable');

登录后复制

优化数据透视表渲染

使用高效的渲染技术来最大限度地减少数据透视表的内存使用量。这包括避免不必要的重新渲染以及仅在数据透视表的 UI 发生更改时刷新它。必要时，使用原来用来刷新数据透视表的公共函数；否则，通过属性绑定更新数据透视表。

例如，我们可以使用 dataSource 和 dataSourceSettings 属性来动态更改数据或绑定字段设置，例如行、列、值和过滤轴。这将更新数据透视表。

请参考以下代码示例。

var pivotObj = new ej.pivotview.PivotView({
    dataSourceSettings: {
        dataSource: window.pivotData, // Assign the data to the Pivot Table.
        rows: [{
            name: 'ProductID', caption: 'Product ID'
        }],
        columns: [{
            name: 'Year', caption: 'Production Year'
        }],
        values: [
            { name: 'Sold', caption: 'Units Sold' },
            { name: 'Price', caption: 'Sold Amount' }
        ],
    }
    //Other codes here...
});
pivotObj.appendTo('#PivotTable');

var applyBtn = new ej.buttons.Button({
        isPrimary: true
});
applyBtn.appendTo('#update');
document.getElementById(update'').onclick = function () {
     // Set the modified/updated data to the Pivot Table using the ‘dataSource’ property.
     pivotObj.dataSourceSettings.datasource = updatedPivotData;

     // Set the formatting to the value field “Price” using the ‘formatSettings’ property within the ‘dataSourceSettings’.
     pivotObj.dataSourceSettings.formatSettings = [{ name: 'Price', format: 'C0' }];
}

登录后复制