A termelékenység és a szervezet webreference
Az a képesség, hogy írjon HTML és CSS egy alapos megértése a webes technológia - ez egy nagy élmény. De ahogy a kódot, és a webhely forgalom jön szóba egy új készségek, az egyik, hogy rendkívül fontos mind a fejlesztés során, és a felhasználói élményt. Alapvető ismeretek a teljesítmény és a szervezet honlapján is nagy jelentősége van.
Szervezet és a kód építészet nagyban befolyásolhatja nem csak a sebesség a fejlődés, hanem a sebesség oldalleképezés. Mindkét komoly problémákat okozhat nemcsak a fejlesztők, hanem a felhasználók számára. Szánj időt, hogy meghatározzák a megfelelő struktúra a kódot, és meghatározza, hogy az egyes komponensek együtt - képes felgyorsítani a kész oldalon, és a felhasználói élmény javítása minden módon.
Ezen túlmenően, ez a néhány apró lépést portál teljesítményének javítása is megtérülhet az osztalék formájában. Teljesítmény Oldal emlékeztet a 80/20 szabály, ahol 20% optimalizálás sebesség mintegy 80% -a az oldalon.
Stratégia és struktúra
Az első rész a termelékenység javítására és szervezése a helyszínen körül forog a meghatározása a jó stratégia és struktúra fejlesztésére a kódot. Különösen az építkezés egy szigorú építészeti mappák, prezentáció sablonok és keresi a módját, hogy újra közös kód.
stílusú építészet
A kérdés az, hogyan kell megszervezni a stílus jön le, hogy a személyes preferencia, és hogy mi a legjobb egy adott helyszínen, de általában vannak a legjobb gyakorlatokat, amelyeket követni kell. Egyikük magában szétválasztása stílusok alapján a jelentés, amely magában foglalja a létrehozását mappák közös alap stílusok felhasználói felület elemei és az üzleti logika modulokat.
A fent leírt architektúra három mappa, minden egyes csoportok stílusokat. A cél itt - elkezd gondolkodni a helyszínek, mint rendszerek. mintsem az egyes oldalakat, és a kód építészet tükröznie kell ezt a gondolkodást. Felhívjuk figyelmét, hogy nincsenek stílusok bizonyos oldalak.
Folder alapvető stílusok is stílusok és globális változók, amelyeket használni fognak az egész oldalon, például az elrendezés és az íráskép. A mappa a komponenseket tartalmaz stílusok egyes felhasználói felület elemeit, amelyek osztják a különböző fájl összetevők, mint például a figyelmeztetéseket és a gombok. Végül a modulok mappa tartalmazza a stílusok különböző szakaszait az oldal, hogy határozzák meg összhangban az üzleti igényeket.
Stílusok alkatrészek - tiszta felület, és nincs semmi köze az alapvető üzleti logikát az oldalon. Modulok közé stílusok jellemző az üzleti logika. Amikor jelölés modul a HTML ez jellemzően használja különböző összetevői a felhasználói felület. Például az oldallap a lap tartalmazhat egy listát és gombstílusok definiált az összetevő stílus, míg más stílusú szükséges oldallap öröklődnek a modul stílusban. típusú szétválasztásának ösztönzése jó gondolni a lehetőséget, gyári és stílusok, amelyek széles körben terjesztett és ismételten felhasználható.
A stratégia a szervezet stílusa nem teljesen új módon, és a már említett különböző módszereket CSS, beleértve az objektum-orientált CSS (OOCSS) és SMACSS. Ezeket a módszereket a saját véleményét a szerkezet és hogyan kell használni stílusokat.
Objektum-orientált CSS
A módszer az objektum-orientált CSS először írta le Nicole Sullivan munkáját írás stílusa nagy telek. Az objektum-orientált CSS definiálja két alapelv, amely segít létrehozni méretezhető weboldalak szigorú építészeti és kezelése kódot. E két alapelvek a következők:
- elválasztó szerkezet és kialakítás;
- szétválasztása tartalom és a tartály.
Általában, a szétválasztás a szerkezet és a kialakítás elrendezése elem tartalmaz elválnak az alany helyén. modulszerkezetet átláthatónak kell lennie, amely lehetővé teszi más stílusú öröklött és megjelenik konfliktus nélkül. Leggyakrabban ez megköveteli a szabályos rács elrendezés és szerkezet, valamint egy jól átgondolt modulokat.
Szétválasztása tartalom és a tartály tartalmaz egy eltávolító funkció beágyazott gyermek elemek egy szülő elem. A címet kell ugyanúgy néz ki, függetlenül attól, hogy a szülő konténer. Ennek elérése érdekében az elemeket kell örökölni az alapértelmezett stílusok, majd kiterjesztették több osztályt, ha szükséges.
Az alap magában alapelemeinek stílusok és magában foglalja az általános alapértelmezett értéket. A szerkezet akkor beállítja a méretek és stílusok különböző hálózati elemek határozzák meg azok elrendezése. modul stílusok - konkrétabb stílusok, összpontosított egyes részeit az oldal, mint a navigáció, vagy annak főbb jellemzőit. Stílusok állapotban használjuk fel azután, hogy kiegészítse vagy felülbírálja a többi stílus abban az esetben, hogy a modul tartalmaz egy megváltozott állapot, például az aktív fület. Végül, a téma lehet adni, ha stílus alapján a tervezés és megjelenése a különböző modulokat.
A módszertan kiválasztása
Választás, mit módszert alkalmazzák, hogy minden esetben, teljesen rajtad múlik, és mit szeretne, akkor a legjobb egy adott honlapon. Általánosságban elmondható, hogy a kombinált OOCSS SMACSS és jól működik, kölcsönadta előnyös alapelveit minden módszer.
teljesítmény szelektor
Egy CSS alkalmassága gyakran tudtukon visszaélni - a választókat. Jelentős figyelmet fordítani a CSS tulajdonságokat és értékeket. Bár ezek a stílust alkalmazunk a megfelelő elemet, mindent jól néz ki. Ez egy nagyon rossz feltételezés. Válassza ki az elemeket a CSS befolyásolja a teljesítményt, beleértve, hogy milyen gyorsan oldal jelenik meg, valamint a gyakorlatban stílusok illeszkednek az átfogó architektúra az oldalon.
Tartsa szelektor rövid
Több előnye is van, hogy miért menteni CSS választók, ha lehetséges rövid. Ezek közé tartozik a minimálisra csökkenti a specificitás, amely megkönnyíti, hogy az örökölt és átvitt plusz hatékonyságát. Hosszú, pontosabb szelektor csökkentheti a teljesítményt, mivel a hatályos böngésző megjeleníteni minden egyes választó jobbról balra. Azt is terhet ró a többi szelektor így válnak konkrétabb.
A fenti kód, az első választó erősen specifikus, és lehet gyorsabban azonosítani és látható a class. Ezen túlmenően, a használata az osztály ebben az esetben jelentősen csökkenti annak szükségességét, hogy azonosítsa a szülők ezen elem, amely lehetővé teszi, hogy az elemet utóbb változtatni a helyét anélkül, hogy elszakadna a stílusok.
A második példa tartalmazza szelektorok rövidebb, mint az első példában, de lehet javítani, biztosítva az azonos szintű specifitás egyes választó. Kerüljük a túlságosan konkrét szelektor, ahelyett, hogy csökkenti annak az esélyét megsértése megfelelő az elemek sorrendjét, amikor megváltozott. Némelyikének eltávolításával az egyes blokkok kiválasztó és szelektor, hogy mindenki egyenlő erővel, minden, ami lehetővé teszi számukra, hogy jobban befolyásolja.
Általában az a célja, rövid szelektor - csökkentik sajátosság, hogy hozzon létre a tisztább, hatékonyabb kódot.
inkább osztályok
Osztályok jó, mert hamar megjelennek, hogy az újrahasznosítás stílusok és széles körben használják az épület egy honlapot. Vannak közös módszerek alkalmazásának osztályok, amelyek lehetővé teszik, hogy milyen osztályok működnek megfelelően.
Mivel a szelektor jelennek jobbról balra, fontos, hogy nyomon követhesse a kulcsos. Ez szelektor a legvégén, a szélsőjobb. A kulcsos döntő fontosságú, mert ez határozza meg az első elemet, amely a böngésző megtalálható. Bad kulcsos küldheti a böngésző vadászni vadludak. Ne félj használni az osztály, hogy az elem több egyedi, csak a kedvéért a teljesítmény.
Sőt, nem előzheti osztályszelektor elem. Ez megakadályozza, hogy a stílust alkalmazunk a különböző elemek és javítja az általános specificitását választó.
Azt is meg kell jegyezni, - amennyire lehetséges tartsa távol identitás, mivel azok túl specifikus és nem teszi lehetővé az ismétlés. A végén, a használata az azonosító nem sokban különbözik attól, mint! Fontos.
kód újrafelhasználásának
Az egyik nagy teljesítmény csökkenhet jön egy fájl mérete duzzad és szükségtelen kijelző a böngészőben. Az egyik leggyorsabb módja, hogy segítsen sok szempontból, hogy csökkentse a méretét a CSS-fájl ismétlődik, amennyire csak lehetséges, a használata a stílusok. Bármilyen ismétlődő stílusok vagy interfész sablonokat kell integrálni, kihasználva a közös kódot. Amennyiben két modul használja ugyanazt a háttérben, a lekerekített sarkok és árnyék az egység, nincs ok arra, hogy egyértelműen meg ugyanaz a kétszeres stílus. Ehelyett lehet kombinálni egy osztályban, míg stílusok vannak írva egyszerre.
Újrafelhasználható kód nem működik, mert a szemantikai. Az egyik módszer lehet egy vegyület, szelektorok össze, vesszővel elválasztva, és amely lehetővé teszi az azonos két stílust örökölt szelektorok. Egy másik megközelítés, amely gyakran megtalálható a fent említett módszerek és OOCSS SMACSS jár árukapcsolás stílusok az azonos osztályba tartozó, akkor a használata több osztályt egyetlen elem.
Között az alkalmazott megközelítés nem sok a különbség, mivel a kód újra használni, és a teljes fájl mérete csökken.
Minimalizálása és a fájl tömörítési
gzip tömörítés
Beállítás gzip meglehetősen fájdalommentes és HTML5 Boilerplate remek munkát végeztek erre. Mert gzip fájlokat szeretne hozzáadni egy .htaccess fájlt a gyökérkönyvtárban a webkiszolgáló ellenőrzi a speciális fájlok tömörítve. A lényeg az elején a fájlnév helyes, hiszen a .htaccess fájl rejtett.
- mod_setenvif.c
- mod_headers.c
- mod_deflate.c
- mod_filter.c
- mod_expires.c
- mod_rewrite.c
Általánosságban elmondható, hogy ez nem jelent problémát, és néhány web szervereket is tömörítés beállításához az Ön számára. A végén, tömöríti a fájlokat is érdeke a webszerver.
mérése kompressziós
A Google Chrome-webvizsgálót ad rengeteg kapcsolódó adatok teljesítmény, különösen a Hálózat fülre. Emellett számos oldalak, amelyek segítenek eldönteni, hogy gzip tömörítés engedélyezve van.
Ábra. 1.01. Hálózat lap azonosít minden letöltött fájlt a böngésző, és megjeleníti a fájl mérete és letöltési időt. Felhívjuk figyelmét, hogy a használata gzip fájlméret csökken mintegy 60%.
Ábra. 1.02. Nézzük meg a fájlt, konkrétan meghatározza, milyen típusú tömörítés támogatott böngészőt. A mi esetünkben, gzip, leereszteni és sdch címkézett támogatta a kérelem fejlécében. Nézzük a válasz fejlécét meghatározhatja, hogy a fájl el lett küldve egy tömörítési eljárás gzip.
kép tömörítési
Méretének csökkentése a szöveges fájl segít, de akkor jobb eredményeket összenyomásával a képfájl méretét. A teljes fájl mérete minden kép az egész oldalon, akkor gyorsan hozzá, és összenyomja a képet, hogy nagy mértékben segít, hogy a fájl mérete ellenőrzés alatt.
Számos eszköz, amely segít, hogy összenyomja a képet, a két legjobb a ImageOptim PNGGauntlet Mac és Windows. Mindketten hez tömöríteni a legnépszerűbb képformátumok, mint a JPG és PNG fájlokat.
Bemutató kép tömörítési
Tömörítetlen, 455 KB
Ábra. 1.03. A ImageOptim ez a kép már csökkent több mint 14% csökkenése nélkül, vagy a minőség romlása.
Azt is meg kell jegyezni, hogy a szerelési a kép a HTML hozzáadásával szélesség és magasság tulajdonság valóban segít az oldal megjelenítéséhez gyorsabb, így megfelelő helyet a képet. Értsd meg, ezek a tulajdonságok, hogy kizárólag az azonosítását a pontos méretek a kép, ahelyett, hogy csökkentené azt. Használjon nagy képet, majd csökkentése segítségével magassága és szélessége attribútumok rossz gyakorlat, mert letölti több adatot, mint amennyi szükséges.
HTTP-kérések csökkentése
Miután a HTTP-kéréseket a fájl mérete a szám a helyszínen - az egyik legnagyobb buktatókat termelékenység. Minden alkalommal, amikor kérés érkezik a szerverre, növeli az oldalak betöltési ideje. Néhány kérelmet kell kitölteni a rajt előtt és a másik szerver megfullad túl sok kérést.
egyesülő fájlokat
Gyakorlat CSS sprite használatával jár egy háttérképet több elemből. A cél az, hogy csökkentsék a számát HTTP-kérések segítségével több háttérképeket.
Ahhoz, hogy hozzon létre egy sprite válasszon egy maroknyi háttérképeket, amelyek gyakran használják, és tegyük őket egy képpé. Ezután segítségével CSS, adjuk hozzá a kobold háttérképet egy elemet a background-position tulajdonság helyesen fogja megjeleníteni a háttérképet.
Képzeljük el, hogy egy háttérképet mögött a csúszó elemek csak helyesen beállítani a háttérképet az elem. Például, ha az elem mérete 16 pixel széles és 16 pixel magas, akkor csak ki a háttérképet 16 pixel és 16 pixel, és a többi a háttérben kép el van rejtve.
Egy sprite a menü felett lehet létrehozni a háttérben az elem . Ezután segítségével osztályok változik a helyzet a háttérben sprite mutatni a megfelelő ikonokat.
demonstrációs sprite
Képek segítségével az adatok: URL
Továbbá, ahelyett, hogy a sprite kódolt képi adatok szerepelnek a HTML és CSS közvetlenül az adatok: URL. még nincs szükség a HTTP-kérést. adatok: URL működik a kis képek nem változnak, és ahol a HTML és CSS nagyrészt a gyorsítótárban. Vannak azonban több probléma. Képek nehéz lehet változtatni, és fenntartani, ami annak szükségességét, hogy egyéb adatokat. És nem működnek a régebbi böngészők, mint például az Internet Explorer 7-es és alacsonyabb.
Ha az adatok felhasználása: URL segít csökkenteni a számát HTTP-kérések és HTML vagy CSS cache nagymértékben, az előnyök általában meghaladják a kockázatokat. Számos eszköz segítségével összeállíthatja adatok: URL-jét, átalakítók és generátorok mintákat. Legyen óvatos, és mindig ellenőrizze, hogy az adatok: URL kevesebb, mint maga a kép.
Bemutató adatok: URL
Gyorsítótárral megosztott fájlok
Egy másik módja, hogy segítsen csökkenteni a HTTP-kérések és tálaljuk oldalak gyorsabb - a cache közös fájlokat. Amikor az oldal betöltődik az első alkalommal, bizonyos fájlokat, majd tárolásra kerülnek. Most a böngésző nem törekedhet ugyanazokat a fájlokat a második látogatás jó ideje. Milyen hosszú ez az időszak úgy dönt, hogy minden attól függ, hogy mennyi ideig szeretne a felhasználó számára, miközben bizonyos típusú fájlokat.
Gzip fájlokat, konfigurációs fejléc fájlgyorsítás lejárati keresztül be lehet állítani egy .htaccess fájlt. Ismét HTML5 Boilerplate egy lépéssel előttünk jár. Az ő .htaccess fájl van egy szakasz feliratú lejár fejlécét.