blob: 8a1784f43b9a5a50c21ccf7eec16b0427bab5862 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
---
title: 성능 측정 도구
slug: Tools/Performance
translation_of: Tools/Performance
---
<div>{{ToolsSidebar}}</div><p>성능 도구(Performance tool)는 반응형, 자바 스크립트, 그리고 레이아웃의 성능에 대한 전반적인 통찰력을 줍니다.</p>
<p>성능 도구를 사용하여 특정 시간 동안 사이트를 기록하고 프로파일링을 할 수 있습니다. 이를 이용하면 브라우저가 사이트를 렌더링 하는 중에 일어나는 상황을 <a href="/ko/docs/Tools/Performance/UI_Tour#Waterfall_overview">한 눈에</a> 보여주고, <a href="/ko/docs/Tools/Performance/Frame_rate">프레임 레이트</a>의 그래프를 그려줍니다.</p>
<p>성능 도구는 더 자세한 분석을 위해 세 가지 보조 도구들을 지원합니다 :</p>
<ul>
<li><a href="/ko/docs/Tools/Performance/Waterfall">워터폴</a>(Waterfall)은 브라우저의 동작들을 보여줍니다. 예를 들어 레이아웃, 자바스크립트, 리페인트, 가비지 콜렉션 등을 보여줍니다.</li>
<li><a href="/ko/docs/Tools/Performance/Call_Tree">콜트리</a>(Call Tree)는 브라우저가 가장 많은 시간을 소비하는 자바스크립트 함수들을 보여줍니다.</li>
<li><a href="/ko/docs/Tools/Performance/Flame_Chart">프레임차트</a>(Frame Chart)는 기록을 하는 동안 사용되는 자바스크립트 콜스택을 보여줍니다.</li>
</ul>
<p>{{EmbedYouTube("WBmttwfA_k8")}}</p>
<hr>
<h2 id="시작하기">시작하기</h2>
<div class="column-container">
<div class="column-half">
<dl>
<dt><a href="/ko/docs/Tools/Performance/UI_Tour">UI 투어</a></dt>
<dd>
<p>성능 도구를 사용하는 방법을 찾아보려면 UI에 대한 퀵투어가 있습니다.</p>
</dd>
</dl>
</div>
<div class="column-half">
<dl>
<dt><a href="/ko/docs/Tools/Performance/How_to">시작 방법</a></dt>
<dd>기본적인 업무: 도구를 열기, 생성, 저장, 로드하고 녹화를 설정합니다.</dd>
<dt> </dt>
</dl>
</div>
</div>
<hr>
<h2 id="성능_도구의_구성요소">성능 도구의 구성요소</h2>
<div class="column-container">
<div class="column-half">
<dl>
<dt><a href="/ko/docs/Tools/Performance/Frame_rate">프레임 레이트</a></dt>
<dd>당신의 사이트의 전반적인 반응형을 이해합니다.</dd>
<dt><a href="/ko/docs/Tools/Performance/Call_Tree">콜트리</a></dt>
<dd>당신의 사이트의 자바스크립트에서 부하가 걸리는 부분을 찾습니다.</dd>
</dl>
</div>
<div class="column-half">
<dl>
<dt><a href="/ko/docs/Tools/Performance/Waterfall">워터폴</a></dt>
<dd>사용자가 당신의 사이트와 상호작용할때 브라우저가 어떻게 작용하는지 이해합니다. </dd>
<dt><a href="/ko/docs/Tools/Performance/Flame_Chart">프레임 차트</a></dt>
<dd>녹화되는 동안에 어떤 자바스크립트 함수들이 언제 수행되는 지 봅니다.</dd>
</dl>
</div>
</div>
<hr>
<h2 id="시나리오">시나리오</h2>
<div class="column-container">
<div class="column-half">
<dl>
<dt> <a href="/ko/docs/Tools/Performance/Scenarios/Animating_CSS_properties">CSS 애니메이팅</a></dt>
<dd>워터폴을 사용하여 어떻게 브라우저가 페이지를 업데이트하고, CSS 속성들이 어떻게 성능에 영향을 주는지 알아보세요.</dd>
<dt> </dt>
<dd> </dd>
</dl>
</div>
<div class="column-half">
<dl>
<dt><a href="/ko/docs/Tools/Performance/Scenarios/Intensive_JavaScript">인텐시브한 자바스크립트</a></dt>
<dd>프레임레이트와 워터폴을 사용하면 장기간 실행되는 자바스크립트로 인해서 발생되는 수행상의 문제들과 workers를 사용하는 것이 이 상황에서 어떻게 도움이 되는지 강조해서 표시합니다.</dd>
</dl>
</div>
</div>
<p> </p>
<div class="column-half">
<dl>
<dd> </dd>
</dl>
</div>
<p> </p>
|
