利用 JavaScript DOM 操作提升性能
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
我撰写本文旨在通过实例向您展示，在使用原生 JavaScript 开发 Web 应用程序时如何避免性能问题。
使用选择器代替嵌套元素
// BAD
let menu = document.querySelector('header > nav > ul.menu');
// GOOD
let menu = document.querySelector('.menu');
避免在循环内进行 DOM 操作
// BAD
for (let i = 0; i < 10; i++) {
document.querySelector('.numbers').innerText += i;
}
// GOOD
let numbers = '';
for (let i = 0; i < 10; i++) {
numbers += i;
}
document.querySelector('.numbers').innerText = numbers;
不要在循环中使用 DOM 值
// BAD
let nodes = document.querySelectorAll('.menu-items');
for (let i = 0; i < node.length; i++) { ... }
// GOOD
let nodes = document.querySelectorAll('.menu-items');
const size = nodes.length;
for (let i = 0; i < size; i++) { ... }
使用 CSS 类代替内联样式
// BAD
let card = document.querySelector('.card');
card.style.width = '400px';
card.style.color = '#f0f0f0';
card.style.marginTop = '10px';
// GOOD
let card = document.querySelector('.card');
card.style.cssText = ''.concat(
'width : 400px;',
'color : #f0f0f0;',
'margin-top : 10px;'
);
// BETTER
.card-custom {
width: 400px;
color: #f0f0f0;
margin-top: 10px;
}
let card = document.querySelector('.card');
card.classList.add('card-custom');
向 DOM 中添加元素是最耗时的操作，请选择正确的方法。
// BAD
let container = document.querySelector('.container');
for (let i = 0; i < 1000; i++) {
let a = document.createElement('a');
a.text = `Row N° ${i}`;
container.appendChild(a);
}
// GOOD
let container = document.querySelector('.container');
let html = '';
for (let i = 0; i < 1000; i++) {
html = html.concat(`<a>Row N° ${i}</a>`);
}
container.innerHTML = html;
// BETTER
let a = document.createElement('a');
let container = document.querySelector('.container');
for (let i = 0; i < 1000; i++) {
let cloneA = a.cloneNode(true);
cloneA.text = `Row N° ${i}`;
container.appendChild(cloneA);
}
// BETTER^2
let a = document.createElement('a');
let container = document.querySelector('.container');
let documentFragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
let cloneA = a.cloneNode(true);
cloneA.text = `Row N° ${i}`;
documentFragment.appendChild(cloneA);
}
container.appendChild(documentFragment);
仅在首次渲染时使用 innerHTML，然后使用 DOM 方法。
// BAD
let container = document.querySelector('.container');
container.innerHTML = '<input type="text" name="example" value="Hi DEVS!">';
container.innerHTML = '<input type="text" name="example" value="Bye DEVS!">';
// GOOD
let container = document.querySelector('.container');
container.innerHTML = '<input type="text" name="example" value="Hi DEVS!">';
let input = container.querySelector('input');
input.value = 'Bye DEVS!';
如果您有什么建议，请留言。
保持冷静，继续编程！