렌더링 과정

렌더링이란 논리적인 문서(DOM)의 표현식을 그래픽 표현식으로 변형시키는 과정이다. 이 과정은 다음과 같이 크게 2단계를 거쳐 이뤄진다.

1. DOM 요소와 스타일에 기반을 둔 레이아웃 계산
2. 계산된 요소의 화면 표현

일반적인 전체 흐름은 브라우저에 문서가 로딩됨에 따라 DOM 트리의 구성이 진행되면 레이아웃을 계산한 후 문서에 요소를 그린다.

객체의 생성, 초기화 성능

많이 사용하지만 성능을 생각하지 않고 작성하는 코드에 객체 선언과 초기화 구문이 있다. 배열(Array) 형식의 객체와 오브젝트(Object) 형식의 객체를 생성하고 초기화하는 방법의 성능을 측정해 보고 두 코드 사이에 어떤 차이점이 있는지 비교해 보고자 한다.

배열의 생성, 초기화 성능 비교

배열을 생성자 혹인 리터럴([]) 형식을 사용해 객체를 생성할 수 있다.

1
2
3
4
5

// Array() 생성자 사용
var arr = new Array();

// 리터럴 형식으로 배열 생성
var arr = [];

HTTP 요청 최소화

HTTP 요청 최소화는 최적화에서 가장 기본이면서도 중요한 부분이다. 웹 사이트는 주로 마크업, 이미지, 스타일시트, 자바스크립트 등으로 구성된다. 각 구성 요소는 모두 웹 서버에 있다. 이 구성 요소를 사용자의 컴퓨터로 가져오는 데는 네트워크 비용이 든다. 네트워크 비용은 곧 응답 시간으로 이어진다. 그러므로 다운로드 해야 하는 구성 요소의 개수를 줄이는 것은 가장 효과가 크고 중요한 최적화 방법이다.

제이콥 닐슨의 웹 사이트인 “useit.com”은 웹 사이트의 반응 시간을 다음과 같이 평가한다.

• 0.1초: 사용자의 동작에 해당 기능이 바로 반응한다고 느끼는 시간
• 1초: 불필요하게 오래 기다리지 않았다고 느끼는 시간. 0.2~1초의 시간은 컴퓨터가 동작하는 시간으로 이해할 수 있는 시간이다. 시간이 1초 이상 걸리면 컴퓨터의 동작에 이상이 생겼다고 생각하게 된다.
• 10초: 사용자가 집중력을 잃지 않는 최대 시간

이 평가에 따르면 웹 페이지의 반응 시간이 1초 이내여야 사용자 경험에 긍정적인 영향을 미친다. 웹 사이트의 기능이 점점 복잡해지고 많아지면서 느린 반응 속도 때문에 이용 중인 서비스를 떠나 다른 유사한 서비스를 이용하게 만드는 사이트가 있는 반면, 빠른 반응 속도로 웹 사이트를 탐색하는데 큰 불편함이 없는 서비스를 제공하는 사이트도 있다.