<script defer =“ defer”> ทำงานอย่างไร

ฉันมี<script>องค์ประกอบไม่กี่และรหัสในบางส่วนขึ้นอยู่กับรหัสใน<script>องค์ประกอบอื่น ๆ ฉันเห็นว่าแอdeferททริบิวสามารถมีประโยชน์ได้ที่นี่เนื่องจากอนุญาตให้เลื่อนการบล็อกโค้ดในการทำงาน

เพื่อทดสอบผมดำเนินการนี้บน Chrome: http://jsfiddle.net/xXZMN/

<script defer="defer">alert(2);</script>
<script>alert(1)</script>
<script defer="defer">alert(3);</script>

2 - 1 - 3แต่จะแจ้งเตือน ทำไมมันไม่แจ้งเตือน1 - 2 - 3?

อัปเดต: 2/19/2016

ลองพิจารณาคำตอบนี้ว่าล้าสมัยแล้ว อ้างถึงคำตอบอื่น ๆ ในโพสต์นี้สำหรับข้อมูลที่เกี่ยวข้องกับเบราว์เซอร์รุ่นใหม่

โดยพื้นฐานเลื่อนการแจ้งให้เบราว์เซอร์รอ "จนกว่าจะพร้อม" ก่อนดำเนินการจาวาสคริปต์ในบล็อกสคริปต์นั้น โดยปกตินี่คือหลังจากที่ DOM เสร็จสิ้นการโหลดและ document.readyState == 4

แอตทริบิวต์ defer นั้นขึ้นอยู่กับ internet explorer ใน Internet Explorer 8 บน Windows 7 ผลลัพธ์ที่ฉันเห็นในหน้าทดสอบ JS Fiddle ของคุณคือ 1 - 2 - 3

ผลลัพธ์อาจแตกต่างกันไปในแต่ละเบราว์เซอร์

http://msdn.microsoft.com/en-us/library/ms533719(v=vs.85).aspx

ตรงกันข้ามกับความเชื่อที่เป็นที่นิยม IE ปฏิบัติตามมาตรฐานบ่อยกว่าที่คนอื่นให้ไว้ในความเป็นจริงแอตทริบิวต์ "เลื่อน" ถูกกำหนดในข้อมูลจำเพาะ DOM ระดับ 1 http://www.w3.org/TR/REC-DOM-Level-1/level -One-html.html

คำจำกัดความการเลื่อนเวลาของ W3C: http://www.w3.org/TR/REC-html40/interact/scripts.html#adef-defer :

"เมื่อตั้งค่าแอตทริบิวต์บูลีนนี้จะให้คำแนะนำแก่ตัวแทนผู้ใช้ว่าสคริปต์จะไม่สร้างเนื้อหาเอกสารใด ๆ (เช่นไม่มี" document.write "ใน javascript) ดังนั้นตัวแทนผู้ใช้สามารถแยกวิเคราะห์และแสดงผลได้"

ตัวอย่างบางส่วนจากข้อกำหนด HTML5: http://w3c.github.io/html/semantics-scripting.html#element-attrdef-script-async

ต้องไม่ระบุแอตทริบิวต์ defer และ async หากไม่มีแอตทริบิวต์ src

มีสามโหมดที่เป็นไปได้ที่สามารถเลือกได้โดยใช้แอตทริบิวต์เหล่านี้ [async และ defer] หากแอตทริบิวต์ async มีอยู่สคริปต์จะถูกดำเนินการแบบอะซิงโครนัสทันทีที่พร้อมใช้งาน หากแอ็ตทริบิวต์ async ไม่มีอยู่ แต่มีคุณสมบัติ defer อยู่สคริปต์จะถูกดำเนินการเมื่อเพจแยกวิเคราะห์เสร็จแล้ว หากไม่มีแอ็ตทริบิวต์อยู่สคริปต์จะถูกดึงและเรียกใช้งานทันทีก่อนที่เอเจนต์ผู้ใช้จะแยกวิเคราะห์หน้าต่อไป

รายละเอียดการประมวลผลที่ถูกต้องสำหรับแอตทริบิวต์เหล่านี้ส่วนใหญ่เป็นเหตุผลทางประวัติศาสตร์ที่ค่อนข้างไม่สำคัญซึ่งเกี่ยวข้องกับแง่มุมต่าง ๆ ของ HTML ข้อกำหนดการใช้งานจึงมีความจำเป็นกระจายอยู่ทั่วข้อกำหนด อัลกอริทึมด้านล่าง (ในส่วนนี้) อธิบายถึงแกนหลักของการประมวลผลนี้ แต่อัลกอริธึมเหล่านี้อ้างอิงและอ้างอิงโดยกฎการแยกวิเคราะห์สำหรับแท็กเริ่มต้นและแท็กสิ้นสุดของสคริปต์ใน HTML ในเนื้อหาต่างประเทศและใน XML กฎสำหรับเอกสาร () วิธีการจัดการสคริปต์ ฯลฯ

