利用javascript 添加1万个div 效率优化
时间: 2024-01-30 16:01:28 浏览: 23
在添加大量DOM元素时,优化代码的关键是减少DOM操作的次数。以下是一些可以优化代码的方法:
1. 使用文档片段:创建一个文档片段并在其中添加所有的div元素,最后再将文档片段一次性添加到DOM树中。这样可以减少DOM操作的次数。
```javascript
const fragment = document.createDocumentFragment();
for (let i = 0; i < 10000; i++) {
const div = document.createElement('div');
fragment.appendChild(div);
}
document.body.appendChild(fragment);
```
2. 使用innerHTML:将所有的div元素拼接成一个HTML字符串,然后一次性添加到DOM树中。这样可以减少DOM操作的次数。
```javascript
let html = '';
for (let i = 0; i < 10000; i++) {
html += '<div></div>';
}
document.body.innerHTML = html;
```
3. 使用CSS:将所有的div元素放在同一个CSS类中,然后使用JavaScript一次性添加这个CSS类到DOM树中。这样可以减少DOM操作的次数。
```javascript
const style = document.createElement('style');
style.textContent = '.my-class { width: 100px; height: 100px; }';
document.head.appendChild(style);
const divs = [];
for (let i = 0; i < 10000; i++) {
const div = document.createElement('div');
div.className = 'my-class';
divs.push(div);
}
document.body.append(...divs);
```
4. 使用requestAnimationFrame:将添加div元素的操作放在requestAnimationFrame中,这样可以让浏览器在下一帧渲染之前处理这些操作。这样可以减少DOM操作对性能的影响。
```javascript
let count = 0;
function addDivs() {
const div = document.createElement('div');
document.body.appendChild(div);
count++;
if (count < 10000) {
requestAnimationFrame(addDivs);
}
}
requestAnimationFrame(addDivs);
```