迷你图渲染速度慢并且浏览器挂起

Question

迷你图 非常适合制作小型内联图。但是，如果它们所在的容器是隐藏的，则不能简单地将它们绘制在幕后然后显示它们。您必须首先显示容器，然后调用 $.sparkline_display_visible 方法。

这没什么问题，只是如果你有很多图表的话，速度会很慢。我有 200 多张图表（最终会扩展到更多）需要渲染，渲染全部图表需要大约 4000 毫秒，从而导致浏览器挂起。有谁知道如何通过不挂起浏览器来加快此过程（值得怀疑）或提高感知性能？我尝试添加一个计时器，以便每个图表在渲染时一次显示一个，但是对于 200 多个图表，这仍然需要一段时间，而且效果有点分散用户的注意力。

谢谢

Answer 1

您可以让插件渲染加载时可见的图形，然后循环遍历隐藏的图形，并以 10 组为一组进行渲染。这样浏览器就不会挂起，并且会“预渲染”在您需要它们之前隐藏它们。

var sparklines = $('.inlinesparkline').sparkline();
var hidden = sparklines.parent().filter(':hidden').addClass('needsSparkline');

(function loopy(){
    var objs = hidden.filter(':lt(10)').removeClass('needsSparkline');
    hidden = hidden.filter('.needsSparkline');
    if (objs.length) {
        objs.css({
            'display':'',
            'visibility':'hidden'
        });
        $.sparkline_display_visible();
        objs.css({
            'display':'none',
            'visibility':''
        });
        hidden.length && setTimeout( loopy, 250 );
    }
})();

Answer 2

不挂起浏览器渲染迷你图的解决方案是将其称为异步（使用偏移时间将事件设置为队列）。查看示例：

var sparklinesGantt = new Array();
var sprklGanttCounter = 0;
var sprklBlockQuickShow = 20; // sync elements count
var sprklBlockSofort = 15; // async elemenbts count quick show
var sprklBlockGroesse = 2; // block size for async

var renderGanttSparkline = function(obj) {
    $(obj).css('padding-right','0px').sparkline('html', {
        width: '100px',
        height: '16px',
        type: 'bullet',
        targetWidth: 2,
        performanceColor: '#d3d3d3',
        targetColor: '#ffa500',
        rangeColors: ['#d3d3d3', '#4169e1', '#d3d3d3']
    });
};
var renderGanttSparklineAtom = function() {
    var sprklCounterBlockNext = sprklGanttCounter + sprklBlockGroesse;
    for (var c = sprklGanttCounter;sprklGanttCounter<sprklCounterBlockNext;c++) {
        var obj = sparklinesGantt[sprklGanttCounter];
        sprklGanttCounter++;
        renderGanttSparkline(obj);
    }
    if (sprklGanttCounter < sparklinesGantt.length) {
        setTimeout(renderGanttSparklineAtom, 1);
    }
};
var ganttSparkline = function(id) {
    var selector = ".gantt_sprkl";
    if (id) {
        selector = "#"+id;
    }
    if ($(selector).size() < sprklBlockQuickShow) {
        renderGanttSparkline($(selector));
    } else {
        sparklinesGantt = jQuery.makeArray($(selector));
        sprklGanttCounter = 0;
        while (sprklGanttCounter<sprklBlockSofort) {
            var obj = sparklinesGantt[sprklGanttCounter];
            sprklGanttCounter++;
            renderGanttSparkline(obj);
        }   
        setTimeout(renderGanttSparklineAtom, 1);
    }
};
$(document).ready(function() {
    ganttSparkline();
});

再见

，这里是测试页面

Answer 3

通过不同时执行所有这些操作，您可以轻松避免挂起浏览器。当图形进入视口时，异步渲染图形通常是可以的。

请参阅http://mleibman.github.com/SlickGrid/examples/ example10-async-post-render.html 作为一个工作示例。