WEB STORAGE PERFORMANCE AT A CLIENT              LEVEL
   Un aspect important ce tine de aplicatiile web este    spatiul cel il ocupa aplicatiile web si cum este    gestionat a...
METODE DE A IMBUNATATI PERFORMANTA                   SITULUI VOSTRU   Cunoasterea componentelor din propria noastra    pa...
SALVAREA IMAGINILOR IN FORMATUL NECESAR   Exista 3 mari formate existente pe    piata pentru web: JPEG si PNG    folosite...
   Avantaje si dezavantaje in folosirea diferitelor formate:     GIF: ofera un maxim de 256 de culori si inca este      ...
   Case study JPEG vs PNG vs GIF:      O imagine de 960x720 ocupa 1.38 MB informat PNG vs 566 KB in format JPEG(salvatfol...
MINIMIZARE DE FISIERE CSS SI JAVASCRIPT             PENTRU A SALVA SPATIU   Minimizarea este un proces ce consta in    in...
HTML 5 WEB STORAGE Ce reprezinta?  Reprezinta un API introdus de html 5 pentru a stoca  perechi de date cheie/valoare.Ava...
TIPURI DE STOCARE HTML5       1.Web Storage: Reprezinta un sigur obiect persistent numit  localstorage caruia ii pot fi a...
2.Web Sql Database   Este un tip de baze de date structurata cu toata    functionalitatea si complexitatea unei baze de d...
3.Indexed Database   Un API ce doreste a combina avantajele celor    mentionate mai sus fara a avea dezavantajele lor.   ...
4.FileSystem   Formatele anteriore sunt foarte bune pentru text sau    date structurate, dar cand vine vorba de continut ...
COMBINAREA DE FISIERE CSS SI JAVASCRIPT   PENTRU A REDUCE CERERILE HTTP   Pentru fiecare componenta necesara pentru a    ...
FOLOSIREA DE CSS SPRITE PENTRU A         REDUCE CERERILE HTTP Un “CSS Sprite” este o combinatie de imagini mai  mici intr...
   Toate aceste noi modalitati de a stoca informatia la    nivel de client aduce sau va aduce pe viitor in functie    de ...
CSS3 CSS 3 aduce multe lucruri si efecte noi ce inainte  puteau fi facute doar folosind Flash, Javascript sau  alte libra...
Sunt multe optiuni care reduc sau elimina  necesitatea de a ne baza pe librarii externe (flash sau  silverlight), si impli...
EXAMPLE   Fara optimizare:     Cu Optimizare
FOLOSIREA DE COMPRESIE LA NIVEL DE SERVER   Comprimarea de componente este similara cu    arhivarea unui fisier/fisiere f...
EVITAREA DE CSS SI JAVASCRIPT INLINE   Fisierele CSS si javascrip sunt stocate de catre    browser dupa ce sunt descarcat...
   Un alt avantaj consta in faptul ca fisierul referentiat    poate fi inclus in mai multe fisiere de tip html, si nu    ...
DISTRIBUIREA RESURSELOR DE PE SITE     Ideea de baza este aceea de a imparti sarcina    pentru a incarca anumite elemente ...
And Many More …
OPTIMIZARI         Deoarece HTML sta la baza fiecarei aplicatii    web, de-a lungul anilor s-au descoperit majoritatea    ...
OPTIMIZARE JAVASCRIPT   1.Punerea de JavaScript la sfarsitul paginii,    deoarece Engine-ul HTML de rendare va rula    in...
   3.Gruparea logica a scripturilor in asa fel incat vor fi    incarcate in paginile care au nevoie de ele. Evitarea    d...
OPTIMIZARE CSS CSS ar trebuie sa fie extern fisierului pentru a  beneficia de “caching” Referintele CSS ar trebui sa fie...
OPTIMIZARII   Sunt disponibile pe piata mai multe unelte pentru    AJAX: -“Razor Profiler” -”Y Slow!” plug-in pentru Fi...
FIREBUG Puteti       edita, debug, si monotoriza CSS, HTML, si JavaScript in timp ce vizualizati pagina
YAHOO! SLOW Yahoo! Slow are rolul de a analiza pagini web si a  sugera cateva inbunatatiri bazate pe un set de  reguli bi...
   Acesta ofera sugestii pentru imbunatatirea paginii    web, unelte pentru analiza performantei cum ar fi    Smuch.it sa...
Va multumim !
Web Storage Performance
Web Storage Performance
Upcoming SlideShare
Loading in...5
×

Web Storage Performance

534

Published on

Client storage performance optimization .

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

  • Be the first to like this

No Downloads
Views
Total Views
534
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web Storage Performance

  1. 1. WEB STORAGE PERFORMANCE AT A CLIENT LEVEL
  2. 2.  Un aspect important ce tine de aplicatiile web este spatiul cel il ocupa aplicatiile web si cum este gestionat acesta la nivel de client. Se pot aplica multe tehnici de imbunatatire a aplicatiilor, o parte dintre ele vor fi prezentate in blogul: http://web-storage-perf.blogspot.com/, dar cu siguranta mai sunt multe altele. Felul in care stocam informatiile, sau cum sunt acestea comprimate, pot avea un mare efect asupra performantei la nivel de client.
  3. 3. METODE DE A IMBUNATATI PERFORMANTA SITULUI VOSTRU Cunoasterea componentelor din propria noastra pagina cat mai bine Este benefic in a crea “profile” pentru site ca sa gasim componente care sunt nefolosite, care pot fi optimizate, sau sterse ulterior Sunt pe piata numeroase unelte care ne pot ajuta in a optimiza fiecare componenta in parte
  4. 4. SALVAREA IMAGINILOR IN FORMATUL NECESAR Exista 3 mari formate existente pe piata pentru web: JPEG si PNG folosite pentru imagini statice, iar GIF folosite pentru imagini statice sau dinamice, care spre exemplu contin o animatie. Putem folosi pngcrush pentru a optimiza PNG de pe pagina web Desemenea putem folosi Jpegcrop pentru a optimiza JPEG-urile in mod similar.
  5. 5.  Avantaje si dezavantaje in folosirea diferitelor formate:  GIF: ofera un maxim de 256 de culori si inca este folosit pentru animatii simple in componenta paginilor web.  JPEG: este cel mai folosit doarece are posibilitatea de a arata fotografii cu continut de milioane de culori, la o marime a fisierului destul de mica.  PNG: desi e mai mare ca marime de fisier, este o alegere buna daca nu doresti sa pierzi calitatea din fotografii.
  6. 6.  Case study JPEG vs PNG vs GIF: O imagine de 960x720 ocupa 1.38 MB informat PNG vs 566 KB in format JPEG(salvatfolosind Photoshop la calitate maxima) si 499 kb(totcalitate maxima) folosind GIF.
  7. 7. MINIMIZARE DE FISIERE CSS SI JAVASCRIPT PENTRU A SALVA SPATIU Minimizarea este un proces ce consta in indepartarea de caractere care nu sunt necesare (cum ar fi tab-uri, spatii, comentarii de cod) din codul sursa pentru a reduce dimensiunea fisierului. Sunt o multitudine de unelte disponibile pe piata atat pentru CSS: CSS Optimizer, CSS Drive Gallery- CSS Compressor, Online CSS Optimizer, Formatting cat si pentru JavaScript: JSMIN, YUI Compressor si JavaScript Code Improver
  8. 8. HTML 5 WEB STORAGE Ce reprezinta? Reprezinta un API introdus de html 5 pentru a stoca perechi de date cheie/valoare.Avantaje fata de cookies: Este usor de folosit de dezvoltatori si are un spatiu mai mare de stocare (5 MB) fata de 4 KB pt un cookie. Insemnand ca putem stoca si alte tipuri de continut pe disk cum ar fi : setari preferate ale userului, imagini cat si alte fisiere . Poate fi accesat folosind Javascript.
  9. 9. TIPURI DE STOCARE HTML5 1.Web Storage: Reprezinta un sigur obiect persistent numit localstorage caruia ii pot fi atribuite valori ce poate fi apoi folosit si dupa ce browserul a fost inchis. Mai exista un obiect numit sesion storage cu acelasi proprietati dar care isi pierde valorile atunci cand este inchisa fereastra.
  10. 10. 2.Web Sql Database Este un tip de baze de date structurata cu toata functionalitatea si complexitatea unei baze de date de tip Sql. Are perechi de tip cheie/valoare la fel ca web storage dar in acelasi timp capacitatea de a indexa in asa fel incat cautarea se face mult mai repede. Deprecated. Nu va fi suportat de IE sau Firefox si probabil va disparea pe viitor
  11. 11. 3.Indexed Database Un API ce doreste a combina avantajele celor mentionate mai sus fara a avea dezavantajele lor. Reprezinta o coletie de “magazine de obiect” in care putem depozita cate un obiect. Seamana cu tabelele de tip SQL, dar in acest caz nu sunt constrangeri legate de structura obiectului nefiind nevoie sa definim ceva de dinainte. Deci este similar cu Web Storage dar cu avantajul ca poti avea oricat de multe baze de date dorim si oricat de multe “magazine” cu fiecare baza de date. Este un API de tip asincron spre deosebire de Web Storage si se pot indexa magazinele pentru a imbunatati viteza de cautare.
  12. 12. 4.FileSystem Formatele anteriore sunt foarte bune pentru text sau date structurate, dar cand vine vorba de continut binar sau fisiere de dimensiuni mari avem nevoie de altceva. Putem folosi FileSystem API. Acorda fiecarui domeniu o ierarhie in sistemul de fisiere. Pentru actiunile de scriere/citire de fisiere individuale, API-ul este contruit pe FILE API existent deja.
  13. 13. COMBINAREA DE FISIERE CSS SI JAVASCRIPT PENTRU A REDUCE CERERILE HTTP Pentru fiecare componenta necesara pentru a reda o pagina web, o cerere HTTP este facuta catre server Prin combinarea de fisiere putem reduce cererile HTTP
  14. 14. FOLOSIREA DE CSS SPRITE PENTRU A REDUCE CERERILE HTTP Un “CSS Sprite” este o combinatie de imagini mai mici intr-una mai mare. Pentru a reduce cererile la server, Digg combina mai multe imagini mici intr-una mai mare si apoi foloseste CSS pentru a la pozitiona in mod potrivit. Pentru a face acest lucru se poate folosi CSS Sprite Generator
  15. 15.  Toate aceste noi modalitati de a stoca informatia la nivel de client aduce sau va aduce pe viitor in functie de cat de repede este adoptat html 5, un spor de performanta major pe mai multe nivele si va schimba modul cum sunt gestionate multe resurse in prezent
  16. 16. CSS3 CSS 3 aduce multe lucruri si efecte noi ce inainte puteau fi facute doar folosind Flash, Javascript sau alte librarii. Acest lucru acorda si o mare flexibilitate in design, nemaifiind nevoie sa inlocuim imaginea toata, ci doar sa scriem codul pentru efectul dorit. Toate acestea duc la o reducere a resurselor ce trebuie stocate la nivel de client.
  17. 17. Sunt multe optiuni care reduc sau elimina necesitatea de a ne baza pe librarii externe (flash sau silverlight), si implicit se reduce nevoia de a stoca imagini complexe, sau de a instala plug-inuri externe. Cateva dintre aceste optiuni sunt : Drop-shadow Transform, Transition Hover Border-radius Transformari 3d Gradient Multe altele…
  18. 18. EXAMPLE Fara optimizare: Cu Optimizare
  19. 19. FOLOSIREA DE COMPRESIE LA NIVEL DE SERVER Comprimarea de componente este similara cu arhivarea unui fisier/fisiere folosind zip sau rar pentru a le trimite prin email Metode populare de compresie sunt Deflate si gzip. Gzip este cea mai populara si cea mai eficienta metoda de comprimare la momentul actual. A fost dezvoltat de proiectul GNU si standardizat RFC 1952.
  20. 20. EVITAREA DE CSS SI JAVASCRIPT INLINE Fisierele CSS si javascrip sunt stocate de catre browser dupa ce sunt descarcate pentru o utilizare ulterioara Daca dezvoltatorul foloseste mult CSS si JavaScript in documentele lor HTML atunci clientul nu va putea beneficia de functionalitatea browserului de a stoca aceste fisiere
  21. 21.  Un alt avantaj consta in faptul ca fisierul referentiat poate fi inclus in mai multe fisiere de tip html, si nu o sa mai fie acelasi cod scris de doua sau mai multe ori in diferite pagini html.
  22. 22. DISTRIBUIREA RESURSELOR DE PE SITE Ideea de baza este aceea de a imparti sarcina pentru a incarca anumite elemente cu un alt site. Cateva site-uri pentru stocare de componente web sunt: 1.FeedBurner pentru Feeduri RSS 2.Flickr, photobucket pentru Imagini 3.Google AJAX Librarie API pentru JavaScript
  23. 23. And Many More …
  24. 24. OPTIMIZARI Deoarece HTML sta la baza fiecarei aplicatii web, de-a lungul anilor s-au descoperit majoritatea problemelor si bug-urilor: -stergerea de spatii -folosirea de DTD stricte pentru a maximiza timpul de randare -omitererea de tag-uri redundante -minimizarea de headere, metadata si atribute ALT
  25. 25. OPTIMIZARE JAVASCRIPT 1.Punerea de JavaScript la sfarsitul paginii, deoarece Engine-ul HTML de rendare va rula inainte la masina virtuala Javascript 2.Codul JavaScript trebuie sa fie extern, deoarece este descarcat pentru prima data si apoi este stocat de browser pentru o utilizare ulterioara.
  26. 26.  3.Gruparea logica a scripturilor in asa fel incat vor fi incarcate in paginile care au nevoie de ele. Evitarea de a incarca fisiere JavaScript acolo unde doar cateva fisiere sunt necesare. 4.Codul sa fie cat mai compact ca sa duca la o scadere in dimensiune a fisierului descarcat.
  27. 27. OPTIMIZARE CSS CSS ar trebuie sa fie extern fisierului pentru a beneficia de “caching” Referintele CSS ar trebui sa fie puse in varful paginii deoarece engine-ul de randare HTML, care interpreteaza CSS este primul chemat Incercati in a evita referintele CSS duplicate Dimensiune Fisierelor CSS
  28. 28. OPTIMIZARII Sunt disponibile pe piata mai multe unelte pentru AJAX: -“Razor Profiler” -”Y Slow!” plug-in pentru Firefox - XHR din Firebug
  29. 29. FIREBUG Puteti edita, debug, si monotoriza CSS, HTML, si JavaScript in timp ce vizualizati pagina
  30. 30. YAHOO! SLOW Yahoo! Slow are rolul de a analiza pagini web si a sugera cateva inbunatatiri bazate pe un set de reguli bine definite Addon la Firebug pentru Firefox
  31. 31.  Acesta ofera sugestii pentru imbunatatirea paginii web, unelte pentru analiza performantei cum ar fi Smuch.it sau JSLint, ofera o lista cu componentele paginii, ne arata statistici legate de pagina.
  32. 32. Va multumim !
  1. A particular slide catching your eye?

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

×