DOM and Parsing Process is parts of Internal Working of a Web Browser

HTML DTD

HTML DTD एक प्रकार का Format होता है, जो HTML के सभी Allowed Elements की Definitions, Attributes व Hierarchy को Hold करता है और इस बात को Specify करता है कि कौनसे HTML Elements किस प्रकार से Organize होने चाहिए।

DOM (Document Object Model)

Parse Tree या Render Tree, DOM Elements व Attribute Nodes की एक Tree होती है। Tree के हर Node को Object कहा जाता है। DOM का हर Mode किसी HTML Document के विभिन्न HTML व Attribute Node तथा उनके Interfaces के समूह को Represent करता है। हर Object वास्तव में Properties व Methods का एक Collection होता है। Properties किसी Object की Appearance व States से संबंधित जानकारियों को Hold करता है जबकि Methods उन जानकारियों को Access करने का काम करते हैं।

Render Tree में हर HTML Element व Attribute एक Object की तरह होता है, जिसके विभिन्न Attributes जैसे कि Styles आदि उन HTML Elements की Properties के रूप में होते हैं और इन Properties को JavaScript जैसी किसी Programming Language द्वारा विभिन्न Interface Methods के Through Access किया जाता है। DOM में Render Tree के हर Element के बीच One to One की Relationship होती है। जैसेः

<html>
  <body>
    <p>
      Hello World
    </p>
    <div> <img src="example.png"/></div>
  </body>
</html>

जब ये HTML Document Parse होगा, तब बनने वाला Render Tree निम्नानुसार एक DOM Tree के रूप में Represent होगा :

DOM and Stylesheet and Script Parsing Order

HTML की तरह ही DOM भी W3C Organization द्वारा Specified है। ये Document को Manipulate करने के लिए बनाया गया एक Generic Specification है, जो तय करता है कि किसी HTML Document के विभिन्न Elements व Attributes तक किस तरह से पहुंचा जाए और किस तरह से उन्हें Access किया जाए। DOM Tree किसी Document का In-Memory Representation होता है।

Scripts

जब HTML Document की Parsing होती है और Parser <script> Element पर पहुंचता है, तो Document की Parsing तब तक के लिए रूक जाती है, जब तक कि Script पूरी तरह से Web Browser में न आ जाए। यदि Script External हो, तो Parsing तब होना शुरू होता है, जब वह Script पूरी तरह से Web Browser में Download हो जाती है।

HTML5 में हम किसी Script को Asynchronous Mark करके Web Browser को ये बता सकते हैं कि Document Normal तरीके से बिना रूके हुए Download हो तथा Script एक अलग Thread में Download हो, ताकि Script के Load होने तक, Document की Parsing न रूके यानी Render Engine Script के Load होने का Wait न करे।

Webkit व Gecko, दोनों ही Engines को इस सुविधा के लिए Optimize किया गया है। जब एक Thread Script को Execute कर रहा होता है, उसी समय दूसरा Thread Document की Parsing कर रहा होता है और Document के लिए जरूरी सभी Resources को Network से प्राप्त कर रहा होता है। इस तरह से HTML5 Supported Web Browsers में Parallel Form में Document की Rendering होती है।

ध्यान रखने वाली बात ये है कि ये प्रक्रिया केवल External Scripts, Style Sheets व Images पर Apply होती है। Internal Styles, Scripts व Images Normal तरीके से ही Parse होते हैं तथा Document के आधार पर बनने वाली DOM Tree में भी किसी तरह का कोई परिवर्तन नहीं होता।

Stylesheets

Stylesheets सामान्यतया DOM Tree को किसी प्रकार से Modify नहीं करते इसलिए Stylesheet का Script से पहले Load होना जरूरी नहीं होता, लेकिन यदि कोई Script DOM Tree के किसी Style को Access करता है, तो उस स्थिति में Stylesheet का Script से पहले Load होना जरूरी होता है। इस Issue को Webkit व Gecko Engines दोनों अपने तरीके से Handle करते हैं।

यदि किसी Script को किसी Style Sheet के Content की जरूरत हो, तो FireFox Script को तब तक के लिए Block कर देता है, जब तक कि Stylesheet पूरी तरह से Load व Parse नहीं हो जाता जबकि Webkit केवल उसी स्थिति में किसी Script को Block करता है, यदि Script किसी Unloaded Style Sheet की Properties को Modify करने की कोशिश करता है।

जब DOM Tree Construct हो रहा होता है, तब Browser एक दूसरी Tree Create करता है, जिसे Render Tree कहते हैं। ये Tree Visual Elements के उस क्रम में होती है, जिस क्रम में Visual Elements Web Browser में Display होने वाले होते हैं। ये Document का Visual Representation होता है। इस Tree का मूल उद्‌देश्‍य Web Browser में Contents को सही क्रम में Paint करना होता है।

FireFox Render Tree के Elements को “Frames” कहता है जबकि Webkit में इसे Renderer या Render Object कहा जाता है। Renderer या Render Object ये जानता है कि उसे व उसके Children को Web Browser में किस प्रकार से Layout व Paint होना है।

(DOM and Parsing Process)

ये Article इस वेबसाईट पर Selling हेतु उपलब्‍ध EBook HTML5 with CSS3 in Hindi से लिया गया है। इसलिए यदि ये Article आपके लिए उपयोगी रहा, तो निश्चित रूप से ये पुस्तक भी आपके लिए काफी उपयोगी साबित होगी।