웹 성능 개선에 필요한 사전 지식

웹 성능을 개선하기 위해서는 상당히 많은 지식들이 필요하다. 본 게시물에서는 어떠한 지식들을 학습해야하는지 간략하게 알아본다.

 

• 성능 최적화
• [스압/데이터주의] 웹 최적화 방식 모음 - 0. 전반적 원칙과 원리

 

자료구조와 알고리즘

적절한 자료구조와 알고리즘의 선택은 성능 개선에 큰 도움을 준다.

 

Typed_arrays

es6부터 표준으로 정의되었다.  Array.isArray()에 대한 호출은 false이고, 일반 배열에 이용할 수 있는 모든 메서드들이 형식화 배열에 지원되지는 않는다. 

 

형식화 배열을 사용하는 웹 API는 아래와 같다.

• FileReader.prototype.readAsArrayBuffer()
• XMLHttpRequest.prototype.send()
• ImageData.data

Network

• High Performance Browser Networking
• DNS
  • DNS란 무엇입니까?
  • DNS란 무엇입니까? | DNS 작동 원리
• TLS
  • What happens in a TLS handshake? | SSL handshake
  • TLS 핸드쉐이크 Handshake 프로토콜 분석
  • The Illustrated TLS Connection
• HTTP
  • RFC 7230 (HTTP/1.1) 정리
  • RFC 7231 (HTTP/1.1) 정리
  • RFC 7232 (HTTP/1.1) 정리
  • RFC 7233 (HTTP/1.1) 정리
  • RFC 7234 (HTTP/1.1) 정리
  • RFC 7235 (HTTP/1.1) 정리
  • HTTPWTF

브라우저

• 브라우저 동작
  • 브라우저는 어떻게 동작하는가?
  • How Web Browsers Work — Behind the scene Architecture, Technologies, and Internal Working
  • How broser rendering works — Behind the scenes
  • 웹 브라우저는 렌더링 프로세스 -  웹 성능 최적화에 필요한 브라우저의 모든 것
  • Understanding the Critical Rendering Path
  • Populating the page: how browsers work
  • How does a browser create a web page?
• 자바스크립트 엔진
  • JavaScript 엔진 톺아보기 (1)
  • JavaScript 엔진 톺아보기 (2)
  • 자바스크립트는 어떻게 작동하는가: V8 엔진의 내부 + 최적화된 코드를 작성을 위한 다섯 가지 팁
  • 자바스크립트의 메모리 관리
  • 움짤로 보는 자바스크립트 동작 원리
• 브라우저 구조
  • 모던 웹 브라우저 들여다보기
  • Firefox Performance Article
• 하드웨어 가속
  • 프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기
  • mraleph - a compiler engineer that loves giving talks

도구

• Navigation and resource timings
• 웹 개발자 도구의 역사

 

참고

• Browser Compat
  • https://caniuse.com/