Skip to content

Copy updates for demo page #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kypflug wants to merge 1 commit into
base: perfdemos
Choose a base branch
from
Open

Copy updates for demo page #5

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 14 additions & 9 deletions analyzeperformance/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,13 @@
<!-- DEMO INTRO -->
<header class="section section--page-intro demo__header container">
<div class="section__header">
<h1>Performance Examples</h1>
<p class="subtitle">The Microsoft Edge Team has created performance examples that are useful for practicing analysis techniques.</p>
<h1>Examples for performance analysis</h1>
<p class="subtitle">The below performance examples are useful for practicing analysis techniques. For an introduction to basic performance analyis and the performance tools available in Microsoft Edge and the Windows Performance Toolkit, see:</p>
<ul>
<li><strong><a href="https://blogs.windows.com/msedgedev/2016/05/11/top-down-analysis-wpt/">Analyzing website performance with the Windows Performance Toolkit</a></strong> (Blog post)</li>
<li><strong><a href="https://channel9.msdn.com/Events/WebPlatformSummit/edgesummit2016/ES1606">Top-down performance analysis with Windows Performance Analyzer</strong></a> (Video)</li>
<li><strong><a href="https://developer.microsoft.com/microsoft-edge/platform/documentation/f12-devtools-guide/performance/">F12 Developer Tools for Performance</a></strong> (Documentation)</li>
</ul>
</div>
</header>

Expand All @@ -23,18 +28,18 @@ <h1>Performance Examples</h1>
<div class="layout layout--halves">
<div class="module">
<h2>Badly coded Javascript Flexbox</h2>
<p>The following web site is a blog that creates a tag section on the fly in JavaScript. It does so in an exceptionally
<p>The following web site is a blog that creates a tag section on the fly in JavaScript. It does so in an intentionally
inefficient manner that is intended to provide a useful example for practicing the use of various tools for analyzing performance.
There are multiple layers that can be optimized to improve this example.</p>
<ol>
<li>There is 1 line of code that provokes servere layout thrashing.
<li>The code written in this style can be optimized significantly in numerous ways.
<li>Replace the JavaScript with HTML/CSS Flexbox
<li>There is one line of code that provokes servere layout thrashing.</li>
<li>The code written in this style can be optimized significantly in numerous ways.</li>
<li>The JavaScript example could be replaced with HTML/CSS Flexbox.</li>
</ol>
<p><strong>Demo these performance issues:</strong></p>
<div class="actions">
<a class="button" href="topdownblog/topdownblog.html">Live demo</a>
<a class="button" href="topdownblog.zip" download>Download zip</a>
<a class="button" href="topdownblog/topdownblog.html">Hosted demo page</a>
<a class="button" href="topdownblog.zip" download>Download demo page (.zip)</a>
</div>
</div>
<div class="module">
Expand All @@ -45,4 +50,4 @@ <h2>Badly coded Javascript Flexbox</h2>
</section>

</body>
</html>
</html>