innerHTML vs insertAdjacentHTML
2단계 미션을 진행하며, innerHTML를 사용했습니다. insertAdjacentHTML의 존재는 알고 있었지만, 그런 거 왜 써야 하는데..?하는 생각이었죠. 일단 돌아가는 쓰레기를 빨리 만들어 놓기 위한 나의 노력은 막지 못했습니다. 일단 pr을 한 뒤 리팩토링을 한다는 마음가짐으로 작성한 뒤, 해당 부분에 대해 학습하였습니다.
그러던 중 DOM 연산 비용에 대한 이야기를 지난 금요일 피드백 시간에 난생 처음 들었어요. DOM 연산 비용이 존재한다는 것을 알게 된 이상 성능에 대해서 신경을 쓰지 않을래야 않을 수 없더라구요.
innerHTML로 떡칠되어있었던 제 코드.. 괜찮았던걸까요?
출처: https://velog.io/@jangws/innerHTML-vs-insertAdjacentHTML-vs-appendChild-비교
물론 아니었네요. 벤치마크 결과 1)innerHTML과 2)insertAdjacentHTML의 비용 차이는 확연합니다.
그렇다면 왜 이렇게 DOM 연산 비용 차이가 많이 나는 것일까요?
Element.innerHTML
const lego = '<p>my name is lego</p>';
document.element.innerHTML = lego;위와 같은 코드가 있다고 해볼까요. 위 코드를 실행하면 1. element의 기존 자식 요소를 파싱하고, 2. 새로운 값인 lego를 파싱하여 DocumentFragment 객체를 생성합니다. 3. 새롭게 파싱된 객체를 element의 innerHTML에 할당하여 DOM 렌더링 시 반영됩니다.
Element.insertAdjacentHTML()
const lego = '<p>my name is lego</p>';
document.element.insertAdjacentHTMl('beforeend', lego);insertAdjacentHTML은 innerHTML과 다릅니다. element의 자식 요소를 파싱하지 않거든요. 이 부분이 제일 중요합니다. DOM 조작은 비용이 크기 때문에 바로 이 부분이 두 방식의 속도 차이를 가른다고 할 수 있겠습니다.
특정 위치에(위 코드에서 'beforeend' ) DOM tree 안에 원하는 node들을 추가합니다. innerHTML과는 다르게 이미 존재하는 element들을 건드리지 않습니다. 때문에 innerHTML보다 작업이 덜 들어 속도면에서 빠릅니다.
보안
innerHTML와 insertAdjacentHTML 사용시 주의사항이 있는데요. 두 방법 모두 사이트의 공격 경로가 돼 보안 위험이 발생할 수 있습니다. 따라서 보안을 생각한다면 아래와 같은 방법들이 있습니다.
1. 사용자 혹은 제 3자의 텍스트 내용을 설정하기 위해서는 textContent, innerText를 사용하는 것이 좋습니다.
2. DOM에 삽입 전 sanitizing을 해주거나,
3. 백엔드에서 XSS 필터링해주는 방법도 있구요.
4. 아예 새로 추가할 요소 같은 경우에는 createElement..등을 이용한 직접 요소 생성, 조작하는 방법이 있겠습니다.
innerHTML, innerAdjacentHTML 성능 비교
- innerHTML이 비교적 느리고, insertAdjacentHTML이 비교적 빠른 편입니다.
- innerHTML은 무겁고 비싼 대가를 치르는 HMLT 파서를 호출하기 때문에, 만약 텍스트 노드 정도 삽입하는 경우에는 innerText나 Node.textContent를 사용하는 것이 낫습니다. 그 중 Node.textContent는 HTML로 파싱하지 않고 원시 텍스트로 삽입하여 더 빠르게 작업을 완료할 수 있습니다.
더 찾아보니 파싱 작업을 아예 배제하고, createElement와 insertAdjacentElement를 사용하면 더 빠르게 완료할 수 있다고 하는데 이에 대해서는 더욱 학습한 뒤 기록해보도록 하겠습니다.
참고한 글
