एक वेब पेज का लोड और निष्पादन अनुक्रम?

244

मैंने कुछ वेब आधारित परियोजनाएं की हैं, लेकिन मैं एक सामान्य वेब पेज के लोड और निष्पादन अनुक्रम के बारे में बहुत अधिक नहीं सोचता। लेकिन अब मुझे विस्तार से जानने की जरूरत है। Google या SO से उत्तर प्राप्त करना कठिन है, इसलिए मैंने यह प्रश्न बनाया।

एक नमूना पृष्ठ इस प्रकार है:

<html>
 <head>
  <script src="jquery.js" type="text/javascript"></script>
  <script src="abc.js" type="text/javascript">
  </script>
  <link rel="stylesheets" type="text/css" href="abc.css"></link>
  <style>h2{font-wight:bold;}</style>
  <script>
  $(document).ready(function(){
     $("#img").attr("src", "kkk.png");
  });
 </script>
 </head>
 <body>
    <img id="img" src="abc.jpg" style="width:400px;height:300px;"/>
    <script src="kkk.js" type="text/javascript"></script>
 </body>
</html>

तो यहाँ मेरे सवाल हैं:

यह पृष्ठ कैसे लोड होता है?
लोडिंग का क्रम क्या है?
जेएस कोड कब निष्पादित किया जाता है? (इनलाइन और बाहरी)
CSS को कब लागू किया जाता है (लागू किया जाता है)?
जब $ (दस्तावेज़) पहले से ही निष्पादित हो जाता है?
क्या abc.jpg डाउनलोड किया जाएगा? या यह सिर्फ kkk.png डाउनलोड करता है?

मेरी निम्नलिखित समझ है:

ब्राउज़र पहली बार में html (DOM) लोड करता है।
ब्राउज़र बाहरी संसाधनों को ऊपर से नीचे, लाइन से लाइन पर लोड करना शुरू करता है।
यदि कोई मिलता <script>है, तो लोडिंग अवरुद्ध हो जाएगी और तब तक प्रतीक्षा करें जब तक कि जेएस फ़ाइल लोड न हो जाए और निष्पादित हो जाए और फिर जारी रहे।
अन्य संसाधन (CSS / छवियाँ) समानांतर में लोड किए जाते हैं और यदि आवश्यक हो तो निष्पादित (सीएसएस की तरह)।

या यह इस तरह है:

ब्राउज़र html (DOM) को पार्स करता है और बाहरी संसाधनों को किसी सरणी या स्टैक जैसी संरचना में प्राप्त करता है। HTML लोड होने के बाद, ब्राउज़र संरचना में बाहरी संसाधनों को समानांतर और निष्पादित करना शुरू कर देता है, जब तक कि सभी संसाधन लोड नहीं हो जाते। फिर DOM को JS के आधार पर उपयोगकर्ता के व्यवहार के अनुरूप बदला जाएगा।

जब आप html पृष्ठ की प्रतिक्रिया प्राप्त कर लेते हैं तो क्या कोई विस्तृत विवरण दे सकता है? क्या यह विभिन्न ब्राउज़रों में भिन्न है? इस प्रश्न के बारे में कोई संदर्भ?

धन्यवाद।

संपादित करें:

मैंने फायरबग के साथ फ़ायरफ़ॉक्स में एक प्रयोग किया। और यह निम्न छवि के रूप में दिखाता है: वैकल्पिक शब्द

javascript html css

— झू ताओ
स्रोत

11

इस क्षेत्र में स्टीव सौडर्स ने बहुत अच्छा काम किया है। Google ने स्टीव + सॉडर + उच्च + प्रदर्शन के लिए और एक नज़र है।

— औरूटोई

3

मेरा मतलब प्रदर्शन ट्यूनिंग नहीं है। मैं विस्तार से जानना चाहता हूं।

— झू ताओ

2

उनके काम को पढ़कर मेरी समझ में "कैसे" काम करता है विस्तार से दस गुना बढ़ गया है इसलिए यह अभी भी एक वैध टिप्पणी है। मुझे कॉपीराइट द्वारा अपनी पूरी पुस्तक यहाँ उद्धृत करने की अनुमति नहीं है, इसलिए मुझे अभी भी सुझाव है कि आप उसके काम को देखें।

— anddoutoi 15

3

इस क्रम में होने वाली चीजों का एक बड़ा विवरण यहाँ है

— गेरेट

Hooking stackoverflow.com/q/12122369/632951

— Pacerier

277

अपने नमूने के अनुसार,

<html>
 <head>
  <script src="jquery.js" type="text/javascript"></script>
  <script src="abc.js" type="text/javascript">
  </script>
  <link rel="stylesheets" type="text/css" href="abc.css"></link>
  <style>h2{font-wight:bold;}</style>
  <script>
  $(document).ready(function(){
     $("#img").attr("src", "kkk.png");
  });
 </script>
 </head>
 <body>
    <img id="img" src="abc.jpg" style="width:400px;height:300px;"/>
    <script src="kkk.js" type="text/javascript"></script>
 </body>
</html>

मोटे तौर पर निष्पादन प्रवाह इस प्रकार है:

HTML डॉक्यूमेंट डाउनलोड हो जाता है
HTML डॉक्यूमेंट की पार्सिंग शुरू होती है
HTML पार्सिंग पहुँचता है <script src="jquery.js" ...
jquery.js डाउनलोड और पार्स किया गया है
HTML पार्सिंग पहुँचता है <script src="abc.js" ...
abc.js डाउनलोड, पार्स और रन किया जाता है
HTML पार्सिंग पहुँचता है <link href="abc.css" ...
abc.css डाउनलोड और पार्स किया गया है
HTML पार्सिंग पहुँचता है <style>...</style>
आंतरिक सीएसएस नियमों को पार्स और परिभाषित किया गया है
HTML पार्सिंग पहुँचता है <script>...</script>
आंतरिक जावास्क्रिप्ट को पार्स और चलाया जाता है
HTML पार्सिंग पहुँचता है <img src="abc.jpg" ...
abc.jpg डाउनलोड और प्रदर्शित किया जाता है
HTML पार्सिंग पहुँचता है <script src="kkk.js" ...
kkk.js डाउनलोड, पार्स और रन किया जाता है
HTML डॉक्यूमेंट की पार्सिंग समाप्त होती है

ध्यान दें कि डाउनलोड ब्राउज़र के व्यवहार के कारण अतुल्यकालिक और गैर-अवरुद्ध हो सकता है। उदाहरण के लिए, फ़ायरफ़ॉक्स में यह सेटिंग है जो प्रति डोमेन एक साथ अनुरोधों की संख्या को सीमित करती है।

यह भी निर्भर करता है कि घटक पहले से ही कैश किया गया है या नहीं, घटक निकट भविष्य के अनुरोध में फिर से अनुरोध नहीं किया जा सकता है। यदि घटक को कैश किया गया है, तो घटक वास्तविक URL के बजाय कैश से लोड किया जाएगा।

जब पार्सिंग समाप्त हो जाती है और दस्तावेज़ तैयार और लोड हो जाता है, तो घटनाओं onloadको निकाल दिया जाता है। इस प्रकार जब onloadनिकाल दिया जाता है, $("#img").attr("src","kkk.png");चलाया जाता है। इसलिए:

दस्तावेज़ तैयार है, ऑनलोड को निकाल दिया गया है।
जावास्क्रिप्ट निष्पादन हिट $("#img").attr("src", "kkk.png");
kkk.png डाउनलोड और में लोड होता है #img

$(document).ready()घटना वास्तव में गतिविधि सक्रिय जब सभी पेज घटक लोड और तैयार कर रहे हैं। इसके बारे में और पढ़ें: http://docs.jquery.com/Tutorials:Introducing_$ (दस्तावेज) पहले से ही!)।