หากองค์ประกอบนั้นมีแอตทริบิวต์ src และองค์ประกอบนั้นมีแอตทริบิวต์ที่เลื่อนออกไปและองค์ประกอบนั้นถูกตั้งค่าสถานะเป็น "parser-insert" และองค์ประกอบนั้นไม่มีแอตทริบิวต์ async:

องค์ประกอบจะต้องเพิ่มในตอนท้ายของรายการสคริปต์ที่จะดำเนินการเมื่อเอกสารเสร็จสิ้นการแยกวิเคราะห์ที่เกี่ยวข้องกับเอกสารของตัวแยกวิเคราะห์ที่สร้างองค์ประกอบ

คำตอบที่แท้จริงคือ: เพราะคุณไม่สามารถไว้วางใจเลื่อนเวลาออกไปได้

ในแนวคิดเลื่อนและ async แตกต่างกันดังนี้:

asyncอนุญาตให้ดาวน์โหลดสคริปต์ในพื้นหลังโดยไม่ปิดกั้น จากนั้นทันทีที่การดาวน์โหลดเสร็จสิ้นการแสดงผลจะถูกปิดกั้นและสคริปต์นั้นจะทำงาน เรนเดอร์จะทำงานต่อเมื่อสคริปต์ทำงาน

เลื่อนการทำงานในสิ่งเดียวกันยกเว้นการอ้างสิทธิ์เพื่อรับประกันว่าสคริปต์จะดำเนินการตามลำดับที่ระบุในหน้าและพวกเขาจะถูกดำเนินการหลังจากเอกสารแยกวิเคราะห์เสร็จแล้ว ดังนั้นสคริปต์บางตัวอาจเสร็จสิ้นการดาวน์โหลดจากนั้นให้รอและรอสคริปต์ที่ดาวน์โหลดในภายหลัง แต่ปรากฏต่อหน้าพวกเขา

น่าเสียดายที่มาตรฐานการต่อสู้ของแมวมีความแตกต่างกันไปตามข้อกำหนดเฉพาะและแม้แต่ในรายละเอียดล่าสุดก็ไม่ได้รับประกันการใช้งานที่มีประโยชน์ ตามคำตอบที่นี่และปัญหานี้แสดงให้เห็นว่าเบราว์เซอร์มีการใช้งานที่ต่างกัน:

• ในบางสถานการณ์เบราว์เซอร์บางตัวมีข้อผิดพลาดที่ทำให้deferสคริปต์หมด
• เบราว์เซอร์บางตัวชะลอDOMContentLoadedกิจกรรมจนกว่าdeferจะโหลดสคริปต์เสร็จและบางโปรแกรมไม่ทำงาน
• เบราว์เซอร์บางเชื่อฟังdeferใน<script>องค์ประกอบที่มีรหัสแบบอินไลน์และไม่มีsrcแอตทริบิวต์และบางคนไม่สนใจมัน

โชคดีที่สเป็คอย่างน้อยก็ระบุว่า async แทนที่จะเลื่อนออกไป ดังนั้นคุณสามารถใช้สคริปต์ทั้งหมดเป็น async และรับการสนับสนุนเบราว์เซอร์ที่กว้างเช่น:

<script defer async src="..."></script>

98% ของเบราว์เซอร์ที่ใช้ทั่วโลกและ 99% ในสหรัฐอเมริกาจะหลีกเลี่ยงการบล็อกด้วยวิธีนี้

(หากคุณต้องรอจนกว่าเอกสารจะเสร็จสิ้นการแยกวิเคราะห์ฟังเหตุการณ์DOMContentLoadedเหตุการณ์หรือใช้.ready()ฟังก์ชั่นที่ใช้งานง่ายของ jQuery คุณต้องการทำสิ่งนี้ต่อไปเพื่อให้เบราว์เซอร์ที่ไม่ได้ใช้งานมีdeferประสิทธิภาพ)

deferสามารถใช้ใน<script>แท็กสำหรับการรวมสคริปต์ภายนอกเท่านั้น ดังนั้นขอแนะนำให้ใช้ใน-tags <script>ใน<head>-section

เนื่องจากคุณสมบัติการเลื่อนออกไปทำงานกับแท็กสคริปต์ที่มี src พบวิธีในการเลียนแบบการเลื่อนสคริปต์แบบอินไลน์ ใช้เหตุการณ์ DOMContentLoaded

<script defer src="external-script.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
    // Your inline scripts which uses methods from external-scripts.
});
</script>

นี่เป็นเพราะเหตุการณ์ DOMContentLoaded เริ่มทำงานหลังจากมีการโหลดสคริปต์ที่มีการเชื่อมโยงที่สมบูรณ์แล้ว

