Olyan weboldal készítése, amit a front-end fejlesztőnek tudnia kell erről
Üdvözlet, kedves olvasók! Ma szeretném kiemelni a webes fejlesztés rendezésének kérdését. Természetesen sok cikket írtak már e témában, de úgy tűnt számomra, hogy minden információ meglehetősen szétszórt és töredékes. Legalább azért, hogy összegyűjtsem a teljes képet a fejemben és megértsem, sok információt (főleg angolul) kellett elemeznem. Ezért döntöttem úgy, hogy formalizálni tudom a tudásomat egy cikken, és osztom az eredményt Habr közösségével. Úgy gondolom, az információ hasznos lesz mind a kezdő webfejlesztőknek, mind pedig a tudás frissítéséhez és felépítéséhez.
Ezt a folyamatot meg lehet és meg kell optimalizálni a színpadon elrendezés / frontend-fejlesztés, mivel nyilvánvaló, hogy a jelölés, stílusok és szkriptek a feldolgozása közvetlenül részt. Ehhez a megfelelő szakembereknek ismerniük kell néhány finomságot.
A WEB-oldal feldolgozásának folyamata böngészővel
Először nézze meg a böngésző sorrendjét a dokumentum megjelenítésekor:
- A DOM (Document Object Model) az északról kapott HTML dokumentumból származik.
- A betöltött és felismert stílusokat a CSSOM (CSS Object Model) alkotja.
- És alapján a DOM fában rendering CSSOM kialakítva, illetve nem teheti a fa - egy sor megjelenítési objektumok (Webkit kifejezést használja «megjelenítő», vagy «render tárgyat», és Gecko - «frame»). A renderfa duplikálja a DOM struktúrát, de nincs láthatatlan elem (például - . vagy elemek a stíluskijelzéssel: none; ). Továbbá, minden egyes szövegsor a renderelőfában különálló rendererként jelenik meg. Minden renderelő objektum tartalmazza a megfelelő DOM objektumot (vagy szövegtömböt) és az objektumra kiszámított stílust. Egyszerűen fogalmazva, a renderfa leírja a DOM vizuális ábrázolását.
- Minden egyes renderfa elem esetében kiszámolódik az oldal helyzete - elrendezés történik. A böngészők olyan áramlási módot használnak, amelyben a legtöbb esetben egy átjáró elegendő az összes elem befogadásához (több a passzoló tábláknál szükséges).
- Végül a böngészőfestészetben ez a jó rajz.
Az oldalra mutató felhasználói interakció folyamatában, valamint a szkriptek végrehajtásában változik, ami szükségessé teszi a fenti műveletek némelyikének ismételt végrehajtását.
megy átfestés (vagy Restyle) - Abban az esetben, ha változik a stílus elemei, amelyek nem érintik a méretét és helyzetét az oldalon (.. például background-color border-color láthatóság), a böngésző egyszerűen teszi újra, figyelembe véve az új stílust.
Ha a változtatások befolyásolják a tartalmat, a dokumentum szerkezetét, az elemek pozícióját, egy reflow (vagy relayout) történik. E változások okai általában:
- Manipuláció a DOM-val (elemek hozzáadása, törlése, módosítása, átrendezése);
- Tartalom módosítása, beleértve szöveg formában;
- CSS tulajdonságok kiszámítása vagy módosítása;
- Stíluslapok hozzáadása vagy eltávolítása;
- Manipuláció az "osztály" attribútummal;
- Manipulációk a böngészőablakkal - átméretezés, görgetés;
- Pszeudoosztályok aktiválása (például .hover).
Böngészőoptimalizálás
A böngészők, ha lehetséges, lokalizálja a módosított elemeken belüli átfestést és reflow-t. Például, átméretezés vagy rögzített abszolút elhelyezkedésű elem csak az adott elem és annak leszármazottai, míg a változás a pozíció statikus - hatására újrafolyősodásához mindazokat az elemeket, követni.
Azonban a fent leírtak szerint az elemek tulajdonságainak elérése kényszeríti a reflow-ot. Ez azt jelenti, hogy ha hozzáadunk egy hívást a fenti kódblokk elemének tulajdonságához, akkor ez extra reflow-t eredményez:
Végül 2 helyett 2 reflow-ot kapunk. Ezért az elemek tulajdonságait egy helyen kell csoportosítani a teljesítmény optimalizálása érdekében (lásd a JSBin részletesebb példáját).
De a gyakorlatban vannak olyan helyzetek, amikor nem kényszerülnek kényszerítés nélkül. Tegyük fel, hogy van egy feladat, hogy a kívánt elemet alkalmazni a telken (hogy a «margin-left») első animációs nélkül (állítva 100px), és akkor - animált átmenet értékét 50px. Ezt a példát azonnal láthatja a JSBin-en. de aláírom itt.
Kezdéshez egy átmeneti osztályt kapunk:
Ezután próbáljuk meg végrehajtani a következőképpen:
Ez a megoldás nem fog működni, ahogy az várható volt, mert A módosításokat gyorsítótárba helyezzük és alkalmazzuk csak a kódblokk végén. Kényszerített reflow lesz, ennek eredményeképpen a kód a következő formát kapja, és pontosan teljesíti a feladatot:
Gyakorlati tippek az optimalizáláshoz
Alapján ezt a cikket, valamint az egyéb cikkek Harb, amely magában foglalja a kérdés optimalizálása JS-ből, az alábbi tippeket, hogy hasznos lesz az eredményes frontend:
- Valódi HTML és CSS írása, a kódolás megadásával. A stílusok a legjobbak közé tartoznak . és a szkriptek - a végén .
- Szükséges elkerülni a szelektorkészletek komplex befektetéseit a CSS-ben (ez gyakran előprocesszorokat használó fejlesztők hibája). A címkék helyett célszerűbb az osztályok vagy az azonosítók használata. Továbbá kerülje az egyetemes választót (*).
Remélem, hogy minden olvasó kihúzott valami hasznosat a cikkből. Mindenesetre - köszönjük a figyelmet!