संपादित करें - यह भाग समानांतर या नहीं भाग पर अधिक विस्तृत करता है:

डिफ़ॉल्ट रूप से, और मेरी वर्तमान समझ से, ब्राउज़र आमतौर पर प्रत्येक पृष्ठ को 3 तरीकों से चलाता है: HTML पार्सर, जावास्क्रिप्ट / डोम, और सीएसएस।

HTML पार्सर मार्कअप भाषा की पार्सिंग और व्याख्या करने के लिए जिम्मेदार है और इस प्रकार अन्य 2 घटकों को कॉल करने में सक्षम होना चाहिए।

उदाहरण के लिए जब पार्सर इस रेखा के पार आता है:

<a href="#" onclick="alert('test');return false;" style="font-weight:bold">a hypertext link</a>

पार्सर 3 कॉल करेगा, दो जावास्क्रिप्ट और एक सीएसएस को। सबसे पहले, पार्सर इस तत्व को बनाएगा और इसे इस तत्व से संबंधित सभी विशेषताओं के साथ, DOM नामस्थान में पंजीकृत करेगा। दूसरे, पार्सर इस विशेष तत्व को ऑनक्लिक ईवेंट को बांधने के लिए कॉल करेगा। अंत में, यह सीएसएस शैली को इस विशेष तत्व पर लागू करने के लिए सीएसएस धागे पर एक और कॉल करेगा।

निष्पादन ऊपर नीचे है और एकल थ्रेडेड है। जावास्क्रिप्ट बहु-थ्रेडेड लग सकता है, लेकिन तथ्य यह है कि जावास्क्रिप्ट सिंगल थ्रेडेड है। यही कारण है कि बाहरी जावास्क्रिप्ट फ़ाइल लोड करते समय, मुख्य HTML पृष्ठ के पार्सिंग को निलंबित कर दिया जाता है।

हालाँकि, CSS फाइलें एक साथ डाउनलोड की जा सकती हैं क्योंकि CSS नियम हमेशा लागू किए जा रहे हैं - कहने का अर्थ यह है कि तत्व हमेशा नए सिरे से परिभाषित CSS नियमों से निरस्त हो जाते हैं - इस प्रकार यह अनब्लॉकिंग बना देता है।

एक तत्व केवल DOM में उपलब्ध होगा जब इसे पार्स किया गया है। इस प्रकार जब किसी विशिष्ट तत्व के साथ काम किया जाता है, तो स्क्रिप्ट को हमेशा विंडो ऑनलोड घटना के बाद या उसके बाद रखा जाता है।

इस तरह स्क्रिप्ट त्रुटि का कारण होगा (jQuery पर):

<script type="text/javascript">/* <![CDATA[ */
  alert($("#mydiv").html());
/* ]]> */</script>
<div id="mydiv">Hello World</div>

क्योंकि जब स्क्रिप्ट को पार्स किया जाता है, तब #mydivभी तत्व को परिभाषित नहीं किया जाता है। इसके बजाय यह काम करेगा:

<div id="mydiv">Hello World</div>
<script type="text/javascript">/* <![CDATA[ */
  alert($("#mydiv").html());
/* ]]> */</script>

या

<script type="text/javascript">/* <![CDATA[ */
  $(window).ready(function(){
                    alert($("#mydiv").html());
                  });
/* ]]> */</script>
<div id="mydiv">Hello World</div>

— ट्रैकिंग
स्रोत

4

धन्यवाद। लेकिन आपने उल्लेख किया है कि ब्राउज़र के व्यवहार के कारण डाउनलोड अतुल्यकालिक और गैर-अवरोधक हो सकता है , इसलिए एसिंन में किस प्रकार के घटकों को डाउनलोड किया जा सकता है (उदाहरण के लिए एफएफ लें)? <script>अन्य घटकों को अवरुद्ध करेगा, है ना? प्रत्येक ब्राउज़र को युक्ति के बारे में कोई संदर्भ?

— झू ताओ

4

$ (दस्तावेज़)। पहले से ही () DOM पूरा होने पर निकाल दिया जाता है, तब नहीं जब सभी पेज घटक लोड हो जाते हैं

— Pierre

2

@ पेज घटकों के अनुसार मुझे डोम का मतलब है - डोम में जो भी घटक हैं।

— मोरिस

3

बस स्पष्ट करने के लिए ... नियमित रूप से window.onload # 17 के बाद होता है ... तो # jquery के $ (दस्तावेज़) क्या है? # 12? लेकिन DOM ही # 1 सही पर लोड है?

— आर्मीफोडा 12mnkeys

1

यदि <body> टैब में, यदि हम <img> और <script> के बीच <link href = "bootstrap.min.css" rel = "स्टाइलशीट" /> जोड़ते हैं तो img की तुलना में टैग प्रदर्शित नहीं किया जाता है जब तक कि अनिल बूटस्ट्रैप डाउनलोड न हो ... इसलिए मुझे लगता है कि कदम [13], [14] को संशोधन की आवश्यकता है ... क्या कोई उस व्यवहार की व्याख्या कर सकता है?

— भुवन

34

1) HTML डाउनलोड हो गया है।

2) HTML उत्तरोत्तर पार्स है। जब किसी परिसंपत्ति के लिए अनुरोध पहुंच जाता है तो ब्राउज़र संपत्ति को डाउनलोड करने का प्रयास करेगा। अधिकांश HTTP सर्वर और अधिकांश ब्राउज़रों के लिए एक डिफ़ॉल्ट कॉन्फ़िगरेशन समानांतर में केवल दो अनुरोधों को संसाधित करना है। IE को समानांतर में असीमित संख्या में संपत्ति डाउनलोड करने के लिए पुन: कॉन्फ़िगर किया जा सकता है। स्टीव सॉडर IE पर समानांतर में 100 से अधिक अनुरोधों को डाउनलोड करने में सक्षम है। अपवाद यह है कि स्क्रिप्ट अनुरोध IE में समानांतर संपत्ति अनुरोधों को ब्लॉक करता है। यही कारण है कि सभी जावास्क्रिप्ट को बाहरी जावास्क्रिप्ट फ़ाइलों में डालने और HTML में समापन बॉडी टैग से ठीक पहले अनुरोध रखने का सुझाव दिया जाता है।

3) HTML को पार्स करने के बाद DOM को रेंडर किया जाता है। सीएसएस लगभग सभी उपयोगकर्ता एजेंटों में डोम के प्रतिपादन के समानांतर प्रदान किया जाता है। परिणामस्वरूप यह सभी सीएसएस कोड को बाहरी सीएसएस फ़ाइलों में डालने की जोरदार सिफारिश की जाती है जो कि दस्तावेज़ के <head> </ head> अनुभाग में जितना संभव हो उतना उच्च अनुरोध किया जाता है। अन्यथा पृष्ठ DOM में CSS अनुरोध स्थिति के रोके जाने तक प्रदान किया जाता है और फिर ऊपर से शुरू होता है।

4) केवल DOM के पूरी तरह से रेंडर हो जाने के बाद और पेज की सभी परिसंपत्तियों के अनुरोध या तो हल हो जाते हैं या फिर टाइम आउट होता है, जावास्क्रिप्ट ऑनलोड घटना से निष्पादित होता है। IE7, और मैं IE8 के बारे में निश्चित नहीं हूं, यदि परिसंपत्ति अनुरोध से HTTP प्रतिक्रिया नहीं मिली है, तो परिसंपत्तियों को जल्दी से समय नहीं देता है। इसका मतलब पृष्ठ के लिए जावास्क्रिप्ट इनलाइन द्वारा अनुरोधित संपत्ति है, जो कि HTML टैग में जावास्क्रिप्ट है जो एक फ़ंक्शन में शामिल नहीं है, घंटों तक ऑनलोड घटना के निष्पादन को रोक सकता है। यदि इस तरह के इनलाइन कोड पृष्ठ में मौजूद हैं और कोड नाम क्रैश के कारण नामस्थान टकराव के कारण निष्पादित करने में विफल रहता है तो यह समस्या उत्पन्न हो सकती है।

उपरोक्त चरणों में से जो सबसे अधिक CPU गहन है वह DOM / CSS की पार्सिंग है। यदि आप चाहते हैं कि आपका पृष्ठ तेजी से संसाधित हो, तो निरर्थक निर्देशों को समाप्त करके और सबसे कम संभव तत्व संदर्भों में CSS निर्देशों को समेकित करके कुशल CSS लिखें। आपके DOM ट्री में नोड्स की संख्या कम करने से भी तेजी से रेंडरिंग का उत्पादन होगा।

ध्यान रखें कि प्रत्येक संपत्ति आप अपने HTML से या यहां तक कि अपने सीएसएस / जावास्क्रिप्ट संपत्ति से भी एक अलग HTTP हेडर के साथ अनुरोध किया जाता है। यह बैंडविड्थ की खपत करता है और प्रति अनुरोध प्रसंस्करण की आवश्यकता होती है। अगर आप अपने पेज को जितना जल्दी हो सके लोड करना चाहते हैं तो HTTP रिक्वेस्ट की संख्या कम करें और अपने HTML का साइज़ कम करें। आप अपने उपयोगकर्ता अनुभव को केवल HTML से 180k पर औसत पृष्ठ भार द्वारा किसी भी एहसान का अनुभव नहीं कर रहे हैं। कई डेवलपर्स कुछ गिरावट की सदस्यता लेते हैं जो एक उपयोगकर्ता 6 नैनोसेकंड में पेज पर सामग्री की गुणवत्ता के बारे में अपना मन बनाता है और फिर अपने सर्वर से DNS क्वेरी को शुद्ध करता है और अप्रसन्न होने पर अपने कंप्यूटर को जला देता है, इसलिए इसके बजाय वे सबसे सुंदर संभव पृष्ठ प्रदान करते हैं HTML का 250k। अपने HTML को छोटा और मीठा रखें ताकि उपयोगकर्ता आपके पृष्ठों को तेज़ी से लोड कर सके।

2

सबसे कम संभव तत्व संदर्भों में सीएसएस निर्देशों को समेकित करना अजीब लगता है। अगर मुझे तीन तत्वों को स्टाइल करने की आवश्यकता है, तो मुझे बिल्कुल तीन तत्वों को संदर्भित करने की आवश्यकता है। मैं एक शैली दस को संदर्भित नहीं कर सकता, क्या मैं कर सकता हूं? या उस पर विस्तृत

— ग्रीन

12

फ़ायरफ़ॉक्स में अपना पेज खोलें और HTTPFox addon प्राप्त करें। यह आपको वह सब बताएगा जिसकी आपको आवश्यकता है।

इसे archivist.incuito पर मिला:

http://archivist.incutio.com/viewlist/css-discuss/76444

जब आप पहली बार पृष्ठ का अनुरोध करते हैं, तो आपका ब्राउज़र सर्वर को एक GET अनुरोध भेजता है, जो ब्राउज़र को HTML लौटाता है। फिर ब्राउज़र पृष्ठ को पार्स करना शुरू कर देता है (संभवतः यह सब वापस आने से पहले)।

जब यह किसी बाहरी इकाई जैसे सीएसएस फ़ाइल, एक छवि फ़ाइल, एक स्क्रिप्ट फ़ाइल, एक फ़्लैश फ़ाइल, या पृष्ठ के बाहरी किसी भी चीज़ का संदर्भ पाता है (या तो एक ही सर्वर / डोमेन या नहीं), तो यह बनाने की तैयारी करता है उस संसाधन के लिए आगे GET अनुरोध करें।

