프론트엔드 개발 엔지니어는 세 가지 성능 지표에 주의를 기울여야 합니다.

자격을 갖춘 프론트 엔드 개발 엔지니어로서 주의해야 할 몇 가지 성능 지표를 알고 계십니까? 오늘은 프론트엔드 엔지니어가 주목해야 할 세 가지 지표에 대해 잘 소개해드리겠습니다

1. 페이지 응답 시간과 관련하여 유명한 "2-5-8 원칙"이 있습니다. 사용자가 페이지를 방문할 때:

응답이 2초 이내에 수신되면 시스템은 응답이 빠르다고 느낄 것입니다.

응답이 2~5초 사이이면 시스템 응답 속도는 괜찮을 것입니다. 응답이 5~8초 이내에 수신되면 시스템은 응답 속도가 매우 느린 것으로 느껴지지만 허용됩니다.

8초 이상 후에도 응답이 수신되지 않으면 사용자는 시스템이 끔찍하다고 느끼고 사이트를 떠나거나 두 번째 두 번째 요청을 시작하기로 선택합니다.

웹사이트가 사용자를 사로잡기를 원한다면 웹사이트의 속도와 안정성이 최우선입니다.

다양한 프런트 엔드 모니터링 플랫폼에서 페이지의 다양한 성과 지표를 얻을 수 있습니다. 이 기사에서는 몇 가지 주요 지표를 소개하고 그에 따른 최적화 아이디어를 제공합니다.

2. 렌더링 시작 시간

이 시점은 브라우저가 페이지를 그리기 시작하는 시점을 의미하므로 해당 페이지는 흰색 화면 시간이라고도 합니다.

이 시점은 렌더링 시작 시간 = TTFB(첫 번째 바이트까지의 시간) + TTDD(

Document

다운로드까지의 시간) + TTHE(헤드 엔드까지의 시간) 공식으로 나타낼 수 있습니다. 그 중 TTFB는 브라우저가 요청을 시작하고 서버가 첫 번째 바이트를 반환할 때까지의 시간을 나타내고, TTDD는 서버에서 HTML 문서를 로드하는 데 걸리는 시간을 나타내며, TTHE는 문서 헤더 구문 분석을 완료하는 데 필요한 시간을 나타냅니다. 이 시점을 얻기 위해 고급 브라우저에는 해당 속성이 있습니다. Chrome은 chrome.loadTimes().firstPaintTime을 통해 얻을 수 있고, IE9+는performance.timing.msFirstPaint를 통해 얻을 수 있습니다. 지원하지 않는 브라우저에서는 위 수식에 따라 헤더 리소스가 로드되는 순간을 구하여 대략적인 값을 시뮬레이션할 수 있습니다. . 렌더링 시작 시간이 빠를수록 사용자가 페이지를 더 빨리 볼 수 있습니다. 현재 최적화 사항은 다음과 같습니다.

1) 서버 응답 시간, 서버 측 출력을 가능한 한 빨리 최적화

2) html 파일 크기 줄이기

3) 헤더 리소스 줄이기, 본문에 스크립트 배치 시도

DOM 준비

이 시점은 DOM 구문 분석이 완료되었으며 리소스가 로드되지 않았음을 나타냅니다. 이때 사용자와 페이지의 상호 작용이 이미 가능합니다. TimeTo Dom Ready = TTSR(렌더링 시작 시간) + TTDC(Dom 생성 시간) + TTST(스크립트 시작 시간) 공식으로 표현할 수 있습니다. 위에서 TTSR이 소개되었는데, TTDC는 DOM 트리를 생성하는 데 걸리는 시간을 나타냅니다. TTST는 BODY에 있는 모든

static

스크립트의 로딩 및 실행 시간을 나타냅니다. 고급 브라우저에는 이에 해당하는 DOMContentLoaded 이벤트가 있습니다. MDN의 DOMContentLoaded 이벤트를 설명하는 문서는 다음과 같습니다. DOMContentLoaded 이벤트는 스타일시트, 이미지, (로드 이벤트는 완전히 로드된 페이지를 감지하는 데 사용될 수 있습니다.)

