NHN은 이렇게 한다! 자바스크립트 성능 이야기
1
JavaScript의 전성시대를 맞이해서, 회사에 있는 책을 한 권 골라서 천천히 읽기 시작했다. 성능에 관련된 이야기는 항상 최적화와 내부 구조에 대한 이야기가 항상 등장하기 때문에 긴잔하고 읽었다. 하지만 책이 아주 친절하기 때문에 별다른 어려움 없이 읽을 수 있었다. 이런 점에 비춰보면 완전 초보자가 아니라면 한번 도전해 볼만한 책이다.
2
그리고 이 책을 읽으면서 우리가 흔히 사용하는 몇가지 프로그래밍 관례를 알 수 있게된 쾌거와 함께 JavaScirpt의 성능 측정에 대한 관점도 배울 수 있었다. 웹 서비스의 성능을 측정 할 때 무엇을 정의해야 되는지 가볍게 생각해 볼 수 있는 계기가 되었다.
3
단점이라면 기본기가 없다면 책의 난이도가 한 없이 올라간다는 점인데, 이건 책의 단점이 아니라 나의 단점이라 할 수 있다. 약간 무겁고 그러나 가벼운 자바스크립트 실용서를 고민하고 있다면 이 책으로 시작해보자!
-
[…] 그러므로 다시 방문한 사용자에게 좀 더 빠른 응답 속도를 제공하려면 애플리케이션 캐시를 잘 활용해야 한다.
-
[…] 그래서 복잡한 UI를 개발할 때는 인라인 형태의 이벤트 바인딩 방법보다 이벤트 핸들러로 바인딩하는 방법을 사용한다. 이벤트 핸들러로 이벤트를 바인딩하려면 최우선 해당 DOM이 존재해야 한다는 것이다.
-
[…] 이미지를 많이 사용하면서도 HTTP 요청을 최소화하는 방법 가운데 하나는 CSS 스프라이트 기법이다.
-
만약, 만료 날짜 전에 수정 사항이 있어 파일을 변경해야 한다면 파일 이름을 변경하거나 파일 이름 뒤에 쿼리스트링을 추가해 새로 추가된 파일임을 알려야 바로 반영된다.
-
[…] 웹 사이트의 성능을 개선할 때는 파일의 용량보다 파일의 개수가 더 중요하다.
-
자바스크립트 파일을 페이지 아래에 놓아야 하는 가장 큰 이유는 파일을 다운로드해서 실행하기 전까지 브라우저가DOM 파싱도 중지하고 아무것도 렌더링하지 않기 때문이다.
-
인스턴스 객체가 원본 객체 생성자 함수의 프로토타입 속성을 탐색할 때도 탐색을 위한 체인이 생성되는데, 이를 프로토타입 체인이라고 한다.
-
for-in 구문은 그 목적 자체가 객체의 속성을 탐색하는 것이다. 그렇기 때문에 모든 속성이 순차적으로 정렬돼 있어 선형적인 색인(index)으로 접근할 수 있는 배열보다는 속성의 이름이 제각각이라 색인으로는 접근할 수 없는 객체의 속성을 탐색하는 데만 사용하길 권장한다.
-
[…] 단지, 일반적으로 조건 판단 요소가 많아질수록 switch-case 구문의 성능이 좀 더 좋다는 점은 알아 두기 바란다.
-
변경이 필요한 렌더 트리에 대한 유효성 확인 작업과 함께 노드의 크기와 위치를 다시 계산한다. 이 과정을 리플로(Reflow) 또는 레이아웃(Layout), 레이아웃팅(Layouting)이라 부른다.
-
브라우저에서 자바스크립트의 실행은 “이벤트 루프” 모델을 따른다.
12 . > 구글에서 만든 크롬의 V8 자바스크립트 엔진은 객체를 동적으로 변경하지 않고 숨겨진 클래스를 사용해서 속성 주소의 사전 조회를 막는 방법을 사용한다.
-
이미지의 네트워크 사용량을 줄이기 위해서 도입한 방법 1) CSS 스프라이트, 2) 이미지 파일의 메타 정보 제거, 3) display:none 이미지 처리