際際滷

際際滷Share a Scribd company logo

jQuery Conf 2012

Download as PPTX, PDF
B
Brett Holt

This document discusses best practices for optimizing jQuery performance including selector performance, CSS classes, specificity, visibility profiling with Firebug and Yslow, responsiveness through event throttling, handling initial state with CSS, writing reusable code, unit testing with qUnit, using Grunt as a build tool to minify code and run tests with PhantomJS and qUnit. Tips provided include focusing on low hanging fruit first and using Google Analytics to measure page load performance.

1 of 11
Download to read offline
jQCon Condensed edition
Review Selector performance ID Tag name Name, Class Use CSS classes to control state Specificity helps Ex: $(div.ui-content); instead of $(.ui-content)
Performance Visibility: Business: Install Firebug & Yslow Performance is important for Know what is slowing down the product your page loads Performance can be expensive Optimize intelligently - weigh the LOE and the utility gained Interactivity: Performance is most important Profile your $.ready to sites that get millions of hits Minimize initialization on page load Tips: Low hanging fruit first Responsiveness: Google Analytics to record data throttle/debounce events about your loads 8-bit PNG's with alpha
Contextual jQuery Handle initial state with CSS Write reusable code Delegate event handling Anticipate user actions Scrolling Focus/blur Typing .one()
Unit Testing qUnit qUnit qUnit And qUnit
Grunt Build tool for JS Included tasks Creates scaffolding Lint (JSHint) Unit testing (qUnit) Concat/Minify (UglifyJS)
PhantomJS Headless WebKit Like the horseman? Why is this cool? Grunt + PhantomJS + qUnit = ?
DEMONSTRATION
Recap of Steps brew install node brew install phantomjs npm install -g grunt grunt -help (Optional) grunt init (Optional) grunt init:jquery grunt qunit
Tools YSlow, PageSpeed JavaScript Errors Notifier Chrome Extension iWebInspector JSHint (for vim)
Resources Wiki pages jQuery Conf 2012 Best Practices: jQuery Web Dev Quirks Read more Introducing Grunt jQuery Plugins w/ Grunt & qUnit https://github.com/cowboy/grunt qUnit Intro

More Related Content

jQuery Conf 2012

  • 2. Review Selector performance ID Tag name Name, Class Use CSS classes to control state Specificity helps Ex: $(div.ui-content); instead of $(.ui-content)
  • 3. Performance Visibility: Business: Install Firebug & Yslow Performance is important for Know what is slowing down the product your page loads Performance can be expensive Optimize intelligently - weigh the LOE and the utility gained Interactivity: Performance is most important Profile your $.ready to sites that get millions of hits Minimize initialization on page load Tips: Low hanging fruit first Responsiveness: Google Analytics to record data throttle/debounce events about your loads 8-bit PNG's with alpha
  • 4. Contextual jQuery Handle initial state with CSS Write reusable code Delegate event handling Anticipate user actions Scrolling Focus/blur Typing .one()
  • 5. Unit Testing qUnit qUnit qUnit And qUnit
  • 6. Grunt Build tool for JS Included tasks Creates scaffolding Lint (JSHint) Unit testing (qUnit) Concat/Minify (UglifyJS)
  • 7. PhantomJS Headless WebKit Like the horseman? Why is this cool? Grunt + PhantomJS + qUnit = ?
  • 9. Recap of Steps brew install node brew install phantomjs npm install -g grunt grunt -help (Optional) grunt init (Optional) grunt init:jquery grunt qunit
  • 10. Tools YSlow, PageSpeed JavaScript Errors Notifier Chrome Extension iWebInspector JSHint (for vim)
  • 11. Resources Wiki pages jQuery Conf 2012 Best Practices: jQuery Web Dev Quirks Read more Introducing Grunt jQuery Plugins w/ Grunt & qUnit https://github.com/cowboy/grunt qUnit Intro

Editor's Notes

  • #2: Explain the format, # of attendees, the general vibeBreakout sessions
  • #3: Explain why the selector performance orderExplain why the specificity helps
  • #4: If it takes you more than a day to implement 1 increase in performance, it is probably not worthwhile. Gauge the effort with the importanceYslow - Initialization after page loadProfilingThrottle/debounce
  • #5: Initial state with CSS goes against jQuery Mobile, that may mean a change for UIE.Delegating event handling - CPU saved on initial binding: 1 container vs multiple child elementsExamples: - Scrolling FB Like/audio/images - Focus/blur form validation/autocomplete - Typing load next pages in a multi-step process
  • #6: It seems that the jQuery community has chosen a unit testing framework unanimously.A unit testing framework is only a unit testing framework.qUnit has thrived because of Grunt & PhantomJS
  • #7: This was created by Ben Alman of Bocoup.He created this to solve many problems, but the biggest problem he solved was eliminating the configuration/setup phase of a project to use Linting, unit testing, and Concat/Minify.
  • #8: PhantomJS is cool because it runs like a phantom.Typical qUnit opens an actual browser, this runs on the command line.
  • #11: JSHint has plugins for other editors as well.
  • #12: 際際滷s and notes from the conferencecan be found in the wikiBest PracticesWeb dev quirks this may or may not be useful to you