jQuery+Drupal Optimizations
•Télécharger en tant que KEY, PDF•
2 j'aime•951 vues
The document provides lessons on jQuery and Drupal optimization techniques, including using ID selectors for faster lookups, caching selectors in variables to avoid repeated lookups, and manipulating the DOM by creating elements in memory before adding them to improve performance.
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
Similaire à jQuery+Drupal Optimizations
Similaire à jQuery+Drupal Optimizations (20)
Dernier
Dernier (20)
jQuery+Drupal Optimizations
- 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...)