Javascript 我的脚本需要12秒才能运行，但稍后确切的脚本需要50毫秒才能运行？
我有一段代码：Javascript 我的脚本需要12秒才能运行，但稍后确切的脚本需要50毫秒才能运行？,javascript,html,web-applications,Javascript,Html,Web Applications,我有一段代码： <!DOCTYPE html><html><head> <style>button{disabled:true;}</style> <script> var d; function when_loaded(){ d=document.getElementById("d"); //adding nested elements to d using different methods //
<!DOCTYPE html><html><head>
<style>button{disabled:true;}</style>
<script>
var d;
function when_loaded(){
d=document.getElementById("d");
//adding nested elements to d using different methods
//basically just simulating a real situation
document.title="loading..";
for(var x=0;x<3500;++x){
d.appendChild( document.createElement("div"));
d.appendChild( document.createElement("div")).innerHTML = "asd";
d.appendChild( document.createElement("div")).innerHTML = "<a href='#'>zxc</a><div>qwe</div>";
d.appendChild( document.createElement("span")).innerHTML = "asd";
d.appendChild( document.createElement("div")).appendChild( document.createElement("span")).appendChild( document.createElement("span"));
}
document.title="loading done";
var del=document.getElementById("del");
var del2=document.getElementById("del2");
del.style.disabled=del2.style.disabled="false";
}
function del(){
document.title="deleting";
var a=new Date().getTime();
d.innerHTML="";
var b=new Date().getTime();
document.title="deleted";
alert(b-a+" milli seconds taken");
document.body.innerHTML="you can refresh the page now and try the other button";
}
function del2(){
document.title="deleting";
var a=new Date().getTime();
var c;
while(c=d.firstChild){
d.removeChild(c);
}
var b=new Date().getTime();
document.title="deleted";
alert(b-a+" milli seconds taken");
document.body.innerHTML="you can refresh the page now and try the other button";
}
</script>
</head><body onload="when_loaded();">
<button id="del" onclick="del();">del</button>
<button id="del2" onclick="del2();">del2</button>
<div id="d"></div>
</body></html>
按钮{已禁用：true；}
变量d；
加载时的函数（）{
d=document.getElementById（“d”）；
//使用不同的方法向d添加嵌套元素
//基本上只是模拟真实情况
document.title=“加载…”；
对于（var x=0；x您不应该在for循环中将元素附加到DOM中。它必须不断地重新绘制页面，导致性能降低
您应该创建一个新元素作为包装器。将所有新元素附加到此元素。循环完成后，将其附加到页面。如果只花了12秒一次，而且再也不花了，那么第一次就将其放在占用CPU的其他应用程序上。您可能感兴趣，这允许您发布性能e测试并收集大量访问者的统计数据。很难判断是什么导致了差异，但由于第一次运行后的所有运行时间都是50毫秒，所以第一次运行可能是侥幸，或者有另一个应用程序正在使用cpu，导致脚本运行缓慢。我看到时间在50-60毫秒范围内，并且在Chrome中大约有10个标签打开。当时你的机器上还有其他事情吗？例如，如果另一个进程正在消耗内存或占用处理器，可能你看到了延迟的结果？自从你重新启动后，可能你看到了分页的结果？@Joekall你能试试并告诉我你的结果吗？@ty..@ajm你是什么意思第二个按钮需要50-60毫秒才能正常运行？heys也会发布你的结果。你需要多长时间？第二个按钮对我来说总是需要47-65毫秒（在Windows 7/Chrome 12和Ubuntu/Chrome 11上试用过）。但是，在Windows中，页面本身始终需要10秒才能显示按钮（在Ubuntu中只需要2秒）。