هل يؤدي تشغيل علامات البرنامج النصي إلى منع تنزيل علامات البرنامج النصي الأخرى؟

Question

هذا من Index.html في HTML5 النموذجي, ، قبل </body> بطاقة شعار:

<!-- JavaScript at the bottom for fast page loading: http://developer.yahoo.com/performance/rules.html#js_bottom -->

<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.7.2.min.js"><\/script>')</script>

<!-- scripts concatenated and minified via build script -->
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- end scripts -->

<!-- Asynchronous Google Analytics snippet. Change UA-XXXXX-X to be your site's ID.
     mathiasbynens.be/notes/async-analytics-snippet -->
<script>
  var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
  (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
  g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
  s.parentNode.insertBefore(g,s)}(document,'script'));
</script>

أعلم أن علامات البرنامج النصي يمكن أن تمنع التنزيلات المتوازية، وهذا هو السبب يوصى بوضعها في الأسفل.

سؤالي: هل ينتظر المتصفح حقًا تنزيل jQuery بالكامل وتنفيذه قبل أن يبدأ في تنزيل ملف plugins.js ومن ثم script.js?

أم أنها تتطلع إلى الأمام وتبدأ جميع البرامج النصية جارى التحميل في أسرع وقت ممكن (بالتوازي)، ومجرد تأخير تنفيذ لكل برنامج نصي حتى يتم الانتهاء من تنفيذ البرنامج السابق؟

Answer 1

سؤالي:هل ينتظر المتصفح حقًا تنزيل jQuery بالكامل وتنفيذه قبل أن يبدأ في تنزيل ملف plugins.js ومن ثم script.js?

قد يكون أو لا، ولكن ربما لا؛تحاول المتصفحات (ضمن حدود) موازنة التنزيلات لجعل تحميل الصفحات سريعًا.

أم أنها تتطلع إلى الأمام وتبدأ في تنزيل كافة البرامج النصية في أسرع وقت ممكن (بالتوازي)، وتؤخر فقط عملية التنزيل تنفيذ لكل برنامج نصي حتى يتم الانتهاء من تنفيذ البرنامج السابق؟

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

Answer 2

لقد وجدت هذه التفاصيل إجابة أكثر ملاءمة لهذا السؤال، منسوخة أدناه المحتويات من http://www.html5rocks.com/en/tutorials/speed/script-loading/ الرجوع إليه لمزيد من التفاصيل.

<script src="//other-domain.com/1.js"></script>

<script src="2.js"></script>

آه، البساطة السعيدة.هنا سيقوم المتصفح بتنزيل كلا البرنامجين بالتوازي وتنفيذهما في أسرع وقت ممكن، مع الحفاظ على ترتيبهما.لن يتم تنفيذ "2.js" حتى يتم تنفيذ "1.js" (أو فشل في القيام بذلك)، ولن يتم تنفيذ "1.js" حتى يتم تنفيذ البرنامج النصي أو ورقة الأنماط السابقة، وما إلى ذلك.

ولسوء الحظ، يحظر المتصفح عرض المزيد من الصفحة أثناء حدوث كل هذا.ويرجع ذلك إلى واجهات برمجة تطبيقات DOM من "العصر الأول للويب" التي تسمح بإلحاق السلاسل بالمحتوى الذي يمضغه المحلل اللغوي، مثل document.write.ستستمر المتصفحات الأحدث في مسح المستند ضوئيًا أو تحليله في الخلفية وتشغيل التنزيلات للمحتوى الخارجي الذي قد يحتاجه (js والصور وcss وما إلى ذلك)، لكن العرض لا يزال محظورًا.

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

Answer 3

تقول مواصفات HTML5:

إذا لم تكن هناك سمة [أي.يوجد Async و Defer] ، ثم يتم جلب البرنامج النصي وتنفيذه على الفور ، قبل أن يستمر وكيل المستخدم في تحليل الصفحة.

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

لمعرفة سبب منطقية ذلك، تخيل أن النص الأول يحتوي على

document.write("<!--"); 

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