CSS Sprite چیست؟ چه کارایی دارد؟ و چگونه انجام دهیم؟
آیا با معنی CSS Sprite شناخت دارید؟ نام آن می تواند تا حدی فریبنده باشد، احتمالا تا به امروز با دکمه هایی که وضعیت پرنور و بدون صدا آنها در یک تصویر قرار گرفته اند عکس العمل داشته اید که با تغییر تحول جای تصویر موضوع حالات مختلفی را نشانه میدهند.
مثال-ای از CSS Sprite
به کار گیری از این تکنیک را CSS Sprite مینامیم با این تفاوت که بجای قرار به دست آوردن دو عکس میتوانید تعداد نامحدودی عکس و آیکون را در یک تصویر بگنجانید. CSS Sprite نخستین دفعه سئو در مشهد در بازی های کامپیوتری بکار دریافت شد که در آن با بار گذاری کردن یک تصویر و نماد دادن بخشهای متعدد آن در هر لحظه سرعت پردازش را تا حد متعددی در مقایسه با بارگزاری تعدادی عکس ارتقا میداد.
چرا بایستی به وسیله CSS Sprite این تمامی عکس را یکی از کنیم؟ آیا بارگذاری شدن تصاویر کوچکتر سرعت را ارتقاء نمیدهد؟
شما با به کارگیری از تکنیک CSS Sprite می توانید سرعت تارنما خویش را تا حد متعددی ارتقا دهید. تا همین تعدادی وقت پیش همگی طراحان وبسایت عکس ها را به تصاویر کوچکتر تقسیم میکردند تا صفحه ها سریعتر بارگزاری شوند اما این تکنیک با فریب دیده بشر و آرم دادن تصاویر در هر کناره از شیت این احساس را میدهد که سرعت بارگزاری ارتقا یافته میباشد البته در واقع هر کدام از این تصاویر یک فراخوان از HTTP را بهمراه دارااست و بازدهی ورقه شمارا به شدت کاهش میدهد.
پژوهش وب سایت های سرشناس آرم میدهد که صرفا 5 تا 38 درصد از فرصت بار گذاری شدن صفحه های آن ها صرف دانلود HTML گردیده و سایر 62 تا 95 درصد صرف فراخوان HTTP و تنظیمات مطالب می گردد (تصاویر، اسکریپت و استایل) با اعتنا به اینکه مرورگرها فی مابین 2 تا 4 فراخوان بطور هم زمان اجرا می دهند تجارب نشانه داده میباشد که با ارتقاء تعداد فراخوان ها سرعت بارگزاری وبسایت به شدت کاهش مییابد.
[ چهارشنبه 15 فروردين 1403 ] 13:00 ] [ محمد صادقی ]
[ ]