JavaScript 和 HTML 上的大量数据导致了 XAMPP 中的 "Page unresponsive" 对话

Question

我必须使用 PHP、HTML 和 JavaScript 编写程序。该程序必须生成 100 万个随机车牌并将它们显示在文本字段中。该程序还应跟踪每个省的车牌。我使用了下面的脚本，但是当我尝试生成超过 10000 个时，我在 XAMPP 中得到一个 "Page unresponsive" 对话。我想知道是否有更简单的方法来做到这一点？谢谢！

<html>
    <head>
        <title>Form generate licence plates</title>
<script language="javascript" type="text/javascript">
//The letters available for use.
arrLetters = ['B', 'C', 'D', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'V', 'W', 'X', 'Z']
//The province codes available for use.
arrProvCode = ['CA', 'ZN', 'MP', 'EC', 'L', 'GP', 'NC', 'FS', 'NW']
arrGenLetters = []
arrGenNumbers = []
arrGenNumberPlates=[]
var GenProvCode = ""; //The random generated province code

var countCA = 0;
var countZN = 0;
var countMP = 0;
var countEC = 0;
var countL = 0;
var countGP = 0;
var countNC = 0;
var countFS = 0;
var countNW = 0;


function GenerateAndAddtext() 
{
//Repeat 1M times.
for(k=0; k<1000000; k++)
{
    //Generate 3 random letters & add to array.
    for(j=0; j<3; j++)
    {
    var min=0; 
    var max=20;  
    var randomNumber = Math.floor(Math.random() * (+max - +min)) + +min; 
    arrGenLetters[j] = arrLetters[randomNumber];
    }   
    //Generate 3 random numbers & add to array.
    for(i=0; i<3; i++)
    {
    var min=0; 
    var max=9;  
    var randomNumber2 = Math.floor(Math.random() * (+max - +min)) + +min; 
    arrGenNumbers[i] = randomNumber2;
    }   
    //Generate the random province code.
    var min=0; 
    var max=9;  
    var randomNumber3 = Math.floor(Math.random() * (+max - +min)) + +min; 
    var GenProvCode = arrProvCode[randomNumber3];
    //Count the province codes per province.
    if(GenProvCode == "CA")
    {
        ++countCA
    }
    if(GenProvCode == "ZN")
    {
        ++countZN
    }
    if(GenProvCode == "MP")
    {
        ++countMP
    }
    if(GenProvCode == "EC")
    {
        ++countEC
    }
    if(GenProvCode == "L")
    {
        ++countL
    }
    if(GenProvCode == "GP")
    {
        ++countGP
    }
    if(GenProvCode == "NC")
    {
        ++countNC
    }
    if(GenProvCode == "FS")
    {
        ++countFS
    }
    if(GenProvCode == "NW")
    {
        ++countNW
    }

    arrGenNumberPlates[k] = arrGenLetters[0] + arrGenLetters[1] + arrGenLetters[2] + "-" + arrGenNumbers[0] + arrGenNumbers[1] + arrGenNumbers[2] + "-" +GenProvCode;
    }

    for(v=0; v<1000000; v++)
    {
    document.OutputForm.GeneratedPlates.value += arrGenNumberPlates[v]+ "\n";
    }

    document.OutputForm.Gauteng.value = countGP;
    document.OutputForm.Mpumalanga.value = countMP;
    document.OutputForm.Limpopo.value = countL;
    document.OutputForm.WesternCape.value = countCA;
    document.OutputForm.KwaZuluNatal.value = countZN;
    document.OutputForm.EasternCape.value = countEC;
    document.OutputForm.FreeState.value = countFS;
    document.OutputForm.NorthenCape.value = countNC;
    document.OutputForm.NorthWest.value = countNW;

}
</script>
        </head>
        <body>
        <form name="OutputForm">
        <input type="button" value="Generate" onClick="GenerateAndAddtext();"><br>
        <textarea name="GeneratedPlates" cols="80" rows="30"></textarea><br>
        <label>Gauteng<input type="text" name="Gauteng"></label><br>
        <label>Mpumalanga<input type="text" name="Mpumalanga"></label><br>
        <label>Limpopo<input type="text" name="Limpopo"></label><br>
        <label>Western Cape<input type="text" name="WesternCape"></label><br>
        <label>KwaZulu-Natal<input type="text" name="KwaZuluNatal"></label><br>
        <label>Eastern Cape<input type="text" name="EasternCape"></label><br>
        <label>Free State<input type="text" name="FreeState"></label><br>
        <label>Northen Cape<input type="text" name="NorthenCape"></label><br>
        <label>North West<input type="text" name="NorthWest"></label><br>
        </form>
        </body>
    </html>

Answer 1

您应该尽量减少进程数量，如下所示：

1 - 将变量定义移除到 for 循环中。您不必在每个循环中都设置它。在循环之前设置一次即可。

来自

for(j=0; j<3; j++)
{
    var min=0; 
    var max=20;  
    var randomNumber = Math.floor(Math.random() * (+max - +min)) + +min; 
    arrGenLetters[j] = arrLetters[randomNumber];
}

到

var min=0; 
var max=20; 
for(j=0; j<3; j++)
{ 
    var randomNumber = Math.floor(Math.random() * (+max - +min)) + +min; 
    arrGenLetters[j] = arrLetters[randomNumber];
}

2 - 在没有理由的情况下删除重复的循环。为此，创建 2 max 个变量。

来自

//Generate 3 random letters & add to array.
for(j=0; j<3; j++)
{
    var min=0; 
    var max=20;  
    var randomNumber = Math.floor(Math.random() * (+max - +min)) + +min; 
    arrGenLetters[j] = arrLetters[randomNumber];
}
//Generate 3 random numbers & add to array.
for(i=0; i<3; i++)
{
    var min=0; 
    var max=9;  
    var randomNumber2 = Math.floor(Math.random() * (+max - +min)) + +min; 
    arrGenNumbers[i] = randomNumber2;
}
//Generate the random province code.
var min=0;
var max=9;

到

//Generate 3 random letters & add to array.
var min = 0, max = 9, max2 = 20;
for(j=0; j<3; j++)
{ 
    var randomNumber = Math.floor(Math.random() * (+max2 - +min)) + +min; 
    arrGenLetters[j] = arrLetters[randomNumber];
    var randomNumber2 = Math.floor(Math.random() * (+max - +min)) + +min; 
    arrGenNumbers[j] = randomNumber2;
}

3 - 使用 if 和 else if 而不是多个 if。它会在满足条件时停止，而不是继续验证所有其他条件。您可能会考虑 switch，还有很多 if.

来自

if(GenProvCode == "CA")
{
    ++countCA
}
if(GenProvCode == "ZN")
{
    ++countZN
}
if(GenProvCode == "MP")
{
    ++countMP
}
if(GenProvCode == "EC")
{
    ++countEC
}
if(GenProvCode == "L")
{
    ++countL
}
if(GenProvCode == "GP")
{
    ++countGP
}
if(GenProvCode == "NC")
{
    ++countNC
}
if(GenProvCode == "FS")
{
    ++countFS
}
if(GenProvCode == "NW")
{
    ++countNW
}

至

if(GenProvCode == "CA")
{
    ++countCA
}
else if(GenProvCode == "ZN")
{
    ++countZN
}
else if(GenProvCode == "MP")
{
    ++countMP
}
else if(GenProvCode == "EC")
{
    ++countEC
}
else if(GenProvCode == "L")
{
    ++countL
}
else if(GenProvCode == "GP")
{
    ++countGP
}
else if(GenProvCode == "NC")
{
    ++countNC
}
else if(GenProvCode == "FS")
{
    ++countFS
}
else if(GenProvCode == "NW")
{
    ++countNW
}

4 - 首先连接 1000000 值然后注入它。不然过程会很重

来自

for(v=0; v<1000000; v++)
{
    document.OutputForm.GeneratedPlates.value += arrGenNumberPlates[v]+ "\n";
}

到

myValue = '';
for(v=0; v<1000000; v++)
{
    myValue += arrGenNumberPlates[v]+ "\n";
}
document.OutputForm.GeneratedPlates.value += myValue;

希望能按您的意愿优化，否则请告诉我，有很多解决方案可以不断提高速度。如果您有任何意见、反馈或问题，请告诉我。

JavaScript 和 HTML 上的大量数据导致了 XAMPP 中的 "Page unresponsive" 对话

Large quantity of data on JavaScript and HTML leads to the "Page unresponsive" dialogue in XAMPP

html

javascript

php

xampp