迷你图渲染速度很慢，并且会挂起浏览器 [英] Sparkline rendering is slow and hangs browser

问题描述

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

Sparklines are awesome for doing little inline graphs. However, if the container they are in is hidden, you can't simply draw them behind the scenes and then show them. You must first display the container and then call the $.sparkline_display_visible method.

这没关系，但是如果您有很多图形，它确实很慢.我有200多个图形(最终将扩展到更多图形)进行渲染，并且全部渲染它们大约需要4000毫秒，因此会挂起浏览器.有谁知道如何通过不挂起浏览器来加快此过程(可疑)或提高可感知的性能?我尝试添加一个计时器，以使每个图形在渲染时一次显示一个，但是使用200多个图形仍然需要一段时间，并且效果对用户来说有点分散注意力.

This is ok, except that it's really slow if you have a lot of graphs. I have a little over 200 graphs (and will eventually scale to more) to render and it takes around 4000ms to render them all, hanging the browser. Does anyone know how to either speed up this process (doubtful) or improve perceived performance by not hanging the browser? I tried to add a timer so each graph would show up one at a time while being rendered, but that still takes a while with 200+ graphs and the effect is a bit distracting to the user.

谢谢

推荐答案

您可以让该插件呈现在负载下可见的图形，然后循环遍历隐藏的图形，并以10组为一组进行渲染.做到这一点，以使浏览器不会挂起，并在需要它们之前预渲染"隐藏的对象.

You could have the plugin render the graph for the ones that are visible on load then loop through the hidden ones and have it render those in groups of 10. Will make it so the browser doesn't hang and will "pre-render" the hidden ones before you need them.

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 );
    }
})();

这篇关于迷你图渲染速度很慢，并且会挂起浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！