YouTube

Got a YouTube account?

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

Arabic subtitles

Converting HTML to the DOM - Website Performance Optimization

Get Embed Code
6 Languages

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

  1. عندما تبحث عن عنوان URL وتضغط على Enter، سيرسل المستعرض طلبًا
  2. للخادم. وعلى سبيل المثال، يمكننا محاكاة
  3. هذا على سطر الأوامر مباشرة. وبمجرد استقبال المستعرض
  4. للاستجابة، وهو عنوان HTML الذي نراه هنا، ينبغي عليه تحويل العلامة بالكامل
  5. بطريقة ما إلى شيء نراه
  6. على الشاشة هنا. هل تساءلت قبل ذلك عن كيفية حدوث ذلك؟
  7. .>> حسنًا، الآن وقد ذكرتَ هذا، فقد يبدو الأمر سحريًا بعض الشيء
  8. >> وليس في الأمر سحر. حيث يتبع المستعرض
  9. مجموعة خطوات محددة جيدًا ويبدأ هذا
  10. بمعالجة عنوان HTML وإنشاء DOM. وتحتوي مواصفات
  11. HTML على مجموعة من القواعد التي تحدد كيفية
  12. معالجتنا للبيانات المستلمة. على سبيل المثال، يتميز النص المضمن بين
  13. قوسي الزاوية بمعنى خاص في HTML
  14. ويتم تعيينه كعلامة. ونتيجة لهذا، متى رأينا علامة
  15. سيصدر المستعرض رمزًا. وفي
  16. ،هذه الحالة، يمَثَّل هذا النص برمز HTML لعلامة البداية. وبعد ذلك
  17. .نحصل على علامة Start وعلامة head وهكذا
  18. يتم إجراء هذه العملية بالكامل باستخدام عامل تجزئة، وأثناء عمل عامل التجزئة
  19. إليك عملية أخرى
  20. تستخدم هذه الرموز وتحولها
  21. إلى كائنات عقدة. على سبيل المثال، نحول رمز HTML الأول
  22. .وننشئ عقدة HTML. ثم نستخدم العلامة التالية وننشئ تلك العقدة
  23. >> هل هناك علاقة بين العقد؟
  24. >> نعم، لاحظ أن عامل التجزئة يُنتج رمزي بداية ونهاية
  25. وهو ما يخبرنا بالعلاقة بين
  26. العقد. يأتي رمز head لعلامة البداية قبل رمز HTML لعلامة النهاية
  27. وهو ما يشير إلى أن رمز head ناتج عن
  28. html. وبالمثل، تُمثل عقد meta وlink
  29. نتاجًا لعقدة head
  30. وهكذا. وفي نهاية المطاف، بمجرد استهلاك
  31. جميع الرموز سنصل إلى نموذج كائن المستند
  32. أو DOM ببساطة، وهو بنية شجرة
  33. تلتقط محتوى HTML وخصائصه وجميع
  34. .العلاقات بين العقد
  35. >> حسنًا، على هذا الأساس، قدمنا بتحويل HTML إلى نموذج كائن
  36. .المستند. ومن السهل جدًا أن نعرف سبب تسميه بشجرة DOM
  37. >> نعم، لاحظ أيضًا أن هذه الكائنات
  38. .تحتوي على خصائصها بالكامل
  39. على سبيل المثال، تشتمل عقدة الصورة على سمة مصدر وقد تحتوي هذه العقدة الظاهرة أمامنا
  40. .على نفس الخاصية أيضًا. يمثل نموذج كائنات المستند العرض الأجزاء بالكامل لعلامة HTML
  41. >> حسنًان لهذا قمنا بتنزيل HTML بالكامل
  42. ودمجنا نموذج كائنات مستند. فهمت. حسنًا، ماذا بعد؟
  43. >> حسنًا، ينشئ المستعرض نموذج كائنات مستند بشكل تصاعدي ويمكنك
  44. الاستفادة من هذا لسرعة عرض
  45. الصفحات. وفي الحقيقة، فإن هذا هو ما تفعله
  46. .صفحة البحث Google جيدًا بالفعل. Let me show you