push layout
This commit is contained in:
Leo Horie
parent
fbb25f05ae
commit
4deeeb486b
37 changed files with 2289 additions and 2298 deletions
|
|
@ -1,50 +1,50 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<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="mithril.min.zip">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)">
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>The Auto-Redrawing System
- Mithril</title>
|
||||
<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="mithril.min.zip">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="the-auto-redrawing-system">The Auto-Redrawing System</h2>
|
||||
<p>Mithril is designed around the principle that data always flows from the model to the view. This makes it easy to reason about the state of the UI and to test it. In order to implement this principle, the rendering engine must run a redraw algorithm globally to ensure no parts of the UI are out of sync with the data. While at first glance, it may seem expensive to run a global redraw every time data changes, Mithril makes it possible to do this efficiently thanks to its fast diffing algorithm, which only updates the DOM where it needs to be updated. Because the DOM is by far the largest bottleneck in rendering engines, Mithril's approach of running a diff against a virtual representation of the DOM and only batching changes to the real DOM as needed is surprisingly performant.</p>
|
||||
<p>In addition, Mithril attempts to intelligently redraw only when it is appropriate in an application lifecycle. Most frameworks redraw aggressively and err on the side of redrawing too many times because, as it turns out, determining the best time to do a redraw is quite complicated if we want to be as efficient as possible.</p>
|
||||
|
|
@ -135,18 +135,18 @@ var doBoth = function(callback) {
|
|||
});
|
||||
};
|
||||
</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>
|
||||
|
||||
</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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue