[Jquery] insertAdjacentHTML vs innerHTML

웹페이지 개발을 하다보면, 사용자 편의성 등을 위해, 서버에서 데이터를 가져와서 Ajax형태로 화면의 변화없이

실시간 처리를 하는 경우가 많다.

이런경우 태그를 변수 하나에 담은 후에, $('#test').html(''); 과 같은 형태로 특정 element에 태그를 삽입하게 되는데,

방식에 따라 성능차이가 있다.

innerHTML (jquery에서의 .html())은 해당 태그 안에 있는 모든 element를 다시 파싱을 하여, 재 가공을 하는 작업을 하기 때문에

매우 느리다.

insertAdjacentHTML (jquery에서의 append, appendTo, 등 자세한 설명은 아래 링크를 참조)

http://api.jquery.com/insertAfter/
http://api.jquery.com/append/
http://api.jquery.com/appendTo/
http://api.jquery.com/prepend/
http://api.jquery.com/prependTo/

insertAdjacentHTML 같은 경우는 해당 태그의 앞, 뒤 등 원하는 부분을 선택해서 태그를 추가할 수 있기 때문에,

innerHTML 방식보다는 속도가 확실히 빠르고, innerHTML 에서의 속도 문제를 해결하기 위해 나온 스펙이라고 한다.

MDN을 참고 (https://developer.mozilla.org/ko/docs/Web/API/Element/insertAdjacentHTML)

tbody같은 태그에 내용을 한번에 다 구성해서 넣는 경우에는 성능차이가 없을 것으로 보이지만,

되도록이면 새로운 스펙을 사용하도록 노력하는 게 좋을 것 같다.