SlideShare una empresa de Scribd logo
1 de 24
Descargar para leer sin conexión
jQuery+Drupal
 Optimization
  ::the hit list::
jQuery+Drupal
 Optimization
  ::the hit list::


       Selectors
        Caching
   DOM Manipulation
  Deferring scripts
   Event Delegation
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.getElementsByClassName; but IE
traverses the entire DOM
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
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 selectors
internally they produce redundant for in...
loops
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...
myElem.css({opacity.....
myElem.addClass(‘fade...
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’);
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);
 }
...or use Drupal object
Drupal.yourGlobal = {
 var1:‘value1’,
 var2:‘value2’,
 .....
 }
Lesson 3:Dom         Manipulation

Avoid manipulating the DOM directly
 create objects in memoryu
  var myElem = $(‘<div>’).addClass(‘stuff’);
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]));
  }
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]));
  }
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);
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*
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
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()
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?*
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.
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’,
  );
Lesson 5:Event             Delegation

use Event.target instead of this
 Event handler bubbling occurs, Event.target
 points to REAL current element
Lesson 5:Case             Study
Timer Module
Add an event handler to date elements
in calendar
 (explain how this works...)

Más contenido relacionado

La actualidad más candente

CodeIgniter Class Reference
CodeIgniter Class ReferenceCodeIgniter Class Reference
CodeIgniter Class ReferenceJamshid Hashimi
 
Your code sucks, let's fix it
Your code sucks, let's fix itYour code sucks, let's fix it
Your code sucks, let's fix itRafael Dohms
 
究極のコントローラを目指す
究極のコントローラを目指す究極のコントローラを目指す
究極のコントローラを目指すYasuo Harada
 
Symfony2 and Doctrine2 Integration
Symfony2 and Doctrine2 IntegrationSymfony2 and Doctrine2 Integration
Symfony2 and Doctrine2 IntegrationJonathan Wage
 
جلسه هفتم پایتون برای هکر های قانونی دوره مقدماتی پاییز ۹۲
جلسه هفتم پایتون برای هکر های قانونی دوره مقدماتی پاییز ۹۲جلسه هفتم پایتون برای هکر های قانونی دوره مقدماتی پاییز ۹۲
جلسه هفتم پایتون برای هکر های قانونی دوره مقدماتی پاییز ۹۲Mohammad Reza Kamalifard
 
The Art of Transduction
The Art of TransductionThe Art of Transduction
The Art of TransductionDavid Stockton
 
Be lazy, be ESI: HTTP caching and Symfony2 @ PHPDay 2011 05-13-2011
 Be lazy, be ESI: HTTP caching and Symfony2 @ PHPDay 2011 05-13-2011 Be lazy, be ESI: HTTP caching and Symfony2 @ PHPDay 2011 05-13-2011
Be lazy, be ESI: HTTP caching and Symfony2 @ PHPDay 2011 05-13-2011Alessandro Nadalin
 
Database API, your new friend
Database API, your new friendDatabase API, your new friend
Database API, your new friendkikoalonsob
 
Digital Mayflower - Data Pilgrimage with the Drupal Migrate Module
Digital Mayflower - Data Pilgrimage with the Drupal Migrate ModuleDigital Mayflower - Data Pilgrimage with the Drupal Migrate Module
Digital Mayflower - Data Pilgrimage with the Drupal Migrate ModuleErich Beyrent
 
MTDDC 2010.2.5 Tokyo - Brand new API
MTDDC 2010.2.5 Tokyo - Brand new APIMTDDC 2010.2.5 Tokyo - Brand new API
MTDDC 2010.2.5 Tokyo - Brand new APISix Apart KK
 
Building a Pluggable Plugin
Building a Pluggable PluginBuilding a Pluggable Plugin
Building a Pluggable PluginBrandon Dove
 
How else can you write the code in PHP?
How else can you write the code in PHP?How else can you write the code in PHP?
How else can you write the code in PHP?Maksym Hopei
 
Chap 3php array part 2
Chap 3php array part 2Chap 3php array part 2
Chap 3php array part 2monikadeshmane
 

La actualidad más candente (20)

Drupal 8 database api
Drupal 8 database apiDrupal 8 database api
Drupal 8 database api
 
Ch8(oop)
Ch8(oop)Ch8(oop)
Ch8(oop)
 
CodeIgniter Class Reference
CodeIgniter Class ReferenceCodeIgniter Class Reference
CodeIgniter Class Reference
 
Your code sucks, let's fix it
Your code sucks, let's fix itYour code sucks, let's fix it
Your code sucks, let's fix it
 
Separation of concerns - DPC12
Separation of concerns - DPC12Separation of concerns - DPC12
Separation of concerns - DPC12
 
BEAR DI
BEAR DIBEAR DI
BEAR DI
 
Perl object ?
Perl object ?Perl object ?
Perl object ?
 
究極のコントローラを目指す
究極のコントローラを目指す究極のコントローラを目指す
究極のコントローラを目指す
 
Symfony2 and Doctrine2 Integration
Symfony2 and Doctrine2 IntegrationSymfony2 and Doctrine2 Integration
Symfony2 and Doctrine2 Integration
 
جلسه هفتم پایتون برای هکر های قانونی دوره مقدماتی پاییز ۹۲
جلسه هفتم پایتون برای هکر های قانونی دوره مقدماتی پاییز ۹۲جلسه هفتم پایتون برای هکر های قانونی دوره مقدماتی پاییز ۹۲
جلسه هفتم پایتون برای هکر های قانونی دوره مقدماتی پاییز ۹۲
 
The Art of Transduction
The Art of TransductionThe Art of Transduction
The Art of Transduction
 
Be lazy, be ESI: HTTP caching and Symfony2 @ PHPDay 2011 05-13-2011
 Be lazy, be ESI: HTTP caching and Symfony2 @ PHPDay 2011 05-13-2011 Be lazy, be ESI: HTTP caching and Symfony2 @ PHPDay 2011 05-13-2011
Be lazy, be ESI: HTTP caching and Symfony2 @ PHPDay 2011 05-13-2011
 
Database API, your new friend
Database API, your new friendDatabase API, your new friend
Database API, your new friend
 
Theme API
Theme APITheme API
Theme API
 
Digital Mayflower - Data Pilgrimage with the Drupal Migrate Module
Digital Mayflower - Data Pilgrimage with the Drupal Migrate ModuleDigital Mayflower - Data Pilgrimage with the Drupal Migrate Module
Digital Mayflower - Data Pilgrimage with the Drupal Migrate Module
 
MTDDC 2010.2.5 Tokyo - Brand new API
MTDDC 2010.2.5 Tokyo - Brand new APIMTDDC 2010.2.5 Tokyo - Brand new API
MTDDC 2010.2.5 Tokyo - Brand new API
 
Building a Pluggable Plugin
Building a Pluggable PluginBuilding a Pluggable Plugin
Building a Pluggable Plugin
 
How else can you write the code in PHP?
How else can you write the code in PHP?How else can you write the code in PHP?
How else can you write the code in PHP?
 
Chap 3php array part 2
Chap 3php array part 2Chap 3php array part 2
Chap 3php array part 2
 
Codeware
CodewareCodeware
Codeware
 

Destacado

Articulación Plástica
Articulación PlásticaArticulación Plástica
Articulación Plásticammgr
 
Drupal Internationalization
Drupal InternationalizationDrupal Internationalization
Drupal InternationalizationHelior Colorado
 
La cultura d'Eivissa i Formentera a l'educació
La cultura d'Eivissa i Formentera a l'educacióLa cultura d'Eivissa i Formentera a l'educació
La cultura d'Eivissa i Formentera a l'educacióCati Torres Roig
 
Prokopets рецензия михай чиксентмихайи в поисках потока
Prokopets  рецензия михай чиксентмихайи в поисках потокаProkopets  рецензия михай чиксентмихайи в поисках потока
Prokopets рецензия михай чиксентмихайи в поисках потокаRussian State University of Humanities (RSUH)
 

Destacado (7)

Theming views
Theming viewsTheming views
Theming views
 
Articulación Plástica
Articulación PlásticaArticulación Plástica
Articulación Plástica
 
Drupal Internationalization
Drupal InternationalizationDrupal Internationalization
Drupal Internationalization
 
Field formatters
Field formattersField formatters
Field formatters
 
Field api
Field apiField api
Field api
 
La cultura d'Eivissa i Formentera a l'educació
La cultura d'Eivissa i Formentera a l'educacióLa cultura d'Eivissa i Formentera a l'educació
La cultura d'Eivissa i Formentera a l'educació
 
Prokopets рецензия михай чиксентмихайи в поисках потока
Prokopets  рецензия михай чиксентмихайи в поисках потокаProkopets  рецензия михай чиксентмихайи в поисках потока
Prokopets рецензия михай чиксентмихайи в поисках потока
 

Similar a jQuery+Drupal Optimizations

jQuery - Tips And Tricks
jQuery - Tips And TricksjQuery - Tips And Tricks
jQuery - Tips And TricksLester Lievens
 
Drupal 8: Entities
Drupal 8: EntitiesDrupal 8: Entities
Drupal 8: Entitiesdrubb
 
Nickolay Shmalenuk.Render api eng.DrupalCamp Kyiv 2011
Nickolay Shmalenuk.Render api eng.DrupalCamp Kyiv 2011Nickolay Shmalenuk.Render api eng.DrupalCamp Kyiv 2011
Nickolay Shmalenuk.Render api eng.DrupalCamp Kyiv 2011camp_drupal_ua
 
Ruby Development and MongoMapper (John Nunemaker)
Ruby Development and MongoMapper (John Nunemaker)Ruby Development and MongoMapper (John Nunemaker)
Ruby Development and MongoMapper (John Nunemaker)MongoSF
 
Object_Oriented_Programming_Unit3.pdf
Object_Oriented_Programming_Unit3.pdfObject_Oriented_Programming_Unit3.pdf
Object_Oriented_Programming_Unit3.pdfKoteswari Kasireddy
 
Python_Object_Oriented_Programming.pptx
Python_Object_Oriented_Programming.pptxPython_Object_Oriented_Programming.pptx
Python_Object_Oriented_Programming.pptxKoteswari Kasireddy
 
Practical Google App Engine Applications In Py
Practical Google App Engine Applications In PyPractical Google App Engine Applications In Py
Practical Google App Engine Applications In PyEric ShangKuan
 
Mongo and Harmony
Mongo and HarmonyMongo and Harmony
Mongo and HarmonySteve Smith
 
[WLDN] Supercharging word press development in 2018
[WLDN] Supercharging word press development in 2018[WLDN] Supercharging word press development in 2018
[WLDN] Supercharging word press development in 2018Adam Tomat
 
Extending WordPress. Making use of Custom Post Types
Extending WordPress. Making use of Custom Post TypesExtending WordPress. Making use of Custom Post Types
Extending WordPress. Making use of Custom Post TypesUtsav Singh Rathour
 
Building Potent WordPress Websites
Building Potent WordPress WebsitesBuilding Potent WordPress Websites
Building Potent WordPress WebsitesKyle Cearley
 
Drupal Javascript for developers
Drupal Javascript for developersDrupal Javascript for developers
Drupal Javascript for developersDream Production AG
 
Drupal 7 — Circle theme
Drupal 7 — Circle themeDrupal 7 — Circle theme
Drupal 7 — Circle themeKirill Borzov
 
HirshHorn theme: how I created it
HirshHorn theme: how I created itHirshHorn theme: how I created it
HirshHorn theme: how I created itPaul Bearne
 
Declarative Data Modeling in Python
Declarative Data Modeling in PythonDeclarative Data Modeling in Python
Declarative Data Modeling in PythonJoshua Forman
 

Similar a jQuery+Drupal Optimizations (20)

jQuery - Tips And Tricks
jQuery - Tips And TricksjQuery - Tips And Tricks
jQuery - Tips And Tricks
 
Drupal 8: Entities
Drupal 8: EntitiesDrupal 8: Entities
Drupal 8: Entities
 
DOM and Events
DOM and EventsDOM and Events
DOM and Events
 
Nickolay Shmalenuk.Render api eng.DrupalCamp Kyiv 2011
Nickolay Shmalenuk.Render api eng.DrupalCamp Kyiv 2011Nickolay Shmalenuk.Render api eng.DrupalCamp Kyiv 2011
Nickolay Shmalenuk.Render api eng.DrupalCamp Kyiv 2011
 
Ruby Development and MongoMapper (John Nunemaker)
Ruby Development and MongoMapper (John Nunemaker)Ruby Development and MongoMapper (John Nunemaker)
Ruby Development and MongoMapper (John Nunemaker)
 
Django design-patterns
Django design-patternsDjango design-patterns
Django design-patterns
 
Object_Oriented_Programming_Unit3.pdf
Object_Oriented_Programming_Unit3.pdfObject_Oriented_Programming_Unit3.pdf
Object_Oriented_Programming_Unit3.pdf
 
Python_Object_Oriented_Programming.pptx
Python_Object_Oriented_Programming.pptxPython_Object_Oriented_Programming.pptx
Python_Object_Oriented_Programming.pptx
 
Practical Google App Engine Applications In Py
Practical Google App Engine Applications In PyPractical Google App Engine Applications In Py
Practical Google App Engine Applications In Py
 
Ruby tricks2
Ruby tricks2Ruby tricks2
Ruby tricks2
 
Mongo and Harmony
Mongo and HarmonyMongo and Harmony
Mongo and Harmony
 
[WLDN] Supercharging word press development in 2018
[WLDN] Supercharging word press development in 2018[WLDN] Supercharging word press development in 2018
[WLDN] Supercharging word press development in 2018
 
Extending WordPress. Making use of Custom Post Types
Extending WordPress. Making use of Custom Post TypesExtending WordPress. Making use of Custom Post Types
Extending WordPress. Making use of Custom Post Types
 
Building Potent WordPress Websites
Building Potent WordPress WebsitesBuilding Potent WordPress Websites
Building Potent WordPress Websites
 
Drupal Javascript for developers
Drupal Javascript for developersDrupal Javascript for developers
Drupal Javascript for developers
 
Drupal 7 Queues
Drupal 7 QueuesDrupal 7 Queues
Drupal 7 Queues
 
Drupal 7 — Circle theme
Drupal 7 — Circle themeDrupal 7 — Circle theme
Drupal 7 — Circle theme
 
HirshHorn theme: how I created it
HirshHorn theme: how I created itHirshHorn theme: how I created it
HirshHorn theme: how I created it
 
Python oop third class
Python oop   third classPython oop   third class
Python oop third class
 
Declarative Data Modeling in Python
Declarative Data Modeling in PythonDeclarative Data Modeling in Python
Declarative Data Modeling in Python
 

Último

Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 

Último (20)

Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 

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