Microsoft Edge
상단 오른쪽 3점 아이콘("설정 및 기타")
- 단축키 <Alt + F>
팝업 창의 "기타 도구"
개발자 도구
- 단축키 <Ctrl + Shift + I>
개발자 도구
상단 오른쪽 3점 아이콘("사용자 지정 및 DevTools 제어")
1차 팝업 창 "기타 도구"
2차 팝업 창 "성능 모니터"
성능 모니터(Performance Monitor)
- 페이지의 실시간 로딩이나 런타임 성능과 관련된 여러 가지 요소들 관찰 기능
- live performance and memory stats
1. CPU 사용(CPU usage)
- 현재 접속한 웹페이지의 CPU 사용 점유율
- 시스템의 CPU 전체 점유율과 무관
- CPU usage percentage
2. JS 힙 크기(JavaScript heap size)
- 현재 접속한 웹페이지의 코드에 수록된 자바스크립트 실시간 실행에 따른 접속자의 시스템 메모리 사용량을 표시합니다.
- memory(Megabytes) used by JavaScript
3. DOM 노드(DOM nodes)
- 간략하면 웹페이지의 HTML 요소들(element)을 계층(tree) 구조로 표시하는 것이 DOM(Document Object Model)이며, 각각의 HTML 요소가 노드입니다. 숫자가 클수록 페이지가 무겁습니다.
- the number of DOM nodes in memory
| The Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document—such as the HTML representing a web page—in memory. [출처] Document Object Model (DOM) - Web APIs | MDN (mozilla.org) |
4. JS 이벤트 수신기(JavaScript event listeners)
- element, document, window와 같은 목표물에 지정한 이벤트가 전달될 때마다 자바 스크립트 함수(function)를 실행하는 EventTarget 접근 방법 혹은 핸들러라고 말할 수 있습니다. 메모리에 등록된 상태로 CPU를 사용하기 때문에 숫자가 클수록 페이지가 무겁습니다.
- the number of JavaScript event listeners registered
5. 문서(Documents)
- the number of live document resources like stylesheets and scripts
6. 문서 프레임(Document frames)
- the number of live frames on the page (iframes and workers)
7. 초당 레이아웃 수(Layouts per second)
- 폭, 높이, 글자 크기의 변화, 클래스의 추가 및 삭제, 자바스크립트에 의한 DOM의 변경 등 여러 가지 요인이 레이아웃의 심각한 변화를 유발하여 구성 요소의 재배치 작업을 필요하게 만듭니다.
- the rate at which the browser has to re-layout the DOM
- reflow or layout change
| Reflows are triggered by layout changes to an element, like changes to the geometric properties such as height or font size, the addition or removal of classes to elements, window resizing, activated :hover, DOM changes by JavaScript, etc. [출처] How to Write Better CSS with Performance in Mind https://www.hongkiat.com/blog/writing-better-css/ |
8. 초당 스타일 다시 계산(Style recalculations per second)
- 웹브라우저는 요소에 적용할 스타일을 계산합니다. 이를 위해 웹브라우저는 DOM 계층 구조의 특정 요소 노드와 연결된 CSS의 모든 선택자(selectors)를 찾습니다. 그런 다음 해당 선택자의 모든 스타일 규칙을 살펴보고 실제로 요소에 적용할 규칙을 결정합니다. CSS selectors를 이용한 대규모 스타일 변경은 실시간 연산 시간과 시스템 리소스를 필요로 합니다.
- the rate at which the browser has to recalculate styles
| The browser computes the styles to be applied to the elements in the DOM tree. A render tree is later created while discarding the nodes (elements) from the DOM tree that aren’t to be rendered (elements with display:none) and those that are (pseudo-elements). [출처] How to Write Better CSS with Performance in Mind https://www.hongkiat.com/blog/writing-better-css/ |
[참고] How to Write Better CSS with Performance in Mind
How to Write Better CSS with Performance in Mind - Hongkiat
[참고] Using the new Streaming Performance Monitor in Google Chrome
댓글