تحسين أصول JavaScript لسرعة الصفحة

نشرت: 2020-05-05

المثال أدناه مأخوذ من موقع إخباري كبير ومعقد. لقد فقدوا حركة المرور العضوية لسنوات. توقيت الحدث DOMContentLoaded الخاص بهم هو 2615.2 مللي ثانية. قد تعتقد أن حجم DOM الخاص بهم ضخم للغاية ، لكن لا ...

إنه تقريبًا نفس ما توصي به Google ، ولا توجد سوى 1230 عقدة HTML في هذا المستند.

يمكنك حساب توقيت حدث domContentLoaded ومعالجته ومقارنته بمنافسيك باستخدام DevTools.

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

(يمكنك استخدام قسم Call Tree أيضًا للمساعدة في العثور على أخطاء مماثلة لفريق تكنولوجيا المعلومات لديك.)

يوضح هذا المثال بوضوح أهمية تحسين أصول JavaScript ، وما الخطأ الذي يمكن أن يحدث عند إهمال JavaScript في تحسينات سرعة صفحتك.

هذه هي المقالة الثالثة في سلسلة من أربع مقالات. لفهم هذه المقالة بشكل أفضل ، قد ترغب في قراءة أول مقالتين من السلسلة:

  • يرتبط عرض Javascript وسرعة الصفحة ارتباطًا وثيقًا بكيفية إنشاء محرك عرض المتصفح لصفحة ويب.
  • يجب عليك أيضًا فهم مقاييس سرعة الصفحة المتقدمة قبل الدخول في هذه المقالة.

سأستخدم بعض الأمثلة من أول مقالتين للمساعدة في توفير سياق في هذا المقال.

ما هو عرض جافا سكريبت وكيف يؤثر على سرعة صفحتك؟

عرض جافا سكريبت هو آخر قسم لتحميل الصفحة يمكنه تغيير البنية التي تم إنشاؤها باستخدام DOM و CSSOM بشكل تفاعلي. يمكن تغيير أي عنصر صفحة بتنسيق يمكن تشغيله بواسطة المستخدم أو عرضه كالمعتاد. أي عنصر به شاشة عرض: لا يمكن عرض أي خاصية لا يمكن الوصول إليها بواسطة شجرة العرض باستخدام JavaScript أو إدخالها عبر عناصر HTML مختلفة في DOM.

يقاطع JavaScript DOM و CSSOM لأنه يغير DOM و CSSOM في وقت قراءتهما بواسطة المتصفح. لذلك ، لمنعه من التأثير سلبًا على وقت تحميل الصفحة وسرعته ، من الضروري فحص العلاقة بين عرض DOM و CSSOM وجافا سكريبت.

أعلاه هو مثال لشجرة التقديم. تحتوي جميع المقتطفات المتشابكة من التعليمات البرمجية في عُقد CSSOM و HTML على معادلات دلالية في شجرة العرض. إذا نظرت بعناية ، ستلاحظ أن عقدة HTML "زر الإجراء" ليست في شجرة العرض. والسبب الرئيسي لذلك هو "العرض: لا شيء ؛" خاصية CSS. بسبب أمر الاختفاء هذا ، لم يتم تضمينه في شجرة العرض. لمعرفة كيفية بناء العناصر في هذه الشجرة ، قد ترغب في قراءة المقالة الأولى في هذه السلسلة.

إذا كان لديك العديد من عناصر الصفحة التي لن تظهر في التحميل الأول لأنها تعتمد على سلوك المستخدم ، في ترتيب تحميل المورد ، فسيتعين عليك فصل هذه العناصر ووضعها في الصف الأخير. يعد استخدام Shadow DOM أو DOM الظاهري خيارين أفضل في هذه المرحلة.

سمات التأجيل وغير المتزامن لموارد JavaScript

