يسرع HTML تحسين صفحات الويب

مفتاح تقليل وقت تنزيل صفحات الويب هو محاولة تقليل حجم الملف. عندما تشارك صفحات متعددة بعض محتوى المكونات ، يمكنك التفكير في فصل هذه الأجزاء الشائعة بشكل منفصل. على سبيل المثال: يمكننا كتابة البرامج النصية التي تستخدمها صفحات HTML متعددة في ملفات .js مستقلة ، ثم نسميها في الصفحة كما يلي:

<scriptsrc = myfile.js> </script>

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

CSS هو لباس HTML ، ولا يمكن أن تكون صفحة الويب الجميلة بدونها. هناك العديد من الطرق للإشارة إلى CSS في صفحات HTML ، وكفاءة الطرق المختلفة مختلفة. عادةً ما يمكننا استخراج رمز التحكم في النمط المحدد بين <Style> </style> ، وحفظه في ملف .CSS منفصل ، ثم المرجع إليه في صفحة HTML في علامة <ink> أو علامة import:

<style>

importurl (mySheet1.css) ؛

</style>

يرجى ملاحظة 2 نقاط: 1. علامة <Style> غير مطلوبة لإدراجها في ملف .css ؛ 2. يجب تحديد علامات Import و Rink في الجزء الرئيسي من صفحة HTML.

يعد تقليل مساحة الذاكرة التي تشغلها صفحات HTML طريقة فعالة لتسريع تنزيلات الصفحة. في هذا الصدد ، هناك مسألتان للانتباه إلى:

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

هل استخدمت علامة <Frame>؟ إنها ميزة رائعة للغاية. إذا كنت ترغب في تضمين محتوى الصفحة الثانية في مستند HTML ، فإن الطريقة المعتادة هي استخدام علامة <FrameSet>. ولكن مع <frame> ، يصبح كل شيء بسيطًا. على سبيل المثال ، لتطوير صفحة معاينة المستند ، يمكنك وضع سلسلة من الموضوعات على اليسار و IFRAME على اليمين ، والتي تحتوي على المستند المراد معاينته ؛ عندما يمر الماوس عبر كل رابط موضوع على اليسار ، قم بإنشاء iframe جديد على اليمين لمعاينة المستند. عند القيام بذلك ، تكون كفاءة الكود فعالة بلا شك ، ولكنها في الوقت نفسه تؤدي إلى معالجة ثقيلة وسرعة بطيئة في النهاية.

استخدم فقط iframe واحد. عندما يشير الماوس إلى موضوع جديد ، تحتاج فقط إلى تعديل سمة SRC لعنصر iframe. بهذه الطريقة ، سيبقى مستند معاينة واحد فقط في الذاكرة في أي وقت.

عندما تتصفح الصفحة عبر الإنترنت كل يوم ، سترى بالتأكيد العديد من تأثيرات الرسوم المتحركة. على سبيل المثال ، يسير أرنب صغير لطيف ذهابًا وإيابًا على الصفحة ... التكنولوجيا الأساسية لتحقيق هذا التأثير هي تحديد موقع CCS. عادة ، نستخدم element.style.left و element.style.top لتحقيق الغرض من تحديد المواقع الرسومية. ومع ذلك ، فإن القيام بذلك يخلق بعض المشكلات: تُرجع الخاصية اليسرى سلسلة وتحتوي على وحدة القياس (مثل 100px). لذلك ، لتعيين إحداثيات موضع جديدة ، يجب أولاً معالجة قيمة الإرجاع للسلسلة قبل أن تتمكن من تعيين القيمة ، على النحو التالي:

Dimstringleft ، intleft

StringLeft = element.style.left

intleft = parseint (StringLeft)

Intleft = Intleft 10

element.style.left = intleft ؛

ستشعر بالتأكيد أنه يتعين عليك كتابة مثل هذا الرمز المعقد لفعل هذا الشيء الصغير. هل هناك طريقة أكثر إيجازا؟ انظر إلى هذه الخصائص الأربعة: posleft ، postop ، poswidth و posheight ، والتي تتوافق مع عدد نقاط قيمة إرجاع السلسلة المقابلة. حسنًا ، استخدم هذه الخصائص لإعادة كتابة الرمز لتنفيذ الوظائف التي تنفذها الرمز أعلاه:

element.style.posleft = 10

الكود أقصر ، ولكن أسرع!

