Versnel u werf met CSS Sprites | Martech Zone
Monday, July 9, 2012 Sondag, September 8, 2013 Douglas Karr
Ek skryf 'n redelike aantal bladsye op hierdie webwerf en dit is 'n belangrike deel van die ontleding en verbeterings wat ons aan ons kliënte se webwerwe aanbring. Afgesien van die verhuising na kragtige bedieners en die gebruik van instrumente soos Inhoudsleweringsnetwerke, is daar 'n aantal ander programmeringstegnieke wat die gemiddelde webontwikkelaar kan gebruik.
Die standaard vir die oorspronklike Cascading Style Sheet is nou ouer as 15 jaar. CSS was 'n belangrike evolusie in webontwikkeling omdat dit inhoud van ontwerp geskei het. Kyk na hierdie blog en enige ander, en die meeste van die stylverskil is eenvoudig in die aangehegte stylblad. Stylvelle is ook belangrik omdat dit plaaslik in 'n kas in u blaaier gestoor word. As gevolg hiervan, as mense steeds u webwerf besoek, laai hulle nie elke keer 'n stylblad af nie ... net die inhoud van die bladsy.
Dit vertraag weer u werf. A stadige webwerf kan 'n dramatiese invloed hê op die betrokkenheid en omskakelings wat u gehoor maak. 'N Strategie wat groot webontwikkelaars gebruik, is om al die beelde in een lêer te plaas ... genaamd a sprite. In plaas daarvan om 'n versoek vir elkeen van u lêerbeelde in te dien, hoef daar slegs 'n enkele versoek vir die enkele sprite-beeld te wees!
Jy kan lees oor hoe CSS Sprites by CSS-Tricks werk or Smashing Magazine se CSS Sprite Post. My punt is nie om u te wys hoe u dit moet gebruik nie, maar net om u te adviseer om te verseker dat u ontwikkelingspan dit op die webwerf insluit. Die voorbeeld wat CSS Tricks bied, toon 10 beelde wat 10 versoeke is en tot 20.5 KB. As dit in 'n enkele sprite versamel word, is dit 1 versoek, dit is 13 kb! Die retoerversoek en responstye vir 9 beelde is nou weg en die hoeveelheid data word met meer as 30% verminder. Vermenigvuldig dit met die aantal besoekers op u webwerf, en u sal 'n paar bronne regtig afskud!
Die appel navigasiebalk is 'n uitstekende voorbeeld. Elke knoppie het 'n paar toestande ... of u nou op die bladsy is, nie van die bladsy af of as u oor die knoppie is nie. CSS definieer die koördinate van die knoppie en bied die streek van die regte toestand aan die gebruikersblaaier. Al hierdie toestande is saamgevoeg in 'n enkele afbeelding - maar word streek vir streek vertoon soos in die stylblad gespesifiseer.
As u ontwikkelaars van gereedskap hou, is daar baie wat u kan help, insluitend die Kompas CSS raamwerk, Versoek Verminder vir ASP.NET, CSS-Spriter vir Ruby, CSSSprite-skrif vir Photoshop, SpritePad, SpriteRight, SpriteKoei, ZeroSprites, Project Fondue se CSS Sprite Generator, Sprite Meester Web, En die SpriteMe Boekmerk.
Screenshot van Sprite Meester Web:
Martech Zone gebruik nie agtergrondbeelde in die tema nie, en ons hoef hierdie tegniek nie tans te gebruik nie.
Tags: cascading style sheetscsscss spritecss spritesbladsy spoedspritestylblaaie
September 13, 2012 by 5: 06 AM
Wag ... is die hele versameling nie 'n "beeld" (of 'n "vliegtuig"), en elke sub-beeld (of sub-groep beelde in die geval van geanimeerde of interaktief veranderende) 'n "sprite"?
Miskien is goed hernoem sedert ek laas hierdie soort ding hanteer het, maar ek kon sweer die Sprite was die element wat uiteindelik vertoon is, nie die groot datatabel waaruit dit getrek is nie.
("Sprite-tafel" ... dit was dit nie?)
September 13, 2012 by 5: 09 PM
Ons praat dalk twee verskillende dinge, Mark. Met CSS kan jy basies spesifiseer watter 'gedeelte' van 'n beeldlêer om te vertoon met behulp van koördinate. Dit laat jou toe om al jou beelde in 'n enkele 'sprite' te plaas en dan net na die area te wys wat jy met die CSS wil vertoon.