test_tkhs329

JavaScript performance comparison

Test case created by tkhs329

Preparation code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
    <title></title>
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keyword" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta property="og:title" content="ページタイトル" />
    <meta property="og:type" content="websiteまたはarticle" />
    <meta property="og:url" content="ページのURL(http://から指定)" />
    <meta property="og:site_name" content="サイト名" />
    <meta property="og:description" content="ページの説明" />
    <meta property="og:image" content="画像のURL(http://から指定)" />
    <link rel="canonical" href=".com">
    <link rel="shortcut icon" href="favicon.ico" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/test3/resource/css/style.css">
</head>

<body>
    <div class="container">
        <div class="wrap">
            <canvas>
                <video loop preload autoplay>
                    <source src="http://mitsugutakahashi.com/test3/resource/video/video.mp4">
                    <source src="http://mitsugutakahashi.com/test3/resource/video/video.webm">
                </video>
            </canvas>
        </div>
        <!-- <div class="wrap">
            <canvas>
                <video loop preload autoplay>
                    <source src="http://mitsugutakahashi.com/test3/resource/video/video.mp4">
                    <source src="http://mitsugutakahashi.com/test3/resource/video/video.webm">
                </video>
            </canvas>
        </div>
        <div class="wrap">
            <canvas>
                <video loop preload autoplay>
                    <source src="http://mitsugutakahashi.com/test3/resource/video/video.mp4">
                    <source src="http://mitsugutakahashi.com/test3/resource/video/video.webm">
                </video>
            </canvas>
        </div> -->
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.8.3/TweenMax.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="/test3/resource/js/script.js"></script>
</body>

</html>
      
<script>
Benchmark.prototype.setup = function() {
  (function() {

  
      'use strict';
  
      // website element
      var website = {
              body: $('html,body'),
              window: $(window),
              cont: $('.container'),
              wrap: $('.wrap'),
              url: document.URL,
              easing: '',
              duration: 1000,
              breakPoint: 768
          },
  
          // window size
          winW = website.window.width(),
          winH = website.window.height(),
          w = winW * 0.6,
          h = winW * 0.33,
          trigger = {
              show: winH * 0.8,
              hide: winH * 0.2
          },
          y = 0;
  
      var eventsSet = function() {
          eventsCtrl.mousemoveEvent();
      };
  
      var eventsCtrl = {
  
          mousemoveEvent: function() {
              website.window.on('loaded mousemove', function(event) {
                  var cx = Math.ceil(website.body.width() / 2.0),
                      cy = Math.ceil(website.body.height() / 2.0),
                      dx = event.pageX - cx,
                      dy = event.pageY - cy,
                      tiltx = -(dy / cy),
                      tilty = (dx / cx),
                      radius = Math.sqrt(Math.pow(tiltx, 2) + Math.pow(tilty, 2)),
                      degree = (radius * 10);
  
                  TweenMax.set(website.wrap, {
                      perspective: '3000px',
                      transformStyle: 'preserve-3d'
                  });
  
                  TweenMax.set('canvas', {
                      transformStyle: 'preserve-3d',
                      z: '0px',
                      transform: 'rotate3d(' + tiltx + ', ' + tilty + ', 0, ' + degree + 'deg)'
                  });
              });
          }
      };
  
      var pagesCtrl = {
          heightSet: function(that) {
              that.css({
                  height: winH
              });
          }
      };
  
      var TweenMaxCtrl = {
  
          contIn: function(obj) {
              var props = { x: 0, y: '100%', z: 0 };
              TweenMax.to(props, 2, { y: 0, onUpdate: applyProps });
  
              function applyProps() {
                  obj.style.WebkitTransform = 'translate3d(' + props.x + 'px, ' + props.y + '%, ' + props.z + ')';
              }
          },
  
          contOut: function(obj) {
              var props = { x: 0, y: 0, z: 0 };
              TweenMax.to(props, 2, { y: 100, onUpdate: applyProps });
  
              function applyProps() {
                  obj.style.WebkitTransform = 'translate3d(' + props.x + 'px, ' + props.y + '%, ' + props.z + ')';
              }
          }
      };
  
      var canvasModule = {
  
          drawPath: function(ctx, obj) {
              ctx.beginPath();
              ctx.moveTo(0, 0);
              ctx.lineTo(obj.x, 0);
              ctx.lineTo(obj.x, h);
              ctx.lineTo(0, h);
              ctx.clip();
          },
  
          drawTxt: function(canvas, video) {
              var clip = document.createElement('canvas'),
                  clip_ctx = clip.getContext('2d');
  
              clip.width = w;
              clip.height = h;
  
              clip_ctx.save();
              clip_ctx.drawImage(video, 0, 0);
              clip_ctx.globalCompositeOperation = 'destination-atop';
              clip_ctx.font = '100px Helvetica Neue';
              clip_ctx.fillStyle = 'white';
              clip_ctx.textBaseline = 'middle';
              clip_ctx.textAlign = 'center';
              clip_ctx.fillText('SAMPLE', w / 2, h / 2);
              clip_ctx.restore();
  
              canvas.getContext('2d').drawImage(clip, 0, 0, w, h);
          },
  
          playVideo: function(i, obj) {
  
              canvasModule.drawPath(obj.canvas.getContext('2d'), obj);
              obj.video.play();
  
              setInterval(function() {
                  obj.canvas.getContext('2d').drawImage(obj.video, 0, 0, w, h);
                  canvasModule.drawTxt(obj.canvas, obj.video);
              }, 1000 / 400);
          }
      };
  
      var draw = function(i) {
  
          var obj = {
              canvas: document.getElementsByTagName('canvas')[i],
              video: document.getElementsByTagName('video')[i],
              x: w,
              y: h
          };
  
          obj.canvas.getContext('2d').clearRect(0, 0, w, h);
  
          obj.canvas.width = w;
          obj.canvas.height = h;
  
          canvasModule.playVideo(i, obj);
  
          // TweenMax.to(obj, .8, { x: w, y: 0, onUpdate: drawImg });
  
      };
  
      var x = 100;
      var y = 100;
  
      var render = function(lastRender) {
          var delta = new Date() - lastRender;
          x += delta;
          y += delta;
          (!window.requestAnimationFrame) ? setTimeout(init, 300): window.requestAnimationFrame(init);
      };
  
      var init = function() {
          winW = website.window.width();
          winH = website.window.height();
          w = winW * 0.6;
          h = winW * 0.33;
  
          for (var i = 0; i < website.wrap.length; i++) {
              var that = website.wrap.eq(i);
              pagesCtrl.heightSet(that);
              draw(i);
          }
  
          // eventsSet();
          window.addEventListener('resize', function() {
              // (!window.requestAnimationFrame) ? setTimeout(init, 300): window.requestAnimationFrame(init);
              var lastRender = new Date();
              render(lastRender);
          });
      };
  
      init();
  
  })();

};

