AiNoTame

Dio è nella pioggia.
posts - 17, comments - 128, trackbacks - 0

Http performance in browsers (+Angular2)

Prendendo spunto da ultime attività lavorative, vorrei evidenziare (molti lo sapranno) come il numero di chiamate http parallele eseguite da un browser (browser != istanza di browser) verso lo stesso server (stesso dominio) sia in numero finito e ridotto, e che la cosa possa peggiorare la performance del vostro applicativo web [http://stackoverflow.com/questions/985431/max-parallel-http-connections-in-a-browser].

Partiamo cronologicamente al contrario:

1 - Angular2

Angular2 è la nuova versione del framework di google, scritta in typescript, ed "enormemente" modulare; basti pensare che:

  • ogni "view" può essere composta dalla definizione di “component" scritto in typescript (=> js), un css e un html ad esso collegato. Questi possono essere embeddati nel file typescript, ma personalmente preferisco tenerli separati.
  • angular promuove la modularizzazione, anche per questioni di performance dovute a shadow dom, change detecion stragegy.. (http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html)
  • l’accoppiata di dependency injection di ng2 e l’import di moduli esterni con ES2015 è una __FIGATA PAZZESCA__. Ed ora si scrive molto più C#-like (interfacce, classi, ereditarietà ... il tutto per il single responsibility principle).

Bene. Ottimo. Fantastico:

many_requests

Il problema è semplice (e di facile risoluzione). Ci sono troppi file da caricare (650+) e… ogni browser può effettuare un massimo di connessioni verso lo stesso dominio (chrome per esempio un massimo di 6).
Tutte le chiamate http vengono dispacciate da questo numero limitato di connessioni, il che rende lungo (9+ secondi) il caricamento dell’applicativo (insieme ovviamente all’elevato numero di handshake).

Soluzione semplice: BUILD (fatelo ‘sempre’ e, soprattutto, pensateci in tempo)

Ad oggi vi sono numerosi strumenti per effettuare la build di un’applicativo web javascript (grunt, gulp, broccoli, webpack…), personalmente mi sto affezionando a webpack, con il seguente risultato:

low_requests

Perfetto. Numero di richieste ridotte al minimo, quantità di dati ridotta, tempi di caricamento abbassati.

2 – Data recomposition

Un altro applicativo web a cui ho/sto lavorando, molto dinamico, permette ad ogni utente di comporre la sua UI in base alle proprie preferenze.
L’utente può decidere

  • quanti grafici aggiungere alla pagina
  • per ogni grafico, quante serie mostrare.

A complicare le cose, i grafici vengono aggiornati in realtime.
Per rendere il tutto il più modulare e indipendente possibile, abbiamo architetturato l’applicativo in modo da recuperare ogni serie con una chiamata http separata. Massima flessibilità ma… alcuni dati:

  • In media (a spanne) un utente apre 2-4 grafici per pagina
  • ogni grafico ha 6 -12 serie scelte dall’utente
  • un utente può aprire apre anche più tab con la stessa applicazione (anche 2 o 3 per pc) su diversi monitor (ok, il contesto è un pò particolare)

Risultato:

  • una connessione utilizzata da signalR (SSE) per tab aperto
  • Le chiamate http, anche se su server è stata implementata una cache abbastanza intelligente, possono richiedere tempo per essere evase. Il tempo di risposta occupa la connessione, non permettendo ad altre serie di essere recuperate velocemente da parte del browser.
  • E’ anche capitato (numero eccessivo di tab aperti) che un tab smettesse di recuperare dati da server finché l’utente non ne chiudesse un’altro.

Soluzione: dipende. Come sempre non c’è una verità. Ci stiamo spostando verso la definizione di “view model” che incapsulino più serie, in modo tale da raggruppare e quindi recuperare più serie in un unica chiamata http. Parrebbe inoltre che i websocket non utilizzi connessioni http (https://samsaffron.com/archive/2015/12/29/websockets-caution-required). Altre idee sono ben accette.

I sistemi software sono complicati, e la conoscenza è oro.

Print | posted on Tuesday, July 26, 2016 12:10 AM | Filed Under [ Javascript AngularJS Angular2 Performance ]

Feedback

Gravatar

# top erectile dysfunction doctors in tx

do erectile pills permanently increase size
ed drugs over the counter
erectile difficulty
erectile dysfunction medications
erectile improvement http://eddrugsgeneric.com/
6/8/2018 12:32 AM | erectile dysfunction
Gravatar

# men with erectile dysfunction

erectile exercises
buy erectile dysfunction medications online
erectile vitimans
ed drugs generic
erectile enhancer herbs http://eddrugsgeneric.com/
6/8/2018 1:43 AM | erection pills
Gravatar

# generic cialis 20mg tablets b.uyci.a.lison.lin.e

online us pharmacy cialis softcialis 20 mg controindicazionipastillas cialis y alcohofree cialis 20 mg couponviagra cheaper than cialiscialis pills onlineque es mas caro viagra o cialiscialis pictures resultscialis soft on line purchasecialis discussion boardsubaction showcomments cialis thanks online
buy name brand cialis on line Best buy canada online
cialis 100 mg 30 tablet Cialis generico
cialis without a doctor's prescription http://babecolate.com/
cheap soft cialis 30 tabletsgeneric cialis us pharmacycialis and viagra tgetheraugmentin cialisteveel cialisviagra cialis genericagoedkoopste cialis kopencialis bathtub pictureswhy didnt cialis workcialis 20 mg cut in halfeli lilly cialis investorsbuy cialis soft online canadacant get off with cialiscialis 20 mg espanabuying cialis in ukbijsluiter cialis once daycheap cialis australiageneric name for cialis1cialis levitra sales viagra
6/9/2018 2:22 AM | CoreyRox
Gravatar

# viagra on prescription uk b.uycia.l.is.onli.n.e

relative costs of viagra cialis levitrawhat cheaper viagra or cialiswhat is the cost of cialishomeopathic cialis ukefeitos colaterais viagra cialiscialis vs viagra high blood pressureviagra cialis soft cheapcialis ervaringen en waar te verkrijgencialis qu esno perscription cialis softg postmessage cialis subject forumco lepsze cialis viagrapurchase cialis on the webnitroglycerin cialis interactioncialis 20 mg bijwerkingengeneric prescription cialis soft withoutcialis soft 5mg cheapcialis softtab how worksverschil tussen cialis en viagraactive ingredients viagra cialis
enter site natural cialis Cialis from canada
cialis for sale Buy cialis online
generic cialis 20mg tablets http://babecolate.com/
cialis 5 mg instructionscialis new viagracialis generika online apothekeviagia cialisto get cialisdiscount generic cialiscialis lang gebruikcialis dosage informationprijs cialis 20 mgcan i take a cialis and viagrawhy bathtubes in cialis adscialis once a day costcialis kaufen niederlandecialis online kaufen erfahrungenequivalencia cialis viagraover the counter cialisbijwerking cialiscialis providercialis 5 mg online
6/9/2018 4:18 AM | CoreyRox
Gravatar

# cialis kaufen b.uyc.ial.i.s.o.nl.i.n.e

cialis soft madridbuying viagra cialis onlinewat kost cialis 10 mgcialis prezzo in linea bassose puede tomar cialis con diabetesfemale cialis soft useside effects viagra cialiscrush cialisconstruction automobile presse sp cialis ecialis is a generic1cheap cialis onlinecialis shelflifecialis vs tadalafil genericcialis pillen bestellen
the best site cialis tablets Cialis generic
200 cialis coupon Cialis tablets australia
walgreens price for cialis http://cialisb.com/
controindicazioni del cialis 5 mgwhat is shelf life of cialiscialis patent expiry canadamedications like viargra and cialisgeneric cialis 20x20order generic cialis online canadadiscount on cialisquanto costa cialis 5 mg in farmaciaworks better viagra or cialiscialis diario 5mg com 28 comprimidossubaction showcomments cialis thanks newestbest online pharmacy for generic cialisinformation on cialisvantagens do cialis sobre o viagracialis online bestellen schweiz
6/13/2018 8:20 PM | CoreyRox
Gravatar

# where can i buy viagra pills buy.ci.alisonl.in.e.

achat viagra cialis en lignecialis preis apotheke deutschlandviagra e cialis insiemeprijs cialis in apotheekexpired cialis still safeviagra contra cialiscialis in uk kaufencialis professional reviewscomparativa precios viagra cialislevitra cialis viagra vergelijkenfda generic cialisviagra kamagra cialis com vг©lemг©nycialis morgen in huis
wow cialis tadalafil 100mg Generic for cialis
cialis 5 mg scheda tecnica Cialis online
cialis generico online http://cialisda.com/
preco viagra cialisdifference de prix entre viagra et cialisgeneric cialis vs brand name cialis10mg cialis vs 50 mg viagraparody of cialiskann man cialis ohne rezept in der apotheke kaufenhet gebruik van cialiscialis generico in farmaciaefficacy of cialis vs viagracialis tableclinical data for large dosage cialisviagra and cialis dont work for mecialis baratos compran ukviagra cialis preturicialis 5 mg venezuelacialis viagra levitra
6/14/2018 10:07 PM | CoreyRox

Post Comment

Title  
Name  
Email
Url
Comment   
Please add 4 and 3 and type the answer here:

Powered by:
Powered By Subtext Powered By ASP.NET