90 lines
5.5 KiB
HTML
90 lines
5.5 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>Optimizing Performance
|
|
- Mithril</title>
|
|
<meta name="description" value="Mithril.js - a Javascript Framework for Building Brilliant Applications" />
|
|
<link href="lib/prism/prism.css" rel="stylesheet" />
|
|
<link href="style.css" rel="stylesheet" />
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<nav class="container">
|
|
<a href="index.html" class="logo"><span>○</span> Mithril</a>
|
|
<a href="getting-started.html">Guide</a>
|
|
<a href="mithril.html">API</a>
|
|
<a href="community.html">Community</a>
|
|
<a href="http://lhorie.github.io/mithril-blog">Learn</a>
|
|
<a href="installation.html">Download</a>
|
|
<a href="http://github.com/lhorie/mithril.js" target="_blank">Github</a>
|
|
</nav>
|
|
</header>
|
|
<main>
|
|
<section class="content">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col(3,3,12)">
|
|
<h2 id="core-topics">Core Topics</h2>
|
|
<ul>
|
|
<li><a href="installation.html">Installation</a></li>
|
|
<li><a href="getting-started.html">Getting Started</a></li>
|
|
<li><a href="routing.html">Routing</a></li>
|
|
<li><a href="web-services.html">Web Services</a></li>
|
|
<li><a href="components.html">Components</a></li>
|
|
</ul>
|
|
<h2 id="advanced-topics.html">Advanced Topics</h2>
|
|
<ul>
|
|
<li><a href="auto-redrawing.html">The Auto-Redrawing System</a></li>
|
|
<li><a href="integration.html">Integrating with Other Libraries</a></li>
|
|
<li><a href="optimizing-performance.html">Compiling Templates</a></li>
|
|
</ul>
|
|
<h2 id="misc">Misc</h2>
|
|
<ul>
|
|
<li><a href="comparison.html">Differences from Other MVC Frameworks</a></li>
|
|
<li><a href="benchmarks.html">Benchmarks</a></li>
|
|
<li><a href="practices.html">Good Practices</a></li>
|
|
<li><a href="tools.html">Useful Tools</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col(9,9,12)">
|
|
<h2 id="optimizing-performance">Optimizing Performance</h2>
|
|
<p>There's a number of ways to improve Mithril performance for the rare cases where pages are too complex for their own good.</p>
|
|
<p>First and foremost, you should think hard about whether performance optimization is truly your last resort. By nature, optimizing performance make aggressive assumptions that can break in edge cases and it yields difficult to understand code. As a rule of thumb, you should <em>never</em> implement performance optimizations if another solution is available.</p>
|
|
<p>For example, if you are building a table with thousands of rows and finding that the template is slow, you should first consider making the table show less items, because from a user experience perspective, no one is realistically going to scan through thousands of records. The effort to make the table paginated, searchable or filterable can improve the user experience in addition to solving the performance problem both on redraws and on initial page load.</p>
|
|
<hr>
|
|
<h2 id="compiling-templates">Compiling templates</h2>
|
|
<p>You can optionally pre-compile templates that use <code>m()</code> by using <a href="https://github.com/tivac/mithril-objectify/">mithril-objectify</a>. This step isn't required in order to use Mithril, but it's an easy way to squeeze a little bit more performance out of an application, without the need for code changes.</p>
|
|
<p>Compiling a template transforms the nested function calls of a template into a raw virtual DOM tree (which is merely a collection of native Javascript objects that is ready to be rendered via <a href="mithril.render.html"><code>m.render</code></a>). This means that compiled templates don't need to parse the string in <code>m("div#foo")</code> and they don't incur the cost of the function call.</p>
|
|
<p>It's worth mentioning that Mithril has built-in mechanisms elsewhere that take care of real bottlenecks like browser repaint management and DOM updating. This optional compilation tool is merely "icing on the cake" that speeds up the Javascript run-time of templates (which is already fast, even without compilation - see the <a href="http://lhorie.github.io/mithril/index.html#performance">performance section on the homepage</a>).</p>
|
|
<p>The tool takes regular Mithril templates like the one below:</p>
|
|
<pre><code class="lang-javascript">var view = function() {
|
|
return m("a", {href: "http://google.com"}, "test");
|
|
}
|
|
</code></pre>
|
|
<p>It pre-processes the <code>m()</code> call and replaces it with its output:</p>
|
|
<pre><code class="lang-javascript">var view = function() {
|
|
return {tag: "a", attrs: {href: "http://google.com"}, children: "test"};
|
|
}
|
|
</code></pre>
|
|
<p>Note that compiled templates are meant to be generated by an automated build process and are not meant to be human editable.</p>
|
|
<hr>
|
|
<h3 id="installing">Installing</h3>
|
|
<p>Mithril-objectify requires a <a href="http://nodejs.org">NodeJS</a> environment. To install it, go to its website and use the installer provided.</p>
|
|
<p>To install mithril-objectify, NodeJS provides a command-line package manager tool. In a command line, type:</p>
|
|
<pre><code>npm install -g mithril-objectify
|
|
</code></pre><p>Then, to compile a file, type:</p>
|
|
<pre><code>mithril-objectify ./input-filename.js ./output-filename.js
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<footer>
|
|
<div class="container">
|
|
Released under the <a href="http://opensource.org/licenses/MIT" target="_blank">MIT license</a>
|
|
<br />© 2014 Leo Horie
|
|
</div>
|
|
</footer>
|
|
<script src="lib/prism/prism.js"></script>
|
|
</body>
|
|
</html>
|