แอตทริบิวต์ defer ใช้สำหรับสคริปต์ภายนอกเท่านั้น (ควรใช้ต่อเมื่อมีแอตทริบิวต์ src อยู่)

ควรสังเกตด้วยว่าอาจมีปัญหาใน IE <= 9 เมื่อใช้script deferในบางสถานการณ์ เพิ่มเติมเกี่ยวกับเรื่องนี้: https://github.com/h5bp/lazyweb-requests/issues/42

ดูบทความที่ยอดเยี่ยมนี้ดำดิ่งลงไปในน้ำที่เต็มไปด้วยหมอกของการโหลดสคริปต์โดยนักพัฒนาของ Google Jake Archibald เขียนในปี 2013

การอ้างถึงส่วนที่เกี่ยวข้องจากบทความนั้น:

Defer

<script src="//other-domain.com/1.js" defer></script>
<script src="2.js" defer></script>

Spec พูดว่า : ดาวน์โหลดด้วยกันดำเนินการตามลำดับก่อน DOMContentLoaded ละเว้น "เลื่อน" ไปที่สคริปต์ที่ไม่มี "src"

IE <10 พูดว่า : ฉันอาจรัน 2.js ครึ่งทางผ่านการทำงานของ 1.js. ไม่สนุกเหรอ?

เบราว์เซอร์ที่เป็นสีแดงพูดว่า : ฉันไม่รู้ว่านี่คือ "เลื่อน" สิ่งใดฉันจะโหลดสคริปต์ราวกับว่ามันไม่ได้อยู่ที่นั่น

เบราว์เซอร์อื่น ๆ พูดว่า : โอเค แต่ฉันไม่อาจเพิกเฉยต่อการ "เลื่อน" สคริปต์ที่ไม่มี "src"

_{(ฉันจะเพิ่ม Firefox เวอร์ชันก่อนหน้าของทริกเกอร์ DOMContentLoaded ก่อนที่deferสคริปต์จะทำงานเสร็จตามความคิดเห็นนี้)}

ดูเหมือนว่าเบราว์เซอร์สมัยใหม่จะให้การสนับสนุนasyncอย่างถูกต้อง แต่คุณจะต้องตกลงกับสคริปต์ที่หมดและอาจเป็นไปได้ก่อนที่ DOMContentLoaded

แอ็ตทริบิวต์ Boolean นี้ถูกตั้งค่าให้บ่งบอกถึงเบราว์เซอร์ที่สคริปต์นั้นตั้งใจให้เรียกใช้งานหลังจากเอกสารถูกวิเคราะห์ เนื่องจากคุณสมบัตินี้ยังไม่ได้นำมาใช้กับเบราว์เซอร์หลักอื่น ๆ ผู้เขียนจึงไม่ควรสันนิษฐานว่าการดำเนินการของสคริปต์จะถูกเลื่อนออกไป ไม่เคยเรียก document.write () จากสคริปต์เลื่อน (ตั้งแต่ Gecko 1.9.2 สิ่งนี้จะทำให้เอกสารหายไป) ไม่ควรใช้แอตทริบิวต์ defer กับสคริปต์ที่ไม่มีแอตทริบิวต์ src ตั้งแต่ Gecko 1.9.2 แอ็ตทริบิวต์ defer จะถูกข้ามไปที่สคริปต์ที่ไม่มีแอ็ตทริบิวต์ src อย่างไรก็ตามใน Gecko 1.9.1 แม้สคริปต์แบบอินไลน์จะถูกเลื่อนออกไปหากมีการตั้งค่าแอตทริบิวต์ defer

เลื่อนการทำงานกับ chrome, firefox เช่น> 7 และ Safari

ref: https://developer.mozilla.org/en-US/docs/HTML/Element/script

แอตทริบิวต์ defer เป็นแอตทริบิวต์แบบบูล

เมื่อมีการระบุว่าสคริปต์จะถูกดำเนินการเมื่อหน้าได้เสร็จสิ้นการแยก

หมายเหตุ: แอ็ตทริบิวต์ defer มีไว้สำหรับสคริปต์ภายนอกเท่านั้น (ควรใช้เฉพาะเมื่อมีคุณสมบัติ src อยู่)

หมายเหตุ: มีหลายวิธีที่สคริปต์ภายนอกสามารถดำเนินการได้:

หาก async มีอยู่: สคริปต์จะถูกดำเนินการแบบอะซิงโครนัสกับส่วนที่เหลือของหน้า (สคริปต์จะถูกดำเนินการในขณะที่หน้ายังคงดำเนินการแยกวิเคราะห์) หากไม่มี async อยู่และเลื่อนออก: สคริปต์จะถูกดำเนินการ ไม่มี async หรือ defer อยู่: สคริปต์จะถูกดึงข้อมูลและดำเนินการทันทีก่อนที่เบราว์เซอร์จะแยกวิเคราะห์หน้าต่อไป