성능 최적화

성능 최적화

불필요한 DOM 작업 방지

브라우저가 DOM 요소를 순회하는 데 비용이 많이 듭니다. DOM 트리 쿼리를 최적화하는 가장 간단한 솔루션은 DOM 트리를 여러 번 쿼리하지 않도록 요소가 여러 번 나타날 때 이를 변수에 저장하는 것입니다.

// Recommended
var myList = "";
var myListHTML = document.getElementById("myList").innerHTML;

for (var i = 0; i < 100; i++) {
  myList += "<span>" + i + "</span>";
}

myListHTML = myList;

// Not recommended
for (var i = 0; i < 100; i++) {
  document.getElementById("myList").innerHTML += "<span>" + i + "</span>";
}

캐시 ​​배열 길이

루프는 의심할 여지 없이 JavaScript 성능과 매우 관련이 있는 부분입니다. 배열의 길이를 저장하면 각 루프를 다시 계산하는 것을 효과적으로 방지할 수 있습니다.

참고: 최신 브라우저 엔진은 이 프로세스를 자동으로 최적화하지만 여전히 오래된 브라우저도 있다는 점을 잊지 마세요.

var arr = new Array(1000),
    len, i;
// Recommended - size is calculated only 1 time and then stored
for (i = 0, len = arr.length; i < len; i++) {

}

// Not recommended - size needs to be recalculated 1000 times
for (i = 0; i < arr.length; i++) {

}

타사 콘텐츠의 비동기 로드

YouTube 동영상이나 좋아요/트윗 버튼과 같은 타사 콘텐츠 삽입이 제대로 작동하는지 보장할 수 없는 경우 전체 페이지가 차단되지 않도록 이러한 코드를 비동기적으로 로드하는 것을 고려해야 합니다. 짐.

(function() {    var script,
        scripts = document.getElementsByTagName('script')[0];    function load(url) {
      script = document.createElement('script');
      script.async = true;
      script.src = url;
      scripts.parentNode.insertBefore(script, scripts);
    }

    load('//apis.google.com/js/plusone.js');
    load('//platform.twitter.com/widgets.js');
    load('//s.widgetsite.com/widget.js');

}());

jQuery를 사용하여 애니메이션을 구현하지 마세요.

1. SlideUp/Down() fadeIn/fadeOut() 및 기타 메서드를 사용하는 것이 금지됩니다.

2 animate() 메서드를 사용하지 마세요.