Review• Selector performance – ID – Tag name – Name, Class• Use CSS classes to control state• Specificity helps – Ex: $(‘div.ui-content’); instead of $(‘.ui-content’)
PerformanceVisibility: 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 gainedInteractivity: – Performance is most important – Profile your $.ready to sites that get millions of hits – Minimize initialization on page load Tips: – Low hanging fruit firstResponsiveness: – Google Analytics to record data – throttle/debounce events about your loads – 8-bit PNGs 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 = ?