0

我在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>

顺便说一句，这是我第一次在这里发帖，我是荷兰人，所以可能会有拼写和/或语法错误，抱歉

4

2 回答 2

0

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 开发者工具中的性能和内存使用图，无论是否注释掉这些行，并没有发现显着差异。而且它们似乎总体上以相似的速度运行。

所以这里可能会发生更多事情。

于 2013-10-22T19:20:19.470 回答
0

一些评论：在需要之前不要访问函数或函数结果；创建字符串变量然后分配它们。使用默认值并仅在需要时进行更改。缓存 jQuery 对象变量 $myObject 而不是重建 jQuery 对象。不要将 jQuery 用于本机函数，而应使用 $myObject[0].id = ...。使用特异性来更快地查找 jquery，例如 $(body #container > #results > .items)。将“if(a)”更改为... while 因为它总是运行一次。将您的函数放在一个匿名对象中，以控制错误和范围。

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>
于 2013-10-22T19:51:42.817 回答