Benchmark.prototype.teardown = function() {
  (function() {

  
      'use strict';
  
      // website element
      var website = {
              body: $('html,body'),
              window: $(window),
              cont: $('.container'),
              wrap: $('.wrap'),
              url: document.URL,
              easing: '',
              duration: 1000,
              breakPoint: 768
          },
  
          // window size
          winW = website.window.width(),
          winH = website.window.height(),
          w = winW * 0.6,
          h = winW * 0.33,
          trigger = {
              show: winH * 0.8,
              hide: winH * 0.2
          },
          y = 0;
  
      var eventsSet = function() {
          eventsCtrl.mousemoveEvent();
      };
  
      var eventsCtrl = {
  
          mousemoveEvent: function() {
              website.window.on('loaded mousemove', function(event) {
                  var cx = Math.ceil(website.body.width() / 2.0),
                      cy = Math.ceil(website.body.height() / 2.0),
                      dx = event.pageX - cx,
                      dy = event.pageY - cy,
                      tiltx = -(dy / cy),
                      tilty = (dx / cx),
                      radius = Math.sqrt(Math.pow(tiltx, 2) + Math.pow(tilty, 2)),
                      degree = (radius * 10);
  
                  TweenMax.set(website.wrap, {
                      perspective: '3000px',
                      transformStyle: 'preserve-3d'
                  });
  
                  TweenMax.set('canvas', {
                      transformStyle: 'preserve-3d',
                      z: '0px',
                      transform: 'rotate3d(' + tiltx + ', ' + tilty + ', 0, ' + degree + 'deg)'
                  });
              });
          }
      };
  
      var pagesCtrl = {
          heightSet: function(that) {
              that.css({
                  height: winH
              });
          }
      };
  
      var TweenMaxCtrl = {
  
          contIn: function(obj) {
              var props = { x: 0, y: '100%', z: 0 };
              TweenMax.to(props, 2, { y: 0, onUpdate: applyProps });
  
              function applyProps() {
                  obj.style.WebkitTransform = 'translate3d(' + props.x + 'px, ' + props.y + '%, ' + props.z + ')';
              }
          },
  
          contOut: function(obj) {
              var props = { x: 0, y: 0, z: 0 };
              TweenMax.to(props, 2, { y: 100, onUpdate: applyProps });
  
              function applyProps() {
                  obj.style.WebkitTransform = 'translate3d(' + props.x + 'px, ' + props.y + '%, ' + props.z + ')';
              }
          }
      };
  
      var canvasModule = {
  
          drawPath: function(ctx, obj) {
              ctx.beginPath();
              ctx.moveTo(0, 0);
              ctx.lineTo(obj.x, 0);
              ctx.lineTo(obj.x, h);
              ctx.lineTo(0, h);
              ctx.clip();
          },
  
          drawTxt: function(canvas, video) {
              var clip = document.createElement('canvas'),
                  clip_ctx = clip.getContext('2d');
  
              clip.width = w;
              clip.height = h;
  
              clip_ctx.save();
              clip_ctx.drawImage(video, 0, 0);
              clip_ctx.globalCompositeOperation = 'destination-atop';
              clip_ctx.font = '100px Helvetica Neue';
              clip_ctx.fillStyle = 'white';
              clip_ctx.textBaseline = 'middle';
              clip_ctx.textAlign = 'center';
              clip_ctx.fillText('SAMPLE', w / 2, h / 2);
              clip_ctx.restore();
  
              canvas.getContext('2d').drawImage(clip, 0, 0, w, h);
          },
  
          playVideo: function(i, obj) {
  
              canvasModule.drawPath(obj.canvas.getContext('2d'), obj);
              obj.video.play();
  
              setInterval(function() {
                  obj.canvas.getContext('2d').drawImage(obj.video, 0, 0, w, h);
                  canvasModule.drawTxt(obj.canvas, obj.video);
              }, 1000 / 400);
          }
      };
  
      var draw = function(i) {
  
          var obj = {
              canvas: document.getElementsByTagName('canvas')[i],
              video: document.getElementsByTagName('video')[i],
              x: w,
              y: h
          };
  
          obj.canvas.getContext('2d').clearRect(0, 0, w, h);
  
          obj.canvas.width = w;
          obj.canvas.height = h;
  
          canvasModule.playVideo(i, obj);
  
          // TweenMax.to(obj, .8, { x: w, y: 0, onUpdate: drawImg });
  
      };
  
      var x = 100;
      var y = 100;
  
      var render = function(lastRender) {
          var delta = new Date() - lastRender;
          x += delta;
          y += delta;
          (!window.requestAnimationFrame) ? setTimeout(init, 300): window.requestAnimationFrame(init);
      };
  
      var init = function() {
          winW = website.window.width();
          winH = website.window.height();
          w = winW * 0.6;
          h = winW * 0.33;
  
          for (var i = 0; i < website.wrap.length; i++) {
              var that = website.wrap.eq(i);
              pagesCtrl.heightSet(that);
              draw(i);
          }
  
          // eventsSet();
          window.addEventListener('resize', function() {
              // (!window.requestAnimationFrame) ? setTimeout(init, 300): window.requestAnimationFrame(init);
              var lastRender = new Date();
              render(lastRender);
          });
      };
  
      init();
  
  })();

};
</script>

