Created
January 27, 2019 00:23
-
-
Save gil00pita/8c7f9356ea54a87110bb075cf53e83f0 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//Appending DOM is the most expensive operation, choose the right approach | |
// 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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//Use css classes instead inline styles | |
// 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'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//Avoid DOM manipulations inside loops | |
// 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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//Don't use DOM values inside loops | |
// BAD | |
let nodes = document.querySelector('.menu-items'); | |
for (let i = 0; i < node.length; i++) { ... } | |
// GOOD | |
let nodes = document.querySelector('.menu-items'); | |
const size = nodes.length; | |
for (let i = 0; i < size; i++) { ... } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//Use innerHTML only for first rendering and then use DOM methods | |
// 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!">'; | |
container.value = 'Bye DEVS!'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//Use selector instead nested elements | |
// BAD | |
let menu = document.querySelector('header > nav > ul.menu'); | |
// GOOD | |
let menu = document.querySelector('.menu'); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment