الخطوط العريضة

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

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

مقدمة موجزة

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

مبدأ

CSS العفاريت في الواقع، وعدد الصفحات في صورة الخلفية دمجها في ملف صورة، ومن ثم استخدام CSS "خلفية صورة"، "تكرار background-"، "خلفية موقف" مجموعة من المواقع الخلفية، خلفية موقف يمكن استخدام تحديد المواقع بدقة الرقمي للموقف صورة الخلفية.

CSS العفاريت مثال صغير

home.html

< ! DOCTYPE HTML > < أتش تي أم أل > < رئيس >

  < الفوقية HTTP-EQUIV = "نوع المحتوى" محتوى = "نص / هتم". محارف = "UTF-8" / >

  < لقب > CSS العفاريت مثال صغير < / عنوان >

  < نوع النمط = "نص / المغلق" >

 * {الهامش: 0px؛ الحشو: 0px؛}

 #mainbody {

الموقف: النسبية.

العرض: 100px؛

الطول: 150px؛

الحدود: الصلبة 2px # FFF.

الحشو: 2px؛

 }

 المجاهدين {

على غرار القائمة: لا شيء؛

 }

 لى {

عرض: كتلة.

الطول: 25px؛

خط الطول: 25px؛

تجاوز: مخفي.

هامش: 5px؛

الحدود القاع: #dedede الصلبة 3PX

 }

 H3 {

الخط الوزن: 100.

حجم الخط: 14px؛

النص في الهامش: 10px؛

 }

 لى ط {

خلفية: رابط (test.png) عدم تكرار.

عرض: المضمنة.

العرض: 25px؛

الطول: 25px؛

تعويم: غادر؛

 }

 .sp-1 ط {

خلفية موقف: 0px0px.

 }

 .sp-2 ط {

خلفية موقف: -26px0px.

 }

 .sp 3 ط {

خلفية موقف: -26px -27px.

 }

 .sp-4 ط {

خلفية موقف: 0px -27px.

 }

< / النمط >

< / رئيس >

< هيئة >

< شعبة معرف = "وسم الهيئة الأساسية" >

  < المجاهدين >

  < الطبقة لى = "SP-1" >

  < أنا > < / I >  

  < H3 > منزل < / H3 >

  < / لي >

  < الطبقة لى = "SP-2" >

  < أنا > < / I >  

  < H3 > الفضاء < / H3 >

  < / لي >

  < الطبقة لى = "س 3" >

  < أنا > < / I >  

  < H3 > شبكة < / H3 >

  < / لي >

  < الطبقة لى = "س 4" >

  < أنا > < / I >  

  < H3 > آخر < / H3 >

  < / لي >

  < / UL >

< / شعبة >

< / الهيئة >

< / الاكواد >

test.png

نتائج مظاهرة

ميزة CSS العفاريت

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

2.CSS العفاريت يمكن أن تقلل من بايت من الصورة، ومقارنة مرارا الصور الثلاث إلى بايت صورة واحدة هو دائما أقل من مجموع هذه بايت ثلاثة من الصورة.

3. حل المشاكل على مصمم على شبكة الإنترنت في صورة التسمية، مجرد مجموعة من الصور اسم آخر على ذلك، لا تحتاج إلى الكشف عن اسمه لكل عنصر قليلا، وبالتالي تحسين الكفاءة الإنتاجية للصفحة على شبكة الإنترنت.

4. استبدال أسلوب سهل، فقط تغيير لون أو نمط من الصورة أو أقل على الصورة، ونمط الصفحة بأكملها يمكن أن تتغير. صيانة أكثر ملاءمة.

أوجه القصور CSS العفاريت

في الواقع CSS العفاريت هي قوية جدا، ولكن هناك بعض أوجه القصور لا يمكن تجاهلها، على النحو التالي:

1. في الصورة، وعند الجمع، صور متعددة تريد منظم ومعقول دمجها في صورة واحدة، ولكن أيضا للبقاء الفضاء جيدا بما فيه الكفاية لمنع يظهر الخلفية غير الضرورية في القطاع، وهذه في ولحسن الحظ، فإن معظم مؤلم عريضة، وارتفاع القرار الصفحات التكيف تحت الشاشة، إذا الصورة ليست واسعة بما يكفي، بل هو عرضة للكسر الخلفية.

2.CSS العفاريت أكثر صعوبة في أثناء التطور، لديك لحساب الموقع الدقيق لكل وحدة من قبل فوتوشوب خلفية أو أداة قياس أخرى، وهي الإبرة، أي صعوبة، لكنه مرهق؛ تينسنت لحسن الحظ الأخ شبح المتقدمة مع ADOBE AIR أسلوب CSS العفاريت أداة الجيل، على الرغم من أنه لا يزال هناك بعض المرونة في الاستخدام، ولكن قد حان أكثر ملاءمة بكثير من قياس فوتوشوب، وأساليب توليد مباشرة، تكرار، فإنه OK نسخة!

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

4.CSS العفاريت تستحق التعلم والتطبيق، في صفحة معينة لديه مجموعة من رمز (رمز). في مرات عديدة قصيرة علينا الموازنة بين الايجابيات والسلبيات، ومن ثم تقرر ما إذا كان استخدام CSS العفاريت.

أكثر إثارة المحتوى يرجى الانتباه إلى "IT تحالف مكافحة" أوه ~ ~ ~ ~