سؤال

وهذا هو عموما كيف أدير التحسين التدريجي في حين تبقي تجربة نظيفة، ولكن كيف هي آمنة؟ هناك احتمال حدوث حالة سباق وهذا لا يعمل؟

وتخيل سيناريو مجردة بسيطة، وكنت ترغب في عرض شيء بشكل مختلف إذا كان لديك دعم جافا سكريبت .. هذا هو عموما ما سوف ينتهي به:

<div id="test">original</div>
<script type="text/javascript">
    var t = document.getElementById('test');
    t.innerHTML = 'changed';
</script>

وكثيرون قد المطالبة يجب عليك استخدام إطار والانتظار لحدث domready، والقيام التغييرات هناك .. ولكن هناك تأخير كبير حيث سبق أن أصدرت 'اختبار' عنصر قبل نهاية الوثيقة والمغلق ومشغلات جاهزة وdomready .. مما تسبب في وميض ملحوظ من "الأصلي".

هل هذا الرمز عرضة للسباق فشل الشرط؟ أو يمكن أن guarentee أن عنصر غير قابل للاكتشاف وللتعديل إذا كان موجودا قبل النص؟

وشكرا مقدما.

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

المحلول

ويمكنك، ولكن هناك قضايا المحيطة القيام بذلك.

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

في المتصفحات الأخرى غير معرفة السلوك، إلا أنها لا تتصرف عادة كما كنت تتوقع. القضية الرئيسية هي أن تتطور صفحتك، الصفحة قد تحميل / تحليل / تشغيل مختلف. قد يسبب هذا بعض النصي لتشغيل قبل وتعرف وبالفعل تم إنشاء متصفح العناصر المشار إليها وإتاحتها للتلاعب DOM.

إذا كنت تحاول تعزيز ينظر أداء المستخدم الخاص بك (أي snappiness). أقترح بشدة أن تجنب هذا الطريق والنظر في تخفيف صفحاتك. يمكنك استخدام الحرائق الصفحة الأداء ياهو YSlow / جوجل لمساعدتك على البدء.

جوجل الصفحة سرعة

YSlow ياهو

نصائح أخرى

ويمكنك التلاعب DOM قبل أن محملة بالكامل، ولكن يمكن أن تكون محفوفة بالمخاطر. من الواضح أنك لا تستطيع أن تضمن أن قليلا من DOM تحاول التلاعب موجود بالفعل حتى الآن، لذلك قد تفشل التعليمات البرمجية بشكل متقطع.

وطالما كنت فقط تعديل العقد الذي ضع قبل كتلة النصي (أي علامة إغلاق العقدة preceeds علامة فتح في البرنامج النصي)، يجب أن لا تواجه أي مشاكل.

إذا كنت ترغب في التأكد من نجاح العملية، والتفاف التعليمات البرمجية في كتلة try...catch والذي يطلق عليه مرة أخرى عبر setTimeout() على الفشل.

في Viajeros.com لدي مؤشر التحميل تعمل منذ 8-9 أشهر، وليس لدي أي مشاكل حتى الآن. يبدو مثل هذا:

<body>

<script type="text/javascript">
    try {
        document.write('<div id="cargando"><p>Cargando...<\/p><\/div>');
        document.getElementById("cargando").style.display = "block";
    } catch(E) {};
</script>

والوصول إلى DOM يلقي قبل الأوان الاستثناءات في IE 5 و 4 المستكشف.

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