SlideShare ist ein Scribd-Unternehmen logo
1 von 22
Downloaden Sie, um offline zu lesen
Perfomance  Optimization	
Sencha Touch
Speaker:  Giuseppe  Toto
Sviluppare  App  
Html5  non  è  
come  sviluppare  
per  il  Web
DOM:  Document  Object  Model
Perfomance  
Optimization  
Manipolare  il  DOM	
(con  prudenza)
TEST:  hHp://jsfiddle.net/VWkS2/2/  	
Manipolare  il  DOM
Dimensione  del  DOM	
hHp://www.sencha.com/blog/sencha-­‐‑touch-­‐‑optimizing-­‐‑memory-­‐‑usage/  
“Il  numero  degli  elementi  presenti  in  
una  pagina  ha  un  grande  effeHo  sulla  
quantità  di  memoria  utilizzata  
dall’applicazione.”	
Dimensione  del  DOM
La  dimensione  del  DOM	
hHp://www.sencha.com/blog/sencha-­‐‑
touch-­‐‑optimizing-­‐‑memory-­‐‑usage/	
	
Abbiamo  un  gran  vantaggio  nei  
dispositivi  mobile:	
•  Le  applicazioni  mostrano  solo  un  
soHo  insieme  delle  loro  interfacce.
DELEGARE  GLI  EVENTI
DELEGARE  GLI  EVENTI
DELEGARE  GLI  EVENTI
DELEGARE  GLI  EVENTI
WEB  WORKERS	
•  I  web  workers  sono  semplici  script  che    possono  essere  eseguiti  in  thread  
separati.	
•  Un  grande  vantaggio  e  che  la  loro  esecuzione  non  blocca  l’interfaccia.	
	
•  Compiti  di  grande  dimensione  possono  essere  suddivisi  in  soHoinsiemi  più  
piccoli  (strategia  DIVIDE  ET  IMPERA)  sfruHando  così  anche  le  future  cpu  
destinate  ad  avere  sempre  più  core.	
•  Essi  sono  quasi  indipendenti  dalla  pagina  che  li  ha  generati:	
•  Non  hanno  accesso  al  dom  e  non  può  comunicare  direHamente  con  esso	
•  La  comunicazione  tra  la  pagina  e  il  worker  avviene  in  maniera  asincrona  
tramite  funzioni  di  callback..	
hHp://www.w3schools.com/html/html5_webworkers.asp  
ESEMPIO	
•  UNA  FUNZIONE  CHE  CALCOLA  I  NUMERI  
PRIMI  FINO  A  150.000  	
•  hHp://localhost:10088/worker/  
•  hHp://www.sencha.com/blog/the-­‐‑making-­‐‑of-­‐‑fastbook-­‐‑an-­‐‑html5-­‐‑love-­‐‑story  	
•  hHp://www.senchatouchbits.com/10/performance-­‐‑optimization.html  	
•  hHp://www.html5today.it/tutorial/guida-­‐‑tutorial-­‐‑completo-­‐‑sullutilizzo-­‐‑
web-­‐‑workers  	
	
•  hHp://stackoverflow.com/questions/14826954/using-­‐‑web-­‐‑workers-­‐‑with-­‐‑
sencha-­‐‑touch-­‐‑2	
•  hHp://blog.korynunn.com/javascript/the-­‐‑dom-­‐‑isnt-­‐‑slow-­‐‑you-­‐‑are/	
•  hHp://www.theregister.co.uk/2012/09/14/
facebook_html_5_vs_native_apps/  	
Spunti  e  
riferimenti:

Weitere ähnliche Inhalte

Ähnlich wie Club degli sviluppatori : performance optimization - 2° Parte

follow-ap DAY 4: HTML5 e jQuery
follow-ap DAY 4: HTML5 e jQueryfollow-ap DAY 4: HTML5 e jQuery
follow-ap DAY 4: HTML5 e jQueryQIRIS
 
... thinking about Microformats!
... thinking about Microformats!... thinking about Microformats!
... thinking about Microformats!Stefano Fago
 
Smau milano 2012 arena social media massimo-grava
Smau milano 2012   arena social media massimo-gravaSmau milano 2012   arena social media massimo-grava
Smau milano 2012 arena social media massimo-gravaSMAU
 
Define & design apps for success
Define & design apps for successDefine & design apps for success
Define & design apps for successAcrmnet s.r.l.
 
Come realizzare siti mobile - Buginar 29 Maggio 2011
Come realizzare siti mobile - Buginar 29 Maggio 2011Come realizzare siti mobile - Buginar 29 Maggio 2011
Come realizzare siti mobile - Buginar 29 Maggio 2011Rocco Passaro
 
Smau milano 2012 arena social media davide-senatore
Smau milano 2012   arena social media davide-senatoreSmau milano 2012   arena social media davide-senatore
Smau milano 2012 arena social media davide-senatoreSMAU
 
