Delete performance.html
This commit is contained in:
parent
a4dbdf831f
commit
56074c9276
|
@ -1,139 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="KUTE.js is a minimal Javascript animation engine">
|
||||
<meta name="keywords" content="kute,kute.js,Javascript,Native Javascript,vanilla javascript,jQuery">
|
||||
<meta name="author" content="dnp_theme">
|
||||
<link rel="shortcut icon" href="./assets/img/favicon.png"> <!-- TO DO -->
|
||||
|
||||
<title>KUTE.js | Performance Testing Page</title>
|
||||
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
|
||||
<style>
|
||||
body {background-color: #2e2e2e; color: #999; font-size: 12px; font-family: Helvetica, Arial, Helvetica, sans-serif;}
|
||||
a {color:#ffd626; text-decoration: none}
|
||||
a:hover,a:focus {color:#fff;}
|
||||
#container {
|
||||
width: 200px; /*height: 200px;*/
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 200px;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
transform: translate3d(0px, 0px, 0px);
|
||||
}
|
||||
.box { height: 200px }
|
||||
#info {position: absolute; top: 0; left: 0; width: 400px;}
|
||||
.hack { transform: translate3d(0px,0px,0px); }
|
||||
.padding {padding: 20px}
|
||||
.btn-group { margin-bottom: 15px; }
|
||||
.btn {font-size: 13px; }
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="info" class="padding">
|
||||
<p><a class="back" href="index.html">Back to KUTE.js</a></p>
|
||||
<p>Engine </p>
|
||||
<span id="engine" class="btn-group">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" tabindex="0">Select <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a id="kute" href="#">KUTE</a></li>
|
||||
<li><a id="gsap" href="#">GSAP</a></li>
|
||||
<li><a id="tween" href="#">Tween.js</a></li>
|
||||
</ul>
|
||||
</span>
|
||||
|
||||
<p>Property </p>
|
||||
<span id="property" class="btn-group">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" tabindex="0">Select <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a id="left" href="#">left</a></li>
|
||||
<li><a id="translateX" href="#">translateX</a></li>
|
||||
</ul>
|
||||
</span>
|
||||
|
||||
|
||||
<p>Repeat </p>
|
||||
<span id="repeat" class="btn-group">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" tabindex="0">Select <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a id="5" href="#">5</a></li>
|
||||
<li><a id="10" href="#">10</a></li>
|
||||
<li><a id="15" href="#">15</a></li>
|
||||
<li><a id="20" href="#">20</a></li>
|
||||
</ul>
|
||||
</span>
|
||||
|
||||
|
||||
<p>How many elements to animate:</p>
|
||||
<span id="count" class="btn-group">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" tabindex="0">Select <span class="caret"></span></button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a id="100" href="#">100</a></li>
|
||||
<li><a id="200" href="#">200</a></li>
|
||||
<li><a id="300" href="#">300</a></li>
|
||||
<li><a id="400" href="#">400</a></li>
|
||||
<li><a id="500" href="#">500</a></li>
|
||||
<li><a id="600" href="#">600</a></li>
|
||||
<li><a id="700" href="#">700</a></li>
|
||||
<li><a id="800" href="#">800</a></li>
|
||||
<li><a id="900" href="#">900</a></li>
|
||||
<li><a id="1000" href="#">1000</a></li>
|
||||
</ul>
|
||||
</span>
|
||||
|
||||
|
||||
<div id="hack" style="display: none">
|
||||
<p>When left is used, try the hack: </p>
|
||||
<span class="btn-group" data-toggle="buttons">
|
||||
<label class="btn btn-info">
|
||||
<input type="checkbox" autocomplete="off"><span class="state">Hack OFF</span>
|
||||
</label>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div style="width:100%;clear: both">
|
||||
<button class="btn btn-success" id="start" type="button" style="margin-bottom: 15px">Start</button>
|
||||
</div>
|
||||
|
||||
<!--[if IE]><p class="text-danger">The test page is not intended for legacy browsers.</p><![endif]-->
|
||||
<!--[if !IE ]><!-->
|
||||
<p>These tests are only for modern browsers. In Google Chrome you can enable the FPS metter in developer tools, <a href="https://developer.chrome.com/devtools/docs/rendering-settings" target="_blank">here's how</a>.</p>
|
||||
<p>The hack refers to adding a blank transform <code>translate3d(0px,0px,0px);</code> for the elements to promote them into separate layers, as described <a href="https://developers.google.com/web/fundamentals/performance/rendering/simplify-paint-complexity-and-reduce-paint-areas#promote-elements-that-move-or-fade" target="_blank">here</a>.</p>
|
||||
<p class="text-danger">Do not try this test on lower end or mobile devices.</p>
|
||||
<!--<![endif]-->
|
||||
|
||||
</div>
|
||||
<div id="container"></div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<!--<script src="http://cdn.jsdelivr.net/kute.js/0.9.5/kute.min.js"></script> KUTE CDN -->
|
||||
|
||||
<!--[if !IE ]><!-->
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/0.9.9/bootstrap-native.min.js"></script>
|
||||
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
|
||||
<script src="./assets/js/tween.min.js"></script>
|
||||
<script src="./src/kute.js"></script>
|
||||
<script src="./assets/js/perf.js"></script>
|
||||
<!--<![endif]-->
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in a new issue