如何提高此javascript代码的性能？

Question

不要害怕，这是一个非常基本的代码。 只是想和你们一起检查一下，是否知道有什么方法可以使其更快？ （仍然在学习）它看起来很丑陋:)

或者，如果您发现任何可能有所不同的内容，谢谢！

function pic_form_function(form, nr, val) {
    document.getElementById("image_to_delete").value=0;
    var re = /\..+$/;
    var extension = val.match(re);
    if (extension==".jpg" || extension==".jpeg" || extension==".gif" || extension==".png" || extension==".bmp") {
        if (nr==1){
            var ID_file1 = document.getElementById("pic_id_nr1").value;
            window.parent.document.getElementById("pic1_filename").value=ID_file1+extension;
            window.parent.document.getElementById("annonsera_nr_pics").value=1;
            window.parent.document.getElementById("iframe_upload_pic").style.height="180px";
            document.getElementById("pic_target").style.height="160px";
            document.getElementById("pic_target").style.display="block";
            document.getElementById("remove_pic").value=0;
            document.getElementById("extra_pic_checkbox").style.display="inline";
            document.getElementById("extra_pic_fnt").style.display="inline";
        }
        else if (nr==2){
            var ID_file2 = document.getElementById("pic_id_nr2").value;
            window.parent.document.getElementById("pic2_filename").value=ID_file2+extension; //Passing fileInputName to parent window...
            window.parent.document.getElementById("annonsera_nr_pics").value=2;
            document.getElementById("extrapic").value=2;
            document.getElementById("pic_file3").disabled=false;
        }
        else if (nr==3){
            var ID_file3 = document.getElementById("pic_id_nr3").value;
            window.parent.document.getElementById("annonsera_nr_pics").value=3;
            window.parent.document.getElementById("pic3_filename").value=ID_file3+extension;

            document.getElementById("extrapic").value=3;
            document.getElementById("pic_file4").disabled=false;
        }
        else if (nr==4){
            var ID_file4 = document.getElementById("pic_id_nr4").value;
            window.parent.document.getElementById("annonsera_nr_pics").value=4;
            window.parent.document.getElementById("pic4_filename").value=ID_file4+extension;

            document.getElementById("extrapic").value=4;
            document.getElementById("pic_file5").disabled=false;
        }
        else if (nr==5){
            var ID_file5 = document.getElementById("pic_id_nr5").value;
            window.parent.document.getElementById("annonsera_nr_pics").value=5;
            window.parent.document.getElementById("pic5_filename").value=ID_file5+extension;

            document.getElementById("extrapic").value=5;
        }
    }
    if (extension!=".jpg" && extension!=".jpeg" && extension!=".gif" && extension!=".png" && extension!=".bmp") { 
        window.parent.document.getElementById("annonsera_imagenotvalid_error").style.display="block";
    }
    else {
        window.parent.document.getElementById("annonsera_imagenotvalid_error").style.display="none";
        form.submit();
    }
}

Answer 1

如果是我，我将在顶部定义以下内容。

$=function(x){return document.getElementById(x);}

首先将所有document.getElementById替换为$ 。

或更好的用户jQuery 。

Answer 2

关于效果：

要提取文件扩展名，可以使用String.substring方法而不是RegExp ， 性能提升可以忽略不计，但我认为它可以提高可读性：

var extension = val.substring(val.lastIndexOf('.'));

关于代码：

1. 您只能在函数顶部声明一个ID_file变量，然后在if块中使用它。

2. 该else if块，其中nr==2 ， 3和4的模式十分相似，你可以为那些3箱子做同样的：

//..
else if (nr >= 2 && nr <= 4){
  ID_file = document.getElementById("pic_id_nr"+nr).value; // point #1 assumed
  window.parent.document.getElementById("pic"+nr+"_filename").value=ID_file+extension;
  window.parent.document.getElementById("annonsera_nr_pics").value = nr;
  document.getElementById("extrapic").value = nr;
  document.getElementById("pic_file"+(+nr+1)).disabled=false;
}

关于可读性：

您可以在开头定义常见和冗长的函数调用的简写，如S.Mark还建议的那样：

var el = document.getElementById,
    parentEl = window.parent.document.getElementById;

Answer 3

• 继续CMS对代码重复进行的操作，您可以在else if块序列之外重构公共代码。
• 使用switch语句替换if s序列。
• 除了上面的两个建议，您还可以定义对相同任务执行的功能，以实现更具可读性的实现。
• 如果您继续使用正则表达式（我个人认为它们非常易读），请记住match返回一个数组。
• 此外， .+将在第一个句点之后贪婪地匹配所有字符。 最好只匹配带有[^.]+非句点。

• 您可以将对象用作关联数组，而不必进行冗长的字符串比较序列：

   var imageExtensions = {'.jpg': 1, '.jpeg': 1, '.gif': 1, '.png': 1, '.bmp': 1}; if (imageExtensions[extension]) { 

• 考虑到条件检查第一个if条件的否定，最后一个if ... else ...是不必要的。 只需将else块移到第一个if的末尾，然后将最后一个if (...)移到else 。

• 就个人而言，我发现将简短的错误处理代码放在检测到错误的if语句旁边，而不是在处理非错误情况的较长代码块之后，更具可读性。 在上一个重构之后，让我们将if块与else块交换并取反条件。

综上所述，我们得到：

function pic_form_function(form, nr, val) {
    document.getElementById("image_to_delete").value=0;
    var extension = val.match(/\.[^.]+$/);
    if (extension) {
        extension = extension[0];
    }
    var imageExtensions = {'.jpg': 1, '.jpeg': 1, '.gif': 1, '.png': 1, '.bmp': 1};
    if (! imageExtensions[extension]) {
        window.parent.document.getElementById("annonsera_imagenotvalid_error").style.display="block";
    } else {
        var ID_file = document.getElementById("pic_id_nr" + nr).value;
        window.parent.document.getElementById("pic"+nr+"_filename").value=ID_file+extension;
        window.parent.document.getElementById("annonsera_nr_pics").value=nr;

        switch (nr) {
        case 1:
            window.parent.document.getElementById("iframe_upload_pic").style.height="180px";
            document.getElementById("pic_target").style.height="160px";
            document.getElementById("pic_target").style.display="block";
            document.getElementById("remove_pic").value=0;
            document.getElementById("extra_pic_checkbox").style.display="inline";
            document.getElementById("extra_pic_fnt").style.display="inline";
            break;
        case 2: // FALLTHRU
        case 3: // FALLTHRU
        case 4:
            document.getElementById("pic_file"+nr).disabled=false;
            // FALLTHRU
        case 5:
            document.getElementById("extrapic").value=nr;
            break;
        }
        window.parent.document.getElementById("annonsera_imagenotvalid_error").style.display="none";
        form.submit();
    }
}

较短，但可读性更高。

请注意，如果$包装器在'window.parent'中定义，则您应该能够在子级中将其称为window.parent.$ ：

window.parent.$("annonsera_imagenotvalid_error").style.display="none";

Answer 4

除了遍历元素并为它们的属性分配一些值外，没有任何特殊的计算。 因此，该代码执行的性能不佳，无法尝试改善其性能。

另一方面，您应该使用jQuery之类的库来完成您的工作。 您可能能够缩短许多遍历，因为您可以让jQuery重用它找到的对象，并从此开始进一步寻找其他对象...

Answer 5

您应该缓存您的dom查找，例如

var pic_target = document.getElementById("pic_target");

然后，您可以使用此变量来应用样式，并且只执行一次dom查找。 我认为这是加快js速度的关键