Question

Sparklines对于执行小型内联图表非常棒。但是，如果它们所在的容器是隐藏的，则不能简单地在幕后绘制它们然后显示它们。您必须先显示容器，然后调用$.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();
});

再见

这是testing page

Answer 3

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

有关工作示例，请参阅http://mleibman.github.com/SlickGrid/examples/example10-async-post-render.html。

Sparkline渲染很慢并且挂起浏览器

3 个答案: