Question

我在javascript中的函数中有1个while循环，当页面加载时函数没有被调用，但是当我注释while循环时，网页的重新加载时间几乎是即时的。当while循环没有被注释掉时，重新加载页面需要6秒钟。

为什么这会大大减慢加载时间，如何在不删除功能的情况下加快页面加载？

（代码的目的是选择多个文件，选择文件后，将它们显示在列表中）

的Javascript

function first(){
    putin=$('#putin');
    input=document.getElementById('putin');
    list=document.getElementById('list');
    putin.change(function(){
        files();
    });
}
a=true;
function files(){
    i=0;
    if(input.files.length==1){
        document.getElementById('label').innerHTML=input.files.length+' File selected';
    }else{
        document.getElementById('label').innerHTML=input.files.length+' Files selected';
    }
    if(a){
        while(i<input.files.length){
            list.innerHTML+=input.files[i].name+'<br/>';
            i++;
        }
    }
}

HTML

<!doctype html>
<html lang="nl">
    <head>
        <meta charset="utf-8" />
        <title id='title'>Select Files</title>
        <link rel="stylesheet" href="main.css">
        <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
        <script src="selector.js" type="text/javascript"></script>
    </head>
    <body onload="first()">
        <div id='wrap'>
            <label id="label" for="putin">Select files to play!</label>
            <input id='putin' type="file" multiple accept="audio/*,video/*">
        </div>
        <div id='list'>

        </div>

    </body>
</html>

顺便说一下，这是我第一次在这里发帖，而且我是荷兰人，所以可能会有拼写错误或语法错误，对不起

Answer 1

Javascript运行两次。第一遍设置变量和函数，然后第二遍运行代码。

所以，即使你没有运行那个代码，第一遍就会分析它并设置它将运行的范围。所以即使你没有运行它，也会产生潜在的性能影响。做类似于此的事情可能会有所帮助：

while(i<input.files.length){
    tmp +=input.files[i].name+'<br/>';
    i++;
 }
list.innerHTML += tmp;

但是，有趣的是，我把你的代码放在了plunker：http://plnkr.co/edit/rMpOAZIikiDuOl1J4otB?p=info

我查看了chrome开发人员工具中的性能和内存使用情况图表，有没有注释掉这些行，并没有看到显着的差异。它们似乎总体上以相似的速度运行。

所以可能会有更多进展。

Answer 2

几条评论：在您需要之前不要访问函数或函数结果;创建字符串变量然后分配它们。使用默认值并仅在需要时更改。缓存jQuery对象变量$ myObject而不是重建jQuery对象。不要将jQuery用于本机函数，而是使用$ myObject [0] .id = ....使用特异性来获得更快的jquery查找，例如$（body #container＆gt; #results＆gt; .items）。将“if（a）”更改为“...”，因为它始终运行一次。将函数放在匿名对象中以进行错误和范围包含。

html很轻，所以很可能是你的上传，网络或电脑。这是免费打字的，但可能会有所帮助：

. . . . </body>
<script>
(function($) {
    var $input = $('body .container input#fileInput');
    $input.change(function() { 
        var $this = $(this), 
        n = $this.files.length, files = '';
        $($this[0].files).each(function(a, b) { 
            files += '\n<li>Item '+ a +',  '+ b +'</li>';
        });
        $input.append('File(s) Selected:'+ n);
        $('body .container #file-list').append(files);
    });

})(jQuery);
</script>

while循环使页面重新加载非常慢

2 个答案: