شجرة محتويات ajax

إن توليد شجرة المحتويات في تطبيق الويب حاليا يعاني من الكثير من المشاكل. أهمها أنها تؤدي إلى تجمد المتصفح.

الأسباب المتوقعة للمشكلة يمكن أن تكون بسبب

• الزمن اللازم لنقل الشجرة عبر الإنترنت - غير وارد:
  • لأني عبر شبكة محلية سريعة
  • لأني أستخدم async ajax
• زمن توليد الشجرة من البيانات المستلمة عبر
  • عمليات على النصوص string manipulations ثم innerHtml
  • عمليات DOM manipulations
• عمليات javascript في إضافة توليد الشجرة مثلا
  • في jq tree تحتاج إضافة div اسمها hit area يكون فيها علامة + - لفتح الفروع
  • ربط عمليات النقر مع أحداث …إلخ

نريد عمل prototype نعزل فيه العوامل ونختبرها واحد بعد الأخر.

إن أفضل شجرة كي نختبرها هي الأكبر حجما (ربما نحتاج أيضا إلى الأكثر عمقا) لذا اخترت لسان العرب وملف json المثل لها حجمه نصف ميغا (مقارنة ب 27 كيلوبايث لموسوعة اليهود للمسيري و 150 كيلو بايت لصحيح مسلم)

طريقة الاختبار وضع ملف json أو أي ملفات نحتاجها في ajax كملفات ساكنة. طلب الملف عبر كود javascript وقياس الزمن اللازم لبناء الشجرة بكود يشبه

function buildtree(js) {
	var treediv1=document.getElementById("treediv1");
	var treediv2=document.getElementById("treediv2");
	var t1=buildtree_str(treediv1,js);
	var t2=buildtree_dom(treediv2,js);
 
	alert('t1='+t1+", t2="+t2);
 
}
/* getJson(true, 'data/lisan.json', {}, buildtree); */
function init() {
	getJson(true, 'data/j1.json', {}, buildtree);
	return false;
}

حيث تقوم الدالة buildtree_str بعمل ما يشبه

	var t=new Date();
	t1 = t.getTime();
	/*...*/
	t=new Date();
	t2 = t.getTime();
	return t2-t1;

• عند إخفاء العناصر في المستويات الداخلية العميقة وإظهار المستوى الأول فقط فإن السرعة تزيد في string manipulation ولا تزيد إلا بمقدار هامشي في dom على فايرفوكس. ولا يوجد فرق ملحوظ في IE
• في فايرفوكس العمليات على السلاسل النصية أسرع بما لا يزيد عن 30% من نظيرتها على DOM
• في ie فإن عمليات dom أسرع بكثير جدا من العمليات على السلاسل النصية (قد تزيد السرعة عن 90%) وقد قمت بالتجربة على جهاز وهمي وحقيقي للتأكد
• لا فرق بالسرعة بين استخدام div أو ul على نفس العمق
• يحدث تعليق خفيف في firefox لكنه ليس بشدة التعليق الذي يحصل في التطبيق الحالي (لذي يستخدم jq tree)
• متصفحات webkit (سواء chrome أو webkit من خلال qt أو gtk) أسرع بكثير من firefox حيث يظهر أي تأخير عند توليد الشجرة لكنه أيضا يتجمد عند تجربة تطبيق الويب (الذي يستخدم jq tree)
• عملية جلب html جاهز وليس توليده من json كانت الأسرع. في فايرفوكس كان فارق السرعة هامشيا لكن في ie كان فارقا مخيفا (الزمن كان أطول بين 4 مرات أو 32 ضعف حسب str أم dom)
• التعليق غير ملحوظ عند استخدام html جاهز

• إلغاء الشجرة والاكتفاء بالروابط التي داخل النص (هذا المنهج يجعل التطبيق أقرب لموقع الويب وهو ليس سيئا جدا حيث أن يمكن البحث عن عنوان:“بدء الوحي”)
• عمل شجرة لأول مستوى ويتم تحميل المستويات الداخلية عند النقر عليها فقط