Return to Video

The Render Tree - Website Performance Optimization

  • 0:00 - 0:05
    [BLANK_AUDIO]
  • 0:05 - 0:09
    .حسنًا. إذن تحتوي DOM على كل محتوى الصفحة
  • 0:09 - 0:12
    تحتوي CSSOM على كل أساليب الصفحة. إذن كيف
  • 0:12 - 0:14
    نأخذ المحتوى والأساليب ونحولهما إلى
  • 0:14 - 0:17
    .وحدات بكسل على الشاشة؟ أشعر وكأننا نسينا خطوة متوسطة
  • 0:17 - 0:20
    >> إنه حدس جيد. والآن، نريد أن نجمع بين
  • 0:20 - 0:23
    شجرتي DOM وCSSOM في شجرة العرض التي
  • 0:23 - 0:27
    ستلتقط بالضبط ما وصفته. تتمثل إحدى أهم خصائص
  • 0:27 - 0:30
    .شجرة العرض في أنها تلتقط فقط المحتوى المرئي
  • 0:30 - 0:32
    ولكي نرى ذلك فعليًا، دعونا نطبقه
  • 0:32 - 0:35
    ،المثال الذي نراه أمامنا. في القمة
  • 0:35 - 0:38
    لدينا شجرة DOM، وفي الأسفل لدينا نموذج كائن
  • 0:38 - 0:43
    CSSOM. لإنشاء شجرة العرض، سنبدأ عند
  • 0:43 - 0:45
    جذر DOM، وهي في هذه الحالة
  • 0:45 - 0:49
    عقدة الفقرة وتحققوا مما إذا كانت هناك أية قواعد CSS. هذا
  • 0:49 - 0:52
    يطابقها. في هذه الحالة، نرى بأن لدينا بالفعل
  • 0:52 - 0:55
    قاعدة مطابقة تقوم بعرض النص كله بحجم خط 16
  • 0:55 - 0:58
    بكسل وبحروف غامقة. ولهذا
  • 0:58 - 1:02
    ننسخ عقدة الفقرة إلى شجرة العرض بجانب
  • 1:02 - 1:05
    خصائص CSS الخاصة بها. Okay. انتهينا من
  • 1:05 - 1:08
    عقدة الفقرة. دعونا نتفحص الشجرة. سنرى
  • 1:08 - 1:11
    بعدها hello، وهي عقدة نص ليس
  • 1:11 - 1:14
    .إلا. ولهذا ننسخ ذلك إلى شجرة العرض
  • 1:14 - 1:21
    ثم نصل إلى عقدة الامتداد. لدينا قاعدة CSS مطابقة لها. لدينا
  • 1:21 - 1:27
    امتداد وهو بالفعل تابع لعقدة الفقرة. لكن لاحظوا أن
  • 1:27 - 1:31
    إحدى الخصائص في هذه القاعدة هي أنها معلمة كـ display none، وهو
  • 1:31 - 1:36
    يخبرنا بأن محتويات هذا الامتداد يجب ألا يتم عرضه. ولأن
  • 1:36 - 1:38
    شجرة العرض، كما قلنا، لا تلتقط سوى المحتوى
  • 1:38 - 1:41
    .المرئي. فيمكننا تخطي هذه الشجرة وتوابعها
  • 1:43 - 1:47
    >> سنتخطى التوابع لأن display,none تتالي لأسفل، أليس كذلك؟
  • 1:47 - 1:50
    >> بالضبط. ولهذا، يمكننا تخطي كل
  • 1:50 - 1:51
    العقد التابعة لعقدة الامتداد والانتقال إلى
  • 1:51 - 1:55
    العقدة التالية، وهي في هذه الحالة عقدة نص أخرى ليس
  • 1:55 - 1:59
    .إلا. وننسخ ذلك إلى شجرة العرض بسرعة
  • 1:59 - 2:03
    .>> ولذلك تلتقط شجرة العرض كلا من المحتوى والأساليب
  • 2:03 - 2:07
    >> صحيح. والآن، فلنلق نظرة على صفحة Hello World. حسنًا، لدينا هنا
  • 2:07 - 2:12
    شجرتي dom وCSS لصفحة Hello World. لبناء شجرة
  • 2:12 - 2:15
    عرض، سنبدأ عند عقدة HTML في
  • 2:15 - 2:19
    شجرة dom. لا يحتوي HTML والأقسام الرئيسية
  • 2:19 - 2:22
    على أي معلومات مرئية. ولذا، يمكننا إزالتها
  • 2:22 - 2:25
    سريعًا من شجرة العرض. وبعدها، لدينا
  • 2:25 - 2:29
    عقدة النص الأساسي. فلننسخ ذلك مرةً أخرى. يجب أن
  • 2:29 - 2:31
    يبدو هذا الجزء الأيسر من الشجرة مألوفًا. فهذا ما
  • 2:31 - 2:33
    بنيناه للتو. إذن فلننسخ ذلك مرةً أخرى
  • 2:33 - 2:37
    .كذلك. وأخيرًا، لدينا عقدتي القسم والصورة
  • 2:37 - 2:39
    يحتوي كلتاهما على محتوى مرئي، ولذا يمكننا
  • 2:39 - 2:42
    أيضًا نسخهما مرةً أخرى، ونسخ أساليبهما إلى
  • 2:42 - 2:44
    شجرة العرض. وبعد الانتهاء من ذلك، قارنوا
  • 2:44 - 2:48
    .شجرة العرض هذه بما لدينا على الشاشة
  • 2:48 - 2:51
    >> هاه. أجل. شجرة العرض تمثيل جيد
  • 2:51 - 2:54
    جدًا. اختفى النص غير الضروري. يمكنني أن أرى بأنه
  • 2:54 - 2:56
    يجب أن تكون هناك صورة على الشاشة ويجب
  • 2:56 - 3:00
    أن يتم عرضها على الجانب الأيمن. إذن هل انهينا كل شيءٍ الآن؟
  • 3:00 - 3:03
    .>> ليس تمامًا. ما زال لدينا التخطيط. لكن لدينا أولاً اختبار قصير
Title:
The Render Tree - Website Performance Optimization
Description:

more » « less
Video Language:
English
Team:
Udacity
Project:
UD884 - Website Performance Optimization
Duration:
03:05
Udacity Robot edited Arabic subtitles for 02-14 The Render Tree

Arabic subtitles

Revisions