jQuery+Drupal Optimizations
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

jQuery+Drupal Optimizations

on

  • 1,874 views

jQuery is a great tool to add interactivity to your sites. However, if you're not careful, you can add a lot of processing weight to your pages and ruin your user's experience. This slide outlines ...

jQuery is a great tool to add interactivity to your sites. However, if you're not careful, you can add a lot of processing weight to your pages and ruin your user's experience. This slide outlines some important tips to keep in mind while building your Drupal site's front-end scripts.

Statistics

Views

Total Views
1,874
Views on SlideShare
1,873
Embed Views
1

Actions

Likes
2
Downloads
20
Comments
0

1 Embed 1

http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

jQuery+Drupal Optimizations Presentation Transcript

  • 1. jQuery+Drupal Optimization ::the hit list::
  • 2. jQuery+Drupal Optimization ::the hit list:: Selectors Caching DOM Manipulation Deferring scripts Event Delegation
  • 3. Lesson 1: Selectors Always use #id selectors they are indexed in the DOM
  • 4. Lesson 1: Selectors Always use #id selectors they are indexed in the DOM Never just use .class selector document.getElementsByClassName; but IE traverses the entire DOM
  • 5. Lesson 1: Selectors Always use #id selectors they are indexed in the DOM Never just use .class selector document.getElementsByClassName; but IE traverses the entire DOM Use element.class selector this narrows the traversing
  • 6. Lesson 1: Selectors Use nearest #parent_id as your context $(‘div.find-me’,’#in_here’).bind(‘click....
  • 7. Lesson 1: Selectors Use nearest #parent_id as your context $(‘div.find-me’,’#in_here’).bind(‘click.... Avoid complicated selectors internally they produce redundant for in... loops
  • 8. Lesson 1: Case Study Views override view.tpl.php <div id=” <?php print($name .'-'. $display_id); ?> “ >
  • 9. Lesson 2: Caching Never use the same selector twice, cache object in variable var myElem = $(‘#id’); myElem.appendTo(‘body... myElem.css({opacity..... myElem.addClass(‘fade...
  • 10. Lesson 2: Caching Never use the same selector twice, cache object in variable var myElem = $(‘#id’); myElem.appendTo(‘body... myElem.css({opacity..... myElem.addClass(‘fade... Leverage chaining myElem .appendTo(‘body’) .css({opacity:0}) .addClass(‘fade’);
  • 11. Lesson 2: Caching global scope cached objects (as needed) window.$$ = {property:value} function foo(){ alert($$.property); }
  • 12. Lesson 2: Caching global scope cached objects (as needed) window.$$ = {property:value} function foo(){ alert($$.property); } ...or use Drupal object Drupal.yourGlobal = { var1:‘value1’, var2:‘value2’, ..... }
  • 13. Lesson 3:Dom Manipulation Avoid manipulating the DOM directly create objects in memoryu var myElem = $(‘<div>’).addClass(‘stuff’);
  • 14. Lesson 3:Case Study Onsen 2.0 Carousel Titles[quiz] var $titleElement = $('<div>').attr('id','carousel-titles'); $('#shop_now-page_1').append($titleElement); var $titleStack = $('#carousel-titles'); for(var i = 0; i<titles.length; i++) { elements = $('<div>').attr('class', titles[i][0]); $titleStack.append(elements); $('.' + titles[i][0], $titleStack) .append($('<span>') .addClass('short-title') .text(titles[i][1])); $('.' + titles[i][0], $titleStack) .append($('<span>') .addClass('main-title') .text(' ' + titles[i][2])); $('.' + titles[i][0], $titleStack) .append($('<span>') .addClass('tagline') .text(' ' + titles[i][3])); }
  • 15. Lesson 3:Case Study Onsen 2.0 Carousel Titles [bad] var $titleElement = $('<div>').attr('id','carousel-titles'); $('#shop_now-page_1').append($titleElement); var $titleStack = $('#carousel-titles'); for(var i = 0; i<titles.length; i++) { elements = $('<div>').attr('class', titles[i][0]); $titleStack.append(elements); $('.' + titles[i][0], $titleStack) .append($('<span>') .addClass('short-title') .text(titles[i][1])); $('.' + titles[i][0], $titleStack) .append($('<span>') .addClass('main-title') .text(' ' + titles[i][2])); $('.' + titles[i][0], $titleStack) .append($('<span>') .addClass('tagline') .text(' ' + titles[i][3])); }
  • 16. Lesson 3:Case Study Onsen 2.0 Carousel Titles [good] var $titleElement = $('<div>').attr('id','carousel-titles'); for(var i = 0; i<titles.length; i++) { elements = $('<div>').attr('class', titles[i][0]) .append($('<span>') .addClass('short-title') .text(titles[i][1])) .append($('<span>') .addClass('main-title') .text(' ' + titles[i][2])) .append($('<span>') .addClass('tagline') .text(' ' + titles[i][3])); elements.appendTo($titleElement); } $('#shop_now-page_1').append($titleElement);
  • 17. Lesson 4:Deferring scripts Load scripts before closing <body> tag for scripts that don’t run on page load drupal_add_js(‘path/to/script.js’, $defer=true) *improves download speeds*
  • 18. Lesson 4:Deferring scripts Load scripts before closing <body> tag for scripts that don’t run on page load drupal_add_js(‘path/to/script.js’, $defer=true) *improves download speeds* Execute scripts on $(window.)load() instead of $(document).ready() for UI controls,AJAX/AHAH logic, most event handlers
  • 19. Lesson 4:Deferring scripts Load scripts as needed in your theme functions or templates opposed to loading them via your theme’s .info file use drupal_add_js()
  • 20. Lesson 4:Deferring scripts Load scripts as needed in your theme functions or templates opposed to loading them via your theme’s .info file use drupal_add_js() ...or use $.getScript() to load scripts $.getScript(‘path/to/script.js’,callback) *using callback is vital!* *Doesn’t work in IE? Issues with Safari 2?*
  • 21. Lesson 4:Case Study Theme Packets © load css and js in template or theme function each theme packet maintains it’s own js, css, and image assets -- keeping it separate from global assets.
  • 22. Lesson 4:Case Study Theme Packets © load css and js in template or theme function each theme packet maintains it’s own js, css, and image assets -- keeping it separate from global assets. Drupal 7 render($content); works like Form API $content[‘links’] = array( ‘#attach_js’ => ‘path/to/file.js’, ‘#attach_css’ => ‘path/to/file.css’, );
  • 23. Lesson 5:Event Delegation use Event.target instead of this Event handler bubbling occurs, Event.target points to REAL current element
  • 24. Lesson 5:Case Study Timer Module Add an event handler to date elements in calendar (explain how this works...)