如何提高这个JavaScript代码的性能?

时间:2009-11-27 06:04:23

标签: javascript

不要被吓坏,这是一个非常基本的代码。 只是想和你们核实一下,如果你知道任何方法可以加快速度吗? (还在学习) 它看起来很难看:))

或者,如果你注意到任何可能有所不同的东西......谢谢!

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

5 个答案:

答案 0 :(得分:3)

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

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

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

或更好的用户jQuery

答案 1 :(得分:3)

关于效果

要提取文件扩展名,您可以使用String.substring方法而不是RegExp性能改进 可忽略不计,但我认为它获得了可读性:

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

关于代码:

  1. 您可以在函数顶部声明只有一个ID_file变量,并在if块中使用它。

  2. else ifnr==23真正相似的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;
    

答案 2 :(得分:1)

  • 继续CMS对代码重复执行的操作,您可以在else if块的序列之外重构公共代码。
  • switch语句用于替换if s。
  • 序列
  • 您可以将函数定义为相同的任务,而不是上述两个建议,以实现更具可读性的实现。
  • 如果你继续使用正则表达式(我个人觉得它们非常易读),请记住match返回一个数组。
  • 此外,.+会在第一个句点之后贪婪地匹配所有字符。最好只将非期间与[^.]+匹配。
  • 您可以将对象用作关联数组,而不是长序列的字符串比较:

    var imageExtensions = {'.jpg': 1, '.jpeg': 1, '.gif': 1, '.png': 1, '.bmp': 1};
    if (imageExtensions[extension]) {
    
  • 考虑到条件检查第一个if ... else ...中的条件否定,最后if是不必要的。只需将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";

答案 3 :(得分:0)

除了遍历元素并为其属性分配一些值之外,没有进行任何特殊计算。因此,代码在尝试改善其性能方面表现不佳。

另一方面,你应该使用像jQuery这样的库来完成你正在做的工作。你可能能够缩短很多次遍历,因为你可以让jQuery重用它找到的对象,并从这一点继续寻找其他对象......

答案 4 :(得分:0)

你应该缓存你的dom查找,例如

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

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