يمكن القول إن أداء JavaScript في المتصفح هو قضية قابلية الاستخدام الأكثر أهمية التي يتعين على المطورين في الواجهة الأمامية مواجهتها.
من بين قواعد yslow23 من Yahoo ، واحدة منها هي وضع JS في القاع. والسبب هو أنه ، في الواقع ، تستخدم معظم المتصفحات عملية واحدة لمعالجة مهام متعددة مثل واجهة المستخدم وتحديث تشغيل JavaScript ، ويتم تنفيذ مهمة واحدة فقط في نفس الوقت. كم من الوقت يعمل JavaScript ، إلى متى سيستغرق الانتظار قبل أن يكون المتصفح خاملاً للرد على تفاعل المستخدم.
من المنظور الأساسي ، هذا يعني أن ظهور علامة <script> يتسبب في انتظار الصفحة بأكملها بسبب تحليل البرنامج النصي وتشغيله. بغض النظر عما إذا كان رمز JavaScript الفعلي مضمّنًا أو متضمنًا في ملف خارجي غير ذي صلة ، يجب إيقاف عملية تنزيل الصفحة والتحليل وانتظر البرنامج النصي لإكمال هذه المعالجة قبل المتابعة. هذا جزء أساسي من دورة حياة الصفحة ، لأن البرنامج النصي قد يعدل محتوى الصفحة أثناء وقت التشغيل. مثال نموذجي هو دالة المستند. write () ، على سبيل المثال:
نسخة الكود كما يلي:
<html>
<head>
<title> مثال البرنامج النصي </title>
</head>
<body>
<p>
<script type = "text/javaScript">
document.write ("التاريخ هو" + (تاريخ جديد ()). todatestring ()) ؛
</script>
</p>
</body>
</html>
عندما يواجه المتصفح علامة <script> ، كما هو الحال في صفحة HTML أعلاه ، فمن المستحيل التنبؤ بما إذا كان JavaScript يضيف محتوى إلى علامة <p>. لذلك ، يتوقف المتصفح ، ويدير رمز JavaScript هذا ، ثم يواصل تحليل الصفحة وترجمة الصفحة. يحدث نفس الشيء عند تحميل JavaScript باستخدام خاصية SRC. يجب على المتصفح أولاً تنزيل الرمز للملف الخارجي ، والذي يستغرق بعض الوقت ، ثم تحليل هذا الرمز وتشغيله. خلال هذه العملية ، يتم حظر تحليل الصفحة وتفاعل المستخدم بالكامل.
نظرًا لأن البرنامج النصي يحظر عملية تنزيل موارد الصفحات الأخرى ، فإن الطريقة الموصى بها هي: ضع جميع العلامات <script> في أقرب وقت ممكن من أسفل علامة <Body> لتقليل التأثير على تنزيل الصفحة بأكملها. على سبيل المثال:
نسخة الكود كما يلي:
<html>
<head>
<title> مثال البرنامج النصي </title>
<link rel = "stylesheet" type = "text/css" href = "styles.css">
</head>
<body>
<p> Hello World! </p>
<-مثال على تحديد موقع البرنامج النصي الموصى به->
<script type = "text/javaScript" src = "file1.js"> </script>
<script type = "text/javaScript" src = "file2.js"> </script>
<script type = "text/javaScript" src = "file3.js"> </script>
</body>
</html>
يوضح هذا الرمز مكان وجود علامة <script> الموصى بها في ملف HTML. على الرغم من حظر تنزيلات البرامج النصية بين بعضها البعض ، فقد تم تنزيل الصفحة وعرضها أمام المستخدم ، ولن تظهر سرعة إدخال الصفحة بطيئة للغاية. هذا ما ذكر أعلاه لوضع JS في القاع.
بالإضافة إلى ذلك ، ياهو! يقوم بإنشاء "مقبض فيدرالي" لمكتبة "Yahoo! واجهة المستخدم ، Yui" ، والتي يتم تنفيذها من خلال "شبكة تسليم المحتوى الخاصة بها (CDN). يمكن لأي موقع ويب استخدام عنوان URL" مقبض اتحادي "للإشارة إلى الملفات المدرجة في حزمة ملف yui. على سبيل المثال ، عنوان URL التالي يحتوي على ملفين:
نسخة الكود كما يلي:
<script type = "text/javaScript" src = "http://yui.yahooapis.com/combo؟2.7.0/build/yahoo/yahoo-min.js&2.7.0/build/vent/event-min.js"> </script>
يستدعي عنوان URL ملفات yahoo-min.js و event-min.js في الإصدار 2.7.0. هذه الملفات هي ملفان منفصلان على الخادم ، ولكن عندما يتلقى الخادم طلب عنوان URL هذا ، سيتم دمج الملفان معًا وإعادتهما إلى العميل. وبهذه الطريقة ، لم تعد هناك حاجة إلى علامات اثنين <script> (يتم تحميل ملف واحد لكل علامة) ، ويمكن لتحميل علامة <script>. هذه هي أفضل طريقة لتضمين العديد من JavaScript خارجية في صفحات HTML.
نصوص نبلو
ما سبق هو أفضل طريقة لتحميل نصوص JavaScript المتعددة في الحالة الأولية للصفحة. يميل JavaScript إلى حظر عمليات معالجة المتصفح معينة ، مثل طلبات HTTP وتحديث الواجهة ، والتي تعد أهم مشكلات الأداء التي يواجهها المطورين. إن الحفاظ على ملفات JavaScript قصيرة والحد من عدد طلبات HTTP هو مجرد الخطوة الأولى لإنشاء تطبيق ويب متجاوب.
ولكن مثل صفحات الويب الكبيرة التي تحتوي على الكثير من كود JS ، فإن الحفاظ على رمز المصدر القصير ليس هو الخيار الأفضل دائمًا. لذلك ، ظهرت البرامج النصية غير المحظورة ، ما نحتاجه هو إضافة JavaScript تدريجياً إلى الصفحة ، والتي لن تمنع المتصفح إلى حد ما.
يتمثل مفتاح عدم حظر البرامج النصية في تحميل رمز مصدر JavaScript بعد تحميل الصفحة ، مما يعني أن تنزيل الرمز يبدأ بعد إصدار حدث تحميل النافذة.
التفسيرات ذات الصلة:
سيتم إطلاق حدث تحميل النافذة إلا مرة واحدة فقط بعد تحميل الصفحة.
window.onload = function () {} يجب أن تنتظر كل المحتوى في صفحة الويب للتحميل (بما في ذلك جميع الملفات المرتبطة بالعناصر ، مثل الصور) المراد تنفيذه ، أي يمكن لـ JavaScript الوصول إلى أي عنصر في الصفحة في هذا الوقت.
الطرق التالية هي:
البرامج النصية المؤجلة البرامج النصية المؤجلة
يحدد HTML4 سمة ممتدة لعلامة <script>: تأجيل.
تشير السمة المؤجلة هذه إلى أن البرنامج النصي الموجود في العنصر لا يعتزم تعديل DOM ، بحيث يمكن تنفيذ الكود لاحقًا. يتم دعم السمة المؤجلة فقط بواسطة Internet Explorer 4+ و Firefox 3.5+ ، وهي ليست حلًا مثاليًا للمتصفح. في المتصفحات الأخرى ، سيتم تجاهل السمة المؤجلة. لذلك ، ستتم معالجة علامة <script> بالطريقة الافتراضية العادية ، مما يعني أنها ستؤدي إلى انسداد. إذا تم دعمها من قبل المتصفحات السائدة المختلفة ، فإن هذا لا يزال حلاً فعالاً.
نسخة الكود كما يلي:
<script type = "text/javaScript" src = "file1.js" defer> </script>
يمكن وضع علامة <cript> مع سمة التأجيل في أي مكان في المستند ، ويبدأ التنزيل عند تحليله حتى يتم تحميل DOM (قبل استدعاء مقبض حدث Onload). عند تنزيل ملف JavaScript المؤجل ، فإنه لا يحظر عمليات المعالجة الأخرى في المتصفح ، بحيث يمكن تنزيل هذه الملفات بالتوازي مع الموارد الأخرى.
يمكنك استخدام الكود التالي لاختبار ما إذا كان المتصفح يدعم سمة التأجيل:
نسخة الكود كما يلي:
<html>
<head>
<title> مثال تأجيل السيناريو </title>
</head>
<body>
<script defer> ALERT ("تأجيل") ؛ </script>
<script> Alert ("Script") ؛ </script>
<script> window.onload = function () {Alert ("load") ؛} ؛ </script>
</body>
</html>
إذا كان المتصفح لا يدعم التأجيل ، فإن ترتيب مربعات الحوار المنبثقة هو "تأجيل" و "نص" و "تحميل".
إذا كان المتصفح يدعم التأجيل ، فإن ترتيب مربعات الحوار المنبثقة هو "نص" ، "تحميل" ، "تأجيل".
عناصر البرنامج النصي الديناميكي
يسمح لنا DOM بإنشاء جميع محتوى مستند HTML تقريبًا بشكل ديناميكي باستخدام JavaScript ، ويمكن إنشاء عنصر <script> الجديد بسهولة من خلال DOM قياسي:
نسخة الكود كما يلي:
1 var script = document.createElement ("script") ؛
2 script.type = "text/javaScript" ؛
3 script.src = "file1.js" ؛
4 document.body.appendchild (script) ؛
يقوم عنصر <script> الجديد بتحميل ملف مصدر file1.js. قم بتنزيل هذا الملف فور إضافة العنصر إلى الصفحة. النقطة الرئيسية لهذه التكنولوجيا هي أنه بغض النظر عن مكان بدء التنزيل ، فإن تنزيل وتشغيل الملف لن يحظر معالجة الصفحات الأخرى.
عندما يتم تنزيل ملف باستخدام عقدة نصي ديناميكية ، يتم تنفيذ الكود الذي تم إرجاعه على الفور (باستثناء Firefox و Opera ، والتي ستنتظر تنفيذ جميع عقد البرنامج النصي الديناميكية السابقة).
في معظم الحالات ، نأمل أن نسمي وظيفة لتنفيذ تنزيل ديناميكي لملفات JavaScript. تغليف الوظيفة التالية يمنع التطبيقات القياسية وتطبيقات IE:
نسخة الكود كما يلي:
وظيفة loadscript (url ، رد الاتصال) {
var script = document.createElement ("script") ؛
script.type = "text/javaScript" ؛
if (script.readyState) {// ie
script.OnReadyStateChange = function () {
if (script.readyState == "loaded" || script.readyState == "COMMUNT") {
script.OnReadyStateChange = null ؛
أتصل مرة أخرى()؛
}
} ؛
}
آخر {// الآخرين
script.onload = function () {callback () ؛
} ؛
}
script.src = url ؛
document.getElementSbyTagName ("Head") [0] .AppendChild (script) ؛
}
loadscript ("file1.js" ، function () {// call
تنبيه ("تم تحميل الملف!") ؛
}) ؛
تقبل هذه الوظيفة معلمتين: عنوان URL لملف JavaScript ودالة رد الاتصال يتم تشغيله عند اكتمال استقبال JavaScript. يتم استخدام فحص السمة لتحديد الحدث الذي يجب مراقبته. الخطوة الأخيرة هي سمة SRC وإضافة ملف JavaScript إلى الرأس.
يعد تحميل البرامج النصية الديناميكية النمط الأكثر استخدامًا في تنزيلات JavaScript غير المحظورة لأنه يمكن أن يكون متصفحًا وسهل الاستخدام.
XMLHTTPREQUEST حقن البرنامج النصي XHR
هناك طريقة أخرى للحصول على البرامج النصية بطريقة عدم الحظر وهي حقن البرامج النصية في الصفحة باستخدام كائن XMLHTTPrequest (XHR). تقوم هذه التقنية أولاً بإنشاء كائن XHR ، ثم يقوم بتنزيل ملف JavaScript ، ثم يقوم بحقن رمز JavaScript في الصفحة بعنصر ديناميكي <script>. انظر إلى العرض التوضيحي:
نسخة الكود كما يلي:
var xhr = new xmlhttprequest () ؛
XHR.Open ("get" ، "file1.js" ، true) ؛
XHR.OnReadyStateChange = function () {
if (xhr.readyState == 4) {
if (xhr.status> = 200 && xhr.status <300 || xhr.status == 304) {// تحقق من رمز حالة http
var script = document.createElement ("script") ؛
script.type = "text/javaScript" ؛
script.text = xhr.Responsetext ؛
document.body.appendchild (script) ؛
}
}
} ؛
XHR.SEND (NULL) ؛
يرسل هذا الرمز طلب الحصول على طلب إلى الخادم للحصول على file1.js. يتحقق معالج الأحداث onReadyStateChange ما إذا كان ReadyState هو 4 ، ثم يتحقق مما إذا كان رمز حالة HTTP صالحًا (200 يعني تأكيد أن طلب العميل قد نجح ، 2xx يعني استجابة صالحة ، و 304 تعني استجابة مخزنة). إذا تم استلام استجابة صالحة ، يتم إنشاء عنصر <script> جديد وتم تعيين سمة النص الخاصة به على سلسلة Besponsetext المستلمة من الخادم. سيؤدي القيام بذلك في الواقع إلى إنشاء عنصر <script> مع رمز مضمّن ، وبمجرد إضافة عنصر <script> الجديد إلى المستند ، سيتم تنفيذ الرمز وجاهز للاستخدام.
ميزة هذه الطريقة هي أن لديها توافق جيد ويمكنك تنزيل رمز JavaScript الذي لم يتم تنفيذه على الفور. نظرًا لأن الكود يعود خارج علامة <script> ، فلن يتم تنفيذه تلقائيًا بعد التنزيل ، مما يتيح لك تأجيل التنفيذ.
يخضع تحديد هذه الطريقة لقيود متجانسة للمتصفح. يجب وضع ملفات JavaScript في نفس مجال الصفحة ولا يمكن تنزيلها من CDN (شبكة توصيل المحتوى). لهذا السبب ، عادةً ما لا تستخدم صفحات الويب الكبيرة تقنية حقن البرنامج النصي XHR.
نمط النبلات الموصى به النمط الموصى به
تنقسم الطريقة الموصى بها لتحميل كمية كبيرة من JavaScript إلى صفحة إلى خطوتين:
تتضمن الخطوة الأولى الرمز المطلوب لتحميل JavaScript ديناميكيًا ، ثم قم بتحميل الجزء باستثناء JavaScript المطلوب لتهيئة الصفحة. هذا الجزء من الكود صغير قدر الإمكان وقد يتضمن وظيفة LoadScript () فقط. يقوم بتنزيل ويعمل بسرعة كبيرة ولن يتسبب في تداخل كبير في الصفحة.
الخطوة الثانية هي استخدامه لتحميل بقية JavaScript بعد أن يكون الكود الأولي جاهزًا.
على سبيل المثال:
نسخة الكود كما يلي:
1 <script type = "text/javaScript" src = "loader.js">
2 </script> <script type = "text/javaScript">
3 loadscript ("the-rest.js" ، function () {
4 application.init () ؛
5}) ؛
6
7 </script>
ضع هذا الرمز قبل إغلاق الجسم </body>. إن الاستفادة من ذلك هو أنه أولاً ، هذا يضمن أن JavaScript يعمل دون التأثير على أجزاء أخرى من الصفحات الأخرى لعرضها. ثانياً ، عندما يتم تنزيل الجزء الثاني من ملف JavaScript ، تم إنشاء جميع الأدوار اللازمة للتطبيق وجاهزة للوصول إليها ، وتجنب استخدام معالجة الأحداث الإضافية (مثل Window.onload) لمعرفة ما إذا كانت الصفحة جاهزة.
هناك خيار آخر هو تضمين وظيفة loadscript () مباشرة في الصفحة ، والتي يمكن أن تقلل من النفقات العامة لطلب HTTP. على سبيل المثال:
نسخة الكود كما يلي:
1 <script type = "text/javaScript">
وظيفة loadscript (url ، رد الاتصال) {
var script = document.createElement ("script") ؛
script.type = "text/javaScript" ؛
if (script.readyState) {// ie script.onReadyStateChange = function () {
if (script.readyState == "loaded" || script.readyState == "COMMUNT") {
script.OnReadyStateChange = null ؛
أتصل مرة أخرى()؛
}
} ؛
} آخر {// الآخرين
script.onload = function () {
أتصل مرة أخرى()؛
} ؛
}
script.src = url ؛
document.getElementSbyTagName ("Head") [0] .AppendChild (script) ؛
}
loadscript ("the-rest.js" ، function () {
application.init () ؛
}) ؛
</script>
بمجرد تنزيل رمز تهيئة الصفحة ، يمكنك أيضًا استخدام وظيفة loadscript () لتحميل الوظائف الوظيفية الإضافية التي تتطلبها الصفحة.
تقديم أداة مشتركة ، Ryan Grove of Yahoo! ابتكر البحث مكتبة Lazyload (انظر: http://github.com/rgrove/lazyload/). Lazyload هي وظيفة loadscript () قوية. Lazyload لديه فقط حوالي 1.5 كيلو بايت بعد التحجيم. أمثلة الاستخدام هي كما يلي:
نسخة الكود كما يلي:
<script type = "text/javaScript" src = "lazyload-min.js"> </script>
<script type = "text/javaScript">
lazyload.js ("the-rest.js" ، وظيفة () {
application.init () ؛
}) ؛
</script>
ملخص
1. ضع كل العلامات <script> في أسفل الصفحة ، بالقرب من علامة الإغلاق </body>. تضمن هذه الطريقة تحليل الصفحة قبل تشغيل البرنامج النصي.
2. حزم البرامج النصية في مجموعات. أقل علامات <script> على الصفحة ، وكلما كانت الصفحة أسرع يتم تحميلها وتستجيب بشكل أسرع. هذا صحيح لكل من ملفات البرنامج النصي الخارجي والرمز المضمن.
3. هناك عدة طرق لتنزيل JavaScript باستخدام طرق عدم الحظر:
1). أضف سمة تأجيل إلى علامة <script>
2). قم بإنشاء عنصر <script> بشكل ديناميكي ، استخدمه لتنزيل الرمز وتنفيذه
3). استخدم كائن XHR لتنزيل الكود وحقنه في الصفحة
من خلال الاستراتيجية المذكورة أعلاه ، يمكن تحسين الأداء الفعلي لكود مستخدمي الإنترنت الذين يستخدمون رمز JavaScript بشكل كبير.
كتاب مرجعي "جافا سكريبت الأداء العالي".