동적 요소 생성(DOM) - insertAdjacentHTML()

[ParkYK]

innerHTML()보다 훨씬 빠른 insertAdjacentHTML()

파이어폭스가 8.0으로 업그레이드되면서 새로운 DOM Node 함수로 insertAdjacentHTML()가 추가되었다고 한다. 
인접(Adjacent) 위치에 HTML tag를 삽입해주는 함수이다. 
기존의 innerHTML() 함수와 비교해보면 어떤 HTML element의 기존 하위 Node들의 앞 또는 뒤에 새로운 HTML 태그를 삽입하려면, 예전 방식으로는 innerHTML() 함수를 사용하여 아래와 같이 하는 경우가 많았다. 
            element.innerHTML += "<div> 한국인 <span>홍길동 </span> 신기해</div>";

그러나 이런 방식은 DOM Parsing 과정에서, 기존 하위 Node들의 Node Tree가 삭제되고 재구성되는 과정이 추가되므로, 실행 시간 낭비는 필연적이었다. 이런 폐단을 방지하기 위해, 어떤 HTML element에 대한 상대적인 삽입 위치를 지정하도록 하여, 기존 하위 Node는 건드리지 않는 HTML tag 삽입 함수가 필요하게 되었는데, 이 함수가 바로 insertAdjacentHTML()이다. 

사용 형태) insertAdjacentHTML(position, markup) 
                  position에 사용 가능한 값들 :  "beforebegin", "afterbegin", "beforeend", "afterend" 

사용 예)  <p> foo </p> 
               위 <p> 노드를 기준으로 삽입 위치들: <!-- beforebegin --> <p> <!-- afterbegin --> foo <!-- beforeend --> </p> <!--afterend --> 

 참고 : http://www.cyworld.com/themore/3034216

참고 : 

브라우저의 Workflow : 작동방식은 대부분의 브라우저에서 거의 비슷하다. 

✔ DOM Tree 생성 : 
  브라우저가 HTML 을 전달받으면, 브라우저의 렌더 엔진이 이를 파싱하고 DOM 노드(Node) 로 이뤄진 트리를 만든다. 각 노드는 각 HTML 엘리먼트들과 연관되어 있다.
✔ Render Tree 생성 :
  그리고, 외부 CSS 파일과 각 엘리먼트의 inline 스타일을 파싱한다. 스타일 정보를 사용하여 DOM 트리에 따라 새로운 트리, 렌더트리를 만든다.
✔ Render Tree 생성 – 그 뒤에선 무슨일이 일어나고 있는가?
  Webkit 에서는 노드의 스타일을 처리하는 과정을 ‘attachment’ 라고 부른다. DOM 트리의 모든 노드들은 ‘attach’ 라는 메소드가 있다. 이 메소드는 스타일 정보를 계산해서 객체형태로 반환한다. 이 과정은 동기적(synchronous) 작업이며, DOM 트리에 새로운 노드가 추가되면 그 노드의 attach 메소드가 실행된다. 렌더 트리를 만드는 과정에선, 각 요소들의 스타일이 계산되며, 이 계산되는 과정에서 다른 요소들의 스타일 속성들을 참조한다.
✔ Layout (reflow 라고도 한다) : 
  렌더 트리가 다 만들어지고 나면, 레이아웃 과정을 거친다. 각 노드들은 스크린의 좌표가 주어지고, 정확히 어디에 나타나야 할 지 위치가 주어진다.
✔ Painting : 
  그 다음 작업은 렌더링 된 요소들에 색을 입히는 과정이다. 트리의 각 노드들을 거쳐가면서 paint() 메소드를 호출한 후 스크린에 원하는 정보가 나타난다.

----대중소 분류 - DOM 연습 소스-----

dom_catagory.txt

3.67KB