有人在工作中开玩笑地发出一封电子邮件,其中包含一个html文件,旨在使您的浏览器崩溃,如下所示
<html> <script type="text/javascript"> function crash(){ for(i=0;i<5000000001;i++){ document.write(i); } } </script> <body onload="crash();"> </body> </html>
无论如何,Chrome在Chrome中并没有做得很好,而且发生了一场友好的比赛,以便能够尽快编写一个页面到5,000,000的页面,而不会导致浏览器无响应或崩溃.
我想出了以下用于Chrome的JavaScript.
<html> <script type="text/javascript"> function countToFiveBillion(counter,num){ if(num < 5000000000) { num++; if(num % 18700 == 0){ counter.innerHTML = num; setTimeout(function() {countToFiveBillion(counter,num)},1); } else { countToFiveBillion(counter,num); } } } function initiateCountDown() { var counter = document.getElementById("counter"); var num = +counter.innerHTML; countToFiveBillion(counter,num); } </script> <body onload="initiateCountDown();"> <div id="counter">0</div> </body> </html>
这个只能在chrome中运行的原因是我正在使用setTimeout调用来避免在chrome中创建一个stackoverflow. (Chrome还允许您在所有浏览器中进行递归调用的最大堆栈).
我有什么办法让这个计数更快吗?我认为我可以增加一点数量,然后才会导致溢出(某处小于100).唯一的规定是必须显示尽可能多的数字.
改进代码:
<html> <script type="text/javascript"> var counter; var num = 0; function countToFiveBillion(){ if(num < 5000000000) { num++; if(num % 18701 == 0){ setTimeout("countToFiveBillion()",1); counter.value = num; } else { countToFiveBillion(); } } else { counter.value = "number greater than 5 Billion"; } } function initiateCountDown() { counter = document.getElementById('counter'); countToFiveBillion(); } </script> <body onload="initiateCountDown();"> <input type="text" id="counter" value="0" /> </body> </html>
制造数量和元素globabl
>切换到文本输入而不是div
>设置回调后,将更新UI移动到
解决方法
不要使用.innerHTML = …显示数字.根据
this test,设置输入元素的value属性更有效率.
<input type="text" id="counter" value="0" />
我建议使用全局/局部变量,并将函数引用作为参数传递给setTimeout,或者在init处使用setInterval.
>交换setTimeout(“countToFiveBillion()”,1)setTimeout(countToFiveBillion,0).
说明:“countToFiveBillion()”效率低下;首先,字符串转换为一个函数并调用,然后调用另一个函数调用.建议的函数运行只需要调用一个函数,而不需要创建一个函数.它也被称为分秒秒.
>提升极限(我能够增加18701到20000).在将限制提升到这样一个四舍五入的数字后,我注意到计数器值在每个超时之间更新.
>修复了一些实现中的错误(在else块中用.value替换了.innerHTML).
相关代码:
<input type="text" id="counter" /> <script> var counter,num = 0; function countToFiveBillion(){ if(num < 5e9) { if(++num % 18701 == 0){ setTimeout(countToFiveBillion,0); counter.value = num; } else { countToFiveBillion(); } } else { counter.value = "number greater than 5 Billion"; } } function initiateCountDown(){ counter = document.getElementById('counter'); counter.value = num; //Init,show that the script is countToFiveBillion(); } window.onload = initiateCountDown; </script>