자바스크립트 성능과 사용자 경험 개선

속 싶은 자바스크립트 7장 : 자바스크립트 성능과 사용자 경험 개선

script위치와 lazyload

---

script 태그의 위치는 body 태그 아래쪽에 위치해야한다. 

아니면 lazyload 방식을 이용하여 html과 css가 먼저 load되어 화면이 렌더링 된 후 script를 호출하도록 해야 한다.

(function () {
    var previousOnload;

    if (window.addEventListener) {
        window.addEventListener("load", lazyload);
    } else if (window.attachEvent) {
        window.attachEvent("onload", lazyload);
    } else if (window.onload) {
        previousOnload = window.onload;
        window.onload = function () {
            previousOnload.call();
            lazyload();
        }
    } else {
        window.onload = lazyload; // this can be overwritten by another JS
    }

    function lazyload() {
        var scriptTag = document.createElement("script"),
            headTag = document.getElementsByTagName("head")[0];
        scriptTag.setAttribute("src", "./sleep.js");
        scriptTag.setAttribute("type", "text/javascript");
        scriptTag.setAttribute("async", "true");

        // way around if there is no head tag
        if (!headTag) {
            headTag = document.getElementsByTagName("script")[0].parentNode;
        }
        headTag.appendChild(scriptTag);
    }
}());

이미지 역시 lazyload 함수를 활용하여 이미지 다운로드가 지연되는 현상에 대응할 수 있도록 만들어 줄 수 있다.

웹페이지의 main이 되는 이미지들은 제외하고 lazyload를 적용시키면 좋다.

(function () {
    var previousOnload;
    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; // this can be overwritten by another JS
    }

    function lazyloadImages() {
        var imgList = document.getElementsByClassName("lazyload"),
            length = imgList.length,
            i;

        for ( i = 0 ; i < length ; i++ ) {
            imgList[i].src = imgList[i].getAttribute("data-src");
        }
    }
}());

여기서 img 태그의 width와 height 속성을 지정해 주는 것이 좋다.

지정하지 않는다면 이미지가 로드 된 후 이미지 크기에 맞게 레이아웃이 변경되어 사용자 경험에 부정적이기 때문이다.

lazyload를 사용할 때 주의할 점은 사용자가 빠르게 사용하게 될 기능이라 생각되는 기능들은 적용하면 안된다.

마찬가지로 페이지의 핵심적인 기능들을 고려하여 layload를 적용해야 한다.

미니피케이션

---

자바스크립트 뿐만 아니라 CSS HTML까지 용량을 줄여 전송을 좀 더 빠르게 하는 방법

파일을 압축해서 최소화(gzip, deflate)

---

미니피케이션은 별도의 빌드 환경을 구축해야 하고 후처리 프로세스가 많이 들어가는 번거로움이 있다. 이보다 쉽게 용량을 줄이는 방법이 바로 파일을 압축하는 방법이다. 이 방법은 웹서버에서 환경을 구축해야 한다.

GET 요청 최소화

---

파일을 하나로 합쳐서 get요청을 최소화 시켜 성능을 향상 시킬 수 있다.

캐시 효율을 떨어뜨리는 자주 수정되는 파일들은 별도로 분리 시키는게 좋다.

jqeury와 같이 다른 사이트에서도 자주 사용되는 라이브러리는 cdn으로 사용하는 것을 고려하는 것도 좋다. 다른 사이트에서 접속하여 캐시에 저장된 파일을 사용할 수 있기 때문이다.

이미지 파일 역시 하나로 합쳐서 사용하면 get 요청을 줄일 수 있다.

공통적으로 사용될 img 태그에 background-image 속성을 통합된 이미지 url을 할당한다. 이미지 요소마다 background-position 속성으로 필요한 이미지만 보여주도록 하는 방법이다. 참고

캐시 설정

---

웹 서버의 캐시 설정을 통해서 정적인 컨텐츠에 대해서 캐시를 활용해 주도록 유도하는 것도 좋다.

캐시와 관련된 헤더 중 대표적으로 Expires가 있다.

이를 이용한 웹서버 설정을 통해서 파일 종류마다 캐시 기간을 설정하도록 할 수 있다.