Optimizarea codului - cum să faci paginile să slăbească - javascript - 35 - Game And Me
Încărcați conținut terță parte asincron
Cine nu a încărcat niciodată conținut terță parte (un videoclip Youtube sau un buton Tweet) ?
Marea problemă este că aceste coduri nu sunt întotdeauna livrate eficient, fie prin conectarea utilizatorului, fie prin conexiunea serverului unde sunt găzduite. Acest serviciu poate fi, de asemenea, temporar indisponibil sau chiar blocat de utilizator sau de firewall-ul companiei lor.
Pentru a împiedica acest lucru să devină o problemă crucială la încărcarea unui site, blocați încărcarea întregii pagini și încărcați întotdeauna aceste coduri în mod asincron (sau utilizați iFrames prietenoase).
Lungimile meselor
Unul dintre cele mai importante lucruri despre performanța cu JavaScript este bucla. Încercați să optimizați logica din interiorul unei bucle, astfel încât fiecare iterație să se facă eficient.
O modalitate de a face acest lucru este să stocați dimensiunea matricei care va fi acoperită, astfel încât să nu fie necesară recalcularea de fiecare dată când bucla este iterată.
> Notă: Deși motoarele moderne de browser optimizează automat acest proces, există încă o bună practică bazată pe browserele existente care persistă.
În colecțiile sub forma unei liste de noduri (NodeList) generate de exemplu de document.getElementsByTagName („a”) acest lucru este deosebit de critic. Aceste colecții sunt considerate „live”, adică sunt actualizate automat atunci când se fac modificări la elementul căruia îi aparține nodul.
Evitați document.write
Utilizarea document.write face ca o dependență de încărcarea paginii să fie complet încărcată.
Această practică (rea) a fost abolită de ani de zile de către dezvoltatori, dar există încă cazuri în care utilizarea acesteia este încă necesară, cum ar fi în cazul unei returnări sincrone pentru un fișier JavaScript.
Boilerplate HTML5, de exemplu, folosește această tehnică pentru a încărca jQuery local dacă CDN-ul Google nu răspunde.
> Atenție: document.write efectuat în timpul sau după evenimentul window.onload înlocuiește tot conținutul paginii curente.
Rezultatul ultimei pagini va fi doar bare și nu foobar așa cum era de așteptat. Același lucru se întâmplă imediat după evenimentul window.onload .
Rezultatul este același cu exemplul anterior, dacă funcția programată de setTimeout este executată după evenimentul window.onload .
Reduceți la minimum reglajele afișajului
Reajustările sunt cauzate atunci când există un proces de redare a DOM-ului atunci când anumite proprietăți sau elemente sunt modificate.
Acestea sunt declanșate atunci când aspectul unui articol este modificat fără a schimba aspectul acestuia. Nicole Sullivan descrie acest lucru ca o schimbare de stiluri, cum ar fi schimbarea unei culori de fundal .