목차
반복문 내 활동 줄이기 DOM요소 접근 줄이기 DOM요소 개수 줄이기 불필요한 변수 생성 피하기 JavaScript 로딩 지연시키기 with 키워드 사용 피하기 적절한 데이터 구조 사용하기
반복문 내 활동 줄이기
반복문 내부의 모든 구문은 반복 실행되는데, 반복문 외부에 둘 수 있는 것은 되도록 반복문 밖에 배치하는 게 좋음.
[예제]
// 나쁜코드
for (let i = 0; i < arr.length ; i++) {
// 좋은코드
let l = arr.length;
for (let i = 0; i < l ; i++) {
DOM요소 접근 줄이기
여러 번 DOM요소에 접근하는 것보다 변수에 담아두고 사용하는 게 좋음.
[예제]
<p id="demo"></p>
<script>
const hz = document.getElementById("demo");
hz .innerHTML = "홈짱닷컴 Homzzang.com";
</script>
DOM요소 개수 줄이기
DOM요소 개수를 줄이면, 소형기기에서의 렌더링에 큰 도움됨.
불필요한 변수 생성 피하기
값을 저장 안 하면 불필요하게 변수 생성 자제.
[예제]
// 나쁜코드
let hz = site + " " + host;
document.getElementById("demo").innerHTML = hz ;
// 좋은코드
document.getElementById("demo").innerHTML = site + " " + host ;
JavaScript 로딩 지연시키기
1.
페이지 본문 하단에 스크립트를 배치하면 브라우저가 페이지를 먼저 로드 가능함.
2.
스크립트 다운로드하는 동안엔 브라우저는 다른 다운로드를 시작 안 함. 또한, 모든 구문 분석 및 렌더링 활동이 차단될 수 있음.
3.
HTTP 사양은 브라우저가 두 개 이상의 구성요소를 병렬로 다운로드하지 않아야 한다고 정의함.
4.
대안은 defer="true" 를 스크립트 태그 에서 사용하는 것임.
PS. 아래 방법으로도 페이지 로드 후 페이지에 스크립트 추가 가능.
<script>
window.onload = function() {
const element = document.createElement("script");
element .src = "myScript.js ";
document.body.appendChild(element );
};
</script>
with 키워드 사용 피하기
with 키워드는 속도에도 부정적이고, 범위(Scope)도 복잡하게 함.
엄격모드 (Strict mode)에서는 with 키워드 사용 허용 X
적절한 데이터 구조 사용하기
구현 로직에 최적인 데이터 구조 사용하면 속도 빨라짐.
[예제]
// 나쁜코드 (∵ 배열 길이에 따라 성능 저하 야기)
const colors = ["red", "blue", "green", "yellow"];
function isColorPresent(color) {
return colors.indexOf(color) !== -1 ;
}
// 좋은코드 (∵ Set은 중복 허용 않는 데이터구조라 빠름.)
const colorsSet = new Set(["red", "blue", "green", "yellow"]);
function isColorPresent(color) {
return colorsSet.has(color) ;
}
