🙌 👨🏾‍🎤 🏎️ ما هو أداء تطبيق الويب؟ 🙎 🥧 🗯️

يتم تحميل بعض التطبيقات بسرعة ، بعضها ببطء ، ولكن بسبب ما يحدث هذا؟ هل سرعة تحميل الصفحة هي المقياس الوحيد لأداء التطبيق؟

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

عندما تنشأ مشاكل الأداء

يمكنك تطوير تطبيقات الويب لسنوات وليس لديك أي مشاكل في أداء التطبيق.

ولكن ، على الأرجح ، تنشأ مشاكل في الحالات التالية:

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

مما يتكون الأداء

على الصعيد العالمي ، يمكن تقسيم مشكلات أداء تطبيقات الويب إلى فئتين: نقل البيانات ووقت التشغيل.

نقل البيانات يعني تنزيل أي موارد ضرورية لتشغيل التطبيق.
تحت وقت التشغيل - تشغيل التطبيق ، ومعالجة إدخال المستخدم.

تحتوي كل فئة من هذه الفئات على الكثير من الفروق الدقيقة التي لا نفكر فيها كثيرًا ، ولكنها تميز التطبيقات عالية الجودة عن التطبيقات منخفضة الجودة.

في ما يلي مقاييس أداء تطبيق الويب الأكثر شيوعًا (يجب أن تكون جميعها قليلة):

تحميل الصفحة

TTFB - حان الوقت لاستقبال البايت الأول ( الوقت للبايت الأول ).
FCP - وقت عرض المحتوى الأول ( First Contentful Paint ).
FMP هو الوقت من أول مغزى الطلاء .
TTI - الوقت حتى تتمكن الصفحة من الاستجابة لمدخلات المستخدم ( الوقت للتفاعل ).

مدة العرض

وقت استجابة إدخال المستخدم.
واجهة تعيد رسم الوقت.

على الرغم من أن كل من TTFB و TTI مقاييس لأداء تحميل الصفحة ، إلا أن المشكلات المتعلقة بوقت التشغيل يمكن أن تؤثر عليها أيضًا.

كيفية البحث عن مشكلات الأداء وتحليلها

مجموعة الأدوات الرئيسية في ترسانة المطور هي Chrome DevTools أو أدوات مماثلة ، مثل أدوات مطوري Firebug / Firefox .
يمكن كتابة مقالات منفصلة عنها ، ولكننا سنقتصر على أهم النقاط.

الشبكة - تسمح لك بالتحليل التفصيلي للموارد التي يتم تحميلها على الصفحة ، ومن أي الموارد وبأي سرعة وما إلى ذلك. تُستخدم هذه الأداة غالبًا لتحليل سرعة تحميل الصفحة يدويًا.

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

منارة - أداة مضمنة في Chrome DevTools تبدأ في تحميل الصفحة وتسجيل المقاييس وتحليلها وحتى تقديم توصيات لتحسين الأداء.

كيفية قياس / مراقبة الأداء

يمكن تقسيم أدوات مراقبة أداء تطبيقات الويب إلى فئتين: تلك التي تأخذ قياسات اصطناعية وتلك التي تسجل بيانات الأداء من مستخدمين حقيقيين.

تتضمن أدوات المراقبة الاصطناعية Lighthouse و Webpagetest .
لرصد المستخدمين الحقيقيين (RUM - مراقبة المستخدم الحقيقي) mPulse و Sematext مناسبان .

بالإضافة إلى ذلك ، هناك أدوات مثل Webpack-bundle-analyser التي لا يمكن تعيينها لهاتين الفئتين. ولكن بمساعدتهم ، يمكنك قياس بعض المعلمات التي تؤثر على الأداء ، مثل حجم الحزمة.

نقل البيانات

اتصال TCP ، بحث DNS - يمكنك تسريع تحميل الصفحة حتى بسبب التكوين الصحيح للاتصالات بالخادم. على وجه الخصوص ، إذا كنت تستخدم الجلب المسبق لنظام أسماء النطاقات أو حتى عناوين IP بدلاً من أسماء النطاقات.

TTFB (الوقت حتى البايت الأول) . الوقت للحصول على البايت الأول هو مقياس مهم. لتسريعها ، يجب أن تحاول تنفيذ أقل قدر ممكن من المنطق على الخادم قبل إصدار index.html.

HTTP1 مقابل HTTP2 - يمكن لـ HTTP2 تسريع تحميل الصفحة بشكل كبير عن طريق تعدد الإرسال أو ضغط الرؤوس. بالإضافة إلى ذلك ، يفتح بروتوكول جديد (نسبيًا) مجموعة من الميزات ، مثل دفع الخادم.

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