자세한 사양은 W3C의 HTML5 사양을 참조하세요. MDN 문서에서 볼 수 있듯이 이 이벤트는 주로 DOM 문서의 로드 및 파싱 완료를 의미합니다. 매우 간단해 보이지만 DOMContentLoaded 이벤트의 트리거링은 CSS 및 js와 밀접하게 관련되어 있습니다. 이를 설명하기 위해 중요한 렌더링 경로(Critical Rendering Path)라는 용어가 DOMContentLoaded에 미치는 영향에 대해 [Critical Rendering Path] 문서에 자세히 소개되어 있습니다.

DOMContentLoaded 이벤트를 지원하지 않는 브라우저에서는 시뮬레이션을 통해 대략적인 값을 얻을 수 있습니다. 주요 시뮬레이션 방법은 다음과 같습니다.

1) 낮은 버전의 웹킷 커널 브라우저는 document.readyState를 폴링하여 이를 달성할 수 있습니다.

2) IE에서는 구현에 사용될 수 있을 때까지 setTimeout을 통해 documentElement의 doScroll 메서드를 지속적으로 호출할 수 있습니다.

구체적인 구현 방법은 주류 프레임워크(jquery 등)의 구현을 참조할 수 있습니다. DOM 준비 시점은 사용자가 페이지와 상호 작용할 수 있음을 의미하므로 이 시점에 대한 최적화는 다음과 같습니다.

1) 가능한 적은 수의 노드를 사용하여 DOM 구조의 복잡성을 줄입니다. 너무 깊게 중첩

2) 키 표시 경로 최적화

3. 첫 화면 시간

이 시점은 사용자가 첫 번째 화면 페이지를 보는 시점을 나타냅니다. 이 시점은 매우 중요하지만 일반적으로 얻기가 어렵습니다. 근사치는 시뮬레이션 시간을 통해서만 얻을 수 있습니다. 일반적인 시뮬레이션 방법은 다음과 같습니다.

1) 스크린샷을 지속적으로 획득합니다. 스크린샷이 더 이상 변하지 않으면 첫 번째 화면 시간으로 간주할 수 있습니다. webPagetest의 Speed ​​Index 알고리즘을 참고하시면 됩니다.

2) 일반적으로 첫 화면에 영향을 미치는 주요 요인은

images

로딩 여부입니다. , 가장 느린 로딩 시간을 찾으면 첫 번째 화면 시간이 표시됩니다. 물론, 기타 세부 사항도 고려해야 합니다. [7일 안에 프런트엔드 성능 모니터링 시스템 구축]을 참조하세요. 이 시점에 대한 최적화는 다음과 같습니다. 1) 첫 번째 화면의 표시. 페이지는 js 코드에 의존해서는 안 되며, js는 실행 또는 로딩 후에 최대한 domReady에 배치되어야 합니다.

2) 첫 화면 외부 이미지 지연 로딩

3) 첫 화면 구조는 최대한 단순해야 하며, 첫 화면 외부의 CSS 로딩이 지연될 수 있습니다

onload

이 시점은 window.onload 이벤트가 트리거되어 원본 문서와 참조된 모든 콘텐츠가 로드되었으며 사용자가 느끼는 가장 확실한 느낌은 브라우저 탭의 로드 상태가 종료되었다는 것입니다.

이 시점의 최적화 방법은 다음과 같습니다.

1) 리소스 요청 수 및 파일 크기 줄이기

2) onLoad 이후에 초기화되지 않은 스크립트를 배치하여 실행

3) 필요하지 않은 스크립트의 비동기 로딩 동기화

전체 웹 사이트 성능을 최적화하려면 페이지를 로드할 때 일부 사전 로드를 수행하고 다른 페이지에서 사용해야 하는 리소스를 사전 로드하는 것을 고려할 수 있습니다.

위의 글이 여러분의 프론트엔드 개발 여정에 도움이 되기를 바랍니다.

관련 자료:

프런트엔드 JS 면접 질문

실용적인 웹 프론트엔드 JS 및 UI 프레임워크 소개

웹 프론트엔드 지식 시스템 요약

위 내용은 프론트엔드 개발 엔지니어는 세 가지 성능 지표에 주의를 기울여야 합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!