हालाँकि HTTP मानक यह निर्दिष्ट करता है कि ब्राउज़र को एक ही डोमेन के लिए दो समवर्ती अनुरोध नहीं करना चाहिए। इसलिए यह प्रत्येक अनुरोध को एक विशेष डोमेन के लिए एक कतार में रखता है, और प्रत्येक इकाई को वापस करने के बाद यह उस डोमेन के लिए कतार में अगले एक को शुरू करता है।

किसी इकाई को लौटाए जाने में लगने वाला समय उसके आकार पर निर्भर करता है, जो सर्वर वर्तमान में अनुभव कर रहा है, और ब्राउज़र और सर्वर को चलाने वाली मशीन के बीच हर एक मशीन की गतिविधि। इन मशीनों की सूची हर अनुरोध के लिए अलग-अलग हो सकती है, इस हद तक कि एक छवि अटलांटिक से अधिक यूके में मेरे लिए यूएसए से यात्रा कर सकती है, जबकि एक ही सर्वर से दूसरे प्रशांत, एशिया और यूरोप के माध्यम से निकलती है, जो अधिक समय लेता है। तो आपको निम्न की तरह एक अनुक्रम मिल सकता है, जहां एक पृष्ठ में (इस क्रम में) तीन स्क्रिप्ट फ़ाइलों और पांच छवि फ़ाइलों के संदर्भ हैं, सभी अलग-अलग आकार के हैं:

स्क्रिप्ट 1 और स्क्रिप्ट 2 प्राप्त करें; script3 और images1-5 के लिए कतार अनुरोध।

script2 आता है (यह script1 से छोटा है): script3, कतार images1-5 प्राप्त करें।

script1 आता है; Image1 प्राप्त करें, कतार छवियाँ 2-5।

image1 आता है, छवि 2 प्राप्त करें, कतार चित्र 3-5।

स्क्रिप्ट 3 नेटवर्क समस्या के कारण आने में विफल रहता है - फिर से स्क्रिप्ट 3 प्राप्त करें (स्वचालित रीट्री)।

image2 आता है, script3 अभी भी यहाँ नहीं है; छवि 3 प्राप्त करें, कतार चित्र 4-5।

चित्र 3 आता है; रास्ते में अभी भी छवि 4, कतार छवि 5, स्क्रिप्ट 3 प्राप्त करें।

image4 आता है, छवि 5 प्राप्त करें;

image5 आता है।

script3 आता है।

संक्षेप में: कोई भी पुराना आदेश, जो कि सर्वर क्या कर रहा है, इस पर निर्भर करता है कि बाकी इंटरनेट क्या कर रहा है, और कुछ भी त्रुटि है या नहीं और फिर से लाना है। यह काम करने के एक अजीब तरीके की तरह लग सकता है, लेकिन अगर यह इस तरह से नहीं किया गया था, तो यह इंटरनेट के लिए (शाब्दिक रूप से केवल डब्ल्यूडब्ल्यूडब्ल्यू) काम करने के लिए असंभव होगा।

इसके अलावा, ब्राउज़र की आंतरिक कतार उस पृष्ठ में दिखाई देने वाले क्रम में संस्थाओं को नहीं ला सकती है - यह किसी भी मानक द्वारा आवश्यक नहीं है।

(ओह, और कैशिंग को मत भूलना, दोनों ब्राउज़र में और आईएसपी द्वारा नेटवर्क पर लोड को कम करने के लिए उपयोग किए जाने वाले कैशिंग प्रॉक्सी में।)

— tahdhaze09
स्रोत

6

यदि आप यह पूछ रहे हैं क्योंकि आप अपनी वेब साइट को गति देना चाहते हैं, तो याहू के पृष्ठ को अपनी वेब साइट को गति देने के लिए सर्वोत्तम अभ्यासों पर देखें । अपनी वेब साइट को गति देने के लिए इसमें बहुत सारी सर्वोत्तम प्रथाएं हैं।

— एक भुगतान किया बेवकूफ
स्रोत

2