عندما يتعلق الأمر بتأثيرات الرسوم المتحركة ، بالطبع ، لا ينفصل استخدام أجهزة ضبط الوقت. الطريقة المعتادة هي استخدام Window.SetTimeOut لتحديد موقع العناصر باستمرار على الصفحة. ومع ذلك ، إذا كان هناك العديد من الرسوم المتحركة على الصفحة التي سيتم عرضها ، هل تحتاج إلى تعيين أجهزة ضبط الوقت المتعددة؟ الجواب لا! السبب بسيط: سوف تستهلك وظيفة المؤقت الكثير من موارد النظام القيمة. ولكن لا يزال بإمكاننا التحكم في رسوم متحركة متعددة على الصفحة ، والخدعة هي استخدام حلقة. في الحلقة ، تحكم في موضع الرسوم المتحركة المقابلة وفقًا لقيم متغيرة مختلفة ، يتم استخدام استدعاء دالة SettImeOut () في الحلقة بأكملها.

دع الصورة تظهر وتظهر من حين لآخر تخلق آثارًا مثيرة للاهتمام. هناك طريقتان لتحقيق ذلك: استخدم سمة الرؤية أو سمة عرض CSS. بالنسبة لعناصر الموقف المطلق ، فإن Diplay والرؤية لها نفس التأثير. الفرق بين الاثنين هو أن العنصر الذي تم عرضه: لن يشغل أي منها مساحة دفق المستند ، في حين أن العنصر الذي تم تعيينه على الرؤية: سيظل Hidden في وضعه الأصلي.

ولكن إذا كنت ترغب في التعامل مع العناصر في الموقف المطلق ، فسيكون استخدام الرؤية أسرع.

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

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

1. لا تتصل بأمر المستند. الكتابة في كتلة البرنامج النصي من النوع المؤجل ، لأن المستند. سوف ينتج عن تأثير الإخراج المباشر.

2. علاوة على ذلك ، لا تتضمن أي متغيرات أو وظائف عالمية لاستخدامها لتنفيذ البرنامج النصي فورًا في كتلة البرنامج النصي المؤجلة.

نعلم جميعًا أن خوادم UNIX حساسة للحالة ، لكن هل تعلم أن المخازن المؤقتة لـ Internet Explorer تعامل أيضًا سلاسل الحالات بشكل مختلف. لذلك ، كمطور ويب ، يجب أن تتذكر الحفاظ على اتساق حجة سلاسل URL من نفس الرابط في مواقع مختلفة. خلاف ذلك ، سيتم تخزين النسخ الاحتياطية لملفات مختلفة في نفس الموقع في المخزن المؤقت للمتصفح ، مما سيزيد أيضًا من عدد الطلبات لتنزيل المحتوى في نفس الموقع. كل هذه بلا شك تقلل من كفاءة الوصول إلى الويب. لذا يرجى تذكر: عناوين URL في نفس الموقع ، يرجى الحفاظ على تناسق سلاسل URL في صفحات مختلفة.

عند كتابة أو عرض رمز HTML للآخرين بأنفسنا ، يجب أن نواجه مواقف لا تنتهي فيها العلامات. على سبيل المثال:

<p> مثال مع الرأس وعدم علامات الذيل

<ul>

<li> الأول

<li> الثاني

<li> الثالث

</ul>

من الواضح أن هناك ثلاث علامات </li> مفقودة في الكود أعلاه. ولكن هذا لا يمنعه من تنفيذها بشكل صحيح. في HTML ، هناك بعض هذه العلامات ، مثل الإطار ، IMG ، و P.

لكن من فضلك لا تكون كسولًا. الرجاء كتابة علامة النهاية سليمة. هذا لا يجعل فقط تنسيق رمز HTML القياسي ، ولكن أيضًا يسرع سرعة العرض في الصفحة. نظرًا لأن Internet Explorer لن يقضي وقتًا في الحكم وحساب مكان انتهاء الفقرة أو القائمة.

<p> مثال على علامات الرأس والذيل </p>

<ul>

<li> الأول </li>

<li> الثاني </li>

<li> الثالث </li>

</ul>

حسنًا ، يسرد ما ورد أعلاه 10 تقنيات معالجة لتسريع صفحات HTML. من السهل وصفها ، ولكن فقط من خلال فهم وإتقان جوهرها والتعلم من مثال أو آخر ، يمكنك كتابة برامج أسرع وأفضل.