HTML <script> คุณสมบัติ async
คำนิยามและวิธีใช้
async คุณสมบัติเป็นคุณสมบัติบูล
ถ้าได้กำหนด async คุณสมบัติ สคริปต์จะถูกดาวน์โหลดร่วมกันขณะที่กำลังแก้ไขหน้าเว็บ และปฏิบัติตามทันทีเมื่อสามารถใช้งานได้ หลังจากที่สคริปต์ดาวน์โหลดเสร็จแล้ว การแก้ไขหน้าเว็บจะหยุดลง แล้วปฏิบัติตามสคริปต์ แล้วก็กลับมาแก้ไขหน้าเว็บต่อเดิม
แนะนำ:async คุณสมบัตินี้มีผลบังคับเมื่อใช้สคริปต์ภายนอก (และควรใช้เมื่อมีคุณสมบัติ src อยู่)
แนะนำ:สามารถปฏิบัติตามสคริปต์ภายนอกด้วยวิธีหลายราย
- ถ้าได้กำหนด async: สคริปต์จะถูกดาวน์โหลดร่วมกันขณะที่กำลังแก้ไขหน้าเว็บ และปฏิบัติตามทันทีเมื่อสามารถใช้งานได้ (ก่อนที่จะแก้ไขหน้าเว็บเสร็จ)
- ถ้าได้กำหนด defer (แต่ไม่ได้กำหนด async): สคริปต์จะถูกดาวน์โหลดร่วมกันขณะที่กำลังแก้ไขหน้าเว็บ และปฏิบัติตามหลังจากการแก้ไขหน้าเว็บเสร็จ
- ถ้าไม่มี async และ defer ใดๆ: สคริปต์จะถูกดาวน์โหลดและปฏิบัติตามทันที จะบรรลุการปฏิบัติงานหน้าเว็บจนกว่าสคริปต์จะปฏิบัติตามเสร็จ
ตัวอย่าง
สคริปต์ที่ถูกอ้างอิงจะถูกดาวน์โหลดร่วมกันขณะที่กำลังแก้ไขหน้าเว็บ และปฏิบัติตามทันทีเมื่อสามารถใช้งานได้
<script src="demo_async.js" async></script>
การใช้งาน
<script async>
การปฏิบัติตามสคริปต์อย่างไม่มีเวลา
การปฏิบัติตามปกติของเว็บเบราว์เซอร์เมื่อเผยแพร่ตัวองค์กร script คือหยุดปฏิบัติงานหน้าเว็บในขณะที่กำลังโหลดและปฏิบัติตามสคริปต์ ตัวองค์กร script ต่างๆ จะปฏิบัติตามลำดับที่กำหนดไว้ (ตามลำดับที่กำหนด) ปฏิบัติตามลำดับ (ในขณะที่กำลังโหลดและปฏิบัติตามสคริปต์ จะไม่ทำอะไรอื่นๆ)
เป็นวิธีการดำเนินการประมวลผลสคริปต์โดยเริ่มต้น การปฏิบัติตามลำดับที่แน่นอนมีความหมายของตนเอง แต่บางสคริปต์ไม่จำเป็นต้องจัดการดังนั้น สำหรับสคริปต์นี้ สามารถใช้ async คุณสมบัติเพื่อเพิ่มการทำงานของมัน ตัวอย่างที่เป็นตัวแทนของนี้คือสคริปต์ติดตาม (tracking script) สคริปต์นี้สามารถรายงานบันทึกการเข้าชมเว็บไซต์ของผู้ใช้เพื่อให้บริษัทโฆษณาปรับปรุงและแสดงโฆษณาตามรูปแบบของผู้ใช้ หรือรวบรวมข้อมูลสถิติการเข้าชมเว็บไซต์เพื่อวิเคราะห์ และอื่น ๆ อีกมาก สคริปต์นี้เป็นอิสระจากเอลีเมนต์ของเอกสาร HTML โดยทั่วไป และไม่จำเป็นต้องมีการสัมผัสกับเอลีเมนต์ของเอกสาร HTML ในการรอโหลดและส่งรายงานกลับไปยังเซิร์ฟเวอร์ของตนเอง จึงไม่มีประโยชน์ในการลดการแสดงหน้าเว็บเพื่อรอโหลดและส่งรายงานกลับไปยังเซิร์ฟเวอร์
ใช้ async หลังจากกำหนดคุณสมบัตินี้ บราวเซอร์จะทำงานโดยร่วมมือแบบอะสอนร่วมกันในการลงทะเบียนและปฏิบัติการ HTML อื่น ๆ รวมทั้ง script อื่น ๆ ขณะที่โหลดแบบอะสอนร่วมกันและปฏิบัติการสคริปต์ หากใช้เหมาะสม นี่จะช่วยเพิ่มการทำงานทั้งหมดของโหลด
แนะนำ:ใช้ async หลักผลที่สำคัญของคุณสมบัตินี้คือสคริปต์ในหน้าเว็บอาจไม่ได้ทำงานตามลำดับที่กำหนดไว้ ดังนั้น หากสคริปต์ใช้ฟังก์ชันหรือค่าที่กำหนดโดยสคริปต์อื่น มันไม่เหมาะสมที่จะใช้ async คุณสมบัติ
การสนับสนุนโปรแกรมบราวเซอร์
ตัวเลขในตารางนี้บอกเล่าถึงเวอร์ชั่นบราวเซอร์ที่สนับสนุนคุณสมบัตินี้อย่างเต็มที่
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 8.0 | 10.0 | 3.6 | 5.1 | 15.0 |
