我是不是用javascript循环向页面写入了太多数据

Am I writing out too much data to a page with a javascript loop?

本文关键字：太多 多数据 是不是 javascript 循环      更新时间：2023-09-26

我正在尝试构建一个子网计算器，作为我自己学习编程的个人项目。我有问题的部分是，我想提供分类子网范围，例如172.16.1.1/30将提供16384个子网
172.16.0.0-172.16.0.3
172.16.0.4-172.16.0.7
172.16.0.8-172.16.0.11
…等

因此，当我把它写到网站上时，它会锁定浏览器几秒钟，而且花费的时间比我想象的要长。我尽可能多地研究了一下，发现输入"setTimeout"将有助于锁定和处理ClassB子网（最大值为65536和/32）。然而，当我进入数十万和数百万时，我仍然有问题。我创建了一个测试脚本来处理数字，看看什么有效。我对这件事还很陌生，没什么想法。这是我的测试代码。。。

HTML:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My Page</title>
</head>
<body>
    <div id="subnetRange" style="border : solid 2px #ff0000; background : #000000; color : #ffffff; padding : 4px; width : 250px; height : 350px; overflow : auto; "></div>
    <script type="text/javascript" src="pump.js"></script>
</body>
</html>

JAVASCRIPT:

var i = 0;
var myArray = new Array();
document.getElementById('subnetRange').innerHTML = "Loading...";   //carry on pumping?
function doCalculation()
{
   //Surrounding loop to break the time out up by 1000 increments
   for ( var x = 0; x < 2000; x++) {
     myArray[i] = i;
     i = i + 1;
     var percent_complete=i;
   }
   return percent_complete;
}
function pump()
{
   var percent_complete=doCalculation();
   if (percent_complete<100000)
   {
      //pump();
      setTimeout(pump, 1);
   }
   if (percent_complete >= 100000) {
      document.getElementById('subnetRange').innerHTML = myArray.join("<br />");   //carry on pumping?
   }
}

//setTimeout(pump, 1);
pump();

我希望我能提供足够的信息来帮助他们。如果没有，请询问，我会尽我所能向您提供信息。

感谢

您将doCalculation的计算拆分为2000块，但一旦数组长度达到100000，您就进行

document.getElementById('subnetRange').innerHTML = myArray.join("<br />");

这是错误的做法。不填充数组是繁重的工作（在几毫秒内发生），而是DOM操作。你需要把它拆开，例如：

function pump() {
    var oldItemCount = myArray.length;
    var percent_complete = doCalculation();
    var newItems = myArray.slice(oldItemCount);
    document.getElementById('subnetRange').innerHTML += newItems.join("<br />");
    //                                               ^^^^^^^^^^^
    if (percent_complete < 100000) {
        setTimeout(pump, 1);
    }
}

（更新的演示）

注意，上面的代码只是为了理解这个问题，还可以做进一步的改进：newItems可以是doCalculation的返回值，那么切片就没有必要了。innerHTML +=实际上可能会减慢无法优化的旧浏览器的速度（它们序列化DOM，进行字符串串联，并再次解析巨大的HTML字符串）。您可能需要找到一种更好的方法来附加DOM元素的小块。

setTimeout需要毫秒。。。也许把它从1增加到25或35？

setTimeout(pump, 35);
相关文章：