II modulo – come gestire
II modulo – come gestireII modulo – come gestire
II modulo – come gestireBeesolution
 
Presentazione Frosmo in italiano Nov2015
Presentazione Frosmo in italiano Nov2015 Presentazione Frosmo in italiano Nov2015
Presentazione Frosmo in italiano Nov2015 Manuel Furlotti
 
Php.to.start indigenidigitali-11072011
Php.to.start indigenidigitali-11072011Php.to.start indigenidigitali-11072011
Php.to.start indigenidigitali-11072011allo75
 
FROSMO Presentazione in Italiano 2016
FROSMO Presentazione in Italiano 2016FROSMO Presentazione in Italiano 2016
FROSMO Presentazione in Italiano 2016Manuel Furlotti
 
Posizionamento nei Motori di ricerca e Social Network
Posizionamento nei Motori di ricerca e Social NetworkPosizionamento nei Motori di ricerca e Social Network
Posizionamento nei Motori di ricerca e Social NetworkEidos Srl
 
Progettare una Mobile Web App
Progettare una Mobile Web AppProgettare una Mobile Web App
Progettare una Mobile Web AppDML Srl
 
Developing appealing application using xaml
Developing appealing application using xamlDeveloping appealing application using xaml
Developing appealing application using xamlEmanuele Garofalo
 
Sviluppare una app mobile net oriented
Sviluppare una app mobile net orientedSviluppare una app mobile net oriented
Sviluppare una app mobile net orientedAlessandro Morvillo
 
UI Composition - Prism
UI Composition - PrismUI Composition - Prism
UI Composition - PrismDotNetMarche
 

Ähnlich wie Club degli sviluppatori : performance optimization - 2° Parte (20)

follow-ap DAY 4: HTML5 e jQuery
follow-ap DAY 4: HTML5 e jQueryfollow-ap DAY 4: HTML5 e jQuery
follow-ap DAY 4: HTML5 e jQuery
 
... thinking about Microformats!
... thinking about Microformats!... thinking about Microformats!
... thinking about Microformats!
 
Smau milano 2012 arena social media massimo-grava
Smau milano 2012   arena social media massimo-gravaSmau milano 2012   arena social media massimo-grava
Smau milano 2012 arena social media massimo-grava
 
Define & design apps for success
Define & design apps for successDefine & design apps for success
Define & design apps for success
 
Come realizzare siti mobile - Buginar 29 Maggio 2011
Come realizzare siti mobile - Buginar 29 Maggio 2011Come realizzare siti mobile - Buginar 29 Maggio 2011
Come realizzare siti mobile - Buginar 29 Maggio 2011
 
cv Armando Maglio
cv Armando Magliocv Armando Maglio
cv Armando Maglio
 
Smau milano 2012 arena social media davide-senatore
Smau milano 2012   arena social media davide-senatoreSmau milano 2012   arena social media davide-senatore
Smau milano 2012 arena social media davide-senatore
 
II modulo – come gestire
II modulo – come gestireII modulo – come gestire
II modulo – come gestire
 
Debugging with-z-ray
Debugging with-z-rayDebugging with-z-ray
Debugging with-z-ray
 
Presentazione Frosmo in italiano Nov2015
Presentazione Frosmo in italiano Nov2015 Presentazione Frosmo in italiano Nov2015
Presentazione Frosmo in italiano Nov2015
 
Php.to.start indigenidigitali-11072011
Php.to.start indigenidigitali-11072011Php.to.start indigenidigitali-11072011
Php.to.start indigenidigitali-11072011
 
Android Workshop
Android WorkshopAndroid Workshop
Android Workshop
 
FROSMO Presentazione in Italiano 2016
FROSMO Presentazione in Italiano 2016FROSMO Presentazione in Italiano 2016
FROSMO Presentazione in Italiano 2016
 
Posizionamento nei Motori di ricerca e Social Network
Posizionamento nei Motori di ricerca e Social NetworkPosizionamento nei Motori di ricerca e Social Network
Posizionamento nei Motori di ricerca e Social Network
 
Rich Internet Application
Rich Internet ApplicationRich Internet Application
Rich Internet Application
 
Progettare una Mobile Web App
Progettare una Mobile Web AppProgettare una Mobile Web App
Progettare una Mobile Web App
 
Developing appealing application using xaml
Developing appealing application using xamlDeveloping appealing application using xaml
Developing appealing application using xaml
 
Sviluppare una app mobile net oriented
Sviluppare una app mobile net orientedSviluppare una app mobile net oriented
Sviluppare una app mobile net oriented
 
UI Composition - Prism
UI Composition - PrismUI Composition - Prism
UI Composition - Prism
 
MonoTouch, un anno dopo
MonoTouch, un anno dopoMonoTouch, un anno dopo
MonoTouch, un anno dopo
 

Club degli sviluppatori : performance optimization - 2° Parte