NHN은 이렇게 한다! 자바스크립트 성능 이야기

1

JavaScript의 전성시대를 맞이해서, 회사에 있는 책을 한 권 골라서 천천히 읽기 시작했다. 성능에 관련된 이야기는 항상 최적화와 내부 구조에 대한 이야기가 항상 등장하기 때문에 긴잔하고 읽었다. 하지만 책이 아주 친절하기 때문에 별다른 어려움 없이 읽을 수 있었다. 이런 점에 비춰보면 완전 초보자가 아니라면 한번 도전해 볼만한 책이다.

2

그리고 이 책을 읽으면서 우리가 흔히 사용하는 몇가지 프로그래밍 관례를 알 수 있게된 쾌거와 함께 JavaScirpt의 성능 측정에 대한 관점도 배울 수 있었다. 웹 서비스의 성능을 측정 할 때 무엇을 정의해야 되는지 가볍게 생각해 볼 수 있는 계기가 되었다.

3

단점이라면 기본기가 없다면 책의 난이도가 한 없이 올라간다는 점인데, 이건 책의 단점이 아니라 나의 단점이라 할 수 있다. 약간 무겁고 그러나 가벼운 자바스크립트 실용서를 고민하고 있다면 이 책으로 시작해보자!


  1. […] 그러므로 다시 방문한 사용자에게 좀 더 빠른 응답 속도를 제공하려면 애플리케이션 캐시를 잘 활용해야 한다.

  2. […] 그래서 복잡한 UI를 개발할 때는 인라인 형태의 이벤트 바인딩 방법보다 이벤트 핸들러로 바인딩하는 방법을 사용한다. 이벤트 핸들러로 이벤트를 바인딩하려면 최우선 해당 DOM이 존재해야 한다는 것이다.

  3. […] 이미지를 많이 사용하면서도 HTTP 요청을 최소화하는 방법 가운데 하나는 CSS 스프라이트 기법이다.

  4. 만약, 만료 날짜 전에 수정 사항이 있어 파일을 변경해야 한다면 파일 이름을 변경하거나 파일 이름 뒤에 쿼리스트링을 추가해 새로 추가된 파일임을 알려야 바로 반영된다.

  5. […] 웹 사이트의 성능을 개선할 때는 파일의 용량보다 파일의 개수가 더 중요하다.

  6. 자바스크립트 파일을 페이지 아래에 놓아야 하는 가장 큰 이유는 파일을 다운로드해서 실행하기 전까지 브라우저가DOM 파싱도 중지하고 아무것도 렌더링하지 않기 때문이다.

  7. 인스턴스 객체가 원본 객체 생성자 함수의 프로토타입 속성을 탐색할 때도 탐색을 위한 체인이 생성되는데, 이를 프로토타입 체인이라고 한다.

  8. for-in 구문은 그 목적 자체가 객체의 속성을 탐색하는 것이다. 그렇기 때문에 모든 속성이 순차적으로 정렬돼 있어 선형적인 색인(index)으로 접근할 수 있는 배열보다는 속성의 이름이 제각각이라 색인으로는 접근할 수 없는 객체의 속성을 탐색하는 데만 사용하길 권장한다.

  9. […] 단지, 일반적으로 조건 판단 요소가 많아질수록 switch-case 구문의 성능이 좀 더 좋다는 점은 알아 두기 바란다.

  10. 변경이 필요한 렌더 트리에 대한 유효성 확인 작업과 함께 노드의 크기와 위치를 다시 계산한다. 이 과정을 리플로(Reflow) 또는 레이아웃(Layout), 레이아웃팅(Layouting)이라 부른다.

  11. 브라우저에서 자바스크립트의 실행은 “이벤트 루프” 모델을 따른다.

12 . > 구글에서 만든 크롬의 V8 자바스크립트 엔진은 객체를 동적으로 변경하지 않고 숨겨진 클래스를 사용해서 속성 주소의 사전 조회를 막는 방법을 사용한다.

  1. 이미지의 네트워크 사용량을 줄이기 위해서 도입한 방법 1) CSS 스프라이트, 2) 이미지 파일의 메타 정보 제거, 3) display:none 이미지 처리

Written on October 4, 2016