|
| 1 | +<!DOCTYPE html> |
| 2 | +<html> |
| 3 | +<head> |
| 4 | +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
| 5 | +<base href="../" /> |
| 6 | +<link rel="stylesheet" href="style.css" type="text/css" /> |
| 7 | + |
| 8 | +<title>Using the Profiler - JSX</title> |
| 9 | + |
| 10 | + |
| 11 | +</head> |
| 12 | +<body> |
| 13 | +<center> |
| 14 | +<div id="body"> |
| 15 | +<div id="top"> |
| 16 | +<h1><a href="./">JSX</a></h1> |
| 17 | +a faster, safer, easier JavaScript |
| 18 | +</div> |
| 19 | +<table id="menu"> |
| 20 | +<tr> |
| 21 | +<td><a href="try-on-web/" target="_blank">Try</a></td> |
| 22 | +<td><a href="https://github.com/jsx/JSX/" target="_blank">Download</a></td> |
| 23 | +<td class="selected"><a href="doc.html">Documents</a></td> |
| 24 | +<td><a href="faq.html">FAQ</a></td> |
| 25 | +</tr> |
| 26 | +</table> |
| 27 | + |
| 28 | +<div id="breadcrumb"> |
| 29 | +<a href="doc.html">Documents</a> > |
| 30 | +Using the Profiler |
| 31 | +</div> |
| 32 | + |
| 33 | + |
| 34 | +<div id="main"> |
| 35 | + |
| 36 | +<h2>Using the Profiler</h2> |
| 37 | + |
| 38 | +<p> |
| 39 | +JSX has a built-in profiler that helps the developers track down the bottlenecks and tune their web applications. The profiler is able to display the results in three modes: Call Tree, Interted Call Tree, Functions. For each function, call count, inclusive and exclusive times spent are displayed. |
| 40 | +</p> |
| 41 | + |
| 42 | +<a href="images/profiler.png"><img class="doc-image" src="images/profiler.png" width="400" height="300" /></a> |
| 43 | + |
| 44 | +<h3>Profiling the Application</h3> |
| 45 | + |
| 46 | +<p> |
| 47 | +Follow the steps to profile your application. |
| 48 | +</p> |
| 49 | + |
| 50 | +<p> |
| 51 | +<em>Step 1.</em> Add code that uploads the profile. The code snippet below will post the profile information to the profile server running at <code>localhost:5000</code> after running the application for 10 seconds (10,000 milliseconds). |
| 52 | +</p> |
| 53 | + |
| 54 | +<pre class="prettyprint"><code class="language-jsx">if (JSX.profilerIsRunning()) { |
| 55 | + dom.window.setTimeout(function () : void { |
| 56 | + JSX.postProfileResults("http://localhost:5000/post-profile"); |
| 57 | + }, 10000); |
| 58 | +} |
| 59 | +</code></pre> |
| 60 | + |
| 61 | +<p> |
| 62 | +<em>Step 2.</em> Compile the application with <code>--profile</code>. |
| 63 | +</p> |
| 64 | + |
| 65 | +<pre class="prettyprint"><code class="language-bash">$ jsx --profile --release mywebapp.jsx |
| 66 | +</code></pre> |
| 67 | + |
| 68 | +<p> |
| 69 | +<em>Step 3.</em> Run the profile server. The server will bind to TCP port 5000. |
| 70 | +</p> |
| 71 | + |
| 72 | +<pre class="prettyprint"><code class="language-bash">$ make server |
| 73 | +</code></pre> |
| 74 | + |
| 75 | +<p> |
| 76 | +<em>Step 4.</em> Run the application. When JSX.postProfileRelust() succeeds, you wil find a line like below in the console. |
| 77 | +</p> |
| 78 | + |
| 79 | +<pre class="prettyprint"><code class="language-bash">Open http://localhost:5000/web/profiler.html?20120626010422 |
| 80 | +</code></pre> |
| 81 | + |
| 82 | +<p> |
| 83 | +<em>Step 5.</em> Open the URL specified in the console, and you will find the profile results. |
| 84 | +</p> |
| 85 | + |
| 86 | +</div> |
| 87 | + |
| 88 | + |
| 89 | +<div id="footer"> |
| 90 | +Copyright © 2012 <a href="http://dena.jp/intl/">DeNA Co., Ltd.</a> |
| 91 | +</div> |
| 92 | + |
| 93 | +</center> |
| 94 | +</body> |
| 95 | +</html> |
0 commit comments