الصفحة الرئيسية>دروس تصميم الويب>تعليمي HTML

مناقشة مختصرة حول القواعد الأساسية لتحسين الأداء لصفحات الويب

الكاتب：Eve Cole وقت التحديث：2025-03-12 06:32:01

بعض قواعد التحسين لصفحات الويب في المتصفح

تحسين الصفحة

ضغط الموارد الثابتة

استخدم أدوات البناء (حزمة الويب، gulp) لضغط الموارد الثابتة لصفحة الويب بشكل مناسب مثل الصور والبرامج النصية والأنماط.

صور CSS المتحركة، الصور المضمنة Base64

دمج الرموز الصغيرة الموجودة على الموقع في صورة واحدة، واستخدام CSS لتحديد موضع الرموز المقابلة واعتراضها، واستخدام الصور المضمنة بشكل مناسب.

الأنماط في الأعلى والنصوص في الأسفل

الصفحة عبارة عن عملية عرض خطوة بخطوة. يمكن أن يؤدي لصق النمط في الأعلى إلى عرض الصفحة للمستخدم بشكل أسرع؛ كما أن لصق العلامة <script> في الأعلى سيمنع تنزيل الموارد خلف الصفحة.

استخدم CSS وJS للروابط الخارجية

تشير الصفحات المتعددة إلى الموارد الثابتة العامة، كما أن إعادة استخدام الموارد تقلل من طلبات http الإضافية.

تجنب الصور التي تحتوي على src فارغ

تجنب طلبات http غير الضرورية. 

 <!-- ستستمر الصور التي تحتوي على src فارغ في بدء طلبات http--><img src= style="margin: 0px; الحشو: 0px; المخطط التفصيلي: لا شيء; ارتفاع الخط: 25.2px; حجم الخط: 14px; العرض: 660px؛ تجاوز: مخفي؛ واضح: كلاهما؛ 
 <!-- حجم الصورة الفعلي هو 600x300، ويتم تغيير حجمه إلى 200x100 في html --><img src=/static/images/a.png width=200 height=100 style="margin: 0px; padding: 0px; المخطط التفصيلي: لا شيء؛ ارتفاع الخط: 25.2 بكسل؛ حجم الخط: 14 بكسل؛ مخفي؛ واضح: كلاهما؛ عائلة الخط: tahoma، arial، Microsoft YaHei؛"> 
 <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>المستند</title> <link ref=preload href=style.css as=style> <link ref=preload href =main.js as=script> <link ref=stylesheet href=style.css></head><body> <script src=main.js></script></body></html>
 في المثال، تم تحميل ملفات css وjs مسبقًا، وسيتم استدعاؤها على الفور بمجرد استخدامها في عروض الصفحات اللاحقة.
 يمكنك تحديد نوع لتحميل أنواع مختلفة من الموارد. 
  1.  أسلوب
  2.  البرنامج النصي
  3.  فيديو
  4.  صوتي
  5.  صورة
  6.  الخط
  7.  وثيقة
  8.  ...
 يمكن لهذه الطريقة أيضًا تحميل الموارد مسبقًا عبر المجالات عن طريق تعيين سمة crossorigin. 
 <link rel=preload href=fonts/cicle_fina-webfont.woff2 as=font type=font/woff2 crossorigin=anonymous>
 CSS
 محدد
 أولوية المحددات من الأعلى إلى الأدنى هي: 
  1.  محدد الهوية
  2.  محدد الصف
  3.  محدد العلامة
  4.  المحدد المجاور 
 h1 + p{ الهامش العلوي: 15 بكسل }
 يحدد الفقرة التي تظهر مباشرة بعد العنصر h1. يحتوي العنصران h1 وp على عنصر أصل مشترك.
 محدد الطفل 
 h1> قوي {اللون:أحمر؛}
 محدد سليل 
 h1 م {اللون:أحمر؛}
 محدد البدل
 محدد السمة 
 *[العنوان] {اللون: أحمر؛}img[alt] {الحدود: 5 بكسل أحمر خالص؛}
 محدد الطبقة الزائفة
 تجربة استخدام المحدد: 
  1.  إعطاء الأولوية لمحددات الفئة، والتي يمكن أن تحل محل محددات التسمية متعددة الطبقات؛
  2.  استخدم محدد المعرف بحذر، على الرغم من فعاليته، إلا أنه فريد في الصفحة ولا يؤدي إلى تعاون الفريق وصيانته.
  3.  الاستفادة بشكل معقول من وراثة المحدد؛
  4.  تجنب تعبيرات CSS.
 خفض مستوى المحددات
 بناءً على أولوية المحدد السابق، يجب أن تحاول تجنب المستويات المتعددة لتداخل المحدد، ويفضل ألا يزيد عن 3 مستويات. 
 .container .text .logo{ color: red }/*التغيير إلى*/.container .text-logo{ color: red }
 تبسيط ملفات نمط الصفحة وإزالة الأنماط غير المستخدمة
 سيقوم المتصفح بإجراء مطابقة متكررة للأنماط، مما سيؤثر على وقت العرض، بالإضافة إلى ذلك، ستؤثر ملفات الأنماط الكبيرة جدًا على سرعة التحميل.
 استخدم وراثة CSS لتقليل حجم الكود
 باستخدام خصائص CSS القابلة للتوريث، يقوم العنصر الأصلي بتعيين النمط، ولا تحتاج العناصر الفرعية إلى تعيينه مرة أخرى.
 تشمل السمات الشائعة القابلة للتوريث: اللون، وحجم الخط، ومجموعة الخطوط، وما إلى ذلك؛ وتشمل السمات غير القابلة للتوريث: الموضع، والعرض، والتعويم، وما إلى ذلك.
 عندما تكون قيمة السمة 0، لا تتم إضافة أي وحدة.
 عندما تكون قيمة سمة CSS هي 0، لا يمكن إضافة أي وحدة لتقليل كمية التعليمات البرمجية. 
 .text{ العرض: 0px; الارتفاع: 0px;
 جافا سكريبت
 استخدام تفويض الحدث
 استخدم تفويض الحدث لربط الأحداث بعدة عناصر DOM مماثلة. 
 <ul id=container> <li class=list>1</li> <li class=list>2</li> <li class=list>3</li></ul> 
 // طريقة غير معقولة: ربط حدث النقر بكل عنصر $('#container .list').on('click', function() { var text = $(this).text(); console.log(text); });// طريقة تفويض الحدث: استخدم آلية فقاعات الحدث لتفويض الأحداث إلى العنصر الأصلي $('#container').on('click', '.list', function() { var text = $(this ).نص()؛ console.log(text });
 وتجدر الإشارة إلى أنه على الرغم من إمكانية تفويض الحدث إلى المستند عند استخدام تفويض الحدث، فإن هذا غير معقول. أحدهما أنه يؤدي بسهولة إلى سوء تقدير الحدث، والآخر هو أن كفاءة البحث في سلسلة النطاق منخفضة. يجب تحديد العنصر الأصل الأقرب كمفوض.
 بالإضافة إلى الأداء الأفضل، يؤدي استخدام تفويض الأحداث أيضًا إلى إلغاء الحاجة إلى ربط الأحداث بعناصر DOM المنشأة ديناميكيًا.
 DOMContentLoaded
 يمكنك البدء في معالجة شجرة DOM بعد تحميل عناصر DOM (DOMContentLoaded)، بدلاً من الانتظار حتى يتم تنزيل كافة موارد الصورة. 
 // مستند جافا سكريبت الأصلي.addEventListener(DOMContentLoaded, function(event) { console.log(DOM full Loaded and parsed);}, false);// jquery$(document).ready(function() { console.log(ready) ! );});// نسخة مبسطة من $(document).ready()$(function() { console.log(ready!);});
 التحميل المسبق والتحميل البطيء
 التحميل المسبق
 استخدم وقت الخمول في المتصفح للتحميل المسبق للموارد التي يمكن استخدامها في المستقبل، مثل الصور والأنماط والبرامج النصية.
 التحميل المسبق غير المشروط
 بمجرد تشغيل التحميل، سيتم الحصول على الموارد التي ستكون مطلوبة في المستقبل على الفور.
 يتم تحميل موارد الصور مسبقًا. (3 طرق لتنفيذ التحميل المسبق للصور).
 التحميل المسبق يعتمد على سلوك المستخدم
 الحكم على العمليات المحتملة لسلوك المستخدم وتحميل الموارد مسبقًا التي قد تكون مطلوبة في المستقبل. 
  1.  عندما يقوم المستخدم بالكتابة في مربع إدخال البحث، يتم تحميل الموارد التي يمكن استخدامها في صفحة نتائج البحث مسبقًا؛
  2.  عندما يقوم المستخدم بتشغيل علامة تبويب، سيتم عرض إحداها بشكل افتراضي. عند النقر على الخيارات الأخرى، يمكن تحميل الموارد التي سيتم استخدامها في المستقبل أولاً عند تحريك الماوس؛
 تحميل كسول
 باستثناء المحتوى أو المكونات المطلوبة لتهيئة الصفحة، يمكن تحميل كل شيء آخر ببطء، مثل مكتبات js التي تقطع الصور، والصور التي ليست في النطاق المرئي، وما إلى ذلك.
 يتم تحميل الصور كسول. (تحديد ما إذا كانت الصورة ضمن المنطقة المرئية، إذا كان الأمر كذلك، قم بتعيين المسار الحقيقي للصورة)
 تجنب البحث العالمي
 يجب تخزين أي متغير غير محلي يستخدم أكثر من مرة في دالة كمتغير محلي. 
 function updateUI(){ var imgs = document.getElementsByTagName(img); for (var i=0, len=imgs.length; i < len; i++){ imgs[i].title = document.title + image + i; } var msg = document.getElementById(msg); msg.innerHTML = اكتمل التحديث.;}
 يتم استخدام المتغير العام للمستند عدة مرات في الوظيفة المذكورة أعلاه، خاصة في حلقة for. لذلك، يعد تخزين المتغيرات العامة للمستند كمتغيرات محلية ثم استخدامها حلاً أفضل. 
 function updateUI(){ var doc = document; var imgs = doc.getElementsByTagName(img); for (var i=0, len=imgs.length; i < len; i++){ imgs[i].title = doc.title + image + i } var msg = doc.getElementById(msg);
 شيء واحد جدير بالملاحظة هو أنه في كود JavaScript، أي متغير لم يتم الإعلان عنه باستخدام var سيصبح متغيرًا عامًا، وسيتسبب الاستخدام غير السليم في حدوث مشكلات في الأداء.
 تجنب استعلامات السمات غير الضرورية
 يعد استخدام المتغيرات والمصفوفات أكثر فعالية من الوصول إلى خصائص كائن ما، لأنه يجب على الكائن البحث في سلسلة النموذج الأولي عن خاصية بهذا الاسم. 
 // استخدم المصفوفة var value ​​= [5, 10];var sum =values[0] +values[1];alert(sum);//استخدم الكائن varvalues ​​​​= { first: 5, Second: 10 };var sum =values.first +values. Second;alert(sum);
 في الكود أعلاه، يتم استخدام خصائص الكائن للحساب. لن يؤدي البحث عن الخصائص مرة أو مرتين إلى حدوث مشكلات في الأداء، ولكن إذا كانت هناك حاجة إلى عمليات بحث متعددة، كما هو الحال في التكرار الحلقي، فسوف يتأثر الأداء.
 عند البحث عن سمات متعددة للحصول على قيمة واحدة، مثل: 
 var query = window.location.href.substring(window.location.href.indexOf(?));
 يجب تقليل عمليات البحث عن السمات غير الضرورية ويجب تخزين window.location.href مؤقتًا كمتغير. 
 var url = window.location.href;var query = url.substring(url.indexOf(?));
 اختناق الوظيفة
 لنفترض أن هناك مربع بحث، واربط حدث onkeyup بمربع البحث، بحيث يتم إرسال الطلب في كل مرة يتم فيها رفع الماوس. يمكن أن يضمن استخدام وظائف الاختناق أن العمليات المتتالية المتعددة التي يقوم بها المستخدم خلال فترة زمنية محددة من الإدخال تؤدي إلى طلب واحد فقط. 
 <نوع الإدخال=معرف النص=قيمة الإدخال= /> 
 // حدث ربط document.getElementById('input').addEventListener('keyup', function() { throttle(search);}, false);// وظيفة المنطق function search() { console.log('search. . .');}// وظيفة الخانق function throttle(method, context) { ClearTimeout(method.tId); }, 300);}
 لا تقتصر سيناريوهات تطبيق وظيفة التقييد على مربع البحث، على سبيل المثال، عند تمرير الصفحة، أو تغيير حجم النافذة الممتدة، وما إلى ذلك، يجب استخدام وظيفة التقييد لتحسين الأداء.
 تقليل عدد البيانات
 يعد عدد البيانات أيضًا عاملاً يؤثر على سرعة تنفيذ العملية.
 دمج إعلانات متغيرات متعددة في إعلان متغير واحد 
 // استخدم إعلانات var متعددة var count = 5; varcolor = [1,2,3]; var now = new Date(); ، القيم = [1،2،3]، الآن = تاريخ جديد ()؛
 الإصدار المحسّن هو استخدام إعلان var واحد فقط، مفصولاً بفواصل. عندما يكون هناك العديد من المتغيرات، فإن استخدام إعلان var واحد فقط يكون أسرع بكثير من الإعلان عن المتغيرات الفردية بشكل منفصل.
 استخدام المصفوفات والكائنات الحرفية
 استخدم المصفوفات والكائنات الحرفية بدلاً من تعيين كل بيان على حدة. 
 varvalues=new Array();values[0] = 123;values[1] = 456;values[2] = 789;//بعد التحسين، varvalues ​​​​= [123, 456, 789]; 
 var person = new Object();person.name = Jack;person.age = 28;person.sayName = function(){ تنبيه(this.name);};// بعد التحسين var person = { name: Jack، age : 28، sayName : function(){ تنبيه(this.name }};
 تحسين السلسلة
 تسلسل السلسلة
 لم تعمل المتصفحات المبكرة على تحسين طريقة ربط السلاسل باستخدام علامة الجمع. نظرًا لأن السلاسل غير قابلة للتغيير، فهذا يعني أنه يتم استخدام سلاسل وسيطة لتخزين النتائج، لذا فإن إنشاء السلاسل وتدميرها بشكل متكرر هو سبب عدم كفاءتها. 
 var text = Hello;text+= ;text+= World!;
 قم بإضافة السلسلة إلى المصفوفة، ثم قم باستدعاء أسلوب الانضمام للمصفوفة لتحويلها إلى سلسلة، وبالتالي تجنب استخدام عامل الإضافة. 
 var arr = [], i = 0;arr[i++] = Hello;arr[i++] = ;arr[i++] = World!;var text = arr.join('');
 قامت المتصفحات الحديثة بتحسين تسلسل الإشارات بالإضافة إلى السلسلة، لذلك في معظم الحالات، يظل عامل الإضافة هو الخيار الأول.
 تقليل التدفقات وإعادة الرسم
 تتضمن عملية عرض المتصفح إعادة التدفق وإعادة الرسم، وهي عملية تستهلك الأداء، ويجب الانتباه إلى تقليل الإجراءات التي تؤدي إلى إعادة التدفق وإعادة الرسم أثناء عمليات البرنامج النصي. 
  1.  إعادة التدفق: لقد تغيرت الخصائص الهندسية للعنصر وتحتاج شجرة العرض إلى إعادة البناء. تسمى عملية تغيير شجرة العرض بإعادة التدفق؛
  2.  إعادة الرسم: لم يتغير الحجم الهندسي للعنصر، ولكن تم تغيير نمط CSS (لون الخلفية أو اللون) للعنصر.
 ما هي العمليات التي تؤدي إلى إعادة التدفق أو إعادة الرسم؟ 
  1.  تغيير حجم النافذة
  2.  تعديل الخط
  3.  إضافة أو إزالة أوراق الأنماط
  4.  تغييرات المحتوى، مثل قيام المستخدم بإدخال النص في المربع <input/>
  5.  التعامل مع سمات الطبقة
  6.  البرامج النصية لمعالجة DOM (إضافة أو حذف أو تعديل عناصر DOM)
  7.  حساب خصائص offsetWidth وoffsetHeight
  8.  قم بتعيين قيمة سمة النمط
 كيفية تقليل إعادة التدفق وإعادة الرسم وتحسين أداء صفحة الويب؟
 1. معالجة البرنامج النصي لعناصر DOM 
  1.  قم بتعيين عنصر DOM على العرض: لا شيء، سيتم تشغيل إعادة التدفق أثناء عملية الإعداد، ولكن يمكنك تغييره حسب الرغبة لاحقًا وعرضه بعد التعديل؛
  2.  استنساخ العنصر في الذاكرة قبل تشغيله، واستبدال العنصر مرة أخرى بعد التعديل.
 2. تعديل نمط العنصر 
  1.  حاول إجراء تعديلات على الدفعات بدلاً من تعديلها واحدة تلو الأخرى؛
  2.  قم بتعيين المعرف والفئة مقدمًا، ثم قم بتعيين اسم فئة العنصر.
 3. عند إضافة رسوم متحركة إلى عنصر، قم بتعيين نمط CSS للعنصر على الموضع: ثابت أو الموضع: مطلق. لن يتسبب العنصر في إعادة التدفق بعد خروجه من تدفق المستند.
 4. استخدم وظيفة الاختناق (المذكورة أعلاه) عند ضبط حجم النافذة، والإدخال في مربع الإدخال، وتمرير الصفحة، وما إلى ذلك.
 HTTP
 ذاكرة التخزين المؤقت للمتصفح
 يعد إعداد ذاكرة التخزين المؤقت للمتصفح بشكل صحيح إحدى الوسائل المهمة لتحسين صفحة الويب.
 انتهاء الصلاحية والتحكم في ذاكرة التخزين المؤقت
 تأتي انتهاء الصلاحية من HTTP1.0، ويأتي التحكم في ذاكرة التخزين المؤقت من HTTP1.1. عندما يتم تعيين كليهما في نفس الوقت، سيتجاوز التحكم في ذاكرة التخزين المؤقت انتهاء الصلاحية. 
  1.  تحدد انتهاء الصلاحية تاريخ انتهاء الصلاحية الفعلي بدلاً من عدد الثواني. لكن انتهاء الصلاحية به بعض المشكلات، مثل أن يكون وقت الخادم غير متزامن أو غير دقيق. لذلك من الأفضل التعبير عن وقت انتهاء الصلاحية باستخدام الثواني المتبقية بدلاً من الوقت المطلق.
  2.  يمكن لـ Cache-Control تعيين القيمة القصوى للعمر بالثواني وتحديد وقت انتهاء صلاحية ذاكرة التخزين المؤقت. على سبيل المثال: التحكم في ذاكرة التخزين المؤقت: الحد الأقصى للعمر = 3600.
 ETag وآخر تعديل
 يتم إرجاع كل من ETag وLast-Modified بواسطة الخادم في رؤوس الاستجابة. تتمتع ETag بأولوية أعلى من Last-Modified، مما يعني أن الخادم سيعطي الأولوية لقيمة ETag. 
  1.  ETag هي أي علامة مرفقة بالمستند، والتي قد تكون الرقم التسلسلي أو رقم إصدار المستند، أو التحقق من محتوى المستند، وما إلى ذلك. عندما تتغير الوثيقة، تتغير قيمة ETag أيضًا. يتعلق الأمر بـ ETag وهو If-None-Match. عندما يبدأ المتصفح طلبًا، فإنه سيحمل قيمة ETag في حقل If-None-Match ويرسلها إلى الخادم؛
  2.  "آخر تعديل" هو الوقت الذي تم فيه آخر تعديل للمستند على جانب الخادم. فيما يتعلق بـ Last-Modified هو If-Modified-Since عندما يبدأ المتصفح طلبًا، فإنه سيحمل قيمة Last-Modified في حقل If-Modified-Since ويرسله إلى الخادم.
 التخزين المؤقت القوي والتخزين المؤقت المتفاوض عليه
 أنواع ذاكرة التخزين المؤقت هي ذاكرة التخزين المؤقت القوية وذاكرة التخزين المؤقت التي تم التفاوض عليها. الفرق بين الاثنين هو أن ذاكرة التخزين المؤقت القوية لن ترسل طلبًا إلى الخادم، لكن ذاكرة التخزين المؤقت التي تم التفاوض عليها سترسل طلبًا 200؛ سيتحقق المتصفح أولاً من ذاكرة التخزين المؤقت القوية، وإذا فاتت ذاكرة التخزين المؤقت القوية، فقم بإجراء التحقق من ذاكرة التخزين المؤقت للتفاوض.
 كيفية تكوين ذاكرة التخزين المؤقت للمتصفح 
  1.  إضافة انتهاء الصلاحية والتحكم في ذاكرة التخزين المؤقت إلى استجابة الإرجاع لخادم الويب؛
  2.  قم بتكوين انتهاء الصلاحية والتحكم في ذاكرة التخزين المؤقت في ملف تكوين nginx أو apache.
 لماذا تقليل طلبات HTTP
 تمثل إجراءات تقليل طلبات http جزءًا كبيرًا من تحسين الأداء، مثل: استخدام صور css sprite لاستبدال طلبات الصور المتعددة، وتجنب صور src الفارغة، واستخدام الصور المضمنة، واستخدام الارتباط الخارجي css وjs، والتخزين المؤقت، وما إلى ذلك.
 تتضمن العملية بدءًا من إدخال عنوان URL وحتى إكمال تحميل الصفحة ما يلي: 
  1.  قرار DNS
  2.  اتصال TCP
  3.  طلب HTTP والاستجابة
  4.  يعرض المتصفح الصفحة
  5.  اتصال وثيق
 يجب أن يمر طلب http الكامل بهذه العمليات، وهو ما يستغرق وقتًا طويلاً ويستهلك الموارد، لذلك يصبح من الضروري تقليل عدد الطلبات.
 مراجع:
 "الدليل المتقدم لإنشاء موقع ويب عالي الأداء مقابل إنشاء موقع ويب عالي الأداء"
 "أفضل الممارسات لتسريع موقع الويب الخاص بك"
 ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.
مقالات ذات صلة