Image 要显示的图像的随机部分

我有一张大约2500像素宽，300像素高的大图像。我已保存此图像的4个版本： 左侧 右侧 左撇子 右转

图像保存如下。 img/Banner1.png img/Banner2.png img/Banner3.png img/Banner4.png

                    var Num;
            function gen(){
                    var x;
                    x = Math.floor(Math.random()*4+1);
                    Num = x;

                    while(Num == x){
                            Num = Math.floor(Math.random() * 3 + 1);
                    }
                    document.write("<style type='text/css'>");
                    document.write(".banner{");
                    document.write("background-image: url('img/Banner" + Num + ".png');");
                    document.write("background-position:left top, left bottom;");
                    document.write("background-repeat:repeat-x;");
                    document.write("-webkit-border-top-left-radius: 50px;");
                    document.write("-webkit-border-top-right-radius: 50px;");
                    document.write("-webkit-box-shadow: 0px 0px 5px 5px rgba(10, 10, 10, 0.5);");
                    document.write("-moz-box-shadow: 0px 0px 5px 5px rgba(10, 10, 10, 0.5);");
                    document.write("box-shadow: 0px 0px 5px 5px rgba(10, 10, 10, 0.5);");
                    document.write("border-bottom: 3px solid #505050;");
                    document.write("</style>");
            }
            gen();

到目前为止，您可能已经注意到没有问题，但这似乎有点效率。我想知道是否有人在性能方面有改进的建议。

您的代码没有使用Banner4.png。这是因为Math.random不包括值1，所以Math.random在[0,1，三倍于[0,3]中，加一得到[1,4，再加一，得到{1,2,3}。所以用*4代替*3

正如Kevin在评论中已经提到的，您对x的使用似乎没有动机，性能也不好。您似乎没有使用它的值，因此您最好避免循环并编写

Num = Math.floor(Math.random() * 4 + 1);

---

作为函数的第一行。您也可以将所有那些document.write调用合并到一个单独的调用中，以获得轻微的性能提升，但我想其影响应该可以忽略不计。省略循环的影响也可以忽略不计，但这也会使代码不那么混乱，这就是我建议这样做的原因在任何情况下都要进行修改。否则，如果性能降低了可维护性，就不要尝试优化性能，除非您确实知道有理由需要优化。

创建x并将其与Num进行比较的目的是什么？为什么不只使用函数gen{Num=Math.floorMath.random*3+1；}？谢谢你的帮助。不幸的是我还不能投票，但是我一直在寻求提高代码性能，非常感谢你的任何建议。