it-swarm.asia

ما هي أفضل طريقة لتحميل Javascript في صفحة لتحسين الأداء؟

هل هناك طريقة لتحميل JavaScript على صفحة تجعل تحميله أسرع؟

14
Jason

هناك عدد قليل من الأشياء التي يمكن القيام به:

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

  2. النظر في استخدام CDN. إذا كنت تستخدم أيًا من المكتبات الشائعة مثل JQuery ، فإن العديد من الشركات (على سبيل المثال google ، yahoo) تقوم بتشغيل CDNs المجانية التي يمكنك استخدامها لتحميل المكتبات.

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

  4. قم بتشغيل ضغط Zip على خادم الويب.

لدى Yahoo صفحة رائعة من الاقتراحات التي يمكن أن تساعد في تقليل مرات تحميل الصفحة.

14
Gareth Farrington

إلى جانب Minifing ، gziping و CDNing (كلمة جديدة؟). يجب أن تفكر في تأجيل التحميل. ما يقوم به هذا في الأساس هو إضافة البرامج النصية ديناميكيًا ومنع الحظر ، مما يسمح بالتنزيلات المتوازية.

هناك العديد من الطرق للقيام بذلك ، هذا هو أفضل واحد

<script type="text/javascript">
    function AttachScript(src) {
        window._sf_endpt=(new Date()).getTime();
        var script = document.createElement("script");
        document.getElementsByTagName("body")[0].appendChild(script);
        script.src = src;
    }
    AttachScript("/js/scripts.js");
    AttachScript("http://www.google-analytics.com/ga.js");
</script>

ضع هذا قبل علامة إغلاق النص مباشرة واستخدم AttachScript لتحميل كل ملف js.
بعض مزيد من المعلومات هنا http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/

7
The Disintegrator

قد ترغب في إلقاء نظرة على طريقة تحميل Google لبرنامج Analytics أيضًا:

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.Push(['_setAccount', 'UA-xxxxxxx-x']);
  _gaq.Push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

نظرًا لأنه يعتبر نوعًا من أفضل الممارسات:
http://www.stevesouders.com/blog/2009/12/01/google-analytics-goes-async/

7
Jeff Atwood

اثنين من الناس --- أعلن عن مشروع مفتوح المصدر جديد في Velocity 201 ودعا Diffable . ينفذ Diffable بعض السحر لنشر فقط تدريجيا أجزاء JS و HTML و CSS التي تغيرت منذ الإصدار المخزن في ذاكرة التخزين المؤقت للمستخدم ، بدلاً من إرسال ملف جديد بالكامل عند إصدار نسخة جديدة.

هذه التقنية رائعة بشكل غير معقول ، وهي في الوقت الحالي أكثر فاعلية (وتستحق الجهد) على مواقع الويب التي تستخدم فيها قاعدة رموز JavaScript كبيرة مع تغييرات صغيرة في الكود المتكرر. هذا ينطبق بشكل خاص على تطبيقات مثل خرائط Google ، والتي تخضع على الأقل إصدار واحد كل يوم ثلاثاء ، ويبلغ المتوسط ​​حوالي 100 إصدار جديد في السنة. كما أنه من المنطقي بشكل عام عندما تصبح مساحة التخزين المحلية لـ HTML5 أكثر انتشارًا.

راجع للشغل ، إذا لم تكن قد شاهدت مايكل جونز يتحدث عن التغيير في Google (في سياق جغرافي مكاني) ، فإنه يستحق المشاهدة بالكامل الكلمة الرئيسية في GeoWeb 2009 .

3
JasonBirch

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

لقد أضفت سؤالًا إلى StackOverflow ، سأضيف المحتوى هنا أيضًا.

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

الآن النصية أولاً ، تبدو كما يلي:

<script>
(function () {
    var styles = JSON.parse(myObject.styles);
    for( name in styles ){
        var link  = document.createElement('link');
        link.setAttribute('rel', 'stylesheet');
        link.setAttribute('type', 'text/css');
        link.setAttribute('href', styles[name]);
        document.getElementsByTagName('head')[0].appendChild(link);
    }

    var scripts = JSON.parse(myObject.scripts);
    for( name in scripts ){
        var e = document.createElement('script');
        e.src = scripts[name];
        e.async = true;
        document.getElementsByTagName('head')[0].appendChild(e);
    }
}());
</script>

myObject.styles هنا مجرد كائن يحتفظ بجميع عناوين url لجميع الملفات.

لقد قمت بإجراء 3 اختبار ، وهنا النتائج:

الإعداد العادي

Page load with css in the head and javascript at the bottom

هذا هو الإعداد العادي فقط ، لدينا 4 ملفات css في الرأس ، و 3 ملفات css في أسفل الصفحة.

الآن أنا لا أرى أي شيء يحجب. ما أراه هو أن كل شيء يتم تحميله في نفس الوقت.

غير مانع JS

Page load with non-blocking javascript

الآن لأخذ هذا أبعد من ذلك بقليل ، لقد قمت فقط بحظر ملفات js. هذا مع البرنامج النصي أعلاه. أرى فجأة أن ملفات css الخاصة بي تمنع التحميل. هذا غريب ، لأنه لا يمنع أي شيء في المثال الأول. لماذا تمنع CSS الحمل فجأة؟

كل شيء غير مانع

Page load with everything non-blocking

أخيرًا ، قمت بإجراء اختبار حيث يتم تحميل جميع الملفات الخارجية بطريقة غير محظورة. الآن أنا لا أرى أي فرق مع الطريقة الأولى لدينا. كلاهما فقط تبدو متشابهة.

خاتمة

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

أو هل أفتقد شيئًا هنا؟

أكثر:

1
Saif Bechan