Render Tree and DOM Tree doesn’t always follows one to one relationship

DOM Tree and Render Tree: हर Render Object, DOM Element से संबंधित होता है, लेकिन इनका Relation One to One का नहीं होता। Non-Visual DOM Elements (जैसे Head Element या जिन Elements की Display Property को None किया गया है।) Render Tree में Insert नहीं होते, हालांकि Hidden Visibility वाले Elements Render Tree में Appear होते हैं।

कुछ ऐसे DOM Elements भी होते हैं जो कई Visual Objects से संबंधित होते हैं। जैसे “select” Element के तीन Render Object होते हैं। एक Display Area के लिए, दूसरा Drop Down List Box के लिए व तीसरा Click किए जाने वाले Dropdown Button के लिए।

इसी तरह से किसी Multi Line Text Box में जब Text एक ही Line में पूरी तरह से नहीं समा सकता और दूसरी Line में जाता है, तब हर Line के लिए एक नया Render Object Create होता है।

कुछ Render Objects एक DOM Mode से संबंधित होते हैं लेकिन Tree में समान Location पर नहीं। जैसे Floats व Absolutely Positioned Elements Document के Normal Flow से बाहर चले जाते हैं इसलिए ये एक Render Objects की Tree में समान Place पर नहीं बल्कि किसी Different Place पर Place होते हैं।

यानी यदि सरल शब्दों में कहें, तो किसी HTML Document का हर Element व Attribute, Web Browser की Memory में एक Object के रूप में Modal हो जाता है, ताकि Web Browser, W3C Organization द्वारा Specified Specification के अनुसार उस Modal को Display कर सके। Document के इस Memory Representation को सरल शब्दों में हम DOM Tree कह सकते हैं, जो कि किसी भी Web Page के सारे Structure को Represent करता है।

जो Web Page हमें Web Browser में दिखाई देता है, वह Web Page, DOM Tree के रूप में Device की Memory में Stored रहता है और तब तक Stored रहता है, जब तक कि वह Web Page, Web Browser में Loaded रहता है।

चूंकि DOM Tree, Client Side Web Browser की Memory में Stored रहता है और उसी DOM Tree के अनुसार Web Page, Web Browser में Render होता है, इसलिए यदि हम DOM Tree में किसी तरह का कोई परिवर्तन करते हैं, तो वह परिवर्तन Instantly Web Browser में Reflect होता है।

JavaScript एक Client Side Programming Language है और इस Language का प्रयोग करके हम DOM Tree को Access व Modify कर सकते हैं और हम जैसे ही DOM Tree में कोई Modification करते हैं, उसका Effect तुरन्त Web Browser में Reflect हो जाता है।

सारांश के रूप में एक Web Page में निम्न क्रम में विभिन्न Processes Perform होती हैं और Web Page दिखाई देता हैः

• जब किसी HTML Document को Web Browser में Load किया जाता है, तब एक HTTP Call द्वारा वह HTML Page Browser की Memory में Load होना शुरू होता है।
• जैसे-जैसे HTML Document Browser में Load होना शुरू होता है, Web Browser का एक HTML Parser “Content Tree” या DOM Create करना शुरू करता है, जिसका हर Node, HTML Page के एक Element को Represent करता है।
• जब कोई Script, Style, Image या Font आदि अन्य प्रकार के Resources Web Browser में Load होते हैं, तब विभिन्न Web Browsers विभिन्न प्रकार के Rules को Follow करते हुए, विभिन्न स्थितियों के आधार पर किसी Resource की Loading को कुछ समय के लिए Block करते हैं अथवा HTML Parser को किसी Resource के आने तक Wait करने के लिए Instruct करते हैं।
• एक बार पूरा HTML Document, Web Browser में Load हो जाने के बाद Content Tree पर Web Browser के Default Style Sheet की Styles Apply होती हैं। कई बार HTML Document के अन्दर भी कुछ Styles को Apply किया गया होता है अथवा HTML Document में External Style Sheets Specified होती हैं। इन Styles को Handle करने के लिए एक नई Tree बनती है, जिसे “Rendering Tree” कहते हैं।
• इस Rendering Tree में केवल वे ही Elements होते हैं, जिन्हें Web Browser में Display करना होता है। जो Elements, Web Browser की Screen में Display नहीं होने हैं, जैसे कि Head, Script, Styles, आदि Elements अथवा जिन Elements की Display Property को None किया गया है, वे Elements इस Render Tree में शामिल नहीं होते। Render Tree के सभी Nodes, Style Information को Represent करते हैं।
• ज्यादातर Render हो सकने वाले Elements CSS Box Model के Rules को Follow करते हैं और उनकी कुछ Width, Height, Border, Padding, Spacing, Margin व Position Values होती हैं। इन Objects के लिए एक Rectangular Box Create होता है, जिन्हें Frame कहते हैं। हर Object के लिए Frame हो, ऐसा जरूरी नहीं हैं। जैसे SVG Image की कोई Frame नहीं होती, बल्कि इसे एक iframe के अन्दर Place किया जाता है और इस iframe का एक Rectangular Box यानी Frame होता है। एक Frame में इस बात की सारी Information होती है कि किसी Element Object को Web Browser में किस प्रकार से Render होना है।
• चूंकि एक ही HTML Document विभिन्न प्रकार की Devices जैसे कि Laptop, PC, iPhone आदि पर Display हो सकता है, जिनकी Screen Side, Color Depth व Resolution अलग-अलग हो सकते हैं, इसलिए ये जरूरी होता है कि Web Browser, HTML Page को Render करने से पहले Device के आधार पर इस बात का निर्णय ले कि Screen पर कौनसा Object कहां दिखाई देगा। इसलिए सभी Objects की Rendering Information प्राप्त करने के बाद Web Browser विभिन्न Elements की Screen पर Positioning की Calculation करता है कि कौनसा Element किस जगह पर दिखाई देगा।
• अन्त में जब Web Browser को ये पता चल जाता है कि कौनसा Object Exactly किस Location पर Draw करना है, वह Rendering Tree के सभी Objects को Screen पर Draw कर देता है, जिसे Painting करना कहा जाता है।

सामान्यतया ये प्रक्रिया लगभग सभी Web Browsers में थोडे बहुत Changes के साथ एक समान ही होती है, जो कि एक Static HTML Document को Render करने की प्रक्रिया है। लेकिन HTML Documents Dynamic भी हो सकते हैं और वे Dynamic तब हो जाते हैं, जब DOM Tree के साथ किसी प्रकार की प्रक्रिया की जाती है और DOM Tree के साथ किसी भी प्रकार की प्रक्रिया करने के लिए JavaScript एक अच्छी Programming Language है, जिसे वर्तमान समय में सभी Web Browsers Support करते हैं क्योंकि सभी Web Browsers में JavaScript Interpreter होता है। HTML Document Pages निम्न स्थितियों में से किसी भी स्थिति में Dynamic हो सकते हैं :

• यदि DOM Tree में कोई Element Add या Delete किया जाए।
• यदि किसी Element Object के Style Attribute को Modify किया जाए।

इन दोनों स्थितियों में HTML Document की Rendering की उपरोक्त सारी प्रक्रिया फिर से दोहराई जाती है। कुछ स्थितियों में पूरे DOM Tree की Rendering करने की जरूरत नहीं पडती है, जैसे किसी Object का केवल Color Change करने पर केवल Repainting की जरूरत पडती है। लेकिन किसी Object की Location Change करने पर पूरी Rendering Process फिर से Repeat होती है।

किसी भी Web Browser में Images की तुलना में Style Sheet व Scripts पहले Load होती हैं। Stylesheet का प्रयोग Rendering Tree Create करने के लिए होता है, लेकिन इसका कोई भी प्रभाव Content Tree पर नहीं पडता। इसलिए HTML Parsing व JavaScript Execution उस समय Continue हो रहा हो सकता है, जिस समय CSS Download हो रहा होता है।

किसी Script को जब उस समय Style Information की जरूरत होती है, जिस समय वह Stylesheet Download हो रही होती है व Rendering Tree बन रही होती है। इस प्रकार की स्थिति में Web Browser हमें Error दे सकता है। इसलिए इस प्रकार की स्थिति में Stylesheet को Script की तुलना में पहले Load करना चाहिए।