Inlining

• 외부 리소스를 불러오는 데 필요한 추가 연결을 줄이기 위해 자바스크립트, 이미지, 웹 폰트, css 등의 리소스를 inline으로 html 페이지 안에 포함 시키는 것.

장점

• 화면의 소규모 자원을 인라이닝 하면 성능 이득이 있다.

• 성능이 좋지 않은 디바이스에선 요청에 드는 오버헤드가 캐싱으로 얻는 이득보다 클 수 있다.

단점

• 캐싱을 적용할 수 없다.

• http2의 경우 대부분 인라이닝을 피하는 것이 좋지만 도움이 되는 경우도 있다고 함.

그 외 관련 기법

Spriting

• 크기가 작은 개체들을 요러 번 요청하는 것을 피하기 위해 이미지를 격자 모양으로 배치해 한 번에 보내는 것.

• http2에선 다중화를 통해 오버헤드를 많이 줄일 수 있으므로 스프라이팅 하지 않는 편이 낫다고 함.

Concatenating

• 크기가 작은 리소스 여러 개를 하나로 통합하는 것.

• 1KB 이하의 작은 파일들을 통합하거나 초기 렌더링에 필요한 최소한의 자바스크립트, css에만 적용

• Previous
  Virtual DOM
• Next
  Layout shift