Your SlideShare is downloading. ×
0
Modern JavaScript Engine Performance
Modern JavaScript Engine Performance
Modern JavaScript Engine Performance
Modern JavaScript Engine Performance
Modern JavaScript Engine Performance
Modern JavaScript Engine Performance
Modern JavaScript Engine Performance
Modern JavaScript Engine Performance
Modern JavaScript Engine Performance
Modern JavaScript Engine Performance
Modern JavaScript Engine Performance
Modern JavaScript Engine Performance
Modern JavaScript Engine Performance
Modern JavaScript Engine Performance
Modern JavaScript Engine Performance
Modern JavaScript Engine Performance
Modern JavaScript Engine Performance
Modern JavaScript Engine Performance
Modern JavaScript Engine Performance
Modern JavaScript Engine Performance
Modern JavaScript Engine Performance
Modern JavaScript Engine Performance
Modern JavaScript Engine Performance
Modern JavaScript Engine Performance
Modern JavaScript Engine Performance
Modern JavaScript Engine Performance
Modern JavaScript Engine Performance
Modern JavaScript Engine Performance
Modern JavaScript Engine Performance
Modern JavaScript Engine Performance
Modern JavaScript Engine Performance
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Modern JavaScript Engine Performance

610

Published on

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Javascript Performance in modern browsers
  • 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. WHYNOW
  • 4. because THIS function init() { alert(“hello user”); }is slowly becoming...
  • 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. 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. WHAT WE TESTED
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. CANVASGPU accelerated renderingspeed of the path API WHY? basic shape drawing HOW? drawing with the path API string drawing pixel manipulation
  • 18. which were THERESULTS
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. SO WHICH BEST BROWSER HAD THERESULT
  • 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. 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

×