FEDev Story

HTML 구조를 다루는 DOM 파서 CSS 구조를 다루는 CSSOM 파서 이 둘의 작업이 완료되면 렌더링 트리를 만들어 렌더링이 시작되고 페인팅되어 브라우저에서 우리가 볼 수 있게 된다. 문제는 이 파서들의 작업을 멈추게 하는 경우가 있다는 것. 크롬 개발자도구의 네트워크 탭 하단을 보면 DOMContentLoaded 항목의 속도가 표시되어 있는데 의미하는 바는 다음과 같다. HTML 다운로드 시간 + HTML DOM 빌드 시간 렌더링을 빠르게 구축한다는 것은 DOMContentLoaded 에 해당하는 시간을 줄이고 파서 차단을 최소화 시킨다는 말이다. HTML, CSS, JS 상호작용 메커니즘 서버에 http 요청시 서버는 HTML 을 응답하는데 이 과정에는 우리가 인지하지 못하는 컴퓨터간의 효율적인 ..

웹 애플리케이션 구동 과정 1. URL entered : 사용자가 웹브라우저에서 사이트 주소를 입력한다. 2. DNS Lookup : DNS를 이용하여 사이트 주소에 해당되는 Server IP를 접근한다. 3. Socket Connection :Client(브라우저)와 Server 간 접속을 위한 TCP 소켓 연결. 4. HTTP Request : Client에서 HTTP Header와 데이터가 서버로 전송 5. Content Download : 해당 요청이 Server에 도달하면 사용자가 원하는 문서를 다시 웹브라우저에 전송한다. 6. Browser Rendering : 브라우저의 렌더링 엔진이 해당 문서를 다음과 같은 순서로 파싱한다. HTML을 DOM(Document Object Model)으로 변..

동적으로 DOM 트리에 새로운 요소 삽입하기 - el.innerHTML로 HTML 생성 /** * Insert elements into DOM #2 */ var target = document.getElementById( "target" ); target.innerHTML = ""; - 노드 생성후 추가 var target = document.getElementById("target"), div = document.createElement("div"); target.appendChild(div); 문제점 el.innerHTML을 변경하거나 요소에 자식을 추가할 때마다 DOM 리플로가 발생한다. 리플로가 반복적으로 발생하면 애플리케이션이 느려진다. 이는 자원을 많이 소모하는 작업이다. 최적화 유사한 요소를..

DOM 업데이트시 브라우저는 화면을 다시 그리고(repaint), 엘리먼트를 재구조화(reflow)하는데, 이 또한 비용이 많이 드는 작업이다. 원칙적으로 DOM 업데이트를 최소화하는 게 좋다. 문서 조각을 생성해 외부에서 수정한 후, 처리가 완전히 끝난 다음에 실제 DOM에 추가하는 방법이 있다. var p, t, frag; frag = document.createDocumentFragment(); p = document.createElement('p'); t = document.createTextNode('first paragraph'); p.appendChild(t); frag.appendChild(p); p = document.createElement('p'); t = document.create..

DOM을 깨우치다 (가치에 대한 완전한 이해)코디 린들리 저 안재우 역 비제이퍼블릭 2013.11.22.7.5 네티즌리뷰[3건] 20,000원 → 18,000원(-10%)소개 『DOM을 깨우치다』는 DOM 라이브러리 없이 문서 개체 모델에 대한 스크립트를 작성하여 HTML을 효율적으로 조작하는 방법을 소개한다. 최신 브라우저에 기본적으로 존재하는개념들과 코드를 사용하여 DOM 스크립트에서 JQUERY가 수행하고 있는 역할을 이해하고 오버헤드를 줄여하 하는 모바일 장치 등... 1장. 노드 개요 1.2 노드 개체 유형 모든 노드 유형과 그 값을 출력 1.3 Node 개체로부터 상속받은 하위 노드 개체 1.5 노드의 유형과 이름 식별하기 http://jsfiddle.net/domenlightenment/8E..