Javascript 성능 저하에 조심 할 부분

Javascript 성능을 저하시키는 부분에 대한 좋은 글이 있어서 

공부해보고 정리해 보았다.

=> 원본
https://m.blog.naver.com/tmondev/221070295102

1. 전역 변수 및 Element를 캐싱
=> 자바스크립트의 전역 변수는 스코프 체인의 마지막에 오게 되므로, 전역 변수 내의 태그 탐색 등의 일을 하게되기 때문에 n*2의 비용이 발생

=> 어떤 값을 찾을 때까지 스코프 체인 끝까지 뒤지기 때문에 성능에 문제가 발생할 수 있다는 뜻으로 해석됨.

/* 사례 1.
  document라는 javascript 전역 객체에 지속적으로 접근하기 때문에 해당 객체의 스코프 체인을 실행시키기 때문에
 문제가 발생하므로 doc 지역변수에 캐싱하여 사용
*/
# 문제상황
function problemFunction() {
  var data = document.getElementById('data');
  var data2 = document.getElementById('data2');
  var data3 = document.createElement('data3');
};
 
# 해결방법
function solutionFunction() {
  var doc = window.document;
 
  var data = doc.getElementById('data');
  var data2 = doc.getElementById('data2');
  var data3 = doc.createElement('data3');
};
 
 
/* 사례 2.
  jQuery를 사용할 때에도 변수를 이용하는 방식이 더 효율적
*/
# 문제상황
function problemFunction() {
  $(“#dataId”).val(“cjung”);
  $(“#dataId”).css(“display”, “NONE”);
  $(“#dataId”).attr(“checked”, true);
};
 
# 해결방법
function solutionFunction() {
  var data = $('#dataId');
 
  data.val(“cjung”);
  data.css(“display”, “NONE”);
  data.attr(“checked”, true);  
};
 


/* 사례 3.
  append child 할때도 다음과 같이 하는 것이 효율적
*/
# 문제상황
function problemFunction() {
  var data = document.createElement("data");
  opt.text = 'data is fun';
  $('#dataDiv').appendChild(opt);
};
 
# 해결방법
function solutionFunction() {
  var dataDiv = $('#dataDiv');
 
  dataDiv.append('<span>fdfdf</span>');
};

2. javascript 문자열 조합 방식 성능 (concat, join)

function concatTest() {
  var str = "concat" + "is" + "goog";
}
 
function arrayTest() {
  var strArray = ["array", "is", "not good"];
  var str = strArray.join('');
}
 
// concat 보다 array join이 성능이 더 좋다고 알려졌으나 요새는 concat이 성능이 더 좋다.

3. innerHTML과 appendChild
=> appendChilde는 element 개수만큼 매번 새로 할당하는 방식이고, innerHTML은 노드를 직렬화하여 개수만큼 만들어 한번만 할당하므로 innerHTML이 더 좋다.
-> 다만 이 두개의 차이는 만건 이상의 element를 새로 생성할 정도의 규모에서 차이가 발생한다.

function innerHTMLFunc() {
  var doc = document;
  var data = doc.getElementById('dd');
  data.innerHTML = "<span>" + 'dfdf' + </span>;
}
 
function innerHTMLFunc() {
  var doc = document;
  var data = doc.getElementById('dd');
  var span = doc.createElement('span');
  span.innerText = 'dfdf';
  data.appendChild(span);
}