What I Learned
  • Introduction
  • Introduction
  • Javascript
    • 클로저 (closure)
    • 프로토타입 (Prototype)
    • 정규표현식 (RegExp)
    • 날짜 (Date)
    • jQuery 분석
    • 스코프 (this)
    • 성능 최적화 (Optimization)
  • Style
    • CSS
      • Prevent user select
      • Aspect Ratio
      • Sticky Footer
    • SASS
      • for loop
      • mixin example
      • Media Query
  • Web
    • 웹의 동작 과정
    • Cross Browser
    • Document Reflows
    • Open Graph
    • 이미지 압축 (Image optimization)
    • SPA, SSR 비교
  • Algorithm and Data Structure
    • 자료구조 (Data Structure)
      • 큐 (Queue)
      • 스택 (Stack)
      • 링크드 리스트 (Linked List)
    • 기초 이론
      • 복잡도 분석
    • 수학 (Math)
      • factorial (계승)
      • 피보나치 수 (Fibonacci)
    • 정렬 (Sorting)
      • 버블 정렬 (Bubble Sort)
      • 선택 정렬 (Selection Sort)
      • 삽입 정렬 (Insertion Sort)
      • 합병 정렬 (Merge Sort)
      • 퀵 정렬 (Quick Sort)
    • 탐색 (Search)
      • 순차 탐색 (linear search)
      • 이진 탐색 (Banary search)
    • 문제 풀이
      • 땅따먹기
      • 가장 큰 원소의 합 구하기
      • JS with HTML
  • Software Engineering
    • OOP
    • Development Process
    • TDD / BDD
  • Interview
    • HTML
    • CSS
    • Javascript
    • Other
    • General Questions
  • DevOps
    • gulp
  • PHP
    • Basic
Powered by GitBook
On this page
  • 네트워크
  • 파싱 / 컴파일
  • 실행 시간
  • 결론
  1. Javascript

성능 최적화 (Optimization)

JavaScript Start-up Optimization

Previous스코프 (this)NextStyle

Last updated 6 years ago

네트워크

기본적으로 UI 개발자는 스크립트가 다운되고 실행되는 비용을 우선적으로 생각하게 된다. 이는 분명 네트워크에 의존적이다. 3G, 4G, Wi-Fi 인지 등 네트워크의 상태에 따라 문제가 될 수 있다.

아래 방법을 통해 네트워크 비용을 낮출 수 있다.

  • 사용자가 필요한 정보만 전송

  • 최소화

  • 압축

  • 사용하지 않는 코드 삭제

  • 캐싱

    • 서비스워커를 사용할 수도 있다.

파싱 / 컴파일

크롬 개발자 도구를 이용해 퍼포먼스를 살펴본다. 가장 크게 드는 비용은 자바스크립트 엔진이 소스를 파싱하고 컴파일하는 과정이다.

파싱, 컴파일되는 시간을 측정할 수 있다.

단 자바스크립트와 이미지와 같은 리소스가 같은 크기라고 해서 동일한 성능을 내는 것은 결코 아니다. 이는 서로 다른 비용이다. 이미지는 로딩 과정에서 메인쓰레드나 이전 인터페이스를 막지 않는다. JS는 파싱과 컴파일 과정으로 인해 지체시키며, 실행 비용이 든다.

실행 시간

실행시간은 파싱과 컴파일되는 비용을 제외한 나머지 시간이다. 실행은 메인 쓰레드에서 일어난다.

결론

전송 크기은 느린 네트워크에서 매우 중요한 요소이다. 파싱 시간도 CPU를 위해 낮게 유지할 필요가 있다.

만약 모바일 기기를 타겟으로 한다면, 퍼포먼스 비용을 더 고려할 필요가 있다.

을 통해 중요하거나 중요하지 않은 부분을 구분한다.

을 이용한다.

를 사용해 ES5 코드로 최소화한다.

혹은 를 사용한다.

을 사용해 텍스트 기반의 리소스로 압축한다.

사용

를 통해 코드 커버리지 확인 후 사용하지 않는 코드 삭제

를 통해 최신 브라우저에서 트랜스파일링을 피한다.

을 이용해 브라우저에서 효율적으로 캐싱하도록 한다.

code-splitting
webpack
UglifyJS
minifying
babel-minify
uglify-es
gzip
Brotli
DevTools code coverage
babel-preset-env
HTTP caching
JavaScript Start-up Optimization  |  Web Fundamentals  |  Google DevelopersGoogle Developers
Chrome DevTools - Performance panel > Bottom-Up
Logo