如何改进矩阵&x27；s rain的javascript代码性能_Javascript_Performance_Matrix

如何改进矩阵&x27；s rain的javascript代码性能

javascript performance matrix

如何改进矩阵&x27；s rain的javascript代码性能,javascript,performance,matrix,Javascript,Performance,Matrix,我是一名新程序员，我想做一些很酷的东西，比如Matrix rain。我知道使用canvas更好，但我想知道如何最大限度地提高本机javascript版本的性能 JSFIDLE版本在这里矩阵 html，正文{margin:0；padding:0；背景色：#000；} #矩阵{边距：0px自动；溢出：隐藏；位置：相对；} .divText{位置：绝对；} .divText span{显示：块；边距：1px；字体系列：无衬线；} 0 函数随机数（最小值、最大值） { 返回min+Math.roun

我是一名新程序员，我想做一些很酷的东西，比如Matrix rain。我知道使用canvas更好，但我想知道如何最大限度地提高本机javascript版本的性能

JSFIDLE版本在这里


矩阵
html，正文{margin:0；padding:0；背景色：#000；}
#矩阵{边距：0px自动；溢出：隐藏；位置：相对；}
.divText{位置：绝对；}
.divText span{显示：块；边距：1px；字体系列：无衬线；}
0
函数随机数（最小值、最大值）
{
返回min+Math.round（Math.random（）*（max-min））；
}
var htmlist=[]；
（函数init（）{
变量宽度=$（窗口）.width（），
高度=$（窗口）.height（）；
$（“#矩阵”）。高度（高度）。宽度（宽度）；
变量数据源=['凵', '凵','夂','彡','厶','工','匸','匚','乀','乁','彐','丩','忄','卄','凵','孒','讠','巜','彑','攵' ];
var lengthOfAarry=dataSource.length；
var color=[]；
对于（var i=1；就性能而言，这是JSFIDLE链接，您打算具体改进什么？一次最大化粒子数？自由下落粒子的最大速度？我想让矩阵雨显示得不那么慢，并想知道我是否达到了DOM的最大能力。或者，如果使用canvas，这是唯一的方法tter.@TaoP.R.Canvas基本上可以帮助您更舒适或更恰当地绘制图形。WebGL将是图形渲染改进的最佳选择，因为它可以让您获得GPU的强大功能。很酷，也许我可以制作不同的版本。比如以100种方式打印Hello world。Fun这就是JSFIDLE在性能方面的链接，什么你不打算特别改进吗？一次最大化粒子数？自由下落粒子的最大速度？我想让矩阵雨显示得不那么慢，并想知道我是否达到了DOM的最大能力。或者如果使用canvas，这是使其更好的唯一方法。@TaoP.R.canvas基本上可以帮助你绘制图形moWe’’We’’We’’We’’We’’We’’We’’’We’’We’’We’’We’’’’We’’We’’We’’We’’’We’’’We We’’’We We We We’’’’’We We We We We We We We We一次f个粒子？自由下落粒子的最大速度？我想让矩阵雨显示得不那么慢，并想知道我是否达到了DOM的最大能力。或者，如果使用canvas，这是使其更好的唯一方法。@TaoP.R.canvas基本上可以帮助您更舒适或更恰当地绘制图形。WebGL将是最佳选择图形渲染改进的选择，因为它可以让你获得GPU的能力。酷，也许我可以制作不同的版本。比如用100种方式打印Hello world。太有趣了
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Matrix</title>
    <style>
        html, body {margin:0; padding:0; background-color:#000;}
        #matrix {margin: 0px auto; overflow:hidden; position: relative;}
        .divText {position: absolute;}
        .divText span {display:block; margin:1px; font-family:sans-serif; }
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<span id="spanCount">0</span>
<div id="matrix">

</div>
<script>
    function rand(min, max)
    {
        return min + Math.round(Math.random() * (max - min));
    }
    var htmllist=[];
    (function init(){
        var width=$(window).width(),
                height=$(window).height();
        $('#matrix').height(height).width(width);
        var dataSource=['凵', '凵','夂','彡','厶','工','匸','匚','乀','乁','彐','丩','忄','卄','凵','孒','讠','巜','彑','攵' ];
        var lengthOfAarry=dataSource.length;

        var color = [];
        for (var i=1; i<17; i++)
        {
            var f = i.toString(16);
            color.push('0' + f + '0');
        }
        for(var j=0;j<100;j++){

            var fontSize =rand(10,30);
            var html = '<div class="divText" style="left:' + rand(0,width) + 'px; bottom:'+height+'px;">';
            c="";
            for (var i=1; i<17; i++)
            {
                c =c+ Math.round(Math.random()).toString();
                html+='<span class="s' + i + '" style="color:#' + color[i-1] + '; font-size:' + fontSize + 'px; text-shadow:0px 0px 10px #' + color[i-1] + ';">' + c + '</span>';
            }

            html+='</div>';
            htmllist.push(html);
        }

    })();
    function add(){
        $('#matrix').append(htmllist[rand(0,100)]);
    }

    (function run()
    {

        add();

        $('.divText').each(function(){
            var y = $(this).css('bottom');
            y = parseInt(y)-15;
            $(this).css('bottom', '' + y + 'px');
            if (y + $(this).height() <= 0)
            {
                $(this).remove();
                return;
            }
            $(this).find('span').each(function(){
                var c = Math.round(Math.random()).toString();
                $(this).html(c);
            });
        });

        setTimeout(run, 50);
    })();

</script>
</body>
</html>