While循环使页面重新加载很慢

问题描述：

我有1而在JavaScript中的函数循环，该功能不会被调用的页面加载时，但是当我发表意见，而环出，网页的装填时间是相当很快。当while循环未被注释掉时，重新加载页面需要6秒钟的时间。While循环使页面重新加载很慢

为什么会出现这种减缓加载时间这么多，我怎么让页面载入速度而不删除功能？

（代码的目的是为了选择多个文件，并且当选择了文件时，在列表中显示它们）

的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>

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

连接'innerHTML'非常昂贵。您应该分别构建HTML并一次性插入。 – SLaks

答

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开发者工具的性能和内存使用情况的图形使用和不使用这些线路评论出来并没有看到明显的差异。他们似乎总体运行速度相似。

所以这里可能会有更多。

答

夫妇的评论：直到你需要他们不要访问函数或函数的结果;创建字符串变量然后分配它们。使用默认值并仅在需要时更改。缓存jQuery对象变量$ myObject，而不是重建jQuery对象。不要使用jQuery作为原生函数，而是使用$ myObject [0] .id = ....使用特异性来加速jquery查找，例如$（body #container> #results> .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循环使页面重新加载很慢

相关推荐