我是否在用javascript循环向页面写入过多数据？

我试图建立一个子网计算器作为我自己的个人项目来学习编程。我遇到问题的部分是，我想展示分类子网范围，例如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子网（使用/32最大值为65536）。然而，当我进入数十万和数百万的时候，我仍然有问题。我创建了一个测试脚本来处理数字，看看什么是有效的。由于对这一点很陌生，我已经没有主意了。这是我的测试代码

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();

var i=0；
var myArray=新数组（）；
document.getElementById（'subnetRange'）.innerHTML=“加载…”//继续抽水？
函数doCalculation（）
{
//环绕循环以1000个增量中断时间
对于（变量x=0；x<2000；x++）{
myArray[i]=i；
i=i+1；
var完成百分比=i；
}
返回完成百分比；
}
功能泵（）
{
var percent_complete=doCalculation（）；
如果（完成百分比=100000）{
document.getElementById（'subnetRange'）。innerHTML=myArray.join（“
”）；//是否继续泵送？
}
}
//设置超时（泵，1）；
泵（）；

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

---

谢谢

设置超时需要毫秒。。。也许把它从1增加到25或35

setTimeout(pump, 35);

---

您将

doccalculation

的计算分为2000块，但一旦数组的长度为100000，您就可以这样做

document.getElementById（'subnetRange'）。innerHTML=myArray.join（“
”）；

那是错误的方向。不填充数组是一项繁重的工作（发生在亚毫秒内），但需要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);
    }
}

功能泵（）{
var oldItemCount=myArray.length；
var percent_complete=doCalculation（）；
var newItems=myArray.slice（oldItemCount）；
document.getElementById（'subnetRange'）。innerHTML+=newItems.join（“
”）；
//                                               ^^^^^^^^^^^
如果（完成百分比<100000）{
设置超时（泵，1）；
}
}

（）

---

请注意，上面的代码只是为了理解问题，可以做进一步的改进：

newItems

可能是

doccalculation

的返回值，此时切片将变得不必要。而

innerHTML+=

实际上可能会降低无法优化的旧浏览器的速度（它们序列化DOM，进行字符串连接，然后再次解析巨大的HTML字符串）。您可能需要找到一种更好的方法来附加小的DOM元素块。

看起来很有趣，您可以发布一个实时演示吗？我是否正确理解您正在将（轻）

doccalculation

调用拆分为非常小的异步块，然后立即（重）向DOM写入100000行？是的，这就是我正在做的。有没有一种方法可以一次写一点，但也可以让它非常快。我看到了一个5000行的演示，但是花了很长时间。。。按照我写的方式，当超过100000个循环时，它仍然会导致浏览器锁定。现在浏览器是Firefox。它在铬合金中工作得更好。不过，我希望它在所有（当前）浏览器中都能正常工作。

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

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);
    }
}