javascript - Jquery Flot 缓慢并卡住 IE

Question

我目前必须在 8000 - 32000 点(4 行 * 8000 点)附近进行绘图，我通过 JSON 请求获取数据，效果非常好，实际上数据会在不到一秒的时间内返回给我。然而，每当我到达 $.plot 点时，它就会卡住 IE8，并且需要永远加载那么多点。这是我的代码:

var data = [];

        function onDataReceived(seriesData) {
            var p = $.plot(placeholder, seriesData.seriesData, options);
        }
        $.ajax({
            url: '/Charts/LineChart?DataTypesToGraph=' + dataTypes + '&DatePull=' + chartDate + '&AssetID=' + $('#AssetID').val(),
            method: 'GET',
            async: true,
            cache: true,
            dataType: 'json',
            success: onDataReceived
        });

如何加快我的 $.plot 使其加载速度更快。还有什么办法可以做到这一点，这样它就不会卡住 IE8？

非常感谢!

Answer 1

您看到“卡住”是因为 Flot(尚)不支持增量绘制；它在将控制权交还给浏览器之前渲染整个绘图。除了破解代码之外，没有其他办法解决这个问题，但是您可以做两件事来提供帮助:

1. 您可能正在使用 Excanvas；尝试切换到Flashcanvas 。根据我的经验，它与 Flot 的效果一样好，并且提供了显着更好的性能。授权“专业”版本所需的 31 美元不会超出大多数预算。

2. 每行有 8000 个点，大多数显示器的最大宽度为 1920 像素，平均值更像是 1280。如果您显示整行，没有某种缩放/平移，那么您渲染的数据比屏幕上实际可见的数据多 4-6 倍。一些服务器端过滤/聚合将点数降低到 2k 将显着提高性能。

但无论您做什么，您都无法在 IE8 上处理大型数据集时获得出色的性能。它是一款已有近四年历史的浏览器，在 JavaScript 性能大战之前发布，使用模拟 Canvas ；你只能做这么多。