Overclockarea selectorilor CSS: id vs. clasa, runda a doua
În primul articol al ciclului, am considerat deja viteza motorului responsabil pentru crearea și afișarea unei pagini HTML pe ecran. Cu toate acestea, acum vorbim despre un aspect ușor diferit, mai degrabă decât motorul selector CSS. Această serie de teste a fost dedicată vitezei de creare a unui document HTML separat.
În cazul în care primele două studii a fost pus sub semnul întrebării browser-ul rata de recunoaștere CSS-reguli și aplicarea lor, acum interesate într-o altă întrebare, și anume: cât de repede browser-ul creează un DOM-copac, în funcție de prezența elementelor cu id sau clasa?
Pentru aceasta, au fost pregătite 3 seturi de fișiere HTML. Prima conținea 10.000 de elemente, pentru care partea are un id (numărul elementelor numite a variat de la 50 la 10.000). În al doilea rând, fișierele HTML erau aproape identice, dar în loc de id, aveau atributul de clasă. În al treilea set din arborele DOM, au existat numai elemente cu id (adică, numărul de elemente în sine era variat). În consecință, toate măsurătorile au fost efectuate într-o iframe ascunsă. Pentru a evita extragerea paginii încărcate pe ecran.
Pentru a măsura timp pentru a crea pagini utilizează același bine dovedit, tehnologia care în testele anterioare: el a luat timp pentru a marca un set de elemente și apoi setați, și apoi scăzute din ultima. Rezultatele finale sunt medii ponderate pentru toate browserele.
Efectul asupra getElementById
In plus, pentru HTML fișiere care conțin identificatori, calcule rula, getElementById ( „ID1“) este de 10.000 de ori (în scopul de a verifica dacă numărul de elemente sau identificatori afectați de această procedură). Rezultatele au fost foarte interesante, deși foarte previzibile. Probabil, în următorul studiu acest aspect al browserelor va fi investigat mai detaliat.
Testele pot fi executate pe webo.in/tests/css-efficiency-3/ sau puteți descărca toate fișierele de pe pagina specificată (împreună cu rezultatele mele).
Toate cele trei seturi de testare (fiecare conținând 6 dosare, au fost 50, 100, 500, 1000, 5000 și 10000 elemente investigate) a fost rulat de 10 ori pentru 5 browsere (Firefox2, IE6, IE7, Opera 9.5 (da, nu Am 9,27) și Safari 3). Ca urmare, prin metode statistice, eroarea a fost redusă la o valoare pe deplin acceptată: 2-3%.
Vreau doar să menționez o ușoară uptick pentru primul document în toate browserele: cel mai probabil, în cazul în care documentul este încărcat într-un browser iframe (era tipic pentru întreaga lume) alocă o anumită cantitate de memorie pentru noul HTML documentul în iframe. care este apoi reutilizat într-un fel pentru documente noi. Ca urmare, ID-urile documentelor de la 50 la 10.000 de celule rezultate au fost ușor greșit.
Poate că în viitor acest aspect merită luat în considerare și încărcați un document gol la început, sau mai bine încă, descărcați documentul cu numărul maxim de obiecte pentru a aloca memorie nu afectează evaluarea ulterioară. Cu toate acestea, această abatere nu a afectat concluziile calitative.
rezultate
Probabil, cel mai simplu mod este să prezinți rezultatele sub formă de grafice, pe care, în principiu, le voi face. Câteva cuvinte despre legenda: se colectează 5 cazuri. ID (crea) reflectă timpul de creare a documentului HTML cu 10000 de elemente (div), dintre care numai 50. 10000 au fost identificatori. clasa (crea) corespunde timpului de creare a aceluiași document, dar cu clasa în loc de id. ID (curat) caracterizează timpul de creare a documentului, în care toate elementele aveau identificatori (dar erau doar 50 de elemente. 10000). Două grafice cu 10000 obțineți timpul pentru a prelua un element cu un identificator specific de 10.000 de ori în primul și cel de-al treilea document.
Figura 1. Viteza creării de documente și selectarea elementelor pentru Firefox 2
Figura 2. Viteza creării de documente și selectarea elementelor pentru IE 6
Figura 3. Viteza creării de documente și selecția elementelor pentru IE 7
Figura 4. Viteza creării documentelor și selectarea elementelor pentru Opera 9.5
Figura 5. Viteza creării de documente și selectarea elementelor pentru Safari 3
Pentru Internet Explorer, este greu de înțeles ceva, deoarece timpul pentru calcularea unui element de către un identificator nu este mult mai mic decât momentul creării de documente, în cele din urmă "înfundă" toate rezultatele. Mai jos sunt grafice împărțite pe valoarea medie ponderată (desigur, rolul principal jucat de Internet Explorer).
Figura 6. Viteza creării de documente, media ponderată pentru toate browserele
Figura 7. Viteza elementului, media ponderată pentru toate browserele
Din graficul valorilor medii se vede clar că, ceteris paribus, crearea de documente cu clasa de sânge costă mai puțin decât dacă ar fi (în general, de la 2 până la 10% castigate). Dacă luăm în considerare faptul că selectorul element.class funcționează mai rapid decât #id pe aceleași 10%, atunci câștigul total atunci când folosiți clasele în document înainte de ID este de aproximativ 15%. În termeni absoluți, aceste cifre nu sunt atât de mari: pentru Centrino Duo 1.7 devine o figură despre 0,0085ms 1 ID (în medie, 3 CSS-reguli și utilizarea 1).
Cu toate acestea, (după cum este necesar, în general), o sarcină importantă este tocmai crearea DOM-copac în document (puteți vedea modul în care timpul exponențial în creștere pentru Opera, Firefox și Safari), și documentul în sine (constantă de timp în 60ms pentru IE, care întrece orice Alte cheltuieli generale la crearea unui document mediu). În general, aceste operații merge de la 70% din timp (de exemplu, cele mai mari economii pot fi atinse prin minimizarea dimensiunii copacului, și numărul de HTML-pagini sunt încărcate, de exemplu, într-un cadru, este planificat să efectueze cercetări suplimentare în acest domeniu).
La viteza de a calcula un element de către identificator, destul de ciudat, DOM-Tree are cea mai mare influență din nou, decât numărul de astfel de elemente. Chiar și cu 1000 de articole cu ID-uri, mai mult de jumătate din costurile de timp pot fi tăiate, dacă diminuăm pur și simplu numărul total de elemente (mai ales pentru IE).
În general, există două sfaturi principale: reduceți arborele DOM și folosiți id-ul numai în cazul unei necesități reale.
Citiți mai multe
Trimiteți-le prietenilor: