วิธีหลักในการแทรกรหัส JavaScript ลงในหน้า HTML คือผ่านแท็กสคริปต์ เหล่านี้รวมถึงสองรูปแบบ สิ่งแรกคือการแทรกรหัส JS โดยตรงระหว่างแท็กสคริปต์และที่สองคือการแนะนำไฟล์ JS ภายนอกผ่านแอตทริบิวต์ SRC เนื่องจากล่ามบล็อกการแสดงผลของส่วนที่เหลือของหน้าในระหว่างการแยกวิเคราะห์และการดำเนินการรหัส JS จึงจะทำให้เกิดการพ่นระยะยาวและความล่าช้าสำหรับหน้าเว็บที่มีรหัส JS จำนวนมาก เพื่อหลีกเลี่ยงปัญหานี้ขอแนะนำให้วางการอ้างอิง JS ทั้งหมดก่อนแท็ก </body>
มีสองแอตทริบิวต์ของแท็กสคริปต์เลื่อนและ async ดังนั้นการใช้แท็กสคริปต์จะแบ่งออกเป็นสามสถานการณ์:
1. <script src = "example.js"> </script>
หากไม่มีแอตทริบิวต์ Async Delfer หรือ Async เบราว์เซอร์จะโหลดและเรียกใช้สคริปต์ที่เกี่ยวข้องทันที กล่าวคือก่อนที่จะแสดงเอกสารหลังจากแท็กสคริปต์คุณไม่รอการโหลดองค์ประกอบเอกสารที่ตามมาและเริ่มโหลดและดำเนินการหลังจากอ่าน สิ่งนี้จะบล็อกการโหลดเอกสารที่ตามมา;
2. <สคริปต์ async src = "example.js"> </script>
ด้วยแอตทริบิวต์ async หมายความว่าการโหลดและการแสดงผลของเอกสารที่ตามมาจะดำเนินการควบคู่ไปกับการโหลดและการดำเนินการของสคริปต์ JS นั่นคือการดำเนินการแบบอะซิงโครนัส;
3. <สคริปต์เลื่อน src = "example.js"> </script>
ด้วยแอตทริบิวต์การเลื่อนเวลากระบวนการของการโหลดเอกสารที่ตามมาและการโหลดสคริปต์ JS (การโหลด แต่ไม่ดำเนินการในเวลานี้) จะดำเนินการแบบขนาน (แบบอะซิงโครนัส) การดำเนินการของสคริปต์ JS จำเป็นต้องรอจนกว่าองค์ประกอบทั้งหมดของเอกสารจะถูกแยกวิเคราะห์และก่อนที่เหตุการณ์ domcontentloaded จะกระตุ้นการดำเนินการ
รูปต่อไปนี้สามารถเห็นความแตกต่างระหว่างสาม:
ในหมู่พวกเขาสีน้ำเงินแสดงถึงเวลาในการโหลดของเครือข่ายสคริปต์ JS สีแดงแสดงถึงเวลาดำเนินการของสคริปต์ JS และสีเขียวแสดงถึงความละเอียดของ HTML
จากรูปที่เราสามารถชี้แจงประเด็นต่อไปนี้:
1. การเลื่อนเวลาและ async สอดคล้องกันในกระบวนการโหลดเครือข่ายและทั้งคู่ดำเนินการแบบอะซิงโครนัส;
2. ความแตกต่างระหว่างทั้งสองคือเมื่อสคริปต์ถูกดำเนินการหลังจากโหลด จะเห็นได้ว่าการเลื่อนเวลานั้นสอดคล้องกับข้อกำหนดของสถานการณ์ส่วนใหญ่สำหรับการโหลดสคริปต์แอปพลิเคชันและการดำเนินการ
3. หากมีสคริปต์หลายรายการที่มีแอตทริบิวต์เลื่อนออกไปพวกเขาจะเรียกใช้สคริปต์ในลำดับโหลด สำหรับ Async การโหลดและการดำเนินการมีการเชื่อมโยงอย่างใกล้ชิด โดยไม่คำนึงถึงคำสั่งประกาศจะดำเนินการทันทีตราบใดที่โหลดเสร็จสมบูรณ์ มันเป็นประโยชน์เพียงเล็กน้อยในการใช้งานสคริปต์ของแอปพลิเคชันเพราะไม่ได้พิจารณาการพึ่งพาเลย
สรุป:
จุดทั่วไประหว่างการเลื่อนเวลาและ async คือพวกเขาสามารถโหลดไฟล์ JS ในแบบขนานและจะไม่บล็อกการโหลดของหน้า ความแตกต่างคือหลังจากโหลดการเลื่อนเวลา JS จะรอให้โหลดทั้งหน้าก่อนที่จะดำเนินการ Async จะดำเนินการ JS ทันทีหลังจากโหลด ดังนั้นหากมีคำสั่งที่เข้มงวดในการดำเนินการ JS ขอแนะนำให้ใช้การเลื่อนเวลาเพื่อโหลด
ข้างต้นเป็นคำอธิบายโดยละเอียดเกี่ยวกับความแตกต่างระหว่างแอตทริบิวต์การเลื่อนเวลาและ Async ใน JS แนะนำให้คุณทราบโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!