25 HTML5 sebességtipp

Az elmúlt években a Microsoft IE csapatának tagja voltam, és megvizsgáltam az online élmény javításának módjait. Útközben sokat tanultunk a webes teljesítményről, és mélyreható ismereteket alakítottunk ki a webhelyek és alkalmazások gyors elkészítésével kapcsolatban.

A nagy teljesítményű webalkalmazások létrehozása elengedhetetlen minden webfejlesztő számára, függetlenül attól, hogy szabványalapú webböngészőn futó webhelyekről vagy a Windows Store alkalmazásairól beszélünk. A fejlesztő célja a webes teljesítmény javítása az alábbi tényezők csökkentésével:

Megjelenítési idő

A legfontosabb cél az, amit „megjelenítési időnek” nevezünk. Ennek számos neve van az iparban, beleértve az „üvegig tartásig” és az „elsődleges festék” kifejezést. A Megjelenítési idő azt az időt méri, amely a felhasználó műveletének végrehajtásától kezdve a felhasználó meglátja a művelet eredményét a képernyőn. Ez annak az időtartamnak a kezdete, amikor a felhasználó navigál a webhelyre, és addig, amíg a webhely vizuálisan befejeződik.



Eltelt idő

A legtöbb webhely a felhasználói műveletekre reagálva folytatja a munkát, miután a tartalom megjelent a képernyőn. Ez magában foglalhatja a felhasználói adatok letöltését (például e-mail üzenetküldés) vagy az elemzések visszaküldését a szolgáltatóhoz. A felhasználók szempontjából a webhely betöltöttnek tűnhet. Azonban gyakran jelentős munka zajlik a háttérben, ami befolyásolja a válaszkészséget.

CPU idő

A webböngészőket szinte kizárólag a CPU korlátozza; az a munka, amelyet egy böngésző elvégez a CPU-n, és az, hogy mennyire hatékonyan zajlik ez a munka, a legnagyobb hatással lesz a teljesítményre. Ezért a GPU-ra való átrakás olyan jelentős hatást gyakorolt ​​az IE9 és az IE10 teljesítményére. A művelet végrehajtásához szükséges CPU-idő és a CPU-hatékonyság kritikus fontosságú.

Erőforrás-felhasználás

A gyors böngésző létrehozása azt jelenti, hogy az erőforrások a teljes számítógépen jól működnek. Ez magában foglalja a hálózat kihasználtságát, a memóriahasználati mintákat, a GPU feldolgozását, a grafikát, a memóriát és több száz egyéb dimenziót. Mivel az ügyfelek egyidejűleg több alkalmazást futtatnak a számítógépükön, fontos, hogy a böngészők felelősségteljesen osszák meg ezeket az erőforrásokat más alkalmazásokkal.

Energiafogyasztás

Az alapul szolgáló számítógépes hardver használatakor fontos figyelembe venni az energiafogyasztást. Minél hatékonyabban használja a böngésző az energiát, annál hosszabb az akkumulátor üzemideje a mobil forgatókönyvek esetén, annál alacsonyabbak az eszköz üzemeltetésének villamosenergia-költségei, és annál kisebb a környezeti hatás. Az erő és a teljesítmény kiegészítik egymást.

Szeretnék megosztani veletek néhány dolgot, amelyet megtanultam a gyorsabb webhelyek és alkalmazások fejlesztéséről, valamint azokat a változásokat, amelyeket ma megtehet a teljesítmény javítása érdekében.

A fejlesztők hét alapelvet vehetnek figyelembe:

  • Gyorsan válaszoljon a hálózati kérésekre
  • Minimalizálja a letöltendő bájtokat
  • Hatékonyan strukturálja a jelölést
  • Optimalizálja a médiahasználatot
  • Írjon gyorsan JavaScriptet
  • Renderelés szabványos módban
  • Figyelje, mit csinál az alkalmazás

E hét alapelvben az alábbiakban számos hasznos teljesítménytípust vontam be, amelyek az Ön számára HTML5 webhelyek és az alkalmazások gyorsabban futnak (nézzen meg egy videót egy előadásról, amelyhez készítettem még több HTML5 tipp ).

Gyorsan válaszoljon a hálózati kérésekre

01. Akadályozzuk meg a 3xx átirányításokat

Amikor a felhasználó rákattint egy linkre, arra számít, hogy a lehető leggyorsabban megkapja a tartalmat. A 3xx átirányítások 250 milliszekundum késleltetést hozhatnak létre egy alkalmazásban. Ez rövid késésnek tűnhet, de nagyjából az oldal betöltési idejének 10 százaléka. A világ legnépszerűbb webhelyeinek mintegy 63 százaléka tartalmaz 3xx átirányítást.

02. Tartalomelosztó hálózatok (CDN) használata

A CDN-ek segítségével földrajzilag könnyen megtalálhatja adatait a felhasználóhoz közelebb. Szolgáltatások, mint pl Égszínkék segíthet ebben, és csökkentheti azt az időt, amelyet a tartalom a helyek között utazik. A mai hálózatokon ez akár 300 milliszekundumot is megtakaríthat.

03. Maximalizálja az egyidejű kapcsolatokat

Amikor az emberek egy hálózatra gondolnak, gyakran egyetlen csővezetékre gondolnak, amely oda-vissza irányítja a tartalmat. Valójában a böngésző hat egyidejű kapcsolatot tud létrehozni egy adott időben, lehetővé téve ezzel hat erőforrás letöltését egyszerre. Ez több tartományban lehetséges: a tartalom terjesztésével tovább növelheti az egyidejűleg letölthető erőforrások számát. Ha webhelye hat vagy hét tartományban tárol képeket, jelentősen csökkentheti az oldal betöltéséhez szükséges időt.

04. Ismerje meg a hálózat időzítését

Ismerje meg a hálózati időzítés lebontását - navigációs időzítés, erőforrás-időzítés és felhasználói időzítés -, és használja a modern böngészőkben, például az IE10-ben és a Windows Store-alkalmazásokban elérhető szabványalapú API-kat. Nagyobb felbontású időzítési információkat kaphat a dokumentum navigációjában. A navigáció időzítése lehetővé teszi annak megértését, hogy az alkalmazás mennyi időt tölt el különböző fázisokban.

Minimalizálja a letöltött bájtokat

05. Töltsön le kevesebb erőforrást és bájtot

Minél kevesebb erőforrást tud letölteni, annál jobb. Nézze meg a letöltött erőforrásokat, és dolgozzon ki, ahol kivághatja. Az átlagos weboldal ma 777 KB-ot tölt le. Ezeknek a bájtoknak a túlnyomó részét kép foglalja el, majd a JavaScript és a Flash tartalom következik.

06. Gzip: tömörítse a hálózati forgalmat

A kevesebb bájt letöltésének legjobb módja a tartalom Gzip letöltése. A legtöbb ember ingyen kapja meg ezt a szolgáltatást az általuk használt szerverek miatt, de sokan akaratlanul is kikapcsolják ezt a dekódolási technikát.

07. A fájlok nagybetűs írásmódja

Ez gyakran meglepő módon megfogja az embereket, de a szerver felveszi a különbségeket a kis- és nagybetűk között. A következő letöltési kérelmek ugyanazon kérés két változata:

Kisbetűs

Cím ügy

A webplatform szempontjából ez két különböző fájl. Ezért ennek eredményeként két különböző hálózati kérelem kerül feldolgozásra.

Hatékonyan strukturálja a jelölést

08. Kerülje a furcsa üzemmódot

A furcsa üzemmód elkerülése érdekében mindig használjon szabványokon alapuló doctype-t. Kezdeni valamivel . A modern webnek nincs helye a furcsa üzemmódnak, amelyet úgy alakítottak ki, hogy a 90-es évek közepe weboldalai a századforduló „modern” böngészőiben, például az IE6 és a Firefox 2 használhatók legyenek.

A legtöbb weboldal ma véletlenül furcsa módba kerül, egy érvénytelen doctype vagy a doctype előtti idegen szöveg következményeként. Ez furcsa elrendezési problémákat okozhat, amelyeket nehéz hibakeresni.

09. Kerülje a beépített JavaScript-eseményeket

Ügyeljen arra, hogy a HTML-jelölésen belül ne használjon beépített JavaScript-eseményeket. Ennek egyik példája a Validate lehet. Ez egy olyan gyakorlat, amely megtöri azt a tiszta elválasztást, amelynek a jelölés, a megjelenítés és a viselkedés között fenn kell állnia.

Ezenkívül, ha a szkriptek a fájl aljára töltődnek be, akkor a felhasználó interakcióba léphet az oldallal, eseményt indíthat és megkísérel meghívni egy még be nem töltött szkriptet, ami hibát okoz.

Ha a CSS-t az oldal tetejére helyezi, a böngésző először kiadja ezt a kérést, és egyidejűleg blokkolja a festést, amíg a CSS nem fejeződik be. A CSS fejbe helyezésével a képek, a JavaScript és más időigényes erőforrások később letölthetők. Ennek érdekében azt is javasoljuk, hogy ne kapcsolja össze a CSS-t az oldal alján.

11. Csak a szükséges stílusokat tartalmazza

Jó ötletnek tűnhet egy nagyon nagy CSS-fájl tárolása, amely az egész webhelyen meg van osztva. A világ legnépszerűbb híroldalai ma ezt a megközelítést használják. Az egyik híroldalon például egy stíluslap található, benne 4000 szabály, amelyeknek csupán 5-10 százalékát használják egyetlen oldalon. A böngészőnek le kell töltenie ezeket a stílusokat, át kell adnia őket, és belső adatstruktúrákat kell létrehozniuk, amelyek többségét soha nem fogják használni.

Ez a bevett legjobb gyakorlat. Mindig győződjön meg arról, hogy a stílusokat és a képeket először letöltötte. Így a JavaScript később követheti, és tetszés szerint manipulálhatja az oldalt. Ha azonban feltétlenül össze kell kapcsolnia a fejlécben lévő JavaScript-et, amelyet az Ön által használt CRM-rendszer vagy tárhelyszolgáltatás határoz meg, akkor mindenképpen használja a halasztó címkét.

13. Ismerje meg a HTML5 címkék határait

Az új HTML5-címkék kedvelik, és javítják a jelölés szemantikáját, de speciális shiv parancsfájlra van szükségük az Internet Explorer 6, 7 és 8 futtatásához, különben nem ismerik fel őket. Azok az oldalak, amelyeknek a régi böngészőkkel együtt kell működniük, még akkor is, ha a parancsfájlok le vannak tiltva, nem használhatják az új HTML5 címkéket. A sima elemek és osztályok használata gyakran biztonságosabb eljárás ezekben az esetekben.

14. Szabványosítson egyetlen kereten

Nagyon sok JavaScript keretrendszer létezik, és sok közülük ugyanezt teszi a funkcionalitás szempontjából. A böngészőnek le kell töltenie a JavaScript-et, át kell adnia és belső adatstruktúrákat kell létrehoznia anélkül, hogy tudná, végrehajtja-e őket. Ha egyetlen, egyetlen kerethez ragaszkodik, akkor jelentősen javítja teljesítményét.

15. Ne tartalmazzon szkripteket, hogy menőek legyenek

Nagyon sok 'klassz' szkript van ott. Nagyon egyszerű olyan szkriptfájlt beépíteni, amely valami „hűvöset” csinál a háttérben, de ez a szkriptfájl verseng az erőforrásokkal az oldal betöltésében. Biztos benne, hogy szükséges?

Optimalizálja a médiahasználatot

16. Minimalizálja a képek számát

A letöltött bájtok többsége képekre vonatkozik. A 100 000 legnépszerűbb webhely átlagos képszáma 58. Ha 20-30 képet átmegy, akkor a teljesítményre gyakorolt ​​hatás tapasztalható. Vessen egy pillantást az összes erőforrására, és tegye fel a kérdést magának, hogy szüksége van-e rájuk vagy sem.

17. Használjon képfröccsöt

A képfröccsenések jelentősen csökkenthetik a letöltendő adatok mennyiségét. Ahol lehetséges, kézzel készítsen képfröccsöt.

18. Gondolja át, melyik képformátumokat használja

A PNG a leghatékonyabb egyensúlyt kínálja a kompatibilitás, a kódolási méret, a CPU dekódolási ideje és a CPU dekódolásához szükséges bájtok között. Emellett az egyik legjobb tömörítési arány. A fényképek esetében azonban a JPEG általában jobb formátumú.

19. Kerülje az összetett SVG utakat

A bonyolult SVG útvonalak sokáig tartják a böngészőt a belső adatstruktúrák letöltéséhez, továbbításához és létrehozásához. Ahol lehetséges, próbálja meg előállítani a lehető legtömörebb SVG elérési utat. Ez eltarthat egy ideig, de az SVG elérési útjának kézi előállítása valóban segíthet.

20. Adjon meg egy képelőnézetet a HTML5 videóhoz

Ha nem ad meg képelőnézetet, a böngészőnek le kell töltenie a videót, ki kell derítenie az első képkockát, majd ezt meg kell jelenítenie a felhasználó számára. A kép előnézetének megadásával a böngészőnek nem kell letölteni a videót, csak a képet. Csak akkor kezdi el letölteni a videót, amikor a felhasználó kéri.

21. Minimalizálja a média plug-inek használatát

A felfogás ellenére a legtöbb média plugin nem olyan gyors, mint a HTML5 a videó futtatásakor. Továbbá versenyezni fognak az erőforrásokkal kapcsolatos alkalmazással.

Írjon gyorsan JavaScriptet

22. Csökkentse a JavaScript-et

Sok ember ismeri ezt a technikát. Lényegében meg kell tennie a JavaScript-et, eltávolít néhány karaktert, majd leegyszerűsíti a változókat. Az alábbiak szerint:

Kezdeti (66 karakter)

function Sum(number1, number2) { return (number1 + number 2); }

Karakterek eltávolítva (54 karakter)

function Sum(number1,number2){return number1+number2;}

Tömörített (30 karakter)

function Sum(a,b){return a+b;}

Kevesebb JS-t kell letölteni, és van egy rejtett előnye: futásidejű teljesítmény. Szigorúbb kóddal és kisebb változónevekkel a futásidejű idő gyorsabban meg tudja keresni a változókat, javítva a letöltést és a futásidejű teljesítményt.

Ezenkívül igény szerint inicializálja a JavaScript-et. Ne töltse be a teljes JavaScript könyvtárat az oldal betöltésekor - dinamikusan megteheti, ha szükséges.

Renderelés szabványos módban

23. Használjon webes szabványokat

A webes szabványok használata nem csupán a fejlesztés költségeinek és a böngészőkön és eszközökön keresztül történő tesztelés bonyolultságának csökkentésében segít, de érezhető teljesítménybeli előnyöket is elérhet. Valójában azt tapasztaltuk, hogy az IE10-ben lévő webhelyek átlagosan 30 százalékkal jobb oldalbetöltési időt kaptak, amikor normál módba váltottak. Az előny hasonló az IE9-ben is.

A Standards mód az összes böngésző alapértelmezett megjelenítési módja, és az összes böngészőben ugyanúgy működő webes szabványok legjobb megvalósítását kínálja. A szabványos mód mellett az IE kompatibilitási módokat is biztosít, hogy az IE régi verzióihoz tervezett webhelyek működjenek. Ez különösen hasznos volt a múltban, amikor bevett gyakorlat volt, hogy először észleltek egy böngészőt, majd a csak neki szánt kódot szolgáltatták ki. De erre sok esetben már nincs szükség, mert a webes szabványok kódja hasonló módon jelenik meg a modern böngészőkben, beleértve az IE10-et és a 9-et is, szabványos módban. Ezt az új gyakorlatot közismerten funkció-észlelésnek hívják, és népszerűvé tette Modernizr ).

Figyelje az alkalmazás működését

24. Kombinálja az alkalmazás időzítőit

A legtöbb webes alkalmazás ma 5-10 időzítővel rendelkezik, amelyek folyamatosan futnak. Az időzítők körülbelül fele szunnyad. Győződjön meg arról, hogy az időzítők vagy szekvenciák nem futnak feleslegesen. Ha lehetséges, kombinálja az alkalmazás időzítőit, és ha teheti, hozzon létre egy időzítőt, amely az összes szekvenciáját kezeli.

25. Ellenőrizze az alkalmazás láthatósági állapotát

Anélkül, hogy tudná az alkalmazás láthatósági állapotát, kénytelen megtervezni azt, mint mindig látható. Az oldal láthatósága egy új szabványalapú API, amelyet az IE10 és a Windows Store alkalmazások, valamint a legtöbb modern böngésző támogat.

Az oldal láthatósága lehetővé teszi az alkalmazás láthatósági állapotának meghatározását, így csökkentheti az aktivitást, ha tudja, hogy az alkalmazás nem látható, és ezzel megtakaríthatja a CPU idejét és növelheti az akkumulátor élettartamát.

Következtetés

A jobb webhelyteljesítmény nagy hatással lehet a felhasználóira. A lassú weboldal-betöltés fontos tényező abban, hogy a felhasználók elhagyják a webhelyet, csökkenthetik a webhely vélt hitelességét és befolyásolhatják a termékek értékesítését. A fenti tippek időmegtakarítása viszonylag csekélynek tűnhet, de együttesen megvalósítva jelentős időmegtakarítást eredményezhet. Sőt, arra ösztönzik Önt, hogy először gondolkodjon a hatékonyságon, és hozzon létre olyan alkalmazásokat és webhelyeket, amelyek éles felhasználói élményt nyújtanak.

Szavak: Jatinder ember

Ez a cikk eredetileg itt jelent meg net magazin 244. szám

Tetszett ez? Olvassa el ezeket!

Hasznos HTML5 tipp van? Oszd meg a kommentekben!