ตามตัวอย่างของคุณ
<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>
- มีการแยกวิเคราะห์และกำหนดกฎ CSS ภายใน
- การแยกวิเคราะห์ HTML ถึง
<script>...</script>
- Javascript ภายในถูกวิเคราะห์และเรียกใช้
- การแยกวิเคราะห์ HTML ถึง
<img src="abc.jpg" ...
abc.jpg ถูกดาวน์โหลดและแสดงผล- การแยกวิเคราะห์ HTML ถึง
<script src="kkk.js" ...
kkk.js ถูกดาวน์โหลดแยกวิเคราะห์และรัน- การแยกเอกสาร HTML สิ้นสุด
โปรดทราบว่าการดาวน์โหลดอาจไม่ตรงกันและไม่บล็อกเนื่องจากพฤติกรรมของเบราว์เซอร์ ตัวอย่างเช่นใน Firefox มีการตั้งค่าซึ่ง จำกัด จำนวนคำขอพร้อมกันต่อโดเมน
นอกจากนี้ยังขึ้นอยู่กับว่าองค์ประกอบนั้นถูกแคชไว้แล้วหรือไม่ส่วนประกอบอาจไม่ได้รับการร้องขออีกในอนาคตอันใกล้ หากส่วนประกอบถูกแคชส่วนประกอบจะถูกโหลดจากแคชแทน URL จริง
เมื่อการวิเคราะห์คำสิ้นสุดลงและเอกสารพร้อมและโหลดเหตุการณ์onloadจะเริ่มทำงาน ดังนั้นเมื่อonloadเป็นเชื้อเพลิงที่$("#img").attr("src","kkk.png");มีการเรียก ดังนั้น:
- เอกสารพร้อมใช้งานโหลด onload
- จาวาสคริปต์ยอดฮิต
$("#img").attr("src", "kkk.png");
kkk.png ถูกดาวน์โหลดและโหลดเข้าสู่ #img
$(document).ready()เหตุการณ์เป็นจริงเหตุการณ์ยิงเมื่อส่วนประกอบของหน้าทั้งหมดจะถูกโหลดและพร้อม อ่านเพิ่มเติมเกี่ยวกับมัน: http://docs.jquery.com/Tutorials:Introducing_$ (เอกสาร) .ready ()
แก้ไข - ส่วนนี้จะอธิบายเพิ่มเติมในส่วนที่ขนานหรือไม่:
ตามค่าเริ่มต้นและจากความเข้าใจปัจจุบันของฉันเบราว์เซอร์มักจะเรียกใช้แต่ละหน้าใน 3 วิธี: ตัวแยกวิเคราะห์ HTML, Javascript / DOM และ CSS
ตัวแยกวิเคราะห์ HTML มีหน้าที่แยกวิเคราะห์และตีความภาษามาร์กอัปและจะต้องสามารถโทรไปยัง 2 องค์ประกอบอื่น ๆ
ตัวอย่างเช่นเมื่อ parser เจอบรรทัดนี้:
<a href="#" onclick="alert('test');return false;" style="font-weight:bold">a hypertext link</a>
ตัวแยกวิเคราะห์จะทำการโทร 3 ครั้งสองไปยัง Javascript และอีกหนึ่งเป็น CSS อันดับแรกตัวแยกวิเคราะห์จะสร้างองค์ประกอบนี้และลงทะเบียนในเนมสเปซ DOM พร้อมกับแอตทริบิวต์ทั้งหมดที่เกี่ยวข้องกับองค์ประกอบนี้ ประการที่สอง parser จะเรียกให้โยงเหตุการณ์ onclick กับองค์ประกอบเฉพาะนี้ สุดท้ายมันจะทำการเรียกอีกครั้งไปยังเธรด CSS เพื่อใช้สไตล์ CSS กับองค์ประกอบเฉพาะนี้
การดำเนินการอยู่ด้านบนลงล่างและเธรดเดี่ยว Javascript อาจมีหลายเธรด แต่ข้อเท็จจริงคือ Javascript นั้นเป็นเธรดเดี่ยว นี่คือเหตุผลที่เมื่อโหลดไฟล์จาวาสคริปต์ภายนอกการแยกวิเคราะห์หน้า HTML หลักจะถูกระงับ
อย่างไรก็ตามไฟล์ CSS สามารถดาวน์โหลดได้พร้อมกันเพราะกฎ CSS ถูกนำไปใช้เสมอ - หมายถึงองค์ประกอบต่างๆจะถูกวาดใหม่เสมอด้วยกฎ CSS ที่ใหม่ที่สุดที่กำหนดไว้ - จึงทำให้มันไม่ได้ปิดกั้น
องค์ประกอบจะใช้ได้เฉพาะใน DOM หลังจากที่แยกวิเคราะห์แล้ว ดังนั้นเมื่อทำงานกับองค์ประกอบเฉพาะสคริปต์จะถูกวางไว้หลังหรือภายในเหตุการณ์ onload หน้าต่าง
สคริปต์เช่นนี้จะทำให้เกิดข้อผิดพลาด (ใน 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>
