يرسم Resource Waterfall كل طلب تقدمه الصفحة على مخطط زمني، وكل شريط مقسم إلى مراحله الحقيقية - في قائمة الانتظار، وDNS، وTCP، وTLS، والانتظار والتنزيل - مع علامات FCP، وLCP، وDOMContentLoaded، والتحميل.
عندما تشعر الصفحة بالبطء، يكون السؤال هو نفسه دائمًا: ماذا تنتظر؟ توجد إجابة المتصفح في لوحة الشبكة، مما يعني فتح DevTools، وإرساء درج فوق الصفحة التي تقوم بفحصها، وإعادة التحميل لالتقاط بداية التحميل.
يضع Resource Waterfall هذا المخطط الزمني في لوحة عائمة بجانب الصفحة. يظهر كل طلب كشريط تم وضعه حسب وقت بدايته ومجزأ حسب المكان الذي ذهب فيه وقته فعليًا: في قائمة الانتظار أو المتوقف، بحث DNS، اتصال TCP، مصافحة TLS، انتظار الخادم، ثم التنزيل. المقطع الأزرق الطويل هو خادم بطيء؛ واحد أخضر طويل هو ملف سمين. اللون الرمادي الطويل يعني أن الطلب جلس ينتظر دوره. التمييز يقرر ما يجب عليك إصلاحه.
تعرض العلامات المتقطعة عبر المخطط الزمني أول طلاء محتوى، وأكبر طلاء محتوى، وDOMContentLoaded والتحميل، حتى تتمكن من معرفة الطلبات التي تنتهي قبل أن يرى المستخدم أي شيء وأيها لا يزال مستمرًا بعد ذلك. يتم وضع علامة على موارد حظر العرض ونتائج ذاكرة التخزين المؤقت في كل صف، ويقوم مرشح حظر واحد بتقطيع القائمة إلى ما يؤخر الطلاء الأول بالفعل.
يمكنك التصفية حسب النوع، أو البحث حسب عنوان URL، أو الفرز حسب الأبطأ أو الأكبر للعثور على أسوأ المجرمين بسرعة. انقر فوق أي صف للحصول على عنوان URL الكامل والبروتوكول وأحجام النقل وفك التشفير والحالة وتفاصيل المرحلة الكاملة. الطلبات التي تصل عندما تكون اللوحة مفتوحة للبث مباشرة، ويقوم تصدير JSON بنسخ المخطط الزمني بالكامل، بما في ذلك المعالم، بحيث يمكن تسليم نتائج الأداء إلى شخص آخر دون لقطة شاشة.
يتم تقسيم كل شريط إلى قائمة انتظار، وDNS، وTCP، وTLS، وانتظار وتنزيل، بحيث يمكن تمييز الخادم البطيء والملف السمين والطلب الموجود في قائمة الانتظار على الفور.
تُظهر الخطوط المتقطعة لـ FCP وLCP وDOMContentLoaded والتحميل الطلبات التي اكتملت قبل أن يرى المستخدم المحتوى وتلك التي لا تزال قيد التشغيل بعد ذلك.
تعمل نقرة واحدة على تقليل القائمة إلى الموارد التي تدعم الطلاء الأول بالفعل، مع إجمالي عدد عمليات الحظر في شريط الملخص.
يتم وضع علامة على الموارد التي يتم تقديمها من ذاكرة التخزين المؤقت وتصنيفها بدلاً من الظهور كصفوف غامضة ذات صفر بايت، حتى تتمكن من التحقق من أن التخزين المؤقت يعمل بالفعل.
قم بالتضييق حسب النوع - المستند، CSS، JS، الصور، الخطوط، XHR، الوسائط - ابحث حسب عنوان URL، أو قم بالفرز حسب الأبطأ أو الأكبر للوصول إلى أسوأ المجرمين في ثوانٍ.
انسخ العرض الشلالي بأكمله بتنسيق JSON، بما في ذلك المعالم الرئيسية والإجماليات ومراحل كل طلب، لإرفاقه بتذكرة أو مقارنته بتشغيل لاحق.
قم بالتصفية للحصول على الموارد التي تحظر العرض وشاهد أوراق الأنماط والبرامج النصية الدقيقة التي تقف بين الزائر والمحتوى المرئي.
قم بالفرز حسب الأبطأ وشاهد التحليلات أو الخطوط أو موفر الدردشة يظهر في الأعلى مع مرحلة انتظار طويلة لا علاقة لها بالرمز الخاص بك.
اقرأ ألوان المرحلة: الوقت المستغرق في الانتظار يمثل مشكلة في الواجهة الخلفية أو CDN، والوقت المستغرق في التنزيل يمثل مشكلة في حجم الملف. الإصلاح مختلف لكل منهما.
أعد التحميل وتأكد من أن الأصول تأتي من ذاكرة التخزين المؤقت وأن أحجام النقل أصغر بكثير من الأحجام التي تم فك تشفيرها، مما يثبت أن الضغط قيد التشغيل بالفعل.
قم بتصدير المخطط الزمني بتنسيق JSON وإرفاقه بتذكرة حتى يرى الشخص التالي نفس الأرقام بدلاً من محاولة إعادة إنتاج جلستك.
انقر على أيقونة Resource Waterfall في قاعدة DevSuite Pro. كل ما قامت الصفحة بتحميله حتى الآن يظهر على المخطط الزمني على الفور.
قم بإعادة التحميل مع فتح اللوحة لالتقاط التحميل من الطلب الأول، بما في ذلك المستند نفسه ومراحل الطلاء.
اضغط على شريحة الحظر لرؤية موارد حظر العرض فقط، أو اختر نوعًا مثل js أو img. قم بالفرز حسب الأبطأ لوضع أسوأ الجاني في الأعلى.
انقر فوق أي صف للحصول على عنوان URL الكامل والبروتوكول والأحجام والحالة والتفصيل المرحلي بالمللي ثانية - وانسخ عنوان URL إذا كنت في حاجة إليه.
يقوم تصدير JSON بنسخ المخطط الزمني الكامل مع المعالم والإجماليات، ويكون جاهزًا للصقه في تذكرة أو الاحتفاظ به كسجل قبل وبعد.
قم بتثبيت DevSuite Pro مجانًا وافتح أكثر من 71 أداة للمطورين لمتصفحك.
