브라우저 렌더링 시 사용자 경험 개선을 위한 방법들
script 태그의 위치와 브라우저 렌더링 과정
사용자 경험 개선을 위해 (브라우저가 HTML보다 script 태그를 먼저 만나서 자바스크립트 파일을 실행하는 중에는 화면 렌더를 안하고 멈춰있다. 그래서 사용자가 멈춰있는 웹페이지를 보고 반복해서 새로고침을 눌러 불필요한 트래픽이 증가할 수도 있다.
이 문제를 해결하기 위해 중요한 HTML 요소들 밑에 script 파일을 넣는데, 그렇게 할 경우 텍스트는 먼저 화면에 나타나지만 이미지는 나타나지 않는 현상이 있을 수 있다. 브라우저에서는 DOM을 전체적으로 파싱하고, CSS 파일을 파싱하여 그 파싱이 다 끝난 후에야 화면에 레이아웃을 렌더한다. CSS 파일의 설정들을 알아야 이미지의 모습을 알고 화면에 나타낼 수 있기 때문이다.
브라우저 렌더링 과정의 정확한 순서는 아래와 같다.
DOM 파싱 → CSS 파싱 후 적용 → 레이아웃, 렌더링
Lazy Loading
만약 이미지도 중요하여 최초 페이지가 로드될 때 바로 보여지게 하고 싶다면, 자바스크립트를 분산하여 나중에 동적으로 새로운 script 태그를 추가하는 레이지 로드 방식이 사용된다.
보통 페이지에 있는 요소들이 load 된 후에 레이지 로딩으로 불러올 자바스크립트 파일을 불러오도록하는데, 두가지 방법이 있다.
window.onload 시에 이벤트 실행
window.onload 를 바로 함수로 설정하는 방법은 브라우저의 호환성을 고려하지 않고 바로 적용할 수 있는 장점이 있는데, 단점이 치명적이라 그렇게 추천되는 방법은 아니다.
- 다른 자바스크립트에서 다시 window.onload 를 설정했을 때 덮어씌워질 수 있는 위험성이 있다.
- 여러 자바스크립트 파일이나 라이브러리를 이용할 때 좋지 않은 방법이다.
addEventListener, attachEvent 로 이벤트 부착
보통 방어적으로 addEventListener 나 attachEvent 로 load 이벤트를 부착하고, 콜백으로 실행할 함수를 정의하는 방식을 사용한다. 실행하는 함수의 내부에서 script 태그를 생성하고, setAtrribute로 src 속성에 불러오고 싶은 js의 path, type 속성에 text/javascript, async 속성에 true 를 설정한다. async는 스트립트를 비동기로 실행하는 속성이다.
보통 레이지로드 방식을 응용해서 페이지 로드하는 함수가 별도로 인자를 받도록 하여 여러개의 스크립트 파일을 레이지 로드로 처리할 수 있다. 내려받는데 오래걸리는 img 태그에도 사용할 수 있다.
img 태그의 레이지로드 적용 예
(function () {
let previoustOnload;
if (window.addEventListener) {
window.addEventListener("load", lazyloadImages);
} else if (window.attachEvent) {
window.attachEvent("onload", lazyloadImages);
} else if (window.onload) {
previousOnload = window.onload;
window.onload = function () {
previousOnload.call();
lazyloadImages();
}
} else {
window.onload = lazyloadImages;
}
function lazyloadImages() {
let imgList = document.getElementsByClassName("lazyload"),
length = imgList.length,
i;
for( i = 0; i < length ; i++ ) {
imgList[i].src = imgList[i].getAttribute("data-src");
}
}
}());- 레이지 로드하고자 하는 Img 태그들에 lazyload 라는 CSS class 를 부여해준다.
- 레이지 로드하고자 하는 Img 태그들에 data-src 속성에 실제 src로 사용할 path 를 준다.
- 스크립트내에서 이러한 img 태그들을 탐색하여 data-src 를 src 로 바꾼다.
이렇게 할 경우, 전체 페이지 로드가 끝난 뒤부터 이미지를 내려받게 된다.
- 바로 필요하지 않은 롤링 배너와 같은 경우 레이지 로드로 처리하면 유용하다.
- 레이지로드로 불러올 이미지들은 HTML 상에서 widht, height를 지정하는 것도 사용자 경험을 개선할 수 있다. src만 설정해놓으면 img태그가 처음에는 기본 크기로 있다가 나중에 로드되면서 사용자가 레이아웃이 바뀌는 느낌을 받을 수 있기 때문이다. (reflow 도 방지할 수 있다.)
- TIP : 레이지로드할 대상에 부여하는 lazyload 클래스에 spinner 를 적용하여 로딩중임을 표시할 수 있다.
HTTP GET 최적화
사용자 경험 개선을 위해 HTTP GET 의 병목 현상을 최소화하는게 무엇보다 중요하다. 크게 두가지로 GET 용량을 줄이거나 GET 횟수를 줄이는 방식이 있다.
Minification 미니피케이션
JS, CSS, HTML 모두 미니피케이션이 가능한데, JS > HTML > CSS 순으로 용량이 크게 개선된다.
자바스크립트의 미니피케이션
두 가지 단계로 이루어진다.
- 공백을 없애는 작업.
개행도 없어지고 들여쓰기가 모두 없어진다. - 길게 정의된 변수명을 짧게 변경해서 전체적인 소스의 텍스트 길이를 줄이는 작업. 변수명이 길면 글자 하나당 용량을 차지하므로 변수명을 줄이면 용량이 크게 줄어든다.
그 외에도 다양한 부수적인 방법들이 있다.
- 주석 제거
- 산발적으로 정의된 var를 하나로 통합해서 정의하도록 수정
- if 구문 최적화, 가능한 경우 중괄호 생략
- 상수 사용, 계산을 완료해서 소스에 적용
CSS 미니피케이션
- 공백과 주석 제거
- 세미콜론 생략
HTML 미니피케이션
HTML은 트리 구조로 이루어져있어 들여쓰기가 많기 때문에 개행과 공백을 삭제하면 용량이 많이 개선된다.
- 공백 삭제
- 주석 삭제
- 불필요한 속성들을 삭제
출처
- <속 깊은 자바스크립트>, 양성익 저
