.insertAdjacentHTML의 장점과 대안?

Question

.insertAdjacentHTML 메서드를 .innerHTML 이상 사용하면 어떤 이점이 있습니까? .insertAdjacentHTML 대신 .innerHTML을 사용해야하는 특별한 이유가 있습니까? 어느 것이 더 나은 성능을 가지고 있습니까? .innerHTML은 어떻게 작동합니까? 다른 대안은 무엇입니까?

Answer 1

.insertAdjacentHTML에는 .innerHTML 이상의 이점이 있습니다. 첫 번째는 성능입니다. 수행 된 벤치마킹 테스트에서 12 초 만에 200 개의 트위터 트윗보다 약간 더한 .innerHTML이 추가되었습니다. 반면에 insertAdjacentHTML은 같은 시간대에 거의 30,000 개가 추가되었습니다. 추가해야 할 데이터가 많을수록 더 나은 .innerHTML이 수행됩니다. 그러나이 경우 데이터는 .innerHTML +=을 사용하여 추가되었습니다.

또 다른 이점은 제어입니다. .insertAdjacentHTML은 '.innerHTML'은 데이터를 추가 할 위치를 제어 할 수 있지만 '.innerHTML'은 데이터를 추가 할 위치를 제어 할 수 있습니다.

.insertAdjacentHTML의 최종 이점은 DOM을 손상시키지 않는다는 것입니다. 다음은 .innerHTML +=의 작동 방식입니다.

1. 그것은 소자의 자손을 직렬화하여 .innerHTML의 값을 얻는다.
2. 문자열에 + =의 오른쪽을 추가합니다.
3. 요소의 자식을 제거합니다.
4. 에 이전 자손의 직렬화가 포함되어 있고 그 뒤에 일부 새 마크 업이 오는 새 문자열을 구문 분석합니다. 분명히 .innerHTML =을 사용할 경우 마지막 이점은 실제로 적용되지 않습니다. .innerHTML-

다른 대안은 이름으로 삽입 또 다른 노드 전에 아이뿐만 아니라 마지막 노드와 자식 노드를 삽입하는 .appendChild 방법으로 노드를 제안하는 .insertBefore 방법이다.

.insertAdjacentHTML은 .innerHTML, .insertBefore 및 .appendChild의 작업을 수행 할 수있는 다기능 도구입니다.

출처 : https://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/