Sprite/PNG موقع مليء بالرسومات، يا إلهي!
https://stackoverflow.com/questions/1163187
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
أحتاج إلى إنشاء موقع مثقل بالرسومات (خلفيات ورقية ممزقة مع ظلال شفافة فوق رسومات مزخرفة، وما إلى ذلك). إحدى الطرق التي كنت أفكر بها في حفظ حجم الملف هي إسقاط جميع عناصر الخلفية في ملف PNG واحد.المشكلة هي أن هذا الملف أصبح الآن 180 كيلو بايت.إذا قمت بتقسيمها إلى صور GIF مختلفة وبعض صور PNG، فسيكون أقرب إلى 70 كيلو بايت.
هل هو مهم حقا؟ما هو "الكبير جدًا" هذه الأيام بالنسبة لحجم الملف؟هل سيلاحظ أحد إذا كان الملف 180 أو 70 كيلو؟
المحلول
إذا كان لدى المستخدمين الوصول السريع إلى موقعك (مثل، في إنترانت)، فإن 180K بالكاد مشكلة. إذا كان ذلك، من ناحية أخرى، يتم استخدام الموقع من قبل الشخص الأكبر سنا ذو اتصال بطيء من الدقابة، فمن المحتمل أن تكون مشكلة. إذا استخدم المستخدمون GPRS، ولكن لديهم صبر لا نهاية له، فمن المحتمل ألا يكون الأمر مشكلة. إذا أعطى الموقع مليون دولار إلى كل من لديه الصبر لانتظار وقت الحمل، فإن سرعات النقل ليست مشكلة. وما إلى ذلك وهلم جرا.
ما أقوله، فإنه يعتمد حقا على الاحتياجات الخاصة بك ويقيد. هذا يتطلب منك أن تعرف (وأخبرنا لاحقا، بالنسبة لنا أن نكون أكثر فائدة) أشياء كثيرة قبل أن تتمكن من الحصول عليها بالقرب من اليمين.
لتجنب هؤلاء الألغفات المزعجة الإجابات الصالحة الصالحة بالحصول - ولكن ببساطة - غير من فضلك، إليك إجابتي:
180k مقسوما على معدل نقل مودم ADSL القياسي = 180KB / 100KB / S = 1.8S = قابلية الاستخدام.
نصائح أخرى
هل هناك سبب ليس لاستخدام الصور الأصغر؟ يبدو أنك قد كسرت بالفعل، فلماذا لا تذهب مع الأسلوب الأصغر، أسرع؟
من وجهة نظر النسبية النقية، سيستغرق 70k 38٪ فقط من وقت التنزيل الذي سيعقد 180k (تقريبا). إذا كنت تتوقع حركة مرور عالية أو نريد أوقات الحمل السريع، فإن كل بت يساعد.
عليك أن تقارن الوقت الذي يستغرقه طلب جميع الصور المنفصلة والوقت الذي يستغرقه تنزيله واحد كبير. المشكلة هي مع طلبات HTTP.
أقترح عليك تشغيل بعض الاختبارات مع امتداد Google Firefox، pagespeed. لمعرفة ما إذا كان هناك فرق كبير بين PNG الكبيرة أو تلك المنفصلة.
فائدة واحدة يمكنني التفكير فيها، إلى جانب طلبات HTTP أقل هو أن موقعك سيقوم بتحميل كل مرة واحدة بدلا من تدريجيا حيث يتم تنزيل جميع الرسومات. ومع ذلك، فإن الخط القول، كما قال هنريك هو أنه يعتمد على الاحتياجات الخاصة بك.
أنا متأكد من أنك تدرك أن الانقسام في صور متعددة يعني اتصالات إضافية بالخادم لاستردادها، مع تأخر مرتبط بكل منها، والحجم الإضافي لرؤوس الطلب والاستجابة.
نظرا لأن المتصفحات تقيد عدد الاتصالات النشطة بكل خادم (تعتمد إصدار المتصفح)، فقد ينتهي هذا الأمر إلى تناول وقتا أطول من استرداد صورة واحدة. الحل المعتاد لرفع الحد الأقصى هو استخدام خادم "صور" منفصل، أو اسم مستعار DNS الذي يمثل خرائط نفس المضيف.
وما لم تطلب الرسوم المتحركة، أود أن أوصي دائما بابوا نيو غينيا على GIF.
تأكد من أن الموقع يبدو جيدًا مع تعطيل الصور أولاً (لذا يتم تعيين العلامات البديلة والعرض والارتفاعات واستخدام الألوان الصحيحة) ثم قم بتقسيم الصور بناءً على مجموعات.قم بتجميع كافة الأزرار الخاصة بك في صورة واحدة إن أمكن (باستخدام أوراق الرسوم المتحركة CSS)، وجميع الحدود في صورة أخرى.احتفظ بالصور الكبيرة في ملفات منفصلة (مثل خلفية الموقع والعناوين).
كلما زاد عدد الصور التي لديك، زادت قدرة المتصفح على موازنة الطلبات.ومع ذلك، إذا قمت بتقسيمها كثيرًا، فسيتم تحميل صور مختلفة في أوقات مختلفة، مما يؤدي إلى ظهور أجزاء من الموقع.إنها مقايضة قليلاً، ولكن هذه هي متعة البرمجة :)
كلما كان مظهر موقعك أفضل قبل ظهور الصور، قل اهتمام المستخدم بسرعة تنزيل الصور.
