GoogleNews

JavaScript performance comparison

Test case created by Cory Schulz

Preparation code



 <!doctype html>
<head>
<meta charset="UTF-8">
<title>GoogleNews</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://crane.io/lib/cranepreview.js"></script>
<style>
.titleDiv{

text-align: center;

border-bottom: 1px solid black;
padding: 10px;
font-weight: bold;
font-family: Helvetica, arial;
font-size: 20px;

background: rgb(181,189,200); /* Old browsers */
background: -moz-linear-gradient(top, rgba(181,189,200,1) 0%, rgba(112,120,127,1) 2%, rgba(40,52,59,1) 98%, rgba(130,140,149,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(181,189,200,1)), color-stop(2%,rgba(112,120,127,1)), color-stop(98%,rgba(40,52,59,1)), color-stop(100%,rgba(130,140,149,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(181,189,200,1) 0%,rgba(112,120,127,1) 2%,rgba(40,52,59,1) 98%,rgba(130,140,149,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(181,189,200,1) 0%,rgba(112,120,127,1) 2%,rgba(40,52,59,1) 98%,rgba(130,140,149,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(181,189,200,1) 0%,rgba(112,120,127,1) 2%,rgba(40,52,59,1) 98%,rgba(130,140,149,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(181,189,200,1) 0%,rgba(112,120,127,1) 2%,rgba(40,52,59,1) 98%,rgba(130,140,149,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#828c95',GradientType=0 ); /* IE6-9 */






}
.contentDiv{

background-color: white;
padding: 10px;
font-weight: normal;
font-family: Helvetica, arial;
font-size: 14px;
text-align: left;
}
.wrapperDiv{
border-radius: 5px;
margin: 10px;
top: 60px;
width: 80%;

left: 50%;
position: relative;
margin-left: -40%;
overflow: hidden;
border: 1px solid black;
box-shadow: 0px 2px 10px rgba(0,0,0,0.3);}
.titleDiv a{
color: white;
text-shadow: 0px -1px 0px black, 0px 0px 3px black;
}
.searchDiv{
position: fixed;
top: 0px;
background-color: rgba(0,0,0,0.4);
width: 100%;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
border-bottom: 1px solid black;
z-index: 5;

box-shadow: inset 0px 0px 10px black, inset  0px 0px 1px white;
}
.searchDiv button{
border-radius: 2px;
padding: 5px;
border: 1px solid black;
font-weight: bold;
color: white;

box-shadow: 0px 0px 1px white, inset 0px 0px 1px gray;


background: rgb(125,126,125); /* Old browsers */
background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(66,66,66,1) 3%, rgba(14,14,14,1) 97%, rgba(48,48,48,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(3%,rgba(66,66,66,1)), color-stop(97%,rgba(14,14,14,1)), color-stop(100%,rgba(48,48,48,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(66,66,66,1) 3%,rgba(14,14,14,1) 97%,rgba(48,48,48,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(66,66,66,1) 3%,rgba(14,14,14,1) 97%,rgba(48,48,48,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(66,66,66,1) 3%,rgba(14,14,14,1) 97%,rgba(48,48,48,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(66,66,66,1) 3%,rgba(14,14,14,1) 97%,rgba(48,48,48,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#303030',GradientType=0 ); /* IE6-9 */




}
.searchDiv input{
border-radius: 2px;
padding: 5px;
border: 1px solid black;
width: 150px;
box-shadow: 0px 0px 2px white;
}
.snippetWrapper{

background: rgba(0,0,0,0.2);
padding: 8px;
margin: 5px;
border-radius: 3px;
border: 1px solid black;
box-shadow: inset 0px 1px 5px rgba(0,0,0,0.3);
color: white;}
.snippetWrapper a{
color: white;
decoration: none;}
body{

background: darkgray;
margin: 0px !important;


}

</style></head>

<body>

<button id="craneThrowErrorButton" style="display: none;" ></button>
 <script type="text/x-handlebars" data-template-name="application">{{outlet}}</script>

<script type="text/x-handlebars" data-template-name="GoogleNewsTemplate">  <div  id=""  cranekey="a23824ae25046ea0a9a5b08c"  class=" craneElement  searchDiv"    ><actionBox  {{action refreshOnNewLine target="controller" on="keyUp"}}>{{view Ember.TextField  id=""  cranekey="97bfb5436985be0d170253c3"  class=" craneElement "  valueBinding="App.CountTextValue.value"  placeholder="number of articles (0-10)" }}</actionBox><button type="button"  id=""  cranekey="0e9a4e414566efb87b4a5efd"  class=" craneElement "   {{action refreshButtonClick target="controller" on="click"}}>Refresh Article Count (0-10)</button> </div> {{#with responseData.feed}}{{#each entries}} <div  id=""  cranekey="6bd3938595b6fda48199ce6d"  class=" craneElement  wrapperDiv"    > <div  id=""  cranekey="de284e5cdea2adc535f40069"  class=" craneElement  titleDiv"    ><a  {{bindAttr href="link" }}  id=""  cranekey="f694449d11275b4a195de3bd"  class=" craneElement "  target="_blank"   >{{title}}</a>  </div>  <div  id=""  cranekey="b6fb66d2012ec6d4b9252fe4"  class=" craneElement  contentDiv"   {{action alertme target="controller" on="click"}} >{{story content}} </div>  </div> {{/each}} {{/with}}<br/><br/><br/><br/>{{#with responseData}}{{#if feed}}{{#with feed}}{{#each entries}} <div  id=""  cranekey="7b765f92c8847d0504981025"  class=" craneElement  snippetWrapper"    ><a  {{bindAttr href="link" }}  id=""  cranekey="a65e2e9cc9d84a609381984e"  class=" craneElement "  target="_blank"   >{{contentSnippet}}</a>  </div> {{/each}} {{/with}}{{/if}} {{/with}}</script>



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.rc.1/handlebars.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-pre.2/ember-1.0.0-pre.2.min.js"></script>



</body></html>
 

Preparation code output

GoogleNews

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
With Try Catch
 
App = Ember.Application.create();

App.ApplicationView = Ember.View.extend({
        templateName: 'application'
});

App.ApplicationController = Ember.Controller.extend();

App.Router = Ember.Router.extend({
        root: Ember.Route.extend({
        falseindex: Ember.Route.extend({
                        route: '/',
                        connectOutlets: function(router){ try{
                                router.get('applicationController').connectOutlet('googleNews', App.GoogleNewsData.populateNews(5) );
                }catch(err){ throwCraneError(err, "e698639321fbe17bcd099f04", 0);}
}
                })
        })
});



// View and View Controller code.


App.GoogleNewsController = Ember.ObjectController.extend({
  
  refreshButtonClick: function(){ try{
    this.set("content", {} );
    App.GoogleNewsData.populateNews(App.CountTextValue.value);
 }catch(err){ throwCraneError(err, "580e8f7fd34d971e41ee1f53", 0);}
},
  refreshOnNewLine: function(e){ try{
    if (e.keyCode == 13) {
     this.set("content", {} );
     App.GoogleNewsData.populateNews(App.CountTextValue.value);
      
    }
 }catch(err){ throwCraneError(err, "580e8f7fd34d971e41ee1f53", 1);}
}
  
});


App.GoogleNewsView = Ember.View.extend({
        templateName: 'GoogleNewsTemplate',
        title: "GoogleNews"
});

App.GoogleNewsData = Ember.Object.extend();

App.GoogleNewsData.reopenClass({
        
        populateNews: function(count){ try{ 
                App.GoogleNewsData.create({}) );
}catch(err){ throwCraneError(err, "580e8f7fd34d971e41ee1f53", 2);}
}
});


App.CountTextValue = Ember.Object.create({
    value: ''
});

// This helper injects the html from the json directly into the DOM

Handlebars.registerHelper('story', function(property, options) { try{
  var value = Ember.Handlebars.get(this, property, options);
  return new Handlebars.SafeString(value);}catch(err){ throwCraneError(err, "580e8f7fd34d971e41ee1f53", 4);}
});
 pending…
No Try catch
 
App = Ember.Application.create();

App.ApplicationView = Ember.View.extend({
        templateName: 'application'
});

App.ApplicationController = Ember.Controller.extend();

App.Router = Ember.Router.extend({
        root: Ember.Route.extend({
        falseindex: Ember.Route.extend({
                        route: '/',
                        connectOutlets: function(router){
                                router.get('applicationController').connectOutlet('googleNews', App.GoogleNewsData.populateNews(5) );
                        }
                })
        })
});



// View and View Controller code.


App.GoogleNewsController = Ember.ObjectController.extend({
  
  refreshButtonClick: function(){
    this.set("content", {} );
    App.GoogleNewsData.populateNews(App.CountTextValue.value);
  },
  refreshOnNewLine: function(e){
    if (e.keyCode == 13) {
     this.set("content", {} );
     App.GoogleNewsData.populateNews(App.CountTextValue.value);
      
    }
  }
  
});


App.GoogleNewsView = Ember.View.extend({
        templateName: 'GoogleNewsTemplate',
        title: "GoogleNews"
});

App.GoogleNewsData = Ember.Object.extend();

App.GoogleNewsData.reopenClass({
        
        populateNews: function(count){ 
                $.ajax({
                        url: "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=" + count+ "&q=http%3A%2F%2Fnews.google.com%2Fnews%3Foutput%3Drss%26num%3D10",
                        dataType: 'jsonp',
                        context: this,
                        success: function(response){
                        App.router.googleNewsController.set("content", 
                }
                });     
        }
});


App.CountTextValue = Ember.Object.create({
    value: ''
});

// This helper injects the html from the json directly into the DOM

Handlebars.registerHelper('story', function(property, options) {
  var value = Ember.Handlebars.get(this, property, options);
  return new Handlebars.SafeString(value);
});
 
 pending…

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

Compare results of other browsers

0 comments

Add a comment