Randare Progresiste prin bufeuri mai multe
2010 actualizare:
Lo, Performanţă web Calendar Advent are translatat
21 decembrie Acest post este parte din 2009 calendarul de performanţă apariţia experiment. Stay tuned pentru articole să vină.
Percepţia timpului de încărcare a paginii este la fel de important ca timpul de încărcare reală. Şi atunci când vine vorba de percepţia de utilizare, indicaţie vizibilă de progres este întotdeauna bun. Utilizatorul primeste feedback-ul ca ceva se întâmplă (şi în direcţia dreapta) şi se simte mult mai bine.
Utilizarea bufeuri de mai multe de conţinut vă permite să îmbunătăţească atât performanţa reală şi percepută. Să vedem cum.
Culoare cap ()
În timp ce server-ul dvs. este ocupat coaserea HTML din diferite surse - servicii web, baze de date, etc - browser-ul (şi, prin urmare, ghidul), doar stă şi aşteaptă. De ce nu facem de lucru şi a începe descărcarea componentelor stim ca va fi absolut necesare, cum ar fi logo-ul, sprite, CSS, JavaScript... În timp ce serverul este ocupat, puteţi trimite o parte din HTML, de exemplu, întreaga <head> a documentului. Acolo puteţi pune trimiterile la componente externe, cum ar fi CSS, pe care apoi browser-ul poate cap-a începe descărcarea în timp ce aştepta răspunsul HTML ansamblu.
<html> <head> <title>the page</title> <link rel=".." href="my.css" /> <script src="my.js"></script> </head> flush(); <body> ...
Făcând ceva de genul asta va duce la cascade mai scurt, deoarece se poate întâmpla mai multe descărcări în paralel. În cascadă de mai jos pagina nu este încă finalizată la 0,4 secunde, dar browser-ul a solicitat deja mai multe componente.
Un pas mai departe - bufeuri multiple
În acelaşi timp având în browser-ul ocupat este bun şi încarcă întreaga pagina mai repede, am putea face mai bine? Cum despre permiţându ghidul vedea ceva în timp ce serverul este ocupat în continuare? Amintiţi-vă - arată ceva ", într-o clipi din ochi ". Şi cum despre a face de mai multe ori înroşirea feţei, făcând, prin urmare pagina este etape. Acest lucru va ajuta arăta versiuni utilizabile parţială a paginii fără a mai aştepta pe potenţial de lungă de încărcare a paginii sau asteapta niste JavaScripts blocarea să se încarce.
Iată un exemplu - rezultatele de căutare Google.
Parte din antet acea pagină (bucată # 1) nu are nevoie de nici o logică complicate. Adevărat, titlul paginii şi de pre-umplere caseta de intrare sunt piese dinamice, dar aceasta este doar un ecou simplă a introduse de utilizator, nimic din ceea ce necesită o muncă complexă. Asa ca merge antet. Observaţi că numărul de rezultate de căutare nu este vizibil încă. În acest segment există logo-ul, astfel încât sprite este descărcată. Dacă această pagină a fost folosind CSS externe, ar fi incluse în cap prea.
Apoi, rezultatele căutării, carnea a paginii. Out merge, ca o bucată HTML static # 2.
Până în prezent, pagina se face, dar nu destul de încă. Există unele consolidarea progresivă a paginii care necesită JavaScript. JavaScript şi blocuri. Deci, aceasta include în subsol ca bucată # 3.
Pagina este utilizabil chiar şi fără JavaScript şi fără subsol. Ghidul de cea mai mare parte grijile cu privire la rezultatele, astfel încât bucată # 2 este ceea ce conteaza cel mai mult. Bucată # 3 poate obţine chiar pierdut în transfer. În ceea ce priveşte bucată # 1 - este doar de a oferi feedback despre faptul că "hei, suntem de lucru pe interogare". Prima bucată de fapt ghidul de trucuri pentru a crede că interogarea este deja făcut. "La naiba", conchide ghidul văzând că pagina este deja vine, "care a fost rapid"
Detalii Boring - HTTP 1.1 chunked codare
Deci, cum face acest lucru de fapt, cum se face HTML este servit în piese?
Raspunsul este - HTTP 1.1 codare chunked. Un obişnuit raspuns HTTP arata ca:
Headers... [One empty line] <html><body>response...
Un răspuns chunked ar fi cum ar fi:
Headers... Transfer-Encoding: chunked More headers... size of chunk #1 <html><body>...chunk #1... size of chunk #2 ...chunk #2... size of chunk #3 ...chunk #3 </body><html> 0 (meaning "the end!")
Dimensiuni bucată sunt oferite ca un hexazecimal. Iată un răspuns de exemplu (din articolul wikipedia)
HTTP/1.1 200 OK Content-Type: text/plain Transfer-Encoding: chunked 25 This is the data in the first chunk 1C and this is the second one 0
Chunking / înroşirea feţei strategii
Există practic două căi puteţi lua atunci când vine vorba de chunking:
- Aplicarea la nivel de chunking
- atunci când aplicaţia de web ştie când să culoare, pe baza unor logică. Căutare Google de mai sus este un exemplu de aplicare la nivel de spălare - antet, corp, subsol sunt părţi ale paginii, cunoscut pentru aplicatia web
- Server la nivel de chunking
- atunci când cererea dumneavoastră nu vă faceţi griji despre modul în care conţinutul este livrat, dar lasă această sarcină la server. Serverul poate alege unele strategie pentru spălare, de exemplu, o dată la fiecare 4K de ieşire. Google căutare face acest lucru atunci când agentul utilizator nu suporta gzip - bufeuri de acesta în fiecare 4k. Bing.com o face în mod similar - înroşirea feţei cu privire la fiecare 1k (uneori 2K, uneori mai puţin), indiferent de sprijin agentului utilizator pentru gzip. Interesant este suficient de prima bucată Bing este de multe ori nu poate fi citită de caractere - doar ceva care spune browser-ului - hei, eu sunt în viaţă, aici e prima ta octet
Amazon este un exemplu interesant de a face un amestec de ambele strategii - se pare ca uneori este nivel de server (de exemplu, în mijlocul unui tag HTML), dar uneori se pare ca bucata conţine (sau încheie) o secţiune de pagină. Amazon este, de asemenea, un bun exemplu de concentrându-se pe ceea ce este important pe o pagină (De ce este ghidul de aici Ce vor?? Ce nu am vrea sa faca?) şi asigurându-vă că este primul prestate.
Zonele am marcat în acest screenshot nu corespund exact bucati, dar ele arată modul în care pagina face progresiv, utilizând o combinaţie de răspuns chunked şi ordinea sursa:
- # 1 - antet. Fiecare pagina are unul. Ia făcut cu ea.
- # 2 - cumpara acum. Aceasta este ceea ce vrem ghidul de împrejurimi.
- # 3 - imagine. Utilizatorul doreşte să vadă ce sunt de cumpărare. Probabil, de asemenea, ajută la reducerea pe Amazon returnează marfa
- # 4 - titlu / preţ. Fel de importante.
Restul paginii - clienţi, comentarii, cumpărare, de asemenea,... Toate acestea pot aştepta, totul e secundar. Cea mai mare parte, este mult sub ori oricum.
Unelte: none
Din păcate, în măsura în care ştiu, nu există nici un instrument, care oferă vizibilitate în aceste bucăţi - care este conţinutul fiecăruia şi cum se arată.
Scripcarul haideţi să vedeţi răspunsul codificat chunked, dar care nu ajuta prea mult. Cel puţin vă oferă o idee că răspunsul a fost chunked - puteţi vedea în temeiul Inspectorii / Transformator că există o "Chunked Transfer-Encoding" caseta.
De asemenea, în Scripcarul sub tab-ul următor - Headers, puteţi vedea antet codificare chunked. Şi, de asemenea Scripcarul util vă spune că răspunsul a fost codificat (mesajul galben în partea de sus)
HTTPWatch haideţi să vedeţi răspunsul de neînţeles, dar, de asemenea, vă arată numărul de bucăţi. Reţineţi că numărul include 0 Ultimul în răspuns, astfel încât atunci când se spune 4 bucăţi aceasta înseamnă, de fapt 3.
De asemenea, am încercat să umple golul din departamentul de instrumentele de a încerca o extensie Firefox. Din păcate, nu au de lucru, nu am putut găsi API-ul expus la extensiile pe care să-mi dea acces la răspunsul prime codificate. Se pare ca ar fi posibil ca o extensie a HTTPwatch sau dacă Scripcarul - ambele extensibilitate oferă, atât arată răspunsul prime.
Pentru consumul propriu am făcut un script PHP pentru a solicita pagina şi dă-mi bucăţi ungzipped. Este foarte primitiv, dar vă pot da o sansa aici. De testare cu Yahoo! Search, de exemplu.
Funcţionează cu gzip!
O preocupare comună este dacă codare chunked lucrează împreună cu gzipping răspuns. Da, o face. În această prezentare Steve Souders arunca putina lumina (diapozitiv PPT, a se vedea # 66) cu privire la modul de a aborda problemele comune şi oferă, de asemenea, flush () echivalent în alte limbi decât PHP.
Există o serie de lucruri care pot fi în modul de punere în aplicare cu succes codare chunked + gzip, inclusiv:
- apel ob_flush (), în plus faţă de culoare () şi atent, dacă aveţi mai multe tampoane de ieşire a început, aţi putea avea nevoie pentru a itera şi spăla tot de pe ei
- unele browsere pot necesita o cantitate minimă de conţinut înainte de a începe să elimine, IE are nevoie de cel puţin 256 bytes
- s-ar putea nevoie de o versiune mai nouă de Apache
- DeflateBufferSize în Apache pot fi stabilite prea mare pentru dimensiunea chunk dvs.
- verifica comentariile ghidul de-a contribuit în php.net manualul de culoare () pentru sfaturi utile şi idei
- există ob_implicit_flush () de stabilire care poate culoare pentru tine loc de faci flush () de fiecare dată
Fă-o!
Acesta poate fi dificil să pună în aplicare mai multe înroşirea feţei (sau chiar singur), dar este bine meritat. Există unele obstacole serverul de configurare atunci când vine vorba de gzip, dar odată ce-ai dat seama, trebuie doar să o faceţi o dată. Ca o recompensă veţi obţine de ori mai repede de încărcare, plus redare progresiva, astfel pagina dvs. nu are doar mai rapid timp-pentru-onload de părere că prea.
Această intrare a fost postat pe Luni, douăzeci şi un/12/2009 şi este depusă în conformitate cu HTTP, de performanţă. Tu poţi a urma orice răspunsurile la această intrare prin RSS 2.0 hranei pentru animale. Puteţi lăsa un răspuns, sau trackback de pe site-ul propriu.
Primeşte notificare pentru mesajele viitor: urmaţi-mă pe Twitter sau Aboneaza-te la RSS feed mea