YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

Arabic subtitles

Analyzing the Entire CRP in DevTools - Website Performance Optimization

Get Embed Code
6 Languages

Showing Revision 1 created 06/09/2016 by Udacity Robot.

  1. حسنًا، لقد ألقينا نظرة على كل الأجزاء
  2. الفردية لمسار العرض الهام. دعنا الآن
  3. .نلقي نظرة على عرض شامل ونتعرف على كيفية تجمع المخطط الزمني
  4. .>> رائع، هذا ما أحتاجه بالضبط
  5. >> للإبقاء على قابلية إدارة الأشياء، سنستخدم صفحة hello world الخاصة بنا
  6. والتي تحتوي على بضعة أنماط CSS مضمنة وبعض النصوص وصورة. دعونا
  7. نقم بالتحديث لالتقاط التتبع الكامل. حسنًا، دعونا نرَ ما الذي يجري
  8. هنا. كما تتوقعون، نرى أولاً الطلب ينتقل
  9. لمستند HTML. بعد ذلك، نحصل على حدث
  10. يوضح أن الخادم أرجع بعض رؤوس الاستجابة، تليها
  11. بعض البيانات. هذه هي HTML لدينا. بعد ذلك، يبدأ المستعرض
  12. تحليل HTML. هذا هو المكان الذي يقوم فيه المستعرض
  13. ،بتحويل وحدات البايت المستلمة إلى شجرة DOM
  14. وفي الواقع، إذا قمنا بتوسيع هذه الملاحظة، فسترون أن
  15. محلل المستندات لدينا. يعثر على مرجع الصورة المضمن
  16. ويبدأ الطلب. بمجرد اكتمال ذلك، يتابع
  17. تحليل HTML وبمجرد وصوله إلى
  18. ،النهاية، يقوم بإنشاء نموذج كائن CSS. في هذا المثال
  19. كانت CSS لدينا مضمنة مباشرة في الصفحة. لذا، ليست
  20. هناك طلبات CSS. بعد ذلك، يقوم المستعرض بإنشاء شجرة
  21. العرض ويحسب كل أنماط المحتوى الذي
  22. يجب أن يكون مرئيًا. على الشاشة. هذا ما يشير إليه حدث
  23. ،إعادة حساب النمط. بمجرد اكتمال ذلك، نتابع التخطيط
  24. والذي يكون كما تعلمون الآن، مكان حساب الموقع
  25. وحجم عناصر شجرة العرض. أخيرًا، بمجرد الاكتمال، نقوم
  26. .بإصدار حدث تلوين ويتم عرض صفحتنا على الشاشة
  27. >> كما تعلمون، عندما بدأنا النظر إلى كل شيء لأول مرة، بدا
  28. كل شيء مربكًا حقًا. لكن هذا
  29. .واضح جدًا. هذا رائع جدًا
  30. .>> يسرني سماع ذلك