웹 프론트 엔드 고성능 튜닝 - 쿠보타 미츠노리 (저자)
htps //w w. 아마존. 이. jp/dp/B0728K5JZV/레 f=dp-킨 dぇ-레아레 ct? _엔코엔 g=우 TF8&btkr=1

읽은 개인 비망록입니다.

브라우저 렌더링 흐름

Loading -> Scripting -> Rendering -> Painting

이 4개의 처리의 덩어리를 Frame
이 측정항목은 Google 크롬 검증 도구의 성능 탭의 요약 탭에서 볼 수 있습니다.


Loading은 리소스 다운로드, 리소스 퍼스
Scripting은 JavaScript 실행
Rendering은 레이아웃 트리 구축(CSS 규칙 매칭 처리 등)
Painting은 렌더링 엔진이 그린 화면이 표시됩니다.

CSS 규칙 매칭 처리

CSS는 오른쪽 선택기에서 평가됩니다.

index.css

.container > .button { } 

먼저 .button이있는 DOM을 찾습니다.
그런 다음 .container 요소의 .button입니까?

를 확인하고 적용한다.

실적 지표 RAIL

Google이 실적 지표인 RAIL을 제창하고 있습니다.
공식 문서↓
htps : //에서 ゔぇぺぺrs. 오, ぇ. 코 m/우우 b/푼다 멘타 ls/페르후르 만세/라이l? hl = 그럼

RAIL은 각각의 이니셜을 취하고, Response, Animation, Idle, Load.
각각 다음의 의미와 기준값을 나타냅니다.


지표
의미
시간


Response
페이지의 액션에 대한 응답
100msc

애니메이션
연속적으로 행해지는 Frame 중에서 1 프레임의 처리의 기준
16msec

아이들
사용자가 기다리는 동안 JavaScript 실행
50msec

Load
웹페이지 콘텐츠를 로드하는 데 걸리는 시간
100msec

Chrome 검증 도구 측정항목의 의미

검증 도구는 열었지만 각각의 지표의 의미를 제대로 이해하지 못했기 때문에 정리해 둡니다.

Network > Timing 탭에 표시되는 내용

Queueing ... 렌더링 엔진의 대기열에 처리되는 데 걸리는 시간
Stalled ... 컴퓨터 네트워크를 활성화하는 데 걸리는 시간
DNS Lookup ... 도메인 이름을 IP 주소로 확인하는 데 걸리는 시간
초기 연결... TCP 연결을 설정하는 데 걸리는 시간
SSL ... TLS에서 통신 터널을 설정하는 데 걸리는 시간

요청 sent... HTTP 요청을 보내는 데 걸리는 시간
Waiting(TTFB) ... Time To First Byte, 요청을 제출한 후 첫 번째 데이터를 받는 데 걸리는 시간
Content Download ... 콘텐츠의 첫 번째 바이트부터 모두 받기까지 걸리는 시간

Loading 튜닝

· HTML/CSS/JavaScript 최소화
· 적절한 이미지 형식
· 이미지 파일 최적화
· CSS의 import를 피한다 (CSS의 import는 직렬로 로드된다)
· JavaScript를 비동기 적으로로드 (async, defer) 사용
· DNS 프리 페치
└ 리소스 이름 확인을 먼저 수행하여 오버 헤드를 줄입니다.
· 페이지 프리 렌더링
· Gzip 압축 사용
· CDN을 이용한 리소스 전달
└ 네트워크 오버헤드 감소, 캐시
· 도메인 샤딩
└ HTTP1.1이라면 동일 도메인의 HTTP 커넥션 수가 최대 6개까지이지만, 복수의 도메인으로부터 컨텐츠를 취득하면, 6 * n의 커넥션 수를 얻을 수 있다(HTTP/2를 이용할 수 있으면 할 필요 없음)
· 브라우저 캐시
· Service Worker에 의한 캐시

async, defer의 차이

async ... 여러 JS가 async로로드되면 순서가 보장되지 않습니다. DOM 로드와 ​​병렬로 로드
defer ... 문서의 퍼스 완료 후에 발화 (DOMMContentLoaded 이벤트 전에 발화한다).

HTTP vs HTTPS Test

HTTP와 HTTPS 로딩 시간의 차이를 시각적으로 알 수 있습니다.
htps //w w. htpvshhtps. 코m/

자바스크립트 튜닝

Performance 탭에서 측정
· GC 방지
・메모리 사용량을 억제한다

모바일 클릭 이벤트는 더블 탭을 감지하기 위해 300ms의 대기가 발생합니다.

레이아웃 트리 튜닝

· 사용하지 않는 CSS 규칙 세트를 줄입니다.