Preparation code output

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <!--[if lt IE 9]> <![endif]--> <title></title> <meta name="description" content=""> <meta name="author" content=""> <meta name="keyword" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:title" content="ページタイトル" /> <meta property="og:type" content="websiteまたはarticle" /> <meta property="og:url" content="ページのURL(http://から指定)" /> <meta property="og:site_name" content="サイト名" /> <meta property="og:description" content="ページの説明" /> <meta property="og:image" content="画像のURL(http://から指定)" /> <link rel="canonical" href=".com"> <link rel="shortcut icon" href="favicon.ico" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="/test3/resource/css/style.css"> </head> <body> <div class="container"> <div class="wrap"> <canvas> <video loop preload autoplay> <source src="http://mitsugutakahashi.com/test3/resource/video/video.mp4"> <source src="http://mitsugutakahashi.com/test3/resource/video/video.webm"> </video> </canvas> </div> <!-- <div class="wrap"> <canvas> <video loop preload autoplay> <source src="http://mitsugutakahashi.com/test3/resource/video/video.mp4"> <source src="http://mitsugutakahashi.com/test3/resource/video/video.webm"> </video> </canvas> </div> <div class="wrap"> <canvas> <video loop preload autoplay> <source src="http://mitsugutakahashi.com/test3/resource/video/video.mp4"> <source src="http://mitsugutakahashi.com/test3/resource/video/video.webm"> </video> </canvas> </div> --> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.8.3/TweenMax.min.js" type="text/javascript"></script> <script type="text/javascript" src="/test3/resource/js/script.js"></script> </body> </html>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
pending…
pending…

You can edit these tests or add even more tests to this page by appending /edit to the URL.

0 Comments