为什么简单的处理代码会使浏览器崩溃？

Question

在 p5.js 中，我编写了这个简单的线性循环，在屏幕上的随机点之间绘制线条。

如果我循环 99 999 次，屏幕会立即显示。

999 999 次，需要十秒

9 999 999 它会挂起浏览器。

为什么对于具有基本操作的线性循环会发生这种情况？处理生命周期有什么我不理解的吗？就像画布何时更新（每行或分批或什么）？我需要将我的代码放在异步循环中吗？

function setup() 
{
    createCanvas(1920, 965, P2D);
    colorMode(HSL, 100); // hue saturation lightness
    noLoop();
    background(100,100,100,255); //solid white background           
    for (let i = 0; i < 9999999; i++)
        drawLines()
}

function drawLines() 
{
    stroke(60, random(60,100), random(0,100), 255);
    const p1 = getRandomPoint();
    const p2 = getRandomPoint();
    line(p1.x, p1.y, p2.x, p2.y);
}

function getRandomPoint()
{
    return { x: random(0, width), y: random(0, height) };
}

Answer 1

9999999 一次只是多行。分割画线：

function setup() 
{
    createCanvas(1920, 965, P2D);
    colorMode(HSL, 100); // hue saturation lightness
    background(100,100,100,255); //solid white background       
}
 
function draw()
{  
    for (let i = 0; i < 1000; i++)
        drawLines()
    if (frameCount >= 9999)
        noLoop();     
}

function drawLines() 
{
    stroke(60, random(60,100), random(0,100), 255);
    const p1 = getRandomPoint();
    const p2 = getRandomPoint();
    line(p1.x, p1.y, p2.x, p2.y);
}

function getRandomPoint()
{
    return { x: random(0, width), y: random(0, height) };
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>