النص الأصلي: CSS Sprite: هل يجب أن تفعل أم لا؟
مترجم من: إلى العفريت أو لا إلى العفريت
إخلاء المسؤولية: إن CSS Sprites المشار إليها في هذه المقالة هي CSS Sprites ، ولم يكن لهذه العبارة ترجمة صينية تقليدية أو ثابتة مطلقًا، وقد بدأ البعض يطلق عليها اسم CSS Sprites، فلنتعامل معها على أنها محاولة. سوف نستمر في القيام بذلك في المستقبل، وسوف نستمر في أن يطلق علينا اسم CSS Sprites. —— شينفي ( صوتي )
لقد كان CSS Sprite موجودًا منذ فترة وقد ظهر كوسيلة لجعل موقع الويب الخاص بك أسرع. قدم Steve Souders للتو SpriteMe! في Velocity '09 (مناقشة - لماذا تستخدم CSS Sprite Generator أو أي أداة أخرى تعتمد على الخادم عندما يمكنك استخدام Canvas وtoDataURL وإنشاء النقوش المتحركة بسرعة؟). ومع ذلك، هناك بعض المفاهيم الخاطئة حول كائنات CSS، أهمها أنها لا تحتوي على أي عيوب.
المبدأ الأساسي لـ CSS Sprite هو دمج بعض الصور المستخدمة على موقع الويب الخاص بك في صورة واحدة، وبالتالي تقليل عدد طلبات HTTP لموقع الويب الخاص بك. يتم عرض الصورة باستخدام خلفية CSS وخصائص موضع الخلفية (من الجدير بالذكر أن هذا يعني أيضًا أن علاماتك تصبح أكثر تعقيدًا، ويتم تعريف الصورة في CSS، وليس في علامة <img>).
أكبر مشكلة في CSS Sprite هي استخدام الذاكرة. ما لم يتم تنظيم صورة الكائنات بعناية شديدة، فسوف ينتهي بك الأمر مع الكثير من المساحات البيضاء غير المفيدة. المثال المفضل لدي هو من موقع ويب WHIT TV، حيث يتم استخدام هذه الصورة ككائن. لاحظ أن هذه صورة PNG بحجم 1299 × 15000 بكسل. كما أنه مضغوط بشكل جيد جدًا - يبلغ حجم التنزيل الفعلي حوالي 26 كيلو بايت فقط - لكن المتصفح لا يعرض بيانات الصورة المضغوطة. عند تنزيل هذه الصورة وفك ضغطها، ستشغل حوالي 75 ميجابايت من الذاكرة (1299 * 15000 * 4). إذا كانت هذه الصورة لا تستخدم شفافية ألفا، فسيتم تحسينها إلى 1299 * 15000 * 3، ولكن على حساب سرعة العرض. وحتى ذلك الحين، نحن نتحدث عن 55 ميغابايت. معظم هذه الصورة فارغة في الواقع، ولا يوجد فيها شيء، ولا يوجد محتوى مفيد. سيؤدي مجرد تحميل الصفحة الرئيسية لـ WHIT إلى زيادة استخدام ذاكرة المتصفح الخاص بك إلى ما لا يقل عن 75+ ميجابايت، فقط بسبب تلك الصورة الواحدة. ( ملاحظة: للأسف، تمت مراجعة الموقع مؤخرًا ولم تعد الصور المذكورة في المقال موجودة )
المقايضة الصحيحة لصالح موقع على شبكة الإنترنت غير موجودة.
هناك عيب آخر (على الرغم من أنه ليس بنفس الأهمية) وهو أنه إذا تم تغيير حجم الصفحة التي تستخدم CSS Sprite باستخدام وظيفة التكبير/التصغير لكامل الصفحة التي توفرها بعض المتصفحات، فسيحتاج المتصفح إلى القيام ببعض العمل الإضافي لتصحيح سلوك حواف الصورة هذه - بشكل أساسي ، وذلك لمنع "كشف" الصور المجاورة في Sprite. لا يمثل ذلك مشكلة بالنسبة للصور الصغيرة، ولكنه سيكون بمثابة أداء رائع للصور الكبيرة.
هناك بالتأكيد بعض الأمثلة التي توضح الفوائد الواضحة لرسومات CSS المتحركة، وأهمها دمج مجموعة من الصور بنفس الحجم في ملف واحد. على سبيل المثال، سلسلة من الرموز مقاس 16×16 تُستخدم لتحديد العديد من الأشياء على موقعك، أو عدد قليل من الرموز مقاس 32×32 تُستخدم كرؤوس فئات أو شيء من هذا القبيل. لكن ليس من الجيد أبدًا دمج الصور ذات الأحجام المختلفة بشدة، خاصة الصورة الطويلة والرفيعة بجوار الصورة العريضة والقصيرة.
ومع ذلك، يعمل CSS Sprite على تحسين أوقات تحميل الصفحة (على الأقل عند التحميل الأولي للصفحة - عند التحميلات اللاحقة للصفحة، يقوم المتصفح بتخزين الصورة مؤقتًا). هل هناك أي شيء يمكن استبداله؟ لسوء الحظ، لا يوجد بديل حتى الآن. بدأت العديد من المتصفحات في دعم البيانات غير المتصلة بالإنترنت، وقد يكون من الممكن توسيع هذا للسماح بتنزيل ملف (مثل ملف jar/zip) يحتوي على قائمة بالموارد وعناوين URL المقابلة. ولكن لن يتم رؤية أي نهج من هذا القبيل لبعض الوقت ...
لذا، عند تحديد ما إذا كنت تريد استخدام CSS Sprite أم لا، يجب أن تدرك أن هناك العديد من العوامل التي تتجاوز أداء التحميل الأولي للصفحة. كقاعدة عامة، إذا كان جزء كبير من كائن CSS الخاص بك لا يحتوي على محتوى صورة فعلي، فيجب عليك تجنب استخدامه وفقًا لذلك. وبالمثل، راقب المشكلات المستقبلية المحتملة مع الحفاظ على سرعات تحميل الصفحة مع الحرص على تجنب أخطاء الذاكرة وتأثيرات أداء Sprite.
عيوب CSS Sprite الأخرى
فيما يلي بعض عيوب CSS Sprite التي ذكرها بعض مستخدمي الإنترنت في تعليقات هذه المقالة:
إذا وجدت أي عيوب في CSS Sprites الأخرى أثناء الاستخدام، فلا تتردد في ذكرها.