หลายๆ คนมีความเชี่ยวชาญในการใช้ Javascript อยู่แล้ว แต่เมื่อพวกเขาเห็นว่า defer พวกเขาอาจไม่รู้ว่ามันใช้ทำอะไร หลายๆ คนก็ประสบปัญหาดังกล่าวเช่นกัน และพวกเขาจำเป็นต้องรัน js อื่นๆ โดยตรงและจัดการอ็อบเจ็กต์ DOM และรายงาน Object เสมอ ไม่พบข้อผิดพลาด ดังที่ทุกคนทราบ สาเหตุก็คือยังไม่ได้โหลดเพจ และออบเจ็กต์การดำเนินการ js ยังคงถูกดาวน์โหลดอยู่ แต่หลายๆ คนไม่รู้ว่าการเพิ่ม defer tag สามารถแก้ปัญหานี้ได้ง่ายๆ
<script src="../CGI-bin/delscript.js" เลื่อนออกไป</script>
ฟังก์ชั่น defer คือการรันสคริปต์หลังจากโหลดเอกสารแล้ว เพื่อหลีกเลี่ยงปัญหาการไม่พบวัตถุ --- ปัญหาเล็กน้อย
คัดลอกรหัสรหัสดังต่อไปนี้:
<button id="myButton" onclick="alert('ok')">ทดสอบ</button>
<สคริปต์>
myButton.คลิก();
</สคริปต์>
<สคริปต์>
myButton.คลิก();
</สคริปต์>
<button id="myButton" onclick="alert('ok')">ทดสอบ</button>
<เลื่อนสคริปต์>
ฟังก์ชั่น document.body.onload() {
การแจ้งเตือน (document.body.offsetHeight);
-
</สคริปต์>
การเพิ่ม defer หมายความว่ามันจะถูกดำเนินการหลังจากโหลดเพจเสร็จสมบูรณ์ ซึ่งเทียบเท่ากับ window.onload แต่มีความยืดหยุ่นมากกว่า window.onload ในแอปพลิเคชัน!
Defer คือ "ฮีโร่ผู้ไม่มีใครร้อง" ในด้านการเขียนบท โดยจะบอกเบราว์เซอร์ว่าส่วนของสคริปต์มีโค้ดที่ไม่จำเป็นต้องดำเนินการทันที และเมื่อใช้ร่วมกับแอตทริบิวต์ SRC ก็สามารถทำให้สคริปต์เหล่านี้ดาวน์โหลดในเบื้องหลังได้ และเนื้อหาในเบื้องหน้าจะปรากฏขึ้น ให้กับผู้ใช้ตามปกติ
--แต่รันสคริปต์หลังจากโหลดเอกสารแล้ว
โปรดทราบสองประเด็น:
1. อย่าเรียกใช้คำสั่ง document.write ในส่วนสคริปต์ประเภทเลื่อน เนื่องจาก document.write จะสร้างเอฟเฟกต์เอาต์พุตโดยตรง
2. นอกจากนี้ อย่ารวมตัวแปรส่วนกลางหรือฟังก์ชันใดๆ ที่จะใช้โดยสคริปต์ดำเนินการทันทีในส่วนสคริปต์เลื่อน
วิธีทั่วไปในการเพิ่มประสิทธิภาพการทำงานคือการตั้งค่าแอตทริบิวต์ "defer" ในแท็ก <SCRIPT> เมื่อไม่จำเป็นต้องเรียกใช้สคริปต์ทันที (สคริปต์ทันทีไม่อยู่ในบล็อกฟังก์ชัน ดังนั้นสคริปต์จะถูกดำเนินการในระหว่างกระบวนการโหลด) หลังจากตั้งค่าแอตทริบิวต์ "defer" แล้ว IE ไม่จำเป็นต้องรอให้สคริปต์โหลดและดำเนินการ วิธีนี้จะทำให้เพจโหลดเร็วขึ้น โดยทั่วไปแล้ว นี่ยังหมายความว่าสคริปต์ทันทีจะถูกวางไว้ในบล็อกฟังก์ชันได้ดีที่สุด และจัดการฟังก์ชันในตัวจัดการ onload ของเอกสารหรืออ็อบเจ็กต์เนื้อหา คุณสมบัตินี้มีประโยชน์เมื่อมีสคริปต์ที่ต้องอาศัยการกระทำของผู้ใช้ เช่น การคลิกปุ่มหรือการเลื่อนเมาส์ไปยังพื้นที่ใดพื้นที่หนึ่ง แต่เมื่อมีสคริปต์บางตัวที่จำเป็นต้องดำเนินการระหว่างหรือหลังจากโหลดเพจแล้ว การใช้แอตทริบิวต์ defer ก็มีข้อดีไม่มากนัก
คุณลักษณะ defer ในสคริปต์เป็นเท็จตามค่าเริ่มต้น ตามคำอธิบายในคู่มือการเขียนโปรแกรม DHTML แอตทริบิวต์ Defer จะถูกเขียนดังนี้:
การใช้แอ็ตทริบิวต์ในขณะออกแบบสามารถปรับปรุงประสิทธิภาพการดาวน์โหลดเพจได้ เนื่องจากเบราว์เซอร์ไม่จำเป็นต้องแยกวิเคราะห์และรันสคริปต์ และสามารถดาวน์โหลดและแยกวิเคราะห์เพจต่อไปได้
กล่าวอีกนัยหนึ่ง: หากคุณเพิ่มแอตทริบิวต์ defer เมื่อเขียนสคริปต์ เบราว์เซอร์จะไม่จำเป็นต้องประมวลผลทันทีเมื่อดาวน์โหลดสคริปต์ แต่จะดาวน์โหลดและแยกวิเคราะห์เพจต่อไป ซึ่งจะปรับปรุงประสิทธิภาพการดาวน์โหลด
มีสถานการณ์เช่นนี้มากมาย ตัวอย่างเช่น หากคุณกำหนดตัวแปร JavaScript จำนวนมาก หรือเขียนสคริปต์จำนวนมากในไฟล์อ้างอิง (.inc) ที่จำเป็นต้องประมวลผล คุณอาจต้องเพิ่มแอตทริบิวต์ defer ให้กับสคริปต์เหล่านี้ด้วย ซึ่งจะช่วยปรับปรุงประสิทธิภาพได้อย่างแน่นอน .
ตัวอย่างมีดังนี้:
คัดลอกรหัสรหัสดังต่อไปนี้:
<script language="javascript" เลื่อนออกไป>
วัตถุ var = วัตถุใหม่ ();
-
</สคริปต์>
เนื่องจากแอตทริบิวต์ defer มีค่าเริ่มต้นเป็นเท็จ ดังนั้นที่นี่
<script language="javascript" เลื่อนออกไป>
การประกาศแอตทริบิวต์ defer อย่างชัดเจนนั้นเทียบเท่ากับ
<script language="javascript" defer=true>
หลังจากประกาศแอตทริบิวต์ defer แล้ว คุณต้องพิจารณาว่าตัวแปรอื่นอ้างอิงถึงตัวแปรในบล็อกสคริปต์ defer หรือไม่ ไม่เช่นนั้นจะเกิดข้อผิดพลาดของสคริปต์