Question

是否可以加快网格的填充速度？以下示例在MBPro（2018）上花费约20秒。

我尝试使用queryselectorAll和getElementsByClass名称，但是没有发现差异。

我尝试将节点列表放入数组，但是没有得到改进。

let div;
let cycles = 1000;
const min = 0;
const max = ( 54 * 40 ) - 1;

for ( let i = 0; i < max + 1; i++ ){
    div = document.createElement( "DIV" );
    div.classList = "grid-element";
    div.id = i;
    document.querySelector( ".grid-container" ).appendChild( div );
};

document.getElementById( "populate" ).addEventListener( 'click', () => {
    const cells = document.getElementsByClassName( "grid-element" );
    let start = new Date().getTime();
    function loop(){
        let cell = Math.floor( Math.random() * ( max - min + 1 ) + min );
        if ( cells[ cell ].innerText === "" ) {
            cells[ cell ].innerText = 1;
        } else {
            cells[ cell ].innerText = parseInt( cells[ cell ].innerText ) + 1;
        };
        if( cycles != 0 ) {
            requestAnimationFrame( loop );
            cycles--;
        } else {
            alert( `Executed in ${ ( new Date().getTime() - start ) / 1000 } secs.` );
        };
    };
    requestAnimationFrame( loop );
});

.grid-container {
    color: #ddd;
    display: grid;
    grid-template-columns: repeat( 54, 1fr );
    background-color: #999;
    grid-gap: 1px;
}

.grid-element {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #333;
    font-size: 14px;
    font-weight: 600;
}   

.grid-element:before {
    content: "";
    padding-top: 100%;
}

<body>
    <button id="populate">Populate</button>
    <div class="grid-container"></div>
</body>

建议使用重构代码，如 @fleau 。

document.getElementById( "populate" ).addEventListener( 'click', () => {
        const cycles = 2500;
        const min = 0;
        const max = ( 54 * 40 ) - 1;
        const tab = [];
        const container = document.querySelector( ".grid-container" );
        container.innerHTML = "";

        for ( let i = 0; i < cycles; i++ ){
           const numb = Math.floor( Math.random() * ( max - min + 1 ) + min );
           tab[numb] = typeof( tab[ numb ] ) === "number" ? tab[ numb ] + 1 : 1;
        };

        for ( i = 0; i < max + 1; i++ ){
            const div = document.createElement( "DIV" );
            div.innerText = typeof( tab[ i ] ) === "number" ? tab[ i ] : "";
            container.appendChild( div );
        };
			
});

	.grid-container {
    color: #ddd;
	display: grid;
	grid-template-columns: repeat( 54, 1fr );
	background-color: #999;
	grid-gap: 1px;
}

.grid-container > div {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #333;
	font-size: 14px;
	font-weight: 600;
}	

.grid-container > div:before {
	content: "";
	padding-top: 100%;
}

<body>
    <button id="populate">Populate</button>
    <div class="grid-container"></div>
</body>

Answer 1

这是因为您一直在尝试更改用户界面，如果不这样做，它是瞬间的。我的代码不干净，但无需修改用户界面就可以查看

let div;
let cycles = 1000;
const min = 0;
const max = ( 54 * 40 ) - 1;


function cell() {
  return Math.floor( Math.random() * ( max - min + 1 ) + min );
}

function generateTable() {
    for ( let i = 0; i < max + 1; i++ ){
	    div = document.createElement( "DIV" );
	    div.classList = "grid-element";
	    div.id = i;
	    div.innerText = typeof(tab[i]) === "number" ? tab[i] + 1 : 1;
	    document.querySelector( ".grid-container" ).appendChild( div );
	};
}

const tab = []

function loop(val){
    const numb = cell()
    tab[numb] = typeof(tab[numb]) === "number" ? tab[numb] + 1 : 1;
    if( val != 0 ) {
        loop(val-1);
    } else {
    	generateTable();
        alert( `Executed in ${ ( new Date().getTime() - start ) / 1000 } secs.` );
    };
};


const start = new Date().getTime();
document.getElementById( "populate" ).addEventListener( 'click', () => {
    loop(cycles);
});

.grid-container {
    color: #ddd;
    display: grid;
    grid-template-columns: repeat( 54, 1fr );
    background-color: #999;
    grid-gap: 1px;
}

.grid-element {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #333;
    font-size: 14px;
    font-weight: 600;
}   

.grid-element:before {
    content: "";
    padding-top: 100%;
}

<body>
    <button id="populate">Populate</button>
    <div class="grid-container"></div>
</body>

如何加快网格上的DOM更新

1 个答案: