Javascript Highcharts在服务器上滞后，在本地主机上运行良好

我有一个很奇怪的问题。我在我的网站上为比特币交易添加了动态更新的Highcharts。它在本地主机上工作得很好，但在服务器上，相同的代码会导致奇怪的延迟—更新时浏览器只挂起几秒钟。点弹出窗口被冻结，滚动被锁定。它在铬中非常显著。Safari似乎受影响较小

localhost和服务器（）上的代码相同：

$（函数（）{
函数buildUpdatedChart（数据、初始化、更新程序、间隔）{
var图；
setOptions（{global:{useutcart:false}}）；
$（“#容器”）。高图({
打印选项：{
行：{animation:false}，
系列：{animation:false}
},
图表：{
动画：Highcharts.svg，//不要在旧IE中设置动画
marginRight:10，
活动：{
加载：函数（）{
初始（本）；
setInterval（函数（）{
更新程序（此）；
}.绑定（此），间隔）；
}
}
},
标题：{文本：“BTC-e BTC/USD交易”}，
xAxis：{
键入：“日期时间”，
像素间隔：150
},
亚克斯：{
标题：{文本：'BTC/USD'}，
绘图线：[{
值：0，
宽度：1，
颜色：'#808080'
} ]
},
工具提示：{
格式化程序：函数（）{
返回“+this.series.name+”
+
Highcharts.dateFormat（“%Y-%m-%d%H:%m:%S'，this.x）+'
'+
Highcharts.numberFormat（this.y，2）+'-'+
Highcharts.numberFormat（this.point.amount，4）；
}
},
图例：{enabled:false}，
正在导出：{enabled:false}，
系列：[{
名称：“BTC/USD”，
步骤：正确，
数据：数据
} ]
});
}
函数getTransactions（tid、回调）{
$.get（'/projects/btce realtime charts/trades？tid='+tid，函数（数据）{
回调（data.sort（函数（a，b）{returna.date-b.date；}））；
});
}
功能项TopointConverter（项）{
返回{x:item.date*1000，y:item.price，amount:item.amount}；
}
函数更新时间窗口（图表）{
var dt=new Date（）.getTime（）；
chart.xAxis[0]。更新({
最小：dt-3*60*1000，
最大值：dt
}，假）；
}
getTransactions（“”，函数（项）{
var tid=items.slice（-1）[0].tid；
buildUpdatedChart（items.map（itemToPointConverter）），
功能（图表）{
updateTimeWindow（图表）；
chart.redraw（）；
},
功能（图表）{
getTransactions（tid、函数（项）{
updateTimeWindow（图表）；
如果（0==items.length）{
返回；
}
tid=items.slice（-1）[0].tid；
items.map（itemToPointConverter）.forEach（函数（点）{
chart.series[0].addPoint（point，false）；
});
chart.redraw（）；
});
}, 5000);
});
});

---

这里有一个可以玩的jsfiddle:

当我查看您的fiddle或live站点时，我不会感到滞后。我在Windows 7上使用Chrome。当我在你的网站上查看时，我确实在我的FF中看到了这一点。当我查看探查器时，我发现每次你进行数据调用时都会出现延迟，它们会冻结网站，很可能你也在localhost中看到了这一点，但数据调用太快了，你不会注意到它们，试着用某种限速器。我不认为这是一个高图表问题。我在localhost（Chrome）上也有同样的行为。在网络上有类似于

请求URL的调用：http://alexatnet.com/projects/btce-realtime-charts/trades?tid=16173774

从80毫秒到650毫秒不等。大部分时间都花在状态

等待上

我知道ajax调用可以有一些时间来完成，但我认为浏览器应该足够好，不会在后台处理远程调用时冻结UI。它不是多线程的吗？你能试着禁用动画吗？对我来说，它在osx上的Chrome上运行良好（没有延迟）。

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
$(function () {
    function buildUpdatedChart(data, init, updater, interval) {
        var chart;

        Highcharts.setOptions({ global : { useUTC : false } });

        $('#container').highcharts({
            plotOptions : {
                line : { animation : false },
                series : { animation : false }
            },
            chart : {
                animation : Highcharts.svg, // don't animate in old IE
                marginRight : 10,
                events : {
                    load : function() {
                        init(this);

                        setInterval(function() {
                            updater(this);
                        }.bind(this), interval);
                    }
                }
            },
            title : { text : 'BTC-e BTC/USD Transactions' },
            xAxis: {
                type : 'datetime',
                tickPixelInterval : 150
            },
            yAxis: {
                title : { text : 'BTC/USD' },
                plotLines : [ {
                    value : 0,
                    width : 1,
                    color : '#808080'
                } ]
            },
            tooltip: {
                formatter : function () {
                    return '<b>' + this.series.name + '</b><br/>' +
                        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                        Highcharts.numberFormat(this.y, 2) + ' - ' +
                        Highcharts.numberFormat(this.point.amount, 4);
                }
            },
            legend : { enabled: false },
            exporting : { enabled: false },
            series : [ {
                name : 'BTC/USD',
                step : true,
                data : data
            } ]
        });
    }

    function getTransactions(tid, callback) {
        $.get('/projects/btce-realtime-charts/trades?tid=' + tid, function (data) {
            callback(data.sort(function (a, b) { return a.date - b.date; }));
        });
    }

    function itemToPointConverter(item) {
        return { x : item.date * 1000, y : item.price, amount : item.amount };
    }

    function updateTimeWindow(chart) {
        var dt = new Date().getTime();
        chart.xAxis[0].update({
            min : dt - 3 * 60 * 1000,
            max : dt
        }, false);
    }

    getTransactions('', function (items) {
        var tid = items.slice(-1)[0].tid;
        buildUpdatedChart(items.map(itemToPointConverter),
            function (chart) {
                updateTimeWindow(chart);
                chart.redraw();
            },
            function (chart) {
                getTransactions(tid, function (items) {
                    updateTimeWindow(chart);

                    if (0 === items.length) {
                        return;
                    }

                    tid = items.slice(-1)[0].tid;

                    items.map(itemToPointConverter).forEach(function (point) {
                        chart.series[0].addPoint(point, false);
                    });

                    chart.redraw();
                });
        }, 5000);
    });
});
</script>