Arabic subtitles

The Render Tree - Website Performance Optimization

Get Embed Code
6 Languages

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

  1. [BLANK_AUDIO]
  2. .حسنًا. إذن تحتوي DOM على كل محتوى الصفحة
  3. تحتوي CSSOM على كل أساليب الصفحة. إذن كيف
  4. نأخذ المحتوى والأساليب ونحولهما إلى
  5. .وحدات بكسل على الشاشة؟ أشعر وكأننا نسينا خطوة متوسطة
  6. >> إنه حدس جيد. والآن، نريد أن نجمع بين
  7. شجرتي DOM وCSSOM في شجرة العرض التي
  8. ستلتقط بالضبط ما وصفته. تتمثل إحدى أهم خصائص
  9. .شجرة العرض في أنها تلتقط فقط المحتوى المرئي
  10. ولكي نرى ذلك فعليًا، دعونا نطبقه
  11. ،المثال الذي نراه أمامنا. في القمة
  12. لدينا شجرة DOM، وفي الأسفل لدينا نموذج كائن
  13. CSSOM. لإنشاء شجرة العرض، سنبدأ عند
  14. جذر DOM، وهي في هذه الحالة
  15. عقدة الفقرة وتحققوا مما إذا كانت هناك أية قواعد CSS. هذا
  16. يطابقها. في هذه الحالة، نرى بأن لدينا بالفعل
  17. قاعدة مطابقة تقوم بعرض النص كله بحجم خط 16
  18. بكسل وبحروف غامقة. ولهذا
  19. ننسخ عقدة الفقرة إلى شجرة العرض بجانب
  20. خصائص CSS الخاصة بها. Okay. انتهينا من
  21. عقدة الفقرة. دعونا نتفحص الشجرة. سنرى
  22. بعدها hello، وهي عقدة نص ليس
  23. .إلا. ولهذا ننسخ ذلك إلى شجرة العرض
  24. ثم نصل إلى عقدة الامتداد. لدينا قاعدة CSS مطابقة لها. لدينا
  25. امتداد وهو بالفعل تابع لعقدة الفقرة. لكن لاحظوا أن
  26. إحدى الخصائص في هذه القاعدة هي أنها معلمة كـ display none، وهو
  27. يخبرنا بأن محتويات هذا الامتداد يجب ألا يتم عرضه. ولأن
  28. شجرة العرض، كما قلنا، لا تلتقط سوى المحتوى
  29. .المرئي. فيمكننا تخطي هذه الشجرة وتوابعها
  30. >> سنتخطى التوابع لأن display,none تتالي لأسفل، أليس كذلك؟
  31. >> بالضبط. ولهذا، يمكننا تخطي كل
  32. العقد التابعة لعقدة الامتداد والانتقال إلى
  33. العقدة التالية، وهي في هذه الحالة عقدة نص أخرى ليس
  34. .إلا. وننسخ ذلك إلى شجرة العرض بسرعة
  35. .>> ولذلك تلتقط شجرة العرض كلا من المحتوى والأساليب
  36. >> صحيح. والآن، فلنلق نظرة على صفحة Hello World. حسنًا، لدينا هنا
  37. شجرتي dom وCSS لصفحة Hello World. لبناء شجرة
  38. عرض، سنبدأ عند عقدة HTML في
  39. شجرة dom. لا يحتوي HTML والأقسام الرئيسية
  40. على أي معلومات مرئية. ولذا، يمكننا إزالتها
  41. سريعًا من شجرة العرض. وبعدها، لدينا
  42. عقدة النص الأساسي. فلننسخ ذلك مرةً أخرى. يجب أن
  43. يبدو هذا الجزء الأيسر من الشجرة مألوفًا. فهذا ما
  44. بنيناه للتو. إذن فلننسخ ذلك مرةً أخرى
  45. .كذلك. وأخيرًا، لدينا عقدتي القسم والصورة
  46. يحتوي كلتاهما على محتوى مرئي، ولذا يمكننا
  47. أيضًا نسخهما مرةً أخرى، ونسخ أساليبهما إلى
  48. شجرة العرض. وبعد الانتهاء من ذلك، قارنوا
  49. .شجرة العرض هذه بما لدينا على الشاشة
  50. >> هاه. أجل. شجرة العرض تمثيل جيد
  51. جدًا. اختفى النص غير الضروري. يمكنني أن أرى بأنه
  52. يجب أن تكون هناك صورة على الشاشة ويجب
  53. أن يتم عرضها على الجانب الأيمن. إذن هل انهينا كل شيءٍ الآن؟
  54. .>> ليس تمامًا. ما زال لدينا التخطيط. لكن لدينا أولاً اختبار قصير