مجموعة من التقنيات لتسريع DHTML
الكاتب：Eve Cole
وقت التحديث：2009-06-20 16:59:57
HTML الديناميكي (DHTML) في Microsoft؟ في إنترنت إكسبلورر 4.0
تم تقديمه لإتاحة نماذج برمجة جديدة لمؤلفي ومطوري الويب. منذ ذلك الحين، قام مؤلفو الويب بذلك
استفد بشكل كامل من هذه الميزة القوية لتوفير محتوى ديناميكي وتصميم وتحديد موضع ليتمكن مستخدمو الويب من ذلك
تجربة الميزات التفاعلية الغنية. تعني مرونة DHTML أن هناك عادةً طرقًا متعددة للتنفيذ
فكرتك. فهم كيفية معالجة مكونات تحليل HTML وعرضها في Internet Explorer
لمساعدتك في تحديد أفضل طريقة لإنجاز المهمة. توضح هذه المقالة بعض وظائف DHTML
تأثير كبير على الأداء ويقدم بعض النصائح لتحسين أداء الصفحة.
دفعة من تغييرات DHTML
في صفحات ويب DHTML، الطريقة الأكثر فعالية لتحسين الأداء هي تحسين
التغييرات في المحتوى. هناك عدة طرق لتحديث صفحة ويب، ومن المهم فهمها. كونغكي
انطلاقًا من تعليقات المستخدمين، يمكن لمؤلفي الويب استخدام كتل نص HTML أو يمكنهم استخدام DHTML
Object Model (الإنجليزية) أو W3C Document Object Model (DOM) (الإنجليزية) للوصول إلى HTML الفردي
عنصر. كلما قمت بتغيير محتوى HTML، يتم تحليل وعرض HTML الخاص ببرنامج Internet Explorer
يجب على جميع مكونات العرض إعادة تنظيم التمثيل الداخلي للصفحة، وإعادة حساب تخطيط المستند والمستند
دفق وعرض هذه التغييرات. على الرغم من أن الأداء الفعلي يتم تحديده من خلال محتوى صفحة الويب والتغييرات التي تجريها
ولكن هذه العمليات مكلفة نسبيا. إذا كنت تستخدم كتل نص HTML بدلاً من الفردية
للوصول إلى العنصر، يجب استدعاء محلل HTML، مما سيؤدي إلى زيادة عبء الأداء. قبول HTML
تشتمل أساليب النص وخصائصه على InsertAdjacentHTML (الإنجليزية) وpasteHTML (الإنجليزية)
text)، بالإضافة إلى سمات InnerHTML (الإنجليزية) وouterHTML (الإنجليزية).
نصيحة 1: قم بإجراء تغييرات على محتوى HTML في وظيفة البرنامج النصي. إذا كان التصميم الخاص بك يستخدم
إذا كان لديك معالجات أحداث متعددة (على سبيل المثال، استجابة لحركات الماوس)، فيجب أن تكون التحديثات مركزية
يتغير.
حقيقة أخرى مهمة حول تحليل HTML وعرض المكونات هي أنه بمجرد أن يقوم البرنامج النصي بإرجاع التحكم (على سبيل المثال،
عند خروج معالج أحداث البرنامج النصي، أو عند استدعاء أساليب مثل setTimeout (باللغة الإنجليزية)،
سيقوم هذا المكون بإعادة حساب التخطيط وعرض صفحة الويب. الآن أنت تعرف عن إنترنت إكسبلورر
كيفية التعامل مع التغييرات، أدناه ستبدأ في تحسين أداء صفحات الويب الخاصة بك.
نصيحة 2: قم بإنشاء سلسلة HTML وقم بإجراء تغيير واحد على المستند بدلاً من عدة تغييرات
مرات تحديثها. إذا لم يكن محتوى HTML ضروريًا، فكر في استخدامه
خاصية النص الداخلي (الإنجليزية).
في المثال التالي، يستدعي الأسلوب الأبطأ HTML في كل مرة يتم فيها تعيين خاصية InternalHTML
محلل. لتحسين الأداء، يمكنك أولاً إنشاء سلسلة ثم تعيينها إلى InternalHTML
ملكية.
بطيء:
divUpdate.innerHTML = "";
لـ (var i=0; i<100; i++)
{
divUpdate.innerHTML += "هذه طريقة أبطأ!";
}
سريع:
فار str = ""؛
لـ (var i=0; i<100; i++)
{
str += "هذه الطريقة أسرع لأنها تستخدم سلاسل نصية!";
}
divUpdate.innerHTML = str;
استخدم النص الداخلي
يصل نموذج كائن DHTML إلى نص عنصر HTML من خلال سمة النص الداخلي (باللغة الإنجليزية).
المحتوى، بينما يوفر W3C DOM عقدة نصية فرعية مستقلة. مباشرة من خلال سمة النص الداخلي
قم بتحديث محتوى العنصر بشكل دائم، بشكل أسرع من استدعاء طريقة DOM createTextNode (باللغة الإنجليزية).
نصيحة 3: استخدم خاصية النص الداخلي لتحديث محتوى النص.
يوضح المثال التالي كيفية استخدام خاصية النص الداخلي لتحسين الأداء.
بطيء:
عقدة فار؛
لـ (var i=0; i<100; i++)
{
العقدة = document.createElement( "SPAN" );
العقدة.appendChild( document.createTextNode( "استخدم createText
العقدة() ") );
divUpdate.appendChild(node);
}
سريع:
عقدة فار؛
لـ (var i=0; i<100; i++)
{
العقدة = document.createElement( "SPAN" );
Node.innerText = "استخدم خاصية النص الداخلي";
divUpdate.appendChild(node);
}
أضف عنصرًا واحدًا باستخدام DOM
كما ذكرنا سابقًا، سيؤدي تطبيق طريقة الوصول إلى نص HTML إلى استدعاء محلل HTML من
سوف يقلل من الأداء. وذلك باستخدام createElement (باللغة الإنجليزية) وinsertAdjacent
تضيف طريقة Element (الإنجليزية) العناصر بشكل أسرع من استدعاء طريقة InsertAdjacentHTML مرة واحدة.
نصيحة 4: قم باستدعاء أساليب createElement وinsertAdjacentElement بشكل أسرع من الاتصال
طريقة InsertAdjacentHTML سريعة.
يمكن تحسين تجميع تحديثات DHTML واستدعاء أسلوب InsertAdjacentHTML مرة واحدة
الأداء، ولكن في بعض الأحيان يكون إنشاء العناصر مباشرة من DOM أكثر كفاءة. في السيناريو أدناه، يمكنك ذلك
لتجربة كلتا الطريقتين وتحديد أيهما أسرع.
بطيء:
لـ (var i=0; i<100; i++)
{
divUpdate.insertAdjacentHTML("beforeEnd"، "استخدم الإدراج
المجاورةHTML() " );
}
سريع:
عقدة فار؛
لـ (var i=0; i<100; i++)
{
العقدة = document.createElement( "SPAN" );
Node.innerText = "استخدم InsertAdjacentElement() ";
divUpdate.insertAdjacentElement( "beforeEnd"، العقدة );
}
توسيع الخيارات في عنصر SELECT
بالنسبة للقاعدة السابقة باستخدام طريقة نص HTML، هناك عدد كبير من الخيارات (الإنجليزية)
الاستثناء هو الحالة التي تتم فيها إضافة العناصر إلى SELECT (الإنجليزية). في هذا الوقت، استخدم InnerHTML
تعد الخصائص أكثر كفاءة من استدعاء الأسلوب createElement للوصول إلى مجموعة من الخيارات.
نصيحة 5: استخدم InternalHTML لإضافة عدد كبير من الخيارات إلى عنصر SELECT.
استخدم عمليات تسلسل السلسلة لإنشاء نص HTML لعنصر SELECT، ثم استخدم هذا
نصائح لتعيين سمة InnerHTML. بالنسبة لأعداد كبيرة بشكل خاص من الخيارات، ستتم عملية تسلسل السلسلة أيضًا
تؤثر على الأداء. في هذه الحالة، قم بإنشاء مصفوفة واستدعاء Microsoft JScript join
(باللغة الإنجليزية) طريقة لإجراء التسلسل النهائي لنص HTML الخاص بعنصر OPTION.
بطيء:
فار اختيار؛
divUpdate.innerHTML = "〈SELECT ID='selUpdate'〉";
لـ (var i=0; i<1000; i++)
{
opt = document.createElement("OPTION");
selUpdate.options.add(opt);
opt.innerText = "العنصر" + i + "العنصر";
}
سريع:
var str="〈SELECT ID='selUpdate'〉";
لـ (var i=0; i<1000; i++)
{
str += "〈OPTION〉th" + i + " item〈/OPTION〉";
}
str += "";
divUpdate.innerHTML = str;
أسرع:
var arr = new Array(1000);
لـ (var i=0; i<1000; i++)
{
arr[i] = "〈OPTION〉th" + i + " item〈/OPTION〉";
}
divUpdate.innerHTML = "〈SELECT ID='selUpdate'〉" + arr.join() + "
"؛
تحديث الجدول باستخدام DOM
يعد استخدام طريقة DOM لإدراج صفوف وخلايا الجدول أفضل من استخدام InsertRow (باللغة الإنجليزية) والإدراج
يعد أسلوب الخلية (الإنجليزية) (جزء من نموذج كائن جدول DHTML) أكثر فعالية. خاصة في
عند إنشاء جداول كبيرة، يكون الفرق في الكفاءة أكثر وضوحًا.
نصيحة 6: استخدم أساليب DOM لإنشاء جداول كبيرة.
بطيء:
صف فار؛
خلية فار؛
لـ (var i=0; i<100; i++)
{
صف = tblUpdate.insertRow();
لـ (var j=0; j<10; j++)
{
الخلية = الصف.insertCell();
cell.innerText = "Row " + i + " , cell " + j + " ";
}
}
سريع:
صف فار؛
خلية فار؛
var tbody = tblUpdate.childNodes[0];
tblUpdate.appendChild(tbody);
لـ (var i=0; i<100; i++)
{
صف = document.createElement("TR");
tbody.appendChild(row);
لـ (var j=0; j<10; j++)
{
خلية = document.createElement("TD");
Row.appendChild(cell);
cell.innerText = "Row " + i + " , cell " + j + " ";
}
}
اكتب مرة واحدة واستخدم الكثير
إذا كان موقع الويب الخاص بك يستخدم البرامج النصية لتنفيذ عمليات شائعة، ففكر في إضافة هذه الوظائف
يمكن وضعها في ملف منفصل بحيث يمكن إعادة استخدامه من خلال صفحات ويب متعددة. في القيام بذلك، ليس فقط
يمكنه تحسين إمكانية صيانة الكود والاحتفاظ بملف البرنامج النصي في ذاكرة التخزين المؤقت للمتصفح
ولا يلزم تنزيله محليًا إلا مرة واحدة عندما يزور المستخدم الموقع. ضع قواعد النمط الشائعة الاستخدام بشكل منفصل
ويمكن الحصول على نفس الفوائد في الملفات.
نصيحة 7: أعد استخدام البرامج النصية عن طريق وضع التعليمات البرمجية المستخدمة بشكل متكرر في إجراءات أو ملفات مستقلة
للاستفادة بشكل أفضل من إعادة استخدام البرنامج النصي، ضع عمليات البرنامج النصي المستخدمة بشكل متكرر في وظائف DHTML الإضافية.
سلوك الكود أو العنصر (باللغة الإنجليزية). توفر السلوكيات طريقة فعالة لإعادة استخدام البرامج النصية و
قم بإنشاء مكونات يمكن الوصول إليها من خلال HTML وتمكنك من استخدام الكائنات والأساليب والخصائص والأحداث الخاصة بك
نموذج كائن DHTML الموسع. بالنسبة للسلوك الذي لا يستخدم ميزة رابط العرض (باللغة الإنجليزية)، يمكنك ذلك
خذ بعين الاعتبار استخدام ميزة السلوك الخفيف في Internet Explorer 5.5
تغليف كود أكثر كفاءة. أيضًا، إذا كان رمز البرنامج النصي الخاص بك موجودًا في SCRIPT (باللغة الإنجليزية)
في الكتل، سيتم تحقيق أداء أعلى.
لا تستخدم السمات الديناميكية كثيرًا
توفر الخصائص الديناميكية (الإنجليزية) لمؤلفي الويب طريقة لاستخدام التعبيرات كقيم خصائص.
يتم تقييم التعبير في وقت التشغيل ويتم تطبيق قيمته الناتجة على السمة. هذه ميزة قوية. هذا
يمكن استخدام الميزة لتقليل كمية النص الموجود على الصفحة، ولكن نظرًا لأنه يجب إعادة تقييم التعبيرات بشكل دوري، و
غالبًا ما يرتبط هذا التعبير بقيم خصائص أخرى، لذا قد يكون له تأثير سلبي على الأداء. هذا النوع من
هذا ينطبق بشكل خاص على خصائص تحديد المواقع.
نصيحة 8: الحد من استخدام الخصائص الديناميكية.
ربط البيانات يعمل بشكل رائع
يعد ربط البيانات (باللغة الإنجليزية) ميزة قوية تسمح لك بدمج نتائج استعلام قاعدة البيانات
محتوى جزيرة البيانات Fruit أو XML (باللغة الإنجليزية)، مرتبط بعنصر HTML الموجود على صفحة الويب. ليس لديك
تحتاج إلى العودة إلى الخادم لاستخراج البيانات، ويمكنه توفير وظائف فرز البيانات وتصفيتها، بالإضافة إلى بيانات مختلفة
عرض البيانات. تخيل صفحة ويب تعرض بيانات الشركة كمخطط خطي، أو مخطط شريطي، أو مخطط دائري
الرسم البياني، يحتوي أيضًا على أزرار لفرز البيانات حسب المكتب أو المنتج أو مرحلة المبيعات، وكل شيء
تحتاج الوظيفة فقط إلى الوصول إلى الخادم مرة واحدة لتنفيذها.
نصيحة 9: استخدم ربط البيانات لتوفير عرض غني للعميل لبياناتك.
لا تقم بتعيين سمة التوسيع على كائن المستند
يمكن إضافة السمة التوسيع (الإنجليزية) إلى أي كائن. هذه الخاصية مفيدة جدًا، يمكنها ذلك
لتخزين المعلومات داخل صفحة الأربعاء الحالية وتوفير طريقة أخرى لتوسيع نموذج كائن DHTML
قانون. على سبيل المثال، يمكنك تعيين سمة تم النقر عليها لعنصر DHTML واستخدام هذه السمة لمطالبة المستخدم
العنصر الذي نقر عليه المستخدم. عند رفع حدث ما، يمكنك أيضًا استخدام السمة التوسيعية لـ
توفر معالجات الأحداث المزيد من المعلومات السياقية. بغض النظر عن كيفية استخدام سمة التوسيع، قم بالقص
تذكر عدم تعيينها على كائن المستند (باللغة الإنجليزية). إذا قمت بذلك، عند زيارتك
عند المطالبة بهذه الخاصية، يجب أن يقوم المستند بإجراء عمليات إعادة حساب إضافية.
نصيحة 10: قم بتعيين سمة التوسيع على كائن النافذة (باللغة الإنجليزية).
بطيء:
لـ (var i=0; i<1000; i++)
{
فار تمب؛
window.document.myProperty = "العنصر" + i + "العنصر";
tmp = window.document.myProperty;
}
سريع:
لـ (var i=0; i<1000; i++)
{
فار تمب؛
window.myProperty = "العنصر" + i + "العنصر";
tmp = window.myProperty;
}
تجنب تبديل قواعد الفصل والأسلوب
يعد تبديل قواعد الفصل والنمط عملية مكلفة للغاية وتتطلب إعادة الحساب وتعديل الكل
تخطيط الوثيقة. إذا كان موقع الويب الخاص بك يستخدم أوراق الأنماط لتوفير طرق عرض بديلة للمحتوى، فيمكنك ذلك
للنظر مباشرة في تعديل كائن النمط (الإنجليزية) للعنصر المراد تغييره، بدلاً من تعديل العنصر
سمة className (الإنجليزية) أو كائن styleSheet (الإنجليزية) المرتبط بالفئة.
نصيحة 11: عند تغيير مظهر المحتوى، قم بتعديل كائن النمط مباشرة.
طي نطاق النص قبل العثور على الأصل
يمثل كائن TextRange (باللغة الإنجليزية) عنصرًا تم تحديده بواسطة المستخدم أو استرداده من عنصر HTML
منطقة النص، مثل BODY (الإنجليزية). عن طريق استدعاء الأسلوبparentElement (باللغة الإنجليزية)،
يمكن تحديد أصل نطاق النص. بالنسبة للنطاقات النصية المعقدة، اتصل بـparentElement
قبل الطريقة، سيكون أكثر كفاءة استدعاء طريقة الانهيار (الإنجليزية) أولاً.
نصيحة 12: قم بطي نطاق النص قبل الوصول إلى طريقةparentElement.
مقتبس من http://www.microsoft.com/china/msdn/?MSCOMTB=ICP_MSDN