CDN (شبكة توصيل المحتوى) ستساعد على تسريع التحميل للعملاء الموزعين جغرافيا.

تحديد أولويات الموارد (التحميل المسبق والجلب المسبق والاتصال المسبق) هو تسريع تحميل الصفحة بسبب استراتيجية تحميل الموارد الصحيحة. تتيح لك المتصفحات تحديد الأولويات لأنواع مختلفة من الموارد وتنزيل ما هو مهم للعرض الأول في وقت سابق.

ضغط ثابت: GZIP و Brotli . Brotli هو خوارزمية ضغط من شأنها تقليل الوزن الثابت ، وبالتالي زيادة سرعة التنزيل. وهنا حل رائع من زميلي.

Webp vs Png & Jpg. يعد Webp بديلاً رائعًا لـ Png. بالإضافة إلى انخفاض وزن الصور ، فإن Webp ليست أقل جودة. الآن يدعم هذا التنسيق حوالي 78٪ من المتصفحات . ولكن حتى إذا كنت بحاجة إلى دعم بنسبة 100٪ ، يمكنك تنفيذ طلب احتياطي على Png باستخدام علامة الصورة .

مدة العرض

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

requestIdleCallback هي وظيفة مفيدة تسمح لك بتنفيذ التعليمات البرمجية في وقت فراغك في نهاية الإطار (الإطار / التأشير) أو عندما يكون المستخدم غير نشط. سوف يساعد على التخلص من كل التباطؤ و "التجمد".

requestAnimationFrame يسمح لك بالتخطيط للرسوم المتحركة بشكل صحيح وزيادة فرص عرض 60 إطارًا في الثانية.

ES2015 مقابل ES5 . يوفر ES2015 العديد من الميزات أكثر إنتاجية من ES5.

التلاعب دوم. التلاعب مع DOM باهظة الثمن ، فأنت بحاجة إلى تنفيذها بعناية وبشكل هادف. على سبيل المثال ، لا تقم باستدعاء querySelector () في حلقة إذا كان من الممكن القيام بذلك بمكالمة واحدة.

تقديم حظر المورد . قد يؤدي تحميل بعض الموارد إلى حظر العرض. لتجنب ذلك ، تحتاج إلى استخدام السمات defer ، async ، preeload.

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

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

التمرير الظاهري طريقة ذكية ليس لتقديم قوائم كبيرة ، ولكن لتوليدها عند التمرير. يسمح لك باستهلاك ذاكرة أقل وتسهيل قوائم التمرير.

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

ما يفرض التخطيط / التدفق - ورقة الغش حيث يمكنك العثور على قائمة بالوظائف والمعلمات التي تعمل معها والتي تسبب التخطيط / التدفق.

المجسم

اهتزاز الشجرة - إزالة الرمز غير المستخدم من الحزمة وتسريع تحميل الصفحة.

تقسيم الكود - تقسيم الكود إلى أجزاء ، يمكنك تحسين الحمل الأول وفتح القدرة على تنزيل أجزاء من الكود "بتكاسل". يمكن أن يقلل

التعتيم من حجم الحزمة بل ويساعد قليلاً في إخفاء الرمز الخاص بك من أعين المتطفلين.

هندسة معمارية

ربما يكون العرض الجانبي للخادم هو أفضل طريقة معروفة لجعل SPA يتم تقديمه على الفور عند التمهيد الأول. هذا مطلب مهم لبعض محركات البحث (وليس فقط).

كسول تحميل الصور والفيديو ( + أصلي ) - حل أصلي مصمم لتحسين مقاييس العرض الأول بسبب التحميل "البطيء" للصور ومقاطع الفيديو.

وحدات / طرق التحميل البطيئة هي أداة موجودة في جميع الأطر والمكتبات الشائعة. يسمح لك بتحميل أجزاء من وظائف التطبيق "بتكاسل". يسمح لك

التخزين المؤقت للملفات مع عمال الخدمة بتخزين الملفات في المتصفح مؤقتًا وعدم تنزيلها في كل مرة من الخادم. ربما تكون الطريقة الوحيدة للقيام بوضع عدم الاتصال في تطبيق مستعرض.

التخزين المؤقت HTTP - يمكن أن يؤدي استخدام بعض رؤوس HTTP إلى تحسين سرعة تحميل الصفحة بشكل كبير وتقليل تحميل الخادم.

ما هو أداء تطبيق الويب؟

عندما تنشأ مشاكل الأداء

مما يتكون الأداء

تحميل الصفحة

مدة العرض

كيفية البحث عن مشكلات الأداء وتحليلها

كيفية قياس / مراقبة الأداء

نقل البيانات

مدة العرض

المجسم

هندسة معمارية

More articles: