CSS Sprites менен сайтыңызды ылдамдатуу

spritemaster веб

Бул сайтта баракчанын ылдамдыгы жөнүндө бир аз жазып турам, бул биздин кардарлардын сайттарын талдоонун жана өркүндөтүүнүн маанилүү бөлүгү. Күчтүү серверлерге өтүүдөн жана ушул сыяктуу шаймандарды колдонуудан тышкары Мазмун жеткирүү тармактары, орточо веб иштеп чыгуучу колдоно турган бир катар башка программалоо ыкмалары бар.

Каскаддык стилдин түп нускасынын стандартына азыр 15 жаштан ашты. CSS веб-иштеп чыгууда маанилүү эволюция болгон, анткени ал дизайн менен мазмунду бөлүп турган. Бул блогду жана башкаларды караңыз, жана стилдеги айырмачылыктардын көпчүлүгү тиркелген стилдер баракчасында. Стиль таблицалары дагы маанилүү, анткени алар жергиликтүү браузериңиздеги кэште сакталат. Натыйжада, адамдар сиздин сайтка кире беришкен сайын, алар стилдер баракчасын жүктөп жаткан жок ... жөн гана барактын мазмуну.

Көп колдонулбай калган CSS элементтеринин бири CSS Sprites. Колдонуучу сиздин веб-сайтыңызга киргенде, ал баракчага бир эле өтүнүч менен кайрылып жаткан жок экендигин түшүнбөй калышыңыз мүмкүн. Алар бир нече өтүнүч келтирүү… Баракчага, стилдердин таблицаларына, тиркелген JavaScript файлдарына, андан кийин ар бир сүрөт үчүн өтүнүч. Эгер сизде чек аралар, навигациялык тилкелер, фондор, баскычтар жана башкалар үчүн бир катар сүрөттөр бар тема болсо ... браузер веб-серверден ар бирин бир-бирден сурап алышы керек. Миңдеген конокторго көбөйтсөңүз болот жана сиздин серверге он миңдеген сурамдар келип чыгат!

Бул, өз кезегинде, сиздин сайттын ишин жайлатат. A жай сайт тартууга жана өзгөртүүгө кескин таасирин тийгизиши мүмкүн сиздин аудиторияңыз жасайт. Улуу веб-иштеп чыгуучулар колдонгон стратегия - бардык сүрөттөрдү бир файлга топтоо ... а деп аталат Sprite. Файлдарыңыздын ар бир сүрөтүнө сурамак турсун, эми бир гана спрайт сүрөтү үчүн бир гана суроо болушу керек!

Жөнүндө окуй аласыз CSS Sprites CSS-Tricks программасында кандай иштейт or Smashing Magazine журналынын CSS Sprite пост. Менин айтайын дегеним, аларды кантип колдонууну көрсөтүү эмес, жөн гана өнүгүү тобуңуздун сайтка киргизүүсүн камсыздоо үчүн кеңеш берүү. CSS Tricks көрсөткөн мисал 10 суроону жана 10 Кб чейин кошкон 20.5 сүрөттү көрсөтөт. Бир спрайтка чогулганда, ал 1 суроо 13kb! Азыр 9 сүрөт үчүн эки тараптуу сапардын өтүнүчү жана жооп берүү убактысы жок болуп, маалыматтын көлөмү 30% дан ашыкка кыскарды. Аны сайтка киргендердин санына көбөйтсөңүз, анда бир аз ресурстарды кырып саласыз!

globalnavThe алма навигация тилкеси сонун мисал болуп саналат. Ар бир баскычтын бир нече абалы бар ... сиз беттегиңизби, барактан тышкарысызбы же баскычты тышка чыгарып жатасызбы. CSS баскычтын координаттарын аныктайт жана колдонуучулар браузерине туура абалдагы аймакты сунуштайт. Бул мамлекеттердин бардыгы бир графикада чогулуп, бирок стилдер баракчасында көрсөтүлгөн аймактар ​​боюнча көрсөтүлөт.

Эгерде сиздин иштеп чыгуучулар куралдарды жакшы көрүшсө, анда аларга жардам бере турган бир тонна бар, анын ичинде Компас CSS алкагы, RequestReduce ASP.NET үчүн, CSS-Spriter Ruby үчүн, CSSSprite скрипти Photoshop үчүн, SpritePad, SpriteRight, SpriteCow, ZeroSprites, Project Fondueдин CSS Sprite Generator, Sprite Master Web, жана SpriteMe Bookmarklet.

скриншоту Sprite Master Web:
spritemaster веб

Martech Zone фондук сүрөттөрдү өзүнүн темасы боюнча колдонбойт, андыктан учурда бул техниканы колдонбошубуз керек.

2 Comments

  1. 1

    Күтө туруңуз… бүтүндөй коллекция “сүрөт” (же “учак”) жана ар бир суб-сүрөт (же анимацияланган же интерактивдүү түрдө өзгөрүп турган сүрөттөрдүн суб-топу) “спрайт” эмеспи?

    Балким, мен акыркы жолу ушундай нерсени колго алгандан бери нерселердин атын өзгөртүп коюшкандыр, бирок мен ант бере алмакмын, Sprite ал алынган чоң маалымат таблицасы эмес, көрсөтүлө баштаган элемент.

    («Спрайт стол»... ал эмес беле?)

    • 2

      Биз эки башка нерсени сүйлөшүп жаткандырбыз, Марк. CSS менен, сиз негизинен координаттарды колдонуу менен сүрөт файлынын кайсы "бөлүгүн" көрсөтүүнү белгилей аласыз. Бул сизге бардык сүрөттөрүңүздү бир "спрайтка" салып, андан кийин CSS менен көргөзгүңүз келген аймакты көрсөтүүгө мүмкүндүк берет.

Эмне деп ойлойсуң?

Бул сайт спам азайтуу Akismet колдонот. Сиздин комментарий маалымат кандайча иштелишин Үйрөнүү.