Kódoptimalizálás - hogyan lehet az oldalakat lefogyni - javascript - 35 - Game And Me
Harmadik féltől származó tartalmak betöltése aszinkron módon
Aki még soha nem töltött fel harmadik féltől származó tartalmat (Youtube-videó vagy Tweet gomb) ?
A nagy probléma az, hogy ezeket a kódokat nem mindig szállítják hatékonyan, sem a felhasználói bejelentkezéssel, sem a kiszolgáló kapcsolatán keresztül, ahol tárolják őket. Előfordulhat, hogy ez a szolgáltatás ideiglenesen nem érhető el, vagy akár a felhasználó, vagy a cégük tűzfala blokkolja őket.
Annak elkerülése érdekében, hogy ez egy webhely betöltésekor váljon kulcsfontosságú kérdéssé, zárolja le a teljes oldal betöltését, és mindig töltse be ezeket a kódokat aszinkron módon (vagy használjon barátságos iFrame-eket).
Az asztalok hossza
Az egyik legfontosabb dolog a JavaScript teljesítményével kapcsolatban a hurok. Próbálja meg optimalizálni a logikát egy hurok belsejében, hogy minden iterációt hatékonyan lehessen végrehajtani.
Ennek egyik módja az, hogy tárolja a lefedett tömb méretét, hogy ne kelljen újraszámolni a hurok minden egyes ismétlésénél.
> Megjegyzés: Bár a modern böngészőmotorok automatikusan optimalizálják ezt a folyamatot, a meglévő böngészők alapján továbbra is jó gyakorlat létezik.
A gyűjteményekben csomópontok listája (NodeList) formájában, amelyet például a document.getElementsByTagName ('a') generált, ez különösen kritikus. Ezeket a gyűjteményeket "élő" -nek tekintjük, vagyis automatikusan frissülnek, amikor módosításokat hajtanak végre azon az elemen, amelyhez a csomópont tartozik.
Kerülje a document.write fájlt
A document.write használata az oldal betöltésének függőségét okozza.
Ezt a (rossz) gyakorlatot évek óta eltörölték a fejlesztők, de még mindig vannak olyan esetek, amikor még mindig szükséges a használata, például egy JavaScript fájl szinkron visszatérése esetén.
A HTML5 kazánlap például ezt a technikát használja a jQuery helyi betöltésére, ha a Google CDN-je nem válaszol.
> Figyelem: A window.onload esemény alatt vagy után végrehajtott document.write az aktuális oldal teljes tartalmát lecseréli.
Az utolsó oldal eredménye csak sávos lesz, nem pedig a vártnak megfelelően. Ugyanez történik közvetlenül az window.onload esemény után .
Az eredmény megegyezik az előző példával, ha a setTimeout által programozott függvényt az ablak után hajtjuk végre. .
Minimalizálja a kijelző újbóli beállításait
Az újbóli kiigazítások akkor történnek, amikor a DOM újratervezési folyamata van, amikor bizonyos tulajdonságokat vagy elemeket megváltoztatnak.
Akkor aktiválódnak, amikor az elem megjelenését megváltoztatják, az elrendezés megváltoztatása nélkül. Nicole Sullivan ezt stílusváltásként írja le, mint például a háttérszín megváltoztatása .