في هذه الصفحة
تأثير CSS Sprites على سرعة تحميل الموقع و استهلاكه للـ memory
في البداية محتاجين نعرف ايه هي المشكلة اللى ال CSS Sprites بتحلها ، بعد كدا نتعرف على ال CSS Sprites و نشوف ازاى قدرت تحل المشكلة دى
لنفرض إن احنا عندنا صفحة معينة بتتطلب عدد كبير من الايقونات او الصور عشان تعرض المحتوى بتاعها بشكل سليم ، هنلاحظ إن الصفحة دى بتبعت request إلى السيرفر لكل صورة محتاجاها بالتالي لو محتاجة 5 صور ، هنتوقع منها انها بتبعت 5 requests في نفس الوقت بالتالي بتستهلك سعة كبيرة من ال memory الخاصة بالجهاز ، ف هنلاحظ إن الموقع تقيل و بيهنج لغاية ما كل ال requests تتم بنجاح
بالتالي الأمر في نظرنا حتى الآن هو استهلاك كبير للـ memory فقط ، و لكن الأمر أسوأ من كدا ، لأن المتصفحات بيكون ليها عدد معين لا يمكن تجاوزه من الـ requests اللى بيتم العمل عليها في نفس الوقت ، ف مثلا لو الـ user بيستخدم متصفح اخره يتعامل مع 3 requests في نفس الوقت ، هنلاقى إن في 2 من الصور منتظرين اى request حالي يخلص عشان نبدء نجيب أحدهم من الـ server ثم الصورة التانية لما request تاني يخلص ، بالتالي مبقتش مسألة memory فقط و لكن وقت كمان
الرسم التالي بيوضح الكلام السابق ، لاحظ اننا بعتنا 3 requests متتالية و بعدها انتظرنا انتهاء اى request منهم عشان نبدء واحد غيره
طيب ازاى نقدر نحل المشكلة دى ؟
الحل بسيط جدا ، و هو اننا نجمع الصور كلها بداخل صورة واحدة ، و بواسطة ال CSS و بالأخص ال background-position property نقدر نستخدم كل صورة منهم تبعا لل position بتاعها بداخل الصورة المدمجة أو ال CSS Sprite اللى هنعملها
بالتالي كلمة CSS Sprites مقصود بيها انك تجمع عدة صور بداخل صورة واحدة و تستخدم كل صورة منهم عن طريق ال position فمثلا لو عندنا 5 صور منفصلة بالشكل دا
نقدر نجمعهم بداخل صورة واحدة بالشكل دا
تقدر تعملهم بشكل يدوي بنفسك أو بواسطة اى أداة CSS Sprites Generator كالأداة التالية مثلا
بمجرد الدخول على الرابط ، هيظهر امامك الشكل التالي
أضغط على CHOOSE FILES و اختر الصور اللى محتاج تجمعهم سوا بداخل صورة واحدة ، و تلقائيا هتلاقى الصورة اتعملت و كمان معاك اكواد CSS المناسبة لاستخدام كل صورة بداخل الصورة المجمعة
تقدر تحمل الصورة عن طريق الضغط على DOWNLOAD و تستخدم اكواد ال CSS المعروضة أمامك
و بكدا نكون وصلنا إلى الرسم التالي
هنلاحظ إن في request واحد فقط بيتم ارساله عشان نجيب صورة واحدة مجمعة لكل الصور ، بالتالي استهلاك أقل لل memory و سرعة أكبر اثناء فتح الموقع
