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 ；你只能做这么多。