Web Storage Performance
Upcoming SlideShare
Loading in...5
×
 

Web Storage Performance

on

  • 690 views

Client storage performance optimization .

Client storage performance optimization .

Statistics

Views

Total Views
690
Views on SlideShare
690
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Web Storage Performance Web Storage Performance Presentation Transcript

  • 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 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.
  • 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
  • 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.
  •  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.
  •  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.
  • 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
  • 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.
  • 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.
  • 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
  • 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.
  • 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.
  • 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
  • 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
  •  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
  • 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.
  • 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…
  • EXAMPLE Fara optimizare: Cu Optimizare
  • 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.
  • 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
  •  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.
  • 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
  • And Many More …
  • 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
  • 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.
  •  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.
  • 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
  • OPTIMIZARII Sunt disponibile pe piata mai multe unelte pentru AJAX: -“Razor Profiler” -”Y Slow!” plug-in pentru Firefox - XHR din Firebug
  • 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 bine definite Addon la Firebug pentru Firefox
  •  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.
  • Va multumim !