2015-10-18 08:40:11 +02:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
2016-11-30 17:12:11 +01:00
< meta name = "viewport" content = "width=device-width, initial-scale=1, minimum-scale=1.0" >
2016-03-16 14:44:23 +01:00
< meta name = "description" content = "KUTE.js performance testing page, in comparison with GSAP and Tween.js" >
2015-10-18 08:40:11 +02:00
< meta name = "keywords" content = "kute,kute.js,Javascript,Native Javascript,vanilla javascript,jQuery" >
< meta name = "author" content = "dnp_theme" >
2020-06-09 22:08:43 +02:00
< link rel = "shortcut icon" href = "./assets/img/favicon.ico" >
< link rel = "apple-touch-icon" href = "./assets/img/apple-touch-icon.png" >
2015-10-18 08:40:11 +02:00
< title > KUTE.js | Performance Testing Page< / title >
2020-06-09 22:08:43 +02:00
<!-- <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> -->
2016-03-16 14:44:23 +01:00
< style >
2017-01-23 14:55:10 +01:00
body {
2020-06-09 22:08:43 +02:00
background-color: #08263d;
2017-01-23 14:55:10 +01:00
color: #999;
font-size: 12px;
font-family: Helvetica, Arial, Helvetica, sans-serif;
}
2020-06-09 22:08:43 +02:00
.hr { border-color: rgba(255, 255, 255, 0.2); margin: 15px 0; clear:both }
2017-01-23 14:55:10 +01:00
a {
color: #ffd626;
text-decoration: none
}
2020-06-09 22:08:43 +02:00
.btn-group { display: inline-block}
2017-01-23 14:55:10 +01:00
a:hover,
a:focus {
color: #fff;
}
2016-03-16 14:44:23 +01:00
#container {
2017-01-23 14:55:10 +01:00
width: 200px;
/*height: 200px;*/
2016-03-16 14:44:23 +01:00
margin: 0 auto;
position: relative;
display: block;
}
2017-01-23 14:55:10 +01:00
iframe {
width: 100%;
height: 100%;
border: 0
}
2016-03-16 14:44:23 +01:00
.line {
width: 200px;
height: 2px;
position: absolute;
}
2017-01-23 14:55:10 +01:00
.box {
height: 200px
}
#info {
position: absolute;
2020-06-09 22:08:43 +02:00
top: 20%;
2017-01-23 14:55:10 +01:00
left: 0;
width: 350px;
}
.padding {
padding: 20px
}
.btn {
2020-06-09 22:08:43 +02:00
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
2017-01-23 14:55:10 +01:00
}
2020-06-09 22:08:43 +02:00
.btn:focus { outline: none }
2017-01-23 14:55:10 +01:00
2020-06-09 22:08:43 +02:00
.btn-primary {
color: #fff;
background-color: #337ab7;
}
.btn-success {
color: #fff;
background-color: #5cb85c;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
}
.dropdown-menu>li:hover { background-color: rgba(0,0,0,0.2); }
.dropdown-menu>li>a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
}
.dropdown {
position:relative
}
.dropdown.open .dropdown-menu {
display: block
}
2017-01-23 14:55:10 +01:00
.text-note {
color: #069
}
.text-danger {
font-weight: bold
}
2020-06-09 22:08:43 +02:00
.list-inline {
padding-left: 0;
list-style: none;
margin-left: -5px;
}
.list-inline>li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}
2016-03-16 14:44:23 +01:00
< / style >
2020-06-09 22:08:43 +02:00
2015-10-18 08:40:11 +02:00
< / head >
< body >
2017-01-23 14:55:10 +01:00
< div id = "info" class = "padding" >
2020-06-09 22:08:43 +02:00
< ul class = "list-inline" >
< li > < a title = "Go to KUTE.js homepage" href = "index.html" > Homepage< / a > < / li >
< li > < a title = "Go to Transform Functions component testing page" href = "performance-transform.html" > Transform Functions< / a > < / li >
< li > < a title = "Go to Transform Matrix component testing page" href = "performance-matrix.html" > Transform Matrix< / a > < / li >
< / ul >
< hr class = "hr" >
< span id = "engine" class = "btn-group dropdown" >
< button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" aria-expanded = "false" tabindex = "0" > Engine < span class = "caret" > < / span > < / button >
2017-01-23 14:55:10 +01:00
< ul class = "dropdown-menu" role = "menu" >
2015-10-18 08:40:11 +02:00
< 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 >
2017-01-23 14:55:10 +01:00
< / ul >
2015-10-18 08:40:11 +02:00
< / span >
2017-01-23 14:55:10 +01:00
2020-06-09 22:08:43 +02:00
< span id = "property" class = "btn-group dropdown" >
< button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" aria-expanded = "false" tabindex = "0" > Property < span class = "caret" > < / span > < / button >
2017-01-23 14:55:10 +01:00
< ul class = "dropdown-menu" role = "menu" >
2015-10-18 08:40:11 +02:00
< li > < a id = "left" href = "#" > left< / a > < / li >
< li > < a id = "translateX" href = "#" > translateX< / a > < / li >
2017-01-23 14:55:10 +01:00
< / ul >
2015-10-18 08:40:11 +02:00
< / span >
2017-01-23 14:55:10 +01:00
2020-06-09 22:08:43 +02:00
< span id = "repeat" class = "btn-group dropdown" >
< button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" aria-expanded = "false" tabindex = "0" > Repeat < span class = "caret" > < / span > < / button >
2017-01-23 14:55:10 +01:00
< ul class = "dropdown-menu" role = "menu" >
2015-10-18 08:40:11 +02:00
< 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 >
2017-01-23 14:55:10 +01:00
< / ul >
2015-10-18 08:40:11 +02:00
< / span >
2017-01-23 14:55:10 +01:00
2020-06-09 22:08:43 +02:00
< span id = "count" class = "btn-group dropdown" >
< button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" aria-expanded = "false" tabindex = "0" > Count < span class = "caret" > < / span > < / button >
2017-01-23 14:55:10 +01:00
< 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 = "#" > < span style = "color: red" > 1000< / span > < / a > < / li >
< li > < a id = "1500" href = "#" > < span style = "color: red" > 1500< / span > < / a > < / li >
< li > < a id = "2000" href = "#" > < span style = "color: red" > 2000< / span > < / a > < / li >
< / ul >
2015-10-18 08:40:11 +02:00
< / span >
2017-01-23 14:55:10 +01:00
2020-06-09 22:08:43 +02:00
< hr class = "hr" >
2017-01-23 14:55:10 +01:00
2015-10-18 08:40:11 +02:00
< div style = "width:100%;clear: both" >
2017-01-23 14:55:10 +01:00
< button class = "btn btn-success" id = "start" type = "button" style = "margin-bottom: 15px" > Start< / button >
2015-10-18 08:40:11 +02:00
< / div >
2017-01-23 14:55:10 +01:00
< p > These tests are only for modern browsers. In Webkit browsers like Google Chrome and Opera 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 class = "text-note" > Please know that a local copy of this page will outperform the live site demo on Google Chrome, the reason is unknown.< / p >
2020-06-09 22:08:43 +02:00
2017-01-23 14:55:10 +01:00
< / div >
2016-03-16 14:44:23 +01:00
2017-01-23 14:55:10 +01:00
< div id = "container" > < / div >
2015-10-18 08:40:11 +02:00
2017-01-23 14:55:10 +01:00
2020-06-16 16:37:41 +02:00
<!-- JavaScript =============================================== -->
2017-01-23 14:55:10 +01:00
<!-- Placed at the end of the document so the pages load faster -->
<!-- [if !IE ]><! -->
2020-06-16 16:37:41 +02:00
< script src = "https://cdn.jsdelivr.net/bootstrap.native/1.0.1/bootstrap-native.min.js" > < / script >
2020-06-09 22:08:43 +02:00
< script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js" > < / script >
2017-01-23 14:55:10 +01:00
< script src = "./assets/js/tween.min.js" > < / script >
2020-06-09 22:08:43 +02:00
< script src = "./src/kute-extra.min.js" > < / script >
2017-01-23 14:55:10 +01:00
< script src = "./assets/js/perf.js" > < / script >
<!-- <![endif] -->
2015-10-18 08:40:11 +02:00
< / body >
2017-01-23 14:55:10 +01:00
2015-10-18 08:40:11 +02:00
< / html >