تحسين سرعة استجابة عميل AJAX

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

 الاستخدام السليم لبرمجة العميل واستدعاءات الإجراءات عن بعد.
تعتمد البرمجة من جانب العميل بشكل أساسي على JavaScript. JavaScript هي لغة برمجة مفسرة، وكفاءة تشغيلها أقل قليلاً من كفاءة Java. وفي الوقت نفسه، تعمل JavaScript في بيئة مقيدة تمامًا مثل المتصفح. لذلك يجب أن يكون لدى المطورين فهم واضح للمنطق الذي يمكن تنفيذه من جانب العميل.
تعتمد كيفية استخدام البرمجة من جانب العميل في التطبيقات الفعلية على خبرة المطور وحكمه. لا يمكن فهم العديد من المشاكل هنا إلا. نظرًا للمساحة المحدودة، نلخص هنا تقريبًا الاحتياطات التالية:

 تجنب الاستخدام المتكرر لاستدعاءات الإجراءات عن بعد قدر الإمكان، على سبيل المثال، تجنب استخدام استدعاءات الإجراءات عن بعد في أجسام الحلقة.
 إذا أمكن، استخدم استدعاء الإجراء البعيد AJAX (استدعاء الإجراء البعيد غير المتزامن).
 تجنب وضع عمليات البيانات ذات الوزن الثقيل على جانب العميل. على سبيل المثال: دفعات كبيرة من عمليات نسخ البيانات، والحسابات التي تتطلب كمية كبيرة من اجتياز البيانات، وما إلى ذلك.
 تحسين طريقة تشغيل كائنات DOM.
في البرمجة من جانب العميل، غالبًا ما تكون العمليات على كائنات DOM هي الأكثر احتمالاً لاحتلال وقت وحدة المعالجة المركزية. بالنسبة لتشغيل كائنات DOM، غالبًا ما يكون فرق الأداء بين طرق البرمجة المختلفة كبيرًا جدًا.
فيما يلي ثلاث أجزاء من التعليمات البرمجية لها نفس النتائج تمامًا، وتتمثل وظيفتها في إنشاء جدول 10x1000 في صفحة الويب. ومع ذلك، فإن سرعات تشغيلها مختلفة إلى حد كبير.
/* رمز الاختبار 1 - الوقت المستغرق: 41 ثانية*/
var table = document.createElement("TABLE");
document.body.appendChild(table);
for(var i = 0; i < 1000; i++){
صف فار = table.insertRow(-1);
ل(فار ي = 0; ي < 10; ي++){
خلية فار = objRow.insertCell(-1);
cell.innerText = "( " + i + " , " + j + " )";
}
}

/* رمز الاختبار 2 - الوقت المستغرق: 7.6 ثانية*/
var table = document.getElementById("TABLE");
document.body.appendChild(table);
var tbody = document.createElement("TBODY");
table.appendChild(tbody);
for(var i = 0; i < 1000; i++){
فار الصف = document.createElement("TR");
tbody.appendChild(row);
ل(فار ي = 0; ي < 10; ي++){
فار الخلية = document.createElement("TD");
Row.appendChild(cell);
cell.innerText = "( " + i + " , " + j + " )";
}
}

/* رمز الاختبار 3 - الوقت المستغرق: 1.26 ثانية*/
var tbody = document.createElement("TBODY");
for(var i = 0; i < 1000; i++){
فار الصف = document.createElement("TR");
ل(فار ي = 0; ي < 10; ي++){
فار الخلية = document.createElement("TD");
cell.innerText = "( " + i + " , " + j + " )";
Row.appendChild(cell);
}
tbody.appendChild(row);
}
var table = document.getElementById("TABLE");
table.appendChild(tbody);
document.body.appendChild(table);
الفرق بين "رمز الاختبار 1" و"رمز الاختبار 2" هنا هو أنه يتم استخدام أساليب API مختلفة عند إنشاء خلايا الجدول. يكمن الاختلاف بين "رمز الاختبار 2" و"رمز الاختبار 3" في ترتيب المعالجة المختلف قليلاً.
لا يمكننا تحليل هذا الاختلاف الكبير في الأداء بين "رمز الاختبار 1" و"رمز الاختبار 2". ما هو معروف حاليًا هو أن InsertRow وinsertCell عبارة عن واجهات برمجة تطبيقات خاصة بالجدول في DHTML، وأن createElement وappendChild هما واجهات برمجة تطبيقات أصلية لـ W3C DOM. يجب أن يكون الأول عبارة عن تغليف للأخير. ومع ذلك، لا يمكننا أن نستنتج من هذا أن واجهة برمجة التطبيقات الأصلية لـ DOM أفضل دائمًا من واجهة برمجة التطبيقات الخاصة بالكائن. يوصى بإجراء بعض الاختبارات الأساسية على أدائها عندما تحتاج إلى الاتصال بواجهة برمجة التطبيقات (API) بشكل متكرر.
يأتي اختلاف الأداء بين "رمز الاختبار 2" و"رمز الاختبار 3" بشكل أساسي من الاختلاف في ترتيب البناء الخاص بهما. تتمثل طريقة "رمز الاختبار 2" في إنشاء كائن