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

Like this? Share it with your network

Share

jQuery+Drupal Optimizations

  • 1,906 views
Uploaded on

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,906
On Slideshare
1,905
From Embeds
1
Number of Embeds
1

Actions

Shares
Downloads
20
Comments
0
Likes
2

Embeds 1

http://www.slideshare.net 1

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. 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...)