AFAIK, ब्राउज़र (कम से कम फ़ायरफ़ॉक्स) हर संसाधन का अनुरोध करता है जैसे ही वह इसे पार्स करता है। यदि यह एक img टैग का सामना करता है तो यह उस छवि का अनुरोध करेगा जैसे ही img टैग को पार्स किया गया है। और यह HTML दस्तावेज़ की समग्रता प्राप्त करने से पहले भी हो सकता है ... यही कारण है कि ऐसा होने पर भी HTML दस्तावेज़ डाउनलोड किया जा सकता है।

फ़ायरफ़ॉक्स के लिए, ब्राउज़र कतारें हैं जो लागू होती हैं, यह इस बात पर निर्भर करती हैं कि वे लगभग कैसे सेट हैं: कॉन्फ़िगरेशन। उदाहरण के लिए यह एक ही सर्वर से एक साथ 8 से अधिक फ़ाइलों को डाउनलोड करने का प्रयास नहीं करेगा ... अतिरिक्त अनुरोध कतारबद्ध होंगे। मुझे लगता है कि प्रति-डोमेन सीमा, प्रति प्रॉक्सी सीमा, और अन्य सामान हैं, जो मोज़िला वेबसाइट पर प्रलेखित हैं और लगभग: config में सेट किए जा सकते हैं। मैंने कहीं पढ़ा कि IE में ऐसी कोई सीमा नहीं है।

जैसे ही मुख्य HTML दस्तावेज़ डाउनलोड किया गया है jQuery तैयार घटना को निकाल दिया गया है और यह DOM पार्स हो गया है। फिर लोड घटना को सभी लिंक किए गए संसाधनों (सीएसएस, चित्र आदि) को डाउनलोड करने के बाद निकाल दिया जाता है और साथ ही पार्स किया जाता है। इसे jQuery प्रलेखन में स्पष्ट किया गया है।

यदि आप उस आदेश को नियंत्रित करना चाहते हैं जिसमें यह सब भरा हुआ है, तो मेरा मानना है कि इसे करने का सबसे विश्वसनीय तरीका जावास्क्रिप्ट है।

— रॉल्फ
स्रोत

1

डायनाट्रेस AJAX संस्करण आपको पृष्ठ लोडिंग, पार्सिंग और निष्पादन का सटीक क्रम दिखाता है।

— चेतन एस
स्रोत

1

चुना हुआ उत्तर ऐसा लगता है कि आधुनिक ब्राउज़रों पर लागू नहीं होता है, कम से कम फ़ायरफ़ॉक्स 52 पर। मैंने जो देखा वह यह है कि HTML पार्सर तत्व तक पहुँचने से पहले css, जावास्क्रिप्ट जैसे लोडिंग संसाधनों के अनुरोध जारी किए जाते हैं।

<html>
  <head>
    <!-- prints the date before parsing and blocks HTMP parsering -->
    <script>
      console.log("start: " + (new Date()).toISOString());
      for(var i=0; i<1000000000; i++) {};
    </script>

    <script src="jquery.js" type="text/javascript"></script>
    <script src="abc.js" type="text/javascript"></script>
    <link rel="stylesheets" type="text/css" href="abc.css"></link>
    <style>h2{font-wight:bold;}</style>
    <script>
      $(document).ready(function(){
      $("#img").attr("src", "kkk.png");
     });
   </script>
 </head>
 <body>
   <img id="img" src="abc.jpg" style="width:400px;height:300px;"/>
   <script src="kkk.js" type="text/javascript"></script>
   </body>
</html>

मैंने पाया कि सीएसएस और जावास्क्रिप्ट संसाधनों को लोड करने के अनुरोधों का प्रारंभ समय अवरुद्ध नहीं किया जा रहा था। लगता है कि फ़ायरफ़ॉक्स में एक HTML स्कैन है, और HTML को पार्स करने के लिए शुरू करने से पहले प्रमुख संसाधनों (img संसाधन शामिल नहीं है) की पहचान करें।

— ज़ियाओमिंग
स्रोत