Question

我有一个大约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();

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

Answer 1

您的代码不使用Banner4.png。这是因为Math.random()确实排除了值1，所以Math.random()在[0,1]中，三倍，你在[0,3]，添加一个得到[1,4]并发言，你得到{1,2,3}。因此，请* 4代替* 3。

正如凯文在评论中已经提到的那样，你对x的使用似乎没有动力并且表现不佳。你似乎没有使用它的值，所以你也可以避免循环并写

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

作为该函数的第一行。您也可以将所有document.write次呼叫合并为一个，以获得轻微的性能提升，但我猜这种效果应该可以忽略不计。省略循环的效果也可以忽略不计，但它也会使代码更容易混淆，这也是我在任何情况下建议修改的原因。否则，如果降低可维护性，请不要尝试优化性能，除非您确定自己有理由需要优化。

要显示的图像的随机部分

1 个答案: