كمبرمج ASP، لن تشك في أهمية تحسين أداء تطبيقات الويب الخاصة بك. من أجل جعل برنامجك يعمل بشكل أسرع، ربما كنت مشغولاً بتحسين قاعدة البيانات أو مكون COM. إذا كنت قد فعلت كل هذا، فهل فكرت يومًا في تحسين الأداء من خلال تسريع سرعة عرض كود HTML النهائي الذي تم إنشاؤه في المتصفح؟ بالنسبة للمستخدم النهائي، إذا كان من الممكن عرض الصفحة بشكل أسرع، فسوف تحظى بمزيد من الثناء.
يمكن تحسين سرعة عرض HTML في متصفحك من خلال بعض التقنيات غير المعروفة.
1. هل تستخدم تداخل الطاولة؟
يتم إنشاء هياكل معقدة في الصفحة بشكل عام عن طريق وضع جداول HTML على الصفحة. إذا كنت تريد إنشاء صفحة مثل هذه: تحتوي هذه الصفحة على شريط تنقل علوي، وشريط تنقل أيسر، ومنطقة محتوى يمنى. يمكنك إنشاء ذلك باستخدام جدول كبير مكون من صفين وعمودين. في الصف الأول، قم بدمج العمودين وإدراج شريط التنقل العلوي. في العمود الأيسر من الصف الثاني، قم بإدراج جدول لعرض أزرار التنقل. في العمود الأيمن، ضع جدولاً لعرض المحتوى الفعلي. (انظر الشكل 1) الكود الذي تم إنشاؤه بواسطة هذا الجدول المتداخل هو كما يلي:
<TABLE BORDER="0">
<TR>
<TD COLSPAN="2"><!-- محتوى شريط التنقل العلوي --></TD>
</TR>
<TR>
<TD ALIGN="LEFT" VALIGN="TOP"><!-- محتوى شريط التنقل الأيسر --></TD>
<TD ALIGN="LEFT" VALIGN="TOP"><!-- محتوى نص الصفحة --></TD>
</TR>
</TABLE>
ومع ذلك، في الواقع، عندما يعثر المتصفح على علامة <TABLE>، فإنه لا يعرض الصفحة على الشاشة على الفور ما لم يعثر على علامة الإغلاق المقابلة </TABLE>. لذلك، إذا كانت صفحتك بأكملها موجودة في جدول، فلن يتم عرض أي شيء حتى يتم استلام </TABLE> الأخير. وبهذه الطريقة، لن تكون الصفحة مرئية للمستخدم حتى يتم تنزيل الملف بأكمله. عندما تكون كمية بيانات الصفحة كبيرة نسبيًا (مثل نتائج البحث في محرك البحث)، ستتسبب هذه الميزة في توقف مؤقت. ولمنع حدوث هذا الموقف، يمكن تقسيم الصفحة إلى العديد من الجداول الصغيرة أثناء الإنتاج. عندما يتم تنزيل كود HTML من كل <TABLE> إلى </TABLE> المقابل، سيعرضه المتصفح. ومن وجهة نظر الزائر، تظهر الصفحة تدريجيًا، جزءًا تلو الآخر، ويظهر المزيد والمزيد على الشاشة. يبدو أن سرعة عرض هذه الصفحة أسرع من تنزيل الملف بأكمله وعرضه مرة أخرى.
باتباع هذا المبدأ لدراسة المثال السابق، يجب تقسيم الجدول الكبير بأكمله في الصفحة إلى ثلاثة جداول منفصلة. استخدم الجدول الأول لعرض شريط التنقل العلوي، واضبط عرضه بحيث يكون كبيرًا بما يكفي لاستيعاب كل المحتوى، وأكمله في كتلة <TABLE></TABLE>. في النصف السفلي من الصفحة، يتم محاذاة الجدول الثاني من اليسار. استخدم جدولًا ثالثًا للاحتفاظ بالمحتوى الفعلي. (انظر الشكل 2) نظرًا لأن كل جزء عبارة عن جدول كامل، فسيتم عرض كل جزء من الكود مباشرة بعد التنزيل. بهذه الطريقة، سيبرز شريطا التنقل العلوي واليسار أكثر من بقية الصفحة. سيتخيل المستخدم أن الصفحة ستبدأ في التنزيل في هذا الوقت وسيتم عرضها على الشاشة قريبًا. وهذا أفضل بكثير من ترك المستخدم يواجه شاشة فارغة لفترة طويلة من الوقت.
الكود المعدل هو كما يلي:
<TABLE BORDER="0" WIDTH="100%">
<TR>
<TD ALIGN="CENTER" VALIGN="TOP"><!-- محتوى شريط التنقل العلوي --></TD>
</TR>
</الجدول>
<حدود الجدول = "0" محاذاة = "اليسار">
<TR>
<TD ALIGN="LEFT" VALIGN="TOP"><!-- محتوى شريط التنقل الأيسر --></TD>
</TR>
</الجدول>
<حدود الجدول = "0">
<TR>
<TD ALIGN="LEFT" VALIGN="TOP"><!-- محتوى نص الصفحة --></TD>
</TR>
</TABLE>
2. تذكر أيضًا إغلاق العلامات الأخرى
في المثال أعلاه، يمكننا أن نجعل الصفحة تظهر بشكل أسرع في المتصفح فقط عن طريق إغلاق العلامة <TABLE> مسبقًا. وقياسا على ذلك، هناك بعض العلامات المماثلة التي لها نفس الخصائص.
على سبيل المثال، قم بإنشاء علامات <OPTION> لمربعات القائمة ومربعات التحرير والسرد وعلامات <LI> لعناصر القائمة. عادة، يصل مبرمجو ASP إلى قاعدة البيانات ويرسلون البيانات إلى مربع القائمة أو مربع التحرير والسرد الذي تم إنشاؤه من خلال <OPTION>. في هذا الوقت، تتم كتابة علامة إغلاق <OPTION> في التعليمات البرمجية. مثل هذا التغيير البسيط يمكن أن يؤدي أيضًا إلى عرض الصفحة بشكل أسرع في المتصفح.
لا تستخدم رمزًا مثل هذا:
افعل ذلك أثناء عدم استخدام objRS.EOF
strOptionList = strOptionList & "<OPTION VALUE = """ & objRS("ID") &_""">"& _objRS("ProductName")
objRS.MoveNext
Loop
Response.اكتب "<SELECT SIZE=""1"">" & strOptionList & "</SELECT>"
لاستخدام رمز مثل هذا:
افعل ذلك أثناء عدم objRS.EOF
strOptionList = strOptionList & "<OPTION VALUE=""" & objRS("ID") & _ """>" & objRS("ProductName") & "</OPTION>"
objRS.MoveNext
حلقة.
اكتب "<SELECT SIZE=""1"">" & strOptionList & "</SELECT>"
لا تستخدم رمزًا مثل هذا:
<UL>
<LI>التفاح
<LI>برتقال
<LI> الموز
</UL>
استخدم الكود هكذا:
<UL>
<LI>تفاح</LI>
<LI>برتقال</LI>
<LI>الموز</LI>
</UL>
ألقِ نظرة الآن، هل تظهر صفحتك بشكل أسرع في المتصفح؟
الرجاء عدم التقليل من أهمية هذه التغييرات في تحسين أداء تطبيقات ASP. ربما، في نوع "النصائح والإرشادات" من الكتب أو المواد عبر الإنترنت التي يمكنك العثور عليها، نادرًا ما يكون هناك أي ذكر لتحسين كود HTML لجعل برنامجك يعمل بشكل أسرع. ومع ذلك، فإن تطبيق هذه التقنيات في الممارسة العملية يمكن أن يؤدي بالفعل إلى تحسين أداء البرنامج بشكل كبير.