자바스크리브 성능 이야기(타이머의 활용)

★- 점진적 렌더링

function loadIMG(src) {

var img = document.createElement("img");

img.src = src;

document.getElementById("content").appendChild(img);

}

// 이미지를 로딩하도록 스케줄링 한다.

setTimeout(function() {loadIMG("01.jpg");},0);

점진적 렌더링 실행 과정 :

레이아웃을 먼저 표시 -> setTimeout에 의해 큐에 이미지들이 쌓이기 시작 -> 스케줄링된 이미지들이 점진적으로 로딩되고 렌더링되게 한다.