【问题标题】:Large quantity of data on JavaScript and HTML leads to the "Page unresponsive" dialogue in XAMPPJavaScript 和 HTML 上的大量数据导致 XAMPP 中的“页面无响应”对话框
【发布时间】:2019-03-18 15:50:27
【问题描述】:

我必须使用 PHP、HTML 和 JavaScript 编写程序。该程序必须生成 100 万个随机车牌并将它们显示在文本字段中。 该计划还应跟踪每个省的车牌。 我使用了下面的脚本,但是当我尝试生成超过 10000 个时,我在 XAMPP 中得到一个“页面无响应”对话框。 我想知道是否没有更简单的方法可以做到这一点?谢谢!

<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>

【问题讨论】:

  • 我认为没有人会浏览 1MM 记录。您可以生成它们并将它们存储在数据库中,然后通过对结果进行分页在 50 上以块的形式显示它们。
  • 谢谢,这是我考虑的,但作业说:“单击按钮时,生成 1M 随机板,并将它们显示在文本区域中”。所以要达到最高分,我的文本区域中必须有 1M 随机板块...
  • 使用 ajax 可以欺骗解决方案。为带有溢出滚动的文本框设置一个固定的高度,用前 50 个板填充它,当滚动到达底部时,将下一个 50 带入并将它们附加到文本框。

标签: javascript php html xampp


【解决方案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 - 使用 ifelse 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;

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

【讨论】:

  • 谢谢!我听从了你的建议,但 XAMPP 最后给出了同样的错误。不过,在我等了几秒钟后,它做出了响应并起作用了。这已经是一个巨大的进步!
  • 我的荣幸!随时!
猜你喜欢
  • 2020-07-04
  • 1970-01-01
  • 1970-01-01
  • 2021-11-18
  • 1970-01-01
  • 2012-03-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多