为什么 Javascript 会导致我的页面崩溃？

Question

所以我正在使用 MVC 4 C#/Razor，并且正在开发一个使用 SlickGrid 来显示网格数据的页面。一切正常，除非我尝试使用它来显示大量数据（大约 100 万行）。

当这种情况发生时，它似乎做得很好，直到它即将完成。就在似乎要完成所有数据加载的时候，网页崩溃了。我使用 getJSON 从 SQL 数据库中提取数据。我按列进行，分批 300000 条记录。我曾尝试使用 Chrome 内存分析工具，但找不到任何有用的东西。下面是一些代码sn-ps：

    function pullAllGridData(tableName, colArray)
    {
        for (var i = 0; i < colArray.length; i++)
        {
            fetchColumn(tableName, colArray[i], 0);
        }
    }


    function fetchColumn(tableName, fieldName, startAt)
    {
        $.getJSON('/WIMenu/GetTableData', { tableName: tableName, fieldName: fieldName }, function (data)
        {
            if (data.slice(-1) !== '~')
            {
                var startPass = populateSlickData(data, fieldName, startAt);
                colStatus[fieldName] = true;
                if (loadFirstBatch())
                { populateGrid(); }
                fetchColumn(tableName, fieldName, startPass);
            }
            else
            {
                data = data.slice(0, -1);
                populateSlickData(data, fieldName, startAt);
                colStatus[fieldName] = true;
                if (loadFirstBatch())
                { populateGrid(); }
            }
        });
    }

    function populateSlickData(input, fieldName, startAt)
    {
            var output = startAt;
            var valueArray = input.split('|');
            output += valueArray.length;
            if (!isInBlackList(fieldName, tableName))
            {
                var datatype = columns[getColumnIndex(fieldName)].datatype;
                var startIndex = startAt;
                var endIndex = startAt + valueArray.length;
                var counter = 0;
                alert(fieldName + ': startIndex: ' + startIndex + ' endIndex: ' + endIndex + ' count: ' + endIndex-startIndex);
                for (var x = startIndex; x < endIndex; x++)
                {
                    if (!slickdata[x])
                    { slickdata[x] = {}; }
                    if (valueArray[x - startAt] == 'null') { valueArray[x - startAt] = ''; }
                    if (datatype == 'System.DateTime')
                    {
                        if (valueArray[x-startAt] !== '')
                        {
                            var date = new Date(valueArray[x - startAt]);
                            valueArray[x - startAt] = (date.getMonth() + 1) + '-' + date.getDate() + '-' + date.getFullYear();
                        }
                    }
                    else if (datatype == 'System.Decimal' || datatype == 'System.Int32' || datatype == 'System.Int16' || datatype == 'System.Int64')
                    {
                        valueArray[x - startAt] = parseFloat(valueArray[x - startAt]);
                    }
                    slickdata[x][fieldName] = valueArray[x - startAt];
                    counter++;
                }
            }
            currentColumn = fieldName;

        filteredData = slickdata;
        return output;
    }

fetchColumn 使用递归来不断获取列数据，直到所有数据都被接收。 populateGrid 方法只是将 SlickGrid 对象同步到 slickdata 对象。我的目标是找出页面崩溃的原因并了解如何修复它。

通过使用警报，它似乎在某些时候卡在 populateSlickData 方法的 for 循环中，我不知道为什么。我已经尝试打印用于索引的数据，但似乎一切正常。

Answer 1

您不能将一百万行数据放入内存中，并期望任何网页除了缓慢爬行或确实崩溃之外会做任何事情。这就是网格 分页 的用途，再加上按需 ajax。您的网格应该只在页面更改时提取显示当前数据页面所需的数据。您不应该提前加载所有内容。

这是 SlickGrid github 网站上的一个示例：http://mleibman.github.io/SlickGrid/examples/example4-model.html

这里有更多信息：https://github.com/teleological/slickback/wiki/Pagination