سؤال

ونحن نعلم جميعا أن الصور CSS العفريت كبيرة لتقليل كمية من طلبات وكذا، ولكن ماذا عن أداء المتصفح عرض الصفحة مع العديد من العناصر باستخدام صورة كبيرة كخلفية؟

هل كانت مفيدة؟

المحلول

وعلى أجهزة أبطأ مجهزة المتصفحات القديمة (مثل IE6 / IE7) يمكن لاحظت انخفاض أداء هامة عندما كنت تستخدم الصور الكبيرة جدا عدة مرات في صفحة واحدة. انها أكثر حدة، عندما كنت تستخدم العفاريت ل: تحوم الدول

لديك الى معتدلة إغراء الخاص نحو دفع كل ما تبذلونه من العفاريت لصورة واحدة كبيرة - التفكير في العناصر التي هي جزء من الموقع / UI تطبيق الويب ووضعها في ملف والعفريت واحد (تلك سيتم عرض كل وقت، أثناء التصفح) . ثم حاول بقية مجموعة من العفاريت في موقع الصور قسم محددة، واستخدامها حسب الحاجة. الجانب السلبي ويمتد قليلا وقت التحميل (طلبات HTTP إضافية)، ولكن تجربة المستخدم أثناء عرض / صفحة التمرير سوف يكون أعلى من ذلك بكثير.

نصائح أخرى

وتحتاج إلى تحقيق التوازن بين الأشياء. إذا كنت تتحدث عن الصورة التي سوف تشمل أقول 1000 العفاريت ثم CSS سوف تكون ضخمة. وبالإضافة إلى ذلك هناك فرصة ضعيفة للغاية أن عليك أن تستخدم كل تلك العفاريت في نفس الصفحة على أي حال.

وكما يمكننا أن نحكم من التجربة يوتيوب لدينا، لا توجد مشكلة كبيرة في ذلك.

ونأمل، ومتصفح بتخزين صورة في الذاكرة ثم يستخدم لتقديم إخراج حيثما تكون هناك حاجة هذه الصورة.

ويمكنك حفظ كمية كبيرة من طلبات HTTP عن طريق دمج الصور الخاصة بك في واحدة أو أكثر المركبة العفاريت واستخدام CSS لعرضه بشكل انتقائي أجزاء من شبح داخل صفحة الويب الخاصة بك. والآن بعد أن المتصفحات الرئيسية تطورت بما يكفي لدعم الخلفيات CSS وتحديد المواقع، والمزيد من المواقع التي تتبنى هذه التقنية الأداء. في الواقع، بعض من أكثر المطارات ازدحاما المواقع على العفاريت استخدام الويب CSS لإنقاذ طلبات HTTP.

ومع الملايين من المستخدمين، وياهو! وAOL تفعل كل ما في وسعها لتحسين تجربة المستخدم. كلا AOL.com وYahoo.com استخدام العفاريت CSS لإنقاذ العديد من طلبات HTTP للالواجهات الخاصة المعقدة. كلا الموقعين تستخدم العفاريت CSS لعرضه بشكل انتقائي الرموز داخل الدلائل خدماتها، وياهو! يستخدم العفاريت في أماكن أخرى أيضا.

وفائدة أخرى من العفاريت CSS هي أن صورة مجتمعة في كثير من الأحيان أصغر في حجم ملف من الصور الفردية، على الرغم مضيفا المسافات بين الصور. حجم أصغر من العفاريت ويرجع ذلك إلى خفض النفقات العامة من الجداول متعددة الألوان ومعلومات التنسيق المطلوب من قبل صور منفصلة. لتعظيم فرص الوصول والاستخدام، واستخدام أفضل العفاريت CSS للرموز أو تأثيرات زخرفية.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top