Արագացնել ձեր կայքը CSS Sprites- ով

spritemaster վեբ

Ես էջում բավականին արագ եմ գրում էջի արագության մասին, և դա վերլուծության և բարելավման կարևոր մասն է, որը մենք կատարում ենք մեր հաճախորդների կայքերում: Բացի հզոր սերվերներ անցնելուց և նման գործիքների օգտագործումից Բովանդակության առաքման ցանցեր, կան մի շարք այլ ծրագրավորման մեթոդներ, որոնց միջին վեբ մշակողը կարող է օգտագործել:

Կասկադ ոճի բնօրինակ թերթի ստանդարտը այժմ արդեն 15 տարեկանից բարձր է: CSS- ը կարևոր էվոլյուցիա էր վեբ զարգացման մեջ, քանի որ այն առանձնացնում էր բովանդակությունը դիզայնից: Նայեք այս բլոգին և ցանկացած այլ, և ոճային տարբերության մեծ մասը պարզապես կցված ոճաթերթում է: Ոճի թերթերը նույնպես կարևոր են, քանի որ դրանք տեղայնացված են ձեր զննարկչի քեշի մեջ: Արդյունքում, քանի որ մարդիկ շարունակում են այցելել ձեր կայք, նրանք ամեն անգամ ոճի թերթ չեն ներբեռնում… պարզապես էջի բովանդակությունը:

CSS- ի հաճախակի չօգտագործվող տարրերից մեկը CSS Sprites, Երբ օգտվողը այցելում է ձեր կայք, դուք կարող եք չգիտակցել, որ նրանք պարզապես մեկ հարցում չեն անում էջի համար: Նրանք կատարել բազմաթիվ խնդրանքներ… Էջի, ցանկացած ոճի թերթերի, կցված JavaScript ֆայլերի և յուրաքանչյուր պատկերի խնդրանք: Եթե ​​ունեք թեմա, որն ունի մի շարք պատկերներ սահմանների, նավիգացիոն ձևերի, ֆոնների, կոճակների և այլնի համար, զննարկիչը պետք է յուրաքանչյուրը մեկ առ մեկ պահանջի ձեր վեբ սերվերից: Բազմապատկեք դա հազարավոր այցելուներով և դա կարող է լինել տասնյակ հազարավոր հայցեր ձեր սերվերին:

Սա, իր հերթին, դանդաղեցնում է ձեր կայքը: Ա դանդաղ կայքը կարող է կտրուկ ազդեցություն ունենալ ներգրավվածության և փոխակերպումների վրա որ ձեր հանդիսատեսն է պատրաստում: Ռազմավարություն, որն օգտագործում են մեծ վեբ մշակողները, բոլոր պատկերները մեկ ֆայլի մեջ դնելն է, որը կոչվում է a ուրվական, Փոխանակ ձեր ֆայլի յուրաքանչյուր պատկերի վերաբերյալ հարցում կատարելու փոխարեն, այժմ անհրաժեշտ է միայն մեկ խնդրանք ունենալ մեկ սփրիտի պատկերի համար:

Դուք կարող եք կարդալ այն ինչպես են աշխատում CSS Sprites- ը CSS-Tricks- ում or Smashing Magazine- ի CSS Sprite- ը գրառում Իմ նպատակն այն չէ, որ ձեզ ցույց տամ, թե ինչպես դրանք օգտագործել, պարզապես խորհուրդ տալ ձեզ ապահովել, որ ձեր զարգացման թիմը դրանք ներառի կայքի մեջ: Այն օրինակը, որը տրամադրում է CSS հնարքները, ցույց է տալիս 10 պատկեր, որոնք 10 հարցում են և ավելացնում են մինչև 20.5 Կբ: Երբ հավաքվում են մեկ սփրիտի մեջ, դա է 1 խնդրանք, որը 13 կիլոգրամ է! 9 պատկերների համար կատարված երկկողմանի հարցման և պատասխանման ժամանակներն այժմ ավարտվել են, և տվյալների քանակը կրճատվում է ավելի քան 30% -ով: Բազմապատկեք դա ձեր կայքի այցելուների քանակով և դուք իսկապես կսափրեք որոշ ռեսուրսներ:

գլոբալնավThe խնձոր նավիգացիոն սանդղակը հիանալի օրինակ է: Յուրաքանչյուր կոճակ ունի մի քանի վիճակ… անկախ նրանից `դուք էջում եք, էջից դուրս կամ կոճակի վրայից մուս: CSS- ը սահմանում է կոճակի կոորդինատները և օգտվողների զննարկչին ներկայացնում ճիշտ վիճակի շրջանը: Այս բոլոր վիճակները միասին փլուզված են մեկ գրաֆիկով, բայց ցուցադրվում են մարզ առ մարզ, ինչպես նշված է ոճաթերթում:

Եթե ​​ձեր ծրագրավորողները սիրում են գործիքներ, այնտեղ մի տոննա կա, որը կարող է օգնել նրանց, այդ թվում նաև ՝ Կողմնացույց CSS շրջանակ, Հարցում նվազեցնել ASP.NET- ի համար, CSS-Spriter Ռուբիի համար, CSSSprite սցենար Photoshop- ի համար, SpritePad, SpriteRight, SpriteCow, ZeroSprites- ը, Project Fondue- ի CSS Sprite գեներատոր, Sprite Master ոստայնԵւ SpriteMe Էջանիշ:

Screenshot of Sprite Master ոստայն:
spritemaster վեբ

Martech Zone չի օգտագործում ֆոնային պատկերներ իր ամբողջ թեմայի շուրջ, ուստի այս պահին մենք ստիպված չենք լինի տեղակայել այս տեխնիկան:

2 Comments

  1. 1

    Սպասեք ... մի՞թե ամբողջ հավաքածուն «պատկեր» (կամ «ինքնաթիռ») չէ, և յուրաքանչյուր ենթապատկեր (կամ պատկերների ենթախումբ անիմացիոն կամ ինտերակտիվ փոփոխվողների դեպքում) «սպիրտ» չէ՞:

    Գուցե իրերը վերանվանվել են անցյալ անգամ, երբ ես զբաղվել եմ այսպիսի բանով, բայց ես կարող էի երդվել, որ Sprite- ը այն տարրն էր, որն ավարտվեց ցուցադրվելով, այլ ոչ թե այն տվյալների մեծ աղյուսակից, որտեղից քաշվել էր:

    («Sprite սեղան»… այդպես չէ՞)

    • 2

      Գուցե մենք խոսում ենք երկու տարբեր բաների մասին, Մարկ: CSS- ի միջոցով դուք կարող եք ըստ էության ճշգրտել, թե կոորդինատներն օգտագործելով պատկերային ֆայլի որ «մասն» է ցուցադրվում: Սա թույլ է տալիս տեղադրել ձեր բոլոր պատկերները մեկ «սպրիտի» մեջ և այնուհետև պարզապես ցույց տալ այն տարածքը, որը ցանկանում եք ցուցադրել CSS- ով:

Ինչ եք կարծում?

Այս կայքը օգտագործում է Akismet- ը սպամի նվազեցման համար: Իմացեք, թե ինչպես է ձեր տվյալները մշակվում.