Javascript Performance           in modern           browsers
WEBfast           means fast       JavaScriptOne of the most important factors to a good userexperience is fast execution ...
WHYNOW
because THIS  function init() {        alert(“hello user”);  }is slowly becoming...
   (function($){$.extend($.fn,{validate:function(options){if(!this.length){options&&options.debug&&window.console&&consol...
With the evolution of complex applications, browsers need to keep upto be able to deliver what developers need in terms of...
WHAT WE TESTED
HOW WE          TESTED      purpose                                  mathematical operations                              ...
MATH HOW?                        • primitive operations such as addition, multiplication                        • bitwise ...
Identefier                            resolutionWHY?                         because of                             the sc...
Data access                         HOW?                                by testing time needed to read /                  ...
ARRAYSWHY?to test memory access forcompiled code forcontiguous zones ofmemory                            1.   create large...
RegEX• some browsers create native  code which are used to solve  specific regular expressions• only viabile for long stri...
DOMdue to the live nature of HTMLELements and                                              WHY?HTMLCollections, objects an...
STRINGSstring conversion and manipulation is veryimportant in a JavaScript program as it is a                             ...
SHA1 WHY?   because more MATH                                  HOW?SHA1 contains a multitude of complex primitive mathand ...
CANVASGPU accelerated renderingspeed of the path API                              WHY?                            basic sh...
which were   THERESULTS
MATH       moste browsers use some form of source compilation       into either intermediate bytecode or native machineWHY...
Identefier                             resolution       the top browsers managed to have constant look-up       time regar...
DATA                        access       most modern JavaScript engines use hiddenWHY?       classes or a method of inline...
ARRAYS       as with most benchmarks used, a very important       factor in performance is the speed of theWHY?       comp...
RegEX       some JavaScript engines use special techniques       to optimize regular expression solving.       some compil...
STRINGS       the strings test saw the closest range of result, only aWHY?       27% difference bretween the top browser  ...
DOM       Google Chrome and Safari share the same layout       engine, WebKit, which has a major impact onWHY?       DOM m...
SHA1       because the SHA1 algorithm is comprised of mostlyWHY?       primitive mathematical and bitwise operations      ...
CANVAS       the key factor in canvas performance is the utilization       of the GPU to do most of the 2D rendering. This...
V8               Benchmark                                  Suite       It’s no suprise that the Google benchmark suite   ...
SO   WHICH        BEST  BROWSER    HAD    THERESULT
both development versions (Canary and Nightly managed to improve on it’s currentstable release)Internet explorer still cam...
WANTMORE         ?visit our wiki page to learn more about the tests performed              http://js-engine-performance.wi...
Upcoming SlideShare
Loading in...5
×

Modern JavaScript Engine Performance

647

Published on

Published in: Education, Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
647
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Modern JavaScript Engine Performance

  1. 1. Javascript Performance in modern browsers
  2. 2. WEBfast means fast JavaScriptOne of the most important factors to a good userexperience is fast execution of web pages. This means :• Compilation• Fast Interpreting• Fast Memory Access• Fast Garbage Collection
  3. 3. WHYNOW
  4. 4. because THIS function init() { alert(“hello user”); }is slowly becoming...
  5. 5.  (function($){$.extend($.fn,{validate:function(options){if(!this.length){options&&options.debug&&window.console&&console.warn("nothing selected, cant validate, returning nothing");return;}var validator=$.data(this[0],validator);if(validator){return validator;}validator=new $.validator(options,this[0]);$.data(this[0],validator,validator);if(validator.settings.onsubmit){this.find("input, button").filter(".cancel").click(function(){validator.cancelSubmit=true;});if(validator.setti ngs.submitHandler){this.find("input, button").filter(":submit").click(function(){validator.submitButton=this;});}this.submit(function(event){if(validator.settings.debug)event.preventDefault();function handle(){if(validator.settings.submitHandler){if(validator.submitButton){var hidden=$("<input type=hidden/>").attr("name",validator.submitButton.name).val(validator.submitButton.value).appendTo(validator.currentForm);}validator.settings.submitHandler.call(validator,validator.currentF orm);if(validator.submitButton){hidden.remove();}return false;}return true;}if(validator.cancelSubmit){validator.cancelSubmit=false;return handle();}if(validator.form()){if(validator.pendingRequest){validator.formSubmitted=true;return false;}return handle();}else{validator.focusInvalid();return false;}});}return validator;},valid:function(){if($(this[0]).is(form)){return this.validate().form();}else{var valid=true;var validator=$(this[0].form).validate();this.each(function(){valid&=validator.element(this);});return valid;}},removeAttrs:function(attributes){var result={},$element=this;$.each(attributes.split(/s/),function(index,value){result[value]=$element.attr(value);$element.removeAttr(value);});return result;},rules:function(command,argument){var element=this[0];if(command){var settings=$.data(element.form,validator).settings;var staticRules=settings.rules;var existingRules=$.validator.staticRules(element);switch(command){case"add":$.extend(existingRules,$.validator.normalizeRule(argument));staticRules[element.name]=existingRules;if(argument .messages)settings.messages[element.name]=$.extend(settings.messages[element.name],argument.messages);break;case"remove":if(!argument){delete staticRules[element.name];return existingRules;}var filtered={};$.each(argument.split(/s/),function(index,method){filtered[method]=existingRules[method];delete existingRules[method];});return filtered;}}var data=$.validator.normalizeRules($.extend({},$.validator.metadataRules(element),$.validator.classRules(element),$.validator.attributeRules(element),$.validator.staticRules(element)),element);i f(data.required){var param=data.required;delete data.required;data=$.extend({required:param},data);}return data;}});$.extend($.expr[":"],{blank:function(a){return!$.trim(""+a.value);},filled:function(a){return!!$.trim(""+a.value);},unchecked:function(a){return!a.checked;}});$.validator=function(options,form ){this.settings=$.extend({},$.validator.defaults,options);this.currentForm=form;this.init();};$.validator.format=function(source,params){if(arguments.length==1)return function(){var args=$.makeArray(arguments);args.unshift(source);return $.validator.format.apply(this,args);};if(arguments.length>2&&params.constructor!=Array){params=$.makeArray(arguments).slice(1);}if(params.constructor!=Array){params=[params];}$.each(par ams,function(i,n){source=source.replace(new RegExp("{"+i+"}","g"),n);});return this source;};$.extend($.validator,{defaults:{messages:{},groups:{},rules:{},errorClass:"error",validClass:"valid",errorElement:"label",focusInvalid:true,errorContainer:$([]),errorLabelContainer:$([]),on submit:true,ignore:[],ignoreTitle:false,onfocusin:function(element){this.lastActive=element;if(this.settings.focusCleanup&&!this.blockFocusCleanup){this.settings.unhighlight&&this.settings.unhi ghlight.call(this,element,this.settings.errorClass,this.settings.validClass);this.errorsFor(element).hide();}},onfocusout:function(element){if(!this.checkable(element)&&(element.name in this.submitted||!this.optional(element))){this.element(element);}},onkeyup:function(element){if(element.name in this.submitted||element==this.lastElement){this.element(element);}},onclick:function(element){if(element.name in this.submitted)this.element(element);else if(element.parentNode.name in this.submitted)this.element(element.parentNode)},highlight:function(element,errorClass,validClass){$(element).addClass(errorClass).removeClass(validClass);},unhighlight:function(element,err orClass,validClass){$(element).removeClass(errorClass).addClass(validClass);}},setDefaults:function(settings){$.extend($.validator.defaults,settings);},messages:{required:"This field is required.",remote:"Please fix this field.",email:"Please enter a valid email address.",url:"Please enter a valid URL.",date:"Please enter a valid date.",dateISO:"Please enter a valid date (ISO).",number:"Please enter a valid number.",digits:"Please enter only digits.",creditcard:"Please enter a valid credit card number.",equalTo:"Please enter the same value again.",accept:"Please enter a value with a valid extension.",maxlength:$.validator.format("Please enter no more than {0} characters."),minlength:$.validator.format("Please enter at least {0} characters."),rangelength:$.validator.format("Please enter a value between {0} and {1} characters long."),range:$.validator.format("Please enter a value between {0} and {1}."),max:$.validator.format("Please enter a value less than or equal to {0}."),min:$.validator.format("Please enter a value greater than or equal to {0}.")},autoCreateRanges:false,prototype:{init:function(){this.labelContainer=$(this.settings.errorLabelContainer);this.errorContext=this.labelContainer.length&&this.labelContainer||$(this.current Form);this.containers=$(this.settings.errorContainer).add(this.settings.errorLabelContainer);this.submitted={};this.valueCache={};this.pendingRequest=0;this.pending={};this.invalid={};this.reset ();var groups=(this.groups={});$.each(this.settings.groups,function(key,value){$.each(value.split(/s/),function(index,name){groups[name]=key;});});var rules=this.settings.rules;$.each(rules,function(key,value){rules[key]=$.validator.normalizeRule(value);});function delegate(event){var validator=$.data(this[0].form,"validator");validator.settings["on"+event.type]&&validator.settings["on"+event.type].call(validator,this[0]);}$(this.currentForm).delegate("focusin focusout keyup",":text, :password, :file, select, textarea",delegate).delegate("click",":radio, :checkbox, select, option",delegate);if(this.settings.invalidHandler)$(this.currentForm).bind("invalid- form.validate",this.settings.invalidHandler);},form:function(){this.checkForm();$.extend(this.submitted,this.errorMap);this.invalid=$.extend({},this.errorMap);if(!this.valid())$(this.currentForm).trigg erHandler("invalid-form",[this]);this.showErrors();return this.valid();},checkForm:function(){this.prepareForm();for(var i=0,elements=(this.currentElements=this.elements());elements[i];i++){this.check(elements[i]);}return this.valid();},element:function(element){element=this.clean(element);this.lastElement=element;this.prepareElement(element);this.currentElements=$(element);var result=this.check(element);if(result){delete this.invalid[element.name];}else{this.invalid[element.name]=true;}if(!this.numberOfInvalids()){this.toHide=this.toHide.add(this.containers);}this.showErrors();return result;},showErrors:function(errors){if(errors){$.extend(this.errorMap,errors);this.errorList=[];for(var name in errors){this.errorList.push({message:errors[name],element:this.findByName(name)[0]});}this.successList=$.grep(this.successList,function(element){return!(element.name in errors);});}this.settings.showErrors?this.settings.showErrors.call(this,this.errorMap,this.errorList):this.defaultShowErrors();},resetForm:function(){if($.fn.resetForm)$(this.currentForm).resetForm( );this.submitted={};this.prepareForm();this.hideErrors();this.elements().removeClass(this.settings.errorClass);},numberOfInvalids:function(){return this.objectLength(this.invalid);},objectLength:function(obj){var count=0;for(var i in obj)count++;return count;},hideErrors:function(){this.addWrapper(this.toHide).hide();},valid:function(){return this.size()==0;},size:function(){return this.errorList.length;},focusInvalid:function(){if(this.settings.focusInvalid){try{$(this.findLastActive()||this.errorList.length&&this.errorList[0].element||[]).filter(":visible").focus();}catch(e){}}},findLast Active:function(){var lastActive=this.lastActive;return lastActive&&$.grep(this.errorList,function(n){return n.element.name==lastActive.name;}).length==1&&lastActive;},elements:function(){var validator=this,rulesCache={};return $([]).add(this.currentForm.elements).filter(":input").not(":submit, :reset, :image, [disabled]").not(this.settings.ignore).filter(function(){!this.name&&validator.settings.debug&&window.console&&co
  6. 6. With the evolution of complex applications, browsers need to keep upto be able to deliver what developers need in terms of performance. DONE? what can be most modern browsers employ optimization techniques such as: • compiling source code into byte-code or native code • fast source code / byte code inerpreting • hidden classes • fast property access • fast garbage collection • type optimisation • many others
  7. 7. WHAT WE TESTED
  8. 8. HOW WE TESTED purpose mathematical operations identifier resolution data access built arrays regex tests strings DOM SHA1 canvasalso, the V 8 Benchmark Suite
  9. 9. MATH HOW? • primitive operations such as addition, multiplication • bitwise operations • built in functions WHY?• speed of compiled code• bytecode versus native code• optimization of built in functions
  10. 10. Identefier resolutionWHY? because of the scope chain higher recursion depth means slow access times for variables which are not locally defined.HOW? 1. create a large scope chain 2. test time need to read / write memory from variabiles situated on the highes activation object
  11. 11. Data access HOW? by testing time needed to read / write properties from an object in both their forms WHY? to test hidden class creation, hash based property lookups, inline caching and time needed to resolve false identifications of object type
  12. 12. ARRAYSWHY?to test memory access forcompiled code forcontiguous zones ofmemory 1. create large arrays 2. test memory access and traversal times HOW? 3. 4. 5. concatenation reversing joining 6. removing elements
  13. 13. RegEX• some browsers create native code which are used to solve specific regular expressions• only viabile for long strings WHY?HOW? • repeated solving of patterns of average complexity in a string of average length.
  14. 14. DOMdue to the live nature of HTMLELements and WHY?HTMLCollections, objects and querries needconstant update when properties are changedmaking simple thinks as property accessVERY slow. HOW? HTMLCollection creation attribute modification tree traversal element searching
  15. 15. STRINGSstring conversion and manipulation is veryimportant in a JavaScript program as it is a WHY?common way to do type conversion andtransforming raw data into a human readableform string conversion HOW? concatenation index based search splitting
  16. 16. SHA1 WHY? because more MATH HOW?SHA1 contains a multitude of complex primitive mathand bitwise operation makingthem perferct to test executionspeed of byte code / native compiled code
  17. 17. CANVASGPU accelerated renderingspeed of the path API WHY? basic shape drawing HOW? drawing with the path API string drawing pixel manipulation
  18. 18. which were THERESULTS
  19. 19. MATH moste browsers use some form of source compilation into either intermediate bytecode or native machineWHY? code. this means that most primitive calculations take toughly the same time across all browsers, apart from a few anomalies YES we retested Firefox under windows and linux, but no change was recorded.
  20. 20. Identefier resolution the top browsers managed to have constant look-up time regardless of recursion depth and the size ofWHY? the scope chain. bottom browsers however were affected heavely by recursion depth
  21. 21. DATA access most modern JavaScript engines use hiddenWHY? classes or a method of inline caching the adress of previously searched properties this makes the performance among all browsers closer than in other tests
  22. 22. ARRAYS as with most benchmarks used, a very important factor in performance is the speed of theWHY? compiled source code accessing contiguous zones of memory is made faster by knowing the exact location of every member in an array, characteristic brough by bytecode or native machine code
  23. 23. RegEX some JavaScript engines use special techniques to optimize regular expression solving. some compile the entire source code, some justWHY? create specialized blocks of machine code specifically for regular expressions. due to the average length of the expression and text, the time needed to compile the source code did not surpass the time needed to solve the expression
  24. 24. STRINGS the strings test saw the closest range of result, only aWHY? 27% difference bretween the top browser this is due largely because, passed source compilation, there isn’t a great range of optimizations that can be done on string manipulation
  25. 25. DOM Google Chrome and Safari share the same layout engine, WebKit, which has a major impact onWHY? DOM manipulation in JavaScript this is why they are both at the top with relatively close performance
  26. 26. SHA1 because the SHA1 algorithm is comprised of mostlyWHY? primitive mathematical and bitwise operations this test was a continuation of the Math test, seeing similar results, with the same uniformly distributed results
  27. 27. CANVAS the key factor in canvas performance is the utilization of the GPU to do most of the 2D rendering. This isWHY? why the top scorers had the best GPU accelerated system it should be noted, that for every browser all systems related to GPU acceleration were turned on, enabeling them to extract the maximum performance they can
  28. 28. V8 Benchmark Suite It’s no suprise that the Google benchmark suite had their in-house built browser as the top scorerWHY? but what about Internet Explorer? The JIT compiler is only available to the 32 bit version of the browser, which was not used on the testing machine (as it has a 64 bit operating system).
  29. 29. SO WHICH BEST BROWSER HAD THERESULT
  30. 30. both development versions (Canary and Nightly managed to improve on it’s currentstable release)Internet explorer still came last, despite it’s major improvements over its predecessor
  31. 31. WANTMORE ?visit our wiki page to learn more about the tests performed http://js-engine-performance.wikidot.com/ Catalin Dumitru colin.dumitru@gmail.com Iustina Camelia Melinte iustina.melinte@gmail.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×