JavaScript, Progressive Enhancement & Performance

JavaScript, Progressive Enhancement & Performance NY Web Performance Meetup May 19, 2010 Chris Casciano

What are JavaScript’s Roles?

Adding to the Interaction Layer Through use of Menus, Form Validation and Content Updates via AJAX we can reduce or eliminate Requests

Adding Enrichment Through interaction between elements, event handling and animation we can Enhance the page beyond HTML & CSS

Cheating the Support Charts We can raise the level of support for Web Standards in browsers by bridging the gap in support via JavaScript

What Kind of Performance are we Discussing?

1.Efﬁciency of Client-Server Interactions 2.In Browser Performance & Perception

Adding Interaction & Enrichment

Providing Navigation Aides Menu enhancements, tabbed content areas & custom widgets like Type-Ahead-Find can remove intermediate requests

Form Validation Client Side form validation can eliminate a trip to the server.

Content Updates A request to the server can be eliminated for events like paging a slideshow or re-sorting a table of data.

AJAX Requests for small chunks of new content can replace full page requests.

Performance Tips For Enhancements

Consider the Document Flow

Use HTTP Headers X-Requested-With XMLHttpRequest

Consider What’s Needed Don’t make JavaScript the only way to get there

Reﬂows are very expensive Opera Developer Network

Make Fewer Changes Changes to Styles or the DOM cause Browsers to reﬂow the document

Make Local Changes Isolating changes to parts of the DOM help processing

AJAX, Performance & Enhancement Where does AJAX ﬁt in?

Good AJAX Adds Good AJAX adds to the behavior and core features of HTML and CSS

Bad AJAX Replaces Bad AJAX replaces or removes functionality on the page.

Bad AJAX

Better AJAX At JS Conf Facebook described their newly rebuilt pages that follow PE better

Facebook’s Plan Using standard HTML links, form controls & other elements with classes to further deﬁne type At beginning of page load attach only the minimal events to control the extra layer of behavior on the links At the end of the page load process throw on all the other scripts for widgets, tools and the like

What about 3rd Party Widgets? Like Facebook’s plan to separate core functionality and extra features Widgets fall into the latter.

Cheating Support Charts

Raising the Selectors Bar Add in support for unsupported selectors

Fixing HTML5 Tag Behaviors Support for HTML5 structural tags can be hacked into older browsers

Adding JavaScript Features Core JavaScript features such as events, selector functions and array features

Native Features Win Rendering of CSS and execution of native JavaScript functions are more optimized then your hacks

JavaScript Libraries Know Libraries such as jQuery know these rules

Examples of Adding Support

Adding ﬁrst-child Support Simple script to mimic pseudo selectors

Adding Rounded Corners Painting rounded corners with Curvy Corners http://www.curvycorners.net/

JavaScript Libraries to Bridge The Gap

IE7.js [... IE8.js, IE9.js] What: Brings IE5 and IE6 to the standards support level of IE7 (Fixed Positioning, Min- and Max-Width, PNG Transparency and CSS2 selectors) How: Uses common JavaScript 'hacks' to seemlessly add support for missing features http://code.google.com/p/ie7-js/

ie-css.js What: Allows Internet Explorer to identify CSS3 pseudo-class selectors and render any style rules deﬁned with them. How: Mixes with your favorite JavaScript library to seamlessly scan through your CSS ﬁles for unsupported selectors and reapplies those styles. http://www.keithclark.co.uk/labs/ie-css3/

Modernizr What: Uses feature detection to test the current browser against upcoming features like rgba(), border- radius, CSS Transitions and many more. How: Creates both a JavaScript object and adds classes to the HTML element based on results of internal tests for property support. http://www.modernizr.com/

Modernizr Creating border-image fallbacks

Additional Resources Opera.com: Efficient JavaScript http://dev.opera.com/articles/view/efficient-javascript/ Stubbornella: Reflows & Repaints: CSS Performance making your JavaScript slow? http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css- performance-making-your-javascript-slow/ Ajaxian: Facebook's JavaScript Speed Up http://ajaxian.com/archives/facebook-javascript-jsconf Yahoo! Developer Network: Not Just a Pretty Face: Performance and the New Yahoo! Search http://developer.yahoo.net/blog/archives/2009/09/search_performance.html Enzo Ferrari photos by Chris Casciano, Prius Photos by Scott Wyden http:// www.scottwyden.com

Chris Casciano Web: http://placenamehere.com Email: chris@placenamehere.com Twitter: @placenamehere

http://placenamehere.com	43
http://www.techpresentations.org	40
http://www.slideshare.net	35
http://chunkysoup.net	13
http://www.lmodules.com	1
http://www.chunkysoup.net	1
http://static.slidesharecdn.com	1
http://webcache.googleusercontent.com	1

JavaScript, Progressive Enhancement & Performance

by Chris Casciano on May 25, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

8 Embeds 135

Statistics

JavaScript, Progressive Enhancement & Performance — Presentation Transcript