initial commit

2 files changed, 221 insertions, 0 deletions

diff --git a/files/ko/tools/performance/index.html b/files/ko/tools/performance/index.html
new file mode 100644
index 0000000000..8a1784f43b
--- /dev/null
+++ b/files/ko/tools/performance/index.html
@@ -0,0 +1,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>
diff --git a/files/ko/tools/performance/ui_tour/index.html b/files/ko/tools/performance/ui_tour/index.html
new file mode 100644
index 0000000000..f32605ba3e
--- /dev/null
+++ b/files/ko/tools/performance/ui_tour/index.html
@@ -0,0 +1,127 @@
+---
+title: UI Tour
+slug: Tools/Performance/UI_Tour
+translation_of: Tools/Performance/UI_Tour
+---
+<div>{{ToolsSidebar}}</div><p>The performance tool's UI consists of 4 main pieces:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13220/perf-tool-pieces.png" style="display: block; height: 351px; margin-left: auto; margin-right: auto; width: 808px;"></p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Performance/UI_Tour#Toolbar">Toolbar</a></li>
+ <li><a href="/en-US/docs/Tools/Performance/UI_Tour#Recordings_pane">Recordings pane</a></li>
+ <li><a href="/en-US/docs/Tools/Performance/UI_Tour#Recording_overview">Recording overview</a></li>
+ <li><a href="/en-US/docs/Tools/Performance/UI_Tour#Details_pane">Details pane</a>, which may contain any one of:
+  <ul>
+   <li><a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a></li>
+   <li><a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a></li>
+   <li><a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Toolbar">Toolbar</h2>
+
+<p>Toolbar는 다음과 같은 버튼을 포함합니다:</p>
+
+<ul>
+ <li>기록 시작, 정지</li>
+ <li>저장된 이전 기록 가져오기</li>
+ <li>기록 패널 비우기. 주의: 저장되지 않은 기록은 사라집니다 <em>.</em></li>
+ <li>filter the <a href="/en-US/docs/Tools/Performance/Waterfall#Markers">markers</a> that are displayed in the Waterfall view</li>
+ <li>switch the active tool in the <a href="/en-US/docs/Tools/Performance/UI_Tour#Details_pane">Details pane</a>.</li>
+ <li>access the Settings popup</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13222/perf-toolbar.png" style="display: block; height: 434px; margin-left: auto; margin-right: auto; width: 836px;"></p>
+
+<h2 id="Recordings_pane">Recordings pane</h2>
+
+<p>The recordings pane lists all the recordings you have loaded, including any you have made in this session and any you have imported.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10917/perf-recordings-pane.png" style="display: block; height: 337px; margin-left: auto; margin-right: auto; width: 300px;"></p>
+
+<p>At any given time, one recording is selected, and that recording is displayed in the rest of the tool. To select a different recording, click its entry in the pane. To save the recording as a JSON file click "Save".</p>
+
+<h2 id="Recording_overview">Recording overview</h2>
+
+<p>This displays an overview of the entire recording, with the x-axis representing time.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10919/perf-overview.png" style="display: block; height: 164px; margin-left: auto; margin-right: auto; width: 972px;"></p>
+
+<p>It contains two elements: an overview of the Waterfall and a frame rate graph.</p>
+
+<h3 id="Waterfall_overview">Waterfall overview</h3>
+
+<p>This presents a compressed view of the <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10923/perf-waterfall-overview.png" style="display: block; height: 76px; margin-left: auto; margin-right: auto; width: 972px;"></p>
+
+<p>Recorded operations are color-coded using <a href="/en-US/docs/Tools/Performance/Waterfall#Markers">the same scheme as in the main Waterfall view</a>.</p>
+
+<h3 id="Frame_rate_graph">Frame rate graph</h3>
+
+<p>The frame rate gives you an overview of the browser's responsiveness during the recording:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10921/perf-frame-rate.png" style="display: block; height: 88px; margin-left: auto; margin-right: auto; width: 972px;"></p>
+
+<p>See the separate article on <a href="/en-US/docs/Tools/Performance/Frame_rate">frame rate</a>.</p>
+
+<h3 id="Correlating_events">Correlating events</h3>
+
+<p>Because these elements are synchronized, you can correlate events in one element with events in another.</p>
+
+<p>For example, in the screenshot below a long-running paint operation (<a href="/en-US/docs/Tools/Performance/Waterfall#Markers">shown as a green bar</a> in the waterfall overview) corresponds to a drop in the frame rate:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10925/perf-overview-correlation.png" style="display: block; height: 494px; margin-left: auto; margin-right: auto; width: 972px;"></p>
+
+<h3 id="Zooming_in">Zooming in</h3>
+
+<p>You can use the overview to select a slice of the recording to examine in more detail. Select a slice, and the main view will be updated to contain just the part selected. In the screenshot below we've selected that drop in the frame rate, and can see the long-running paint operation in more detail:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10927/perf-zoomed.png" style="display: block; height: 416px; margin-left: auto; margin-right: auto; width: 972px;"></p>
+
+<h2 id="Details_pane">Details pane</h2>
+
+<p>The Details pane shows whichever tool is currently selected. To switch to a different tool, use the buttons in the <a href="/en-US/docs/Tools/Performance/UI_Tour#Toolbar">Toolbar</a>.</p>
+
+<h3 id="Waterfall">Waterfall</h3>
+
+<p>The Waterfall presents a view of the work the browser is doing during the recording: executing JavaScript, updating the CSS, updating the page layout, and performing repaints. The x-axis represents time, and the recorded operations are laid out as a waterfall, reflecting the serial nature of the browser's execution.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10929/perf-waterfall.png" style="display: block; height: 568px; margin-left: auto; margin-right: auto; width: 972px;"></p>
+
+<p>To learn much more about the Waterfall, see the separate <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a> page.</p>
+
+<h3 id="Call_Tree">Call Tree</h3>
+
+<p>The Call Tree is a sampling profiler for JavaScript running in the page. It periodically samples the state of the JavaScript engine, and records the stack for the code executing at the time the sample was taken. Statistically, the number of samples taken in which we were executing a particular function corresponds to the amount of time the browser is spending executing it, so you can identify bottlenecks in your code.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10949/perf-call-tree.png" style="display: block; height: 384px; margin-left: auto; margin-right: auto; width: 972px;"><br>
+ To learn much more about the Call Tree, see the separate <a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a> page.</p>
+
+<h3 id="Flame_Chart">Flame Chart</h3>
+
+<p>If the Call Tree tells you, statistically, which functions your site is spending most time executing across the whole recording, the Flame Chart tells you the call stack at any given point during the recording:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10933/perf-flame-chart.png" style="display: block; height: 504px; margin-left: auto; margin-right: auto; width: 972px;"></p>
+
+<p>To learn much more about the Flame Chart, see the separate <a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a> page.</p>
+
+<h3 id="Allocations">Allocations</h3>
+
+<div class="geckoVersionNote">
+<p>The Allocations view is new in Firefox 46.</p>
+</div>
+
+<p>The Allocations view is like the Call Tree view, but for allocations: it shows you which functions in your page are allocating the most memory over the course of the profile.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12413/allocations-view-1.png" style="display: block; margin-left: auto; margin-right: auto; width: 972px;"></p>
+
+<p>The Allocations view only appears if you checked "Record Allocations" in the Performance tool settings, before recording a profile:</p>
+
+<p>{{EmbedYouTube("Le9tTo7bqts")}}</p>
+
+<p>To learn much more about the Allocations view, see the separate <a href="/en-US/docs/Tools/Performance/Allocations">Allocations</a> page.</p>
+
+<p> </p>