0
jQuery+Drupal
 Optimization
  ::the hit list::
jQuery+Drupal
 Optimization
  ::the hit list::


       Selectors
        Caching
   DOM Manipulation
  Deferring scripts
...
Lesson 1: Selectors
Always use #id selectors
they are indexed in the DOM
Lesson 1: Selectors
Always use #id selectors
they are indexed in the DOM


Never just use .class selector
document.getElem...
Lesson 1: Selectors
Always use #id selectors
they are indexed in the DOM


Never just use .class selector
document.getElem...
Lesson 1: Selectors
Use nearest #parent_id as your context
$(‘div.find-me’,’#in_here’).bind(‘click....
Lesson 1: Selectors
Use nearest #parent_id as your context
$(‘div.find-me’,’#in_here’).bind(‘click....


Avoid complicated...
Lesson 1: Case Study
Views

override view.tpl.php
<div id=”
 <?php print($name .'-'. $display_id); ?>
 “ >
Lesson 2: Caching
Never use the same selector twice,
cache object in variable
var myElem = $(‘#id’);
myElem.appendTo(‘body...
Lesson 2: Caching
Never use the same selector twice,
cache object in variable
var myElem = $(‘#id’);
myElem.appendTo(‘body...
Lesson 2: Caching
global scope cached objects (as needed)
window.$$ = {property:value}
function foo(){
 alert($$.property)...
Lesson 2: Caching
global scope cached objects (as needed)
window.$$ = {property:value}
function foo(){
 alert($$.property)...
Lesson 3:Dom         Manipulation

Avoid manipulating the DOM directly
 create objects in memoryu
  var myElem = $(‘<div>’...
Lesson 3:Case    Study
Onsen 2.0 Carousel Titles[quiz]
var $titleElement = $('<div>').attr('id','carousel-titles');
	   $(...
Lesson 3:Case    Study
Onsen 2.0 Carousel Titles [bad]
var $titleElement = $('<div>').attr('id','carousel-titles');
	   $(...
Lesson 3:Case    Study
Onsen 2.0 Carousel Titles [good]
var $titleElement = $('<div>').attr('id','carousel-titles');
	 for...
Lesson 4:Deferring                scripts

 Load scripts before closing <body> tag
 for scripts that don’t run on page loa...
Lesson 4:Deferring                scripts

 Load scripts before closing <body> tag
 for scripts that don’t run on page loa...
Lesson 4:Deferring                scripts

 Load scripts as needed in your theme
 functions or templates
  opposed to load...
Lesson 4:Deferring                scripts

 Load scripts as needed in your theme
 functions or templates
  opposed to load...
Lesson 4:Case             Study
Theme   Packets ©


load css and js in template or theme
function
 each theme packet maint...
Lesson 4:Case             Study
Theme   Packets ©


load css and js in template or theme
function
 each theme packet maint...
Lesson 5:Event             Delegation

use Event.target instead of this
 Event handler bubbling occurs, Event.target
 poin...
Lesson 5:Case             Study
Timer Module
Add an event handler to date elements
in calendar
 (explain how this works...)
Upcoming SlideShare
Loading in...5
×

jQuery+Drupal Optimizations

1,264

Published 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 some important tips to keep in mind while building your Drupal site's front-end scripts.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,264
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
22
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Transcript of "jQuery+Drupal Optimizations"

    1. 1. jQuery+Drupal Optimization ::the hit list::
    2. 2. jQuery+Drupal Optimization ::the hit list:: Selectors Caching DOM Manipulation Deferring scripts Event Delegation
    3. 3. Lesson 1: Selectors Always use #id selectors they are indexed in the DOM
    4. 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. 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. 6. Lesson 1: Selectors Use nearest #parent_id as your context $(‘div.find-me’,’#in_here’).bind(‘click....
    7. 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. 8. Lesson 1: Case Study Views override view.tpl.php <div id=” <?php print($name .'-'. $display_id); ?> “ >
    9. 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. 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. 11. Lesson 2: Caching global scope cached objects (as needed) window.$$ = {property:value} function foo(){ alert($$.property); }
    12. 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. 13. Lesson 3:Dom Manipulation Avoid manipulating the DOM directly create objects in memoryu var myElem = $(‘<div>’).addClass(‘stuff’);
    14. 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. 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. 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. 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. 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. 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. 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. 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. 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. 23. Lesson 5:Event Delegation use Event.target instead of this Event handler bubbling occurs, Event.target points to REAL current element
    24. 24. Lesson 5:Case Study Timer Module Add an event handler to date elements in calendar (explain how this works...)
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×