إذا وضعت ملفات JS في المقطع وإذا لم تستخدم سمات "تأجيل" أو "غير متزامن" ، فمن المحتمل أن يؤدي ذلك إلى تأخير وقت DOMContentLoaded الخاص بك. لمنع هذا الموقف ، قد نستخدم هاتين السمتين. التأجيل هو تأخير عملية تحميل ملف JS بينما يقوم "Async" بتحميل JS والمصادر الأخرى بطريقة متوازية. لكلاهما مميزات ومساوئ. سنتحدث فقط عن النقاط الرئيسية هنا.

  • إذا كنت تستخدم defer في ملف JS رئيسي ، فمن المحتمل ألا ترى تأثيرات "البادئ" حتى يتم تثبيته.
  • إذا كنت تستخدم التأجيل كثيرًا ، فقد تتسبب في حدوث اختناق في وحدة المعالجة المركزية في نهاية تحميل الصفحة.

منذ كتابة هذه المقالة ، تم إصدار تحديث Chrome 80. في عمود البادئ ، أصبح الآن من السهل جدًا معرفة المورد الذي يتم استدعاؤه من خلال أي مورد. على سبيل المثال ، يمكنك رؤية صورة أو ملف CSS تم استدعاؤه بواسطة JS. إذا قمت بالتمرير خلال الموارد عن طريق الضغط باستمرار على مفتاح shift ، فسترى أيضًا المورد الذي لا يمكن استخدامه دون تحميل موارد أخرى.

التمرير أثناء الضغط على مفتاح Shift: يشير اللون الأحمر إلى المورد الشرطي للمورد المميز باللون الأخضر.

يمكنك أيضًا استخدام قسم "البادئ" الجديد من Chrome للحصول على طلب تحميل موارد أكثر تفصيلاً والبادئ ومراجعة الأولوية. يتيح لك ذلك اكتشاف سلاسل مكالمات JS الطويلة والمكلفة للغاية مثل تلك الموجودة أدناه.

مثال على سلسلة مكالمات JS طويلة ومكلفة من نفس الموقع. فوق المورد المحدد هم المبادرون. يعرض الجزء التالي الموارد التي بدأها المورد المحدد.

  • يتم تنزيل ملفات JS المؤجلة بعد حدث domInteractive ، لذلك تحتاج إلى اختيارها وفقًا لملفات CSS وصورك.
  • إذا قمت بتأجيل بعض ملفات JS لجهة خارجية لتعقب المستخدم ، فقد لا تتمكن من تتبع سلوكيات معينة للمستخدم.
  • لا يؤدي التأجيل عادةً إلى حظر عملية DOM ولكن Async يفعل ذلك. يتم تنزيل ملفات JS ذات السمات غير المتزامنة بواسطة المستعرض أثناء تحليل HTML ومعالجة CSSOM.
  • إذا كنت تستخدم السمة غير المتزامنة كثيرًا ، فمن المحتمل أنك ستنشئ عنق زجاجة معالجة وحدة المعالجة المركزية وأيضًا ستبطئ عمليات DOM و CSSOM. عليك أن تختار بعناية ما يجب تأجيله أو عدم تزامنه.

فيما يلي مثال على مخطط للسمات غير المتزامنة والمؤجلة. يتم تحميل أول واحد قبل domContentLoaded بدون تقسيم تحليل HTML أثناء الجلب. في الثانية ، لا يتم تنفيذ ملف JS الذي تم جلبه قبل انتهاء تحليل HTML.

اقتراحات ونصائح حول أداء وأداء جافا سكريبت

قبل الدخول في أمثلة التدريب ، إليك بعض الاقتراحات لتحسين أداء عرض JavaScript. قد يساعد هذا أيضًا في توفير فهم أفضل لسرعة الصفحة وكيفية عمل المستعرض.

لا تستخدم المتغيرات غير الضرورية.

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

var carName = العلامة التجارية + ”” + السنة ؛
document.getElementById (“demo”). innerHTML = carName؛

هنا ، المتغير "carName" غير ضروري. يمكنك اقتراح التعديل التالي:
document.getElementById (“demo”). innerHTML = العلامة التجارية + ”” + السنة

أو:

[أ ، ب ، ج ، د ، هـ]. لكل (وظيفة (قيمة ، فهرس) {
console.log (الفهرس) ؛
}) ؛

هنا ، معلمة "القيمة" ليست ضرورية ، لأنها غير مستخدمة. يمكنك إزالته:
[أ ، ب ، ج ، د ، هـ]. لكل (وظيفة (فهرس) {
console.log (الفهرس) ؛
}) ؛

على الجانب الأيمن ، يمكنك رؤية أوقات اتصال أطول (خطوط بيضاء) ويتم تحميل ملفات CSS و JS بترتيب غير متماثل بفضل نصوص جافا سكريبت "غير المتزامنة".

على الجانب الأيسر ، تكون أوقات الاتصال أقصر ولا يتم خلط ملفات CSS و JS لأن كل مصدر يتم تحميله في صفوف. يمكن لسمات Async أن تقلل من مؤشر السرعة الخاص بك حيث يمكنها تمديد وقت TBT ، لذلك تحتاج إلى إجراء تحقيق وإبلاغ فريق التطوير الخاص بك بملفات JS لتعقب الأداء من علامة تبويب الأداء ، أو يمكنك تشغيل بعض التجارب بنفسك.

استخدم الأدوات للمهام الصعبة

بالنسبة للمبتدئين في الكود ، قد يكون من الصعب العثور على متغيرات غير ضرورية أو غير مستخدمة. قد ترغب في استخدام بعض الأدوات لهذه المهام ، مثل حزم Chrome DevTools أو Node.js مثل Unused (Kami / node-unused: وحدة تحدد التقارير ، ولكن المتغيرات غير المستخدمة في التعليمات البرمجية الخاصة بك. أو لمزيد من المتغيرات غير المستخدمة). إذا وجدت بعض الأخطاء الصغيرة ، فأنا أعتقد أن فريق تكنولوجيا المعلومات لديك سيستمع إليك لتحسين ملفات JavaScript.

استخدام تقرير تغطية Chrome DevTools للعثور على شفرة JavaScript غير مستخدمة

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

TreeShaking يعني حذف التعليمات البرمجية الميتة من الملفات. أوصي بالتعلم باستخدام متغيرات JS غير المستخدمة وحزم مكتشف الوظائف من أجل كسب الوقت.

سيساعد حجم DOM الأصغر أيضًا في عرض JavaScript. سيقوم كل أمر (getElementsByTagName) بفحص DOM الخاص بك. سيتطلب حجم DOM الأصغر موارد أقل من المستعرض الخاص بك ووحدة المعالجة المركزية / الشبكة الخاصة بجهازك عند عرض JavaScript.

مع تحديث Chrome 80 الجديد ، خضع تقرير التغطية أيضًا لتغيير. لقد أضافوا اختيارات اختيارية لكل وظيفة ولكل كتلة. كل بلوك هي القيمة الافتراضية هنا.

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

ضغط ملفات JS أو تصغيرها أو تكبيرها.

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

يجب أن تعرف وظائف السهم لهذا النوع من الضغط. على سبيل المثال ، بدلاً من هذا المثال المؤلف من 84 حرفًا:

وظيفة السهم Islev (أ ، ب) {
console.log (أ + ب) ؛
}
السهم فونكسيون (5 ، 6) ؛

يمكنك ضغطه إلى 50 حرفًا فقط مع وظائف السهم =>
const أب = (أ ، ب) => ب + أ ؛
console.log (أب (5 ، 6)) ؛

هناك طريقة أخرى للتقصير / الضغط صالحة لعبارات If. بدلاً من مقتطف الشفرة هذا المكون من 63 حرفًا:
إذا (أ <ب) {
console.log (أب) ؛
}
آخر {
console.log (أ + ب) ؛

يمكنك استخدام واحد مع 43 حرفًا أدناه:
(أ <ب)؟ console.log (أب): console.log (أ + ب) ؛

يمكنك أيضًا أن تقترح على فريق تكنولوجيا المعلومات لديك استخدام علامتي $ و _ للضغط. تعمل معظم ملفات JavaScript لإعادة تفسير DOM. لهذا ، قد ترى الكثير من document.getElementById (x)؛ مقتطفات التعليمات البرمجية في الملفات. يمكنك استخدام علامة $ لهذه المهمة. سيوفر لك هذا كومة ضخمة من الحجم غير المجدي.

تستخدم معظم مكتبات JavaScript $ افتراضيًا لتعريف الوظيفة ، ولكن ليس كلها ، لأن $ هو أيضًا حرف أبجدي.

في هذه الحالة ، قد تقترح أن يستخدم فريق تكنولوجيا المعلومات لديك:
الوظيفة $ (x) {return document.getElementById (x)؛}.

استخدم نوع عرض مناسب

أنواع عرض JavaScript وصفحات الويب من حيث توافق SEO.
يعني ترطيب SSR أنه سيتم تقديم بعض مكونات JS باستخدام عرض جانب العميل. إنه مفيد لـ FP و FMP ولكن يمكن أن يكون هناك بعض الجوانب السلبية لنتائج TTI و Speed ​​Index.
مصدر الصورة: Notprovided.eu

أفضل ممارسات الترميز لأداء عرض JavaScript

  • ستأتي مساهمة ضغط مهمة أخرى من استخدام "_". يمكنك استخدام "undercore.js" لتنسيقات ووظائف كتابة JavaScript محسّنة. بهذه الطريقة ، ستقوم بإنشاء ملفات JS أصغر أثناء معالجة القوائم والمجموعات باستخدام وظائف JS أقصر بدون وظائف JS المضمنة.
  • إن استخدام الكثير من التغييرات المتغيرة الطويلة والمرهقة والتلوث العالمي المتغير هي أيضًا مصادر للعرض البطيء. يجب أن تحدد اختيارات النطاق العامة لوظائفك وأنواع المتغيرات العامة / المتغيرات الطويلة. يعد استخدام المتغيرات المحلية مع "Let" أفضل في العرض. بسبب المتغيرات المحلية ، لن تقوم المتصفحات بمراجعة متغيرات الوظائف العامة الأخرى للتغيير التالي.

لمحاكاة اختبار أداء أكثر واقعية ، على سبيل المثال ، ما قد تراه على الهواتف المحمولة منخفضة التكلفة ، يجب عليك استخدام تفضيلات CPU Throttling و Fast / Slow 3G Connection في Chrome DevTools.
مصدر الصورة: Addy Osmani

  • سيساعد استخدام وظائف JS الأصغر والسلاسل المتغيرة في أداء العرض. بالإضافة إلى ذلك ، فإن استخدام المحدد "هذا" بدلاً من المحدد "مع" هو الأفضل. محدد "هذا" في Javascript هو رمز وظيفي محلي بخلاف "with" ، نفس المنطق مع let و var صالح هنا أيضًا.
  • إذا كنت تستخدم عباراتك في مقتطفات شفرة حلقة For ، فسيؤدي ذلك أيضًا إلى إبطاء سرعة العرض قليلاً. لأن بيان الوظيفة الخاص بك سوف يتكرر خلال كل عنصر من عناصر الحلقة. يمكنك ببساطة إنشاء متغير جديد لعناصر الحلقة ويمكنك استدعاء هذه العناصر بوظيفة خارج الحلقة For.
  • إذا كنت تريد الوصول إلى عنصر HTML عدة مرات ، فيمكنك إنشاء متغير له ويمكنك تسميته بالوظائف التي تريدها. لا يعد الوصول إلى عنصر HTML باستخدام JavaScript عملية سريعة. يمكنك ببساطة إنشاء المزيد من العبء على متصفحك.

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

ربط الأمر: كيف يؤثر تحسين JavaScript وسرعة الصفحة على تحسين محركات البحث

لمنع أصول JavaScript من تخريب سرعة صفحتك ، رأينا كيف يمكن لـ Defer و Async إحداث فرق كبير. لقد نظرنا أيضًا في بعض استراتيجيات "تصحيح الأخطاء" ونصائح الترميز التي يمكن أن تساعدك على تحسين سرعة صفحاتك باستخدام أصول JavaScript.

الآن وقد رأينا كيف تنشئ المتصفحات صفحات الويب ، وكيف يتم قياس سرعة الصفحة وتأثرها ، والدور الذي يلعبه تحسين JavaScript في وقت تحميل الصفحة ، ستوضح المقالة التالية كيف يؤثر ترتيب تحميل الموارد على سرعة الصفحة وميزانية الزحف.

إذا كنت مهتمًا بمراجعة المقالات السابقة في هذه السلسلة المكونة من أربع مقالات ، فيمكنك العثور عليها هنا:

  • "كيف يقوم المستعرض بإنشاء صفحة ويب"
  • "مقاييس سرعة الصفحة المتقدمة".
ابدأ تجربتك المجانية