من أجل توفير تجربة مستخدم جديدة وفريدة من نوعها ، تستخدم العديد من مواقع الويب JavaScript لتحسين التصميم ، والتحقق من النماذج ، والتحقق من متصفحات ، وكذلك طلبات AJAX ، وعمليات ملفات تعريف الارتباط ، وما إلى ذلك ، لتحقيق تأثيرات ديناميكية خالية من التحديث. ومع ذلك ، إذا كنت ترغب في تقديم قدر كبير من المحتوى في المتصفح ، إذا لم تتم معالجته بشكل صحيح ، فسوف ينخفض أداء الموقع بشكل حاد. لذلك من الضروري فهم كيفية تحسين كفاءة تنفيذ JavaScript.
وظائف JavaScript
في JavaScript ، يتم تجميع الوظائف قبل الاستخدام. على الرغم من أنه يمكن استخدام الأوتار في بعض الأحيان بدلاً من الوظائف ، إلا أنه سيتم إعادة تمييز رمز JavaScript في كل مرة يتم تنفيذها ، مما يؤثر على الأداء.
1. مثال تقييم
نسخة الكود كما يلي:
eval ('Output = (input * input)') ؛
// يوصى بالتغيير إلى:
eval (new function () {output = (input * input)}) ؛
2. مثال setTimeout
نسخة الكود كما يلي:
setTimeout ("Alert (1)" ، 1000) ؛
// يوصى بالتغيير إلى:
setTimeOut (function () {Alert (1)} ، 1000) ؛
استخدم الوظائف بدلاً من السلاسل كمعلمات للتأكد من أنه يمكن تحسين الرمز في الطريقة الجديدة بواسطة برنامج التحويل البرمجي JavaScript.
نطاق جافا سكريبت
يحتوي كل نطاق في سلسلة نطاق JavaScript على عدة متغيرات. من المهم فهم سلسلة النطاق حتى تتمكن من الاستفادة منها.
نسخة الكود كما يلي:
var localvar = "Global" ؛ // المتغيرات العالمية
اختبار الوظيفة () {
var localvar = "local" ؛ // المتغيرات المحلية
// المتغيرات المحلية
تنبيه (محلي) ؛
// المتغيرات العالمية
تنبيه (this.localvar) ؛
// ابحث عن المستند ولا يمكن العثور على المتغير المحلي ، لذا ابحث عن المتغير العالمي
var pagename = document.getElementById ("pagename") ؛
}
يعد استخدام المتغيرات المحلية أسرع بكثير من استخدام المتغيرات العالمية ، لأن أبعد من ذلك في سلسلة النطاق ، أبطأ التحليل. يوضح الشكل التالي بنية سلسلة النطاق:
إذا كان هناك أو تجرب البيانات في الكود ، فستكون سلسلة النطاق أكثر تعقيدًا ، كما هو موضح في الشكل أدناه:
سلاسل JavaScript
وظيفة في JavaScript التي لها تأثير أداء للغاية هي سلسلة متسلسل. بشكل عام ، يتم استخدام علامة + لتنفيذ الربط بين السلاسل. ومع ذلك ، لم تحسن المتصفحات المبكرة طرق الاتصال هذه ، مما أدى إلى إنشاء وتدمير السلاسل المستمرة التي قللت بشكل خطير من كفاءة تنفيذ JavaScript.
نسخة الكود كما يلي:
var txt = "Hello" + "" + "World" ؛
يوصى بالتغيير إلى:
نسخة الكود كما يلي:
var o = [] ؛
O.Push ("Hello") ؛
O.Push ("") ؛
O.Push ("World") ؛
var txt = o.join () ؛
دعونا ببساطة تغلف:
نسخة الكود كما يلي:
وظيفة StringBuffer (str) {
var arr = [] ؛
arr.push (str || "") ؛
this.append = function (str) {
arr.push (str) ؛
إرجاع هذا ؛
} ؛
this.toString = function () {
إرجاع arr.join ("") ؛
} ؛
} ؛
ثم نسمي هذا:
نسخة الكود كما يلي:
var txt = new StringBuffer () ؛
txt.append ("Hello") ؛
txt.append ("") ؛
txt.append ("World") ؛
تنبيه (txt.toString ()) ؛
JavaScript DOM عملية
يحدد نموذج كائن مستند HTML (DOM) طريقة قياسية للوصول إلى مستندات HTML ومعالجتها. إنه يمثل مستند HTML كشجرة عقدة تحتوي على عناصر وسمات ومحتوى نص. باستخدام HTML DOM ، يمكن لـ JavaScript الوصول إلى جميع العقد ومعالجتها في مستند HTML.
دوم إعادة طلاء
في كل مرة يتضمن فيها كائن DOM الذي تم تعديله إلى صفحة إعادة رسم DOM ، سيقوم المتصفح بإعادة تقديم الصفحة. لذلك ، يمكن أن يؤدي تقليل عدد تعديلات كائنات DOM إلى تحسين أداء JavaScript بشكل فعال.
نسخة الكود كما يلي:
لـ (var i = 0 ؛ i <1000 ؛ i ++) {
var elmt = document.createElement ('p') ؛
elmt.innerhtml = i ؛
document.body.appendchild (elmt) ؛
}
يوصى بالتغيير إلى:
نسخة الكود كما يلي:
var html = [] ؛
لـ (var i = 0 ؛ i <1000 ؛ i ++) {
html.push ('<p>' + i + '</p>') ؛
}
document.body.innerhtml = html.join ('') ؛
وصول دوم
يمكن الوصول إلى كل عقدة في مستند HTML من خلال DOM. في كل مرة تقوم فيها بالاتصال بـ getElementById () ، و getElementsByTagName () وطرق أخرى ، سيتم إعادة تشغيل العقدة والوصول إليها. لذلك ، يمكن لذاكرة التخزين المؤقتة أن تعمل العقد DOM التي تم العثور عليها على تحسين أداء JavaScript.
نسخة الكود كما يلي:
document.getElementById ("p2"). style.color = "Blue" ؛
document.getElementById ("p2"). style.fontfamily = "arial" ؛
document.getElementById ("p2"). style.fontsize = "marger" ؛
يوصى بالتغيير إلى:
نسخة الكود كما يلي:
var elmt = document.getElementById ("p2") ؛
elmt.style.color = "Blue" ؛
elmt.style.fontfamily = "arial" ؛
elmt.style.fontsize = "أكبر" ؛
DOM اجتياز
عادةً ما تقرأ عناصر DOM Traversal Child عنصر الطفل التالي عن طريق LOOP الفهرس. في المتصفحات المبكرة ، تكون طريقة القراءة هذه فعالة للغاية في التنفيذ. يمكن أن يؤدي استخدام طريقة nextsibling إلى تحسين كفاءة اجتياز DOM بواسطة JS.
نسخة الكود كما يلي:
var html = [] ؛
var x = document.getElementsByTagname ("P") ؛ // جميع العقد
لـ (var i = 0 ؛ i <x.length ؛ i ++) {
// تودو
}
يوصى بالتغيير إلى:
نسخة الكود كما يلي:
var html = [] ؛
var x = document.getElementById ("div") ؛ // العقدة العليا
var node = x.firstchild ؛
بينما (العقدة! = فارغة) {
// تودو
العقدة = node.nextsibling ؛
}
إصدار ذاكرة JavaScript
في تطبيقات الويب ، مع زيادة عدد كائنات DOM ، سيصبح استهلاك الذاكرة أكبر وأكبر. لذلك ، يجب إصدار الإشارات إلى الكائنات في الوقت المناسب حتى يتمكن المتصفح من إعادة تدوير هذه الذاكرة.
تحرير الذاكرة التي تشغلها دوم
نسخة الكود كما يلي:
document.getElementById ("test"). innerhtml = "" ؛
يمكن أن يؤدي تعيين innerhtml لعنصر DOM إلى سلسلة فارغة إلى تحرير الذاكرة التي تشغلها عناصرها الفرعية.
حرر كائن JavaScript
نسخة الكود كما يلي:
//هدف:
OBJ = فارغة
// خصائص الكائن:
حذف OBJ.Property
// عناصر الصفيف:
arr.splice (0،3) ؛ // حذف العناصر الثلاثة الأولى