แท็กสคริปต์ - async & เลื่อนเวลา

547

ฉันมีคำถามสองสามข้อเกี่ยวกับคุณลักษณะasync& deferสำหรับ<script>แท็กที่ฉันเข้าใจว่าใช้ได้เฉพาะในเบราว์เซอร์ HTML5

หนึ่งในเว็บไซต์ของฉันมีไฟล์ JavaScript ภายนอกสองไฟล์ที่อยู่เหนือ</body>แท็ก ที่แรกก็คือjQuery ที่มาจาก google และที่สองคือสคริปต์ภายนอกท้องถิ่น

ด้วยความเคารพต่อความเร็วในการโหลดเว็บไซต์

  1. มีข้อได้เปรียบในการเพิ่มasyncสคริปต์ทั้งสองที่ฉันมีที่ด้านล่างของหน้า?

  2. จะมีประโยชน์ใด ๆ ในการเพิ่มasyncตัวเลือกในการที่ทั้งสองสคริปต์และวางไว้ที่ด้านบนของหน้านี้<head>?

  3. นี่หมายความว่าพวกเขาดาวน์โหลดเมื่อเพจโหลดหรือไม่
  4. ฉันคิดว่าสิ่งนี้จะทำให้เกิดความล่าช้าสำหรับเบราว์เซอร์ HTML4 แต่จะเพิ่มความเร็วในการโหลดหน้าสำหรับเบราว์เซอร์ HTML5 หรือไม่

การใช้ <script defer src=...

  1. การโหลดสคริปต์สองตัวที่อยู่ภายใน <head>พร้อมกับแอททริบิวต์deferจะมีผลเช่นเดียวกันกับที่เคยมีสคริปต์มาก่อน</body>หรือไม่
  2. ฉันคิดว่านี่จะทำให้เบราว์เซอร์ HTML4 ช้าลง

การใช้ <script async src=...

หากฉันมีสองสคริปต์ที่asyncเปิดใช้งาน

  1. พวกเขาจะดาวน์โหลดพร้อมกันไหม?
  2. หรือทีละส่วนกับส่วนที่เหลือของหน้า?
  3. ลำดับของสคริปต์กลายเป็นปัญหาหรือไม่ ตัวอย่างเช่นหนึ่งสคริปต์ขึ้นอยู่กับอีกดังนั้นหากหนึ่งดาวน์โหลดเร็วกว่าหนึ่งในสคริปต์ที่สองอาจทำงานไม่ถูกต้อง ฯลฯ

ในที่สุดฉันก็ควรทิ้งทุกอย่างไว้เหมือนเดิมจนกว่าจะใช้ HTML5 มากกว่าปกติ

javascript  html 
— อาดัม
แหล่งที่มา
5
asyncใหม่ (ish) แต่deferเป็นส่วนหนึ่งของ IE มาตั้งแต่ IE4 deferถูกเพิ่มไปยังเบราว์เซอร์อื่น ๆ มากขึ้นเมื่อเร็ว ๆ นี้ แต่เบราว์เซอร์ที่เก่ากว่านั้นมักจะแฮงค์น้อยกว่ามาก
— Alohci
3
ตอนนี้ HTML5 ได้รับความนิยมอย่างมาก!
— sept08
2
deferเหมือนกับการวางสคริปต์ที่ด้านล่างของ HTML ซึ่งเป็นเรื่องธรรมดามาหลายปี
— vsync
1
@vsync ไม่จำเป็นต้องเป็นจริงเบราว์เซอร์จะดาวน์โหลด JS พร้อมแท็ก defer เมื่อวิเคราะห์คำในแท็กสคริปต์ แต่จะเลื่อนการลบ exe ไปจนกระทั่งถูกต้องก่อน DOMContentLoaded การดาวน์โหลดไม่เป็นการปิดกั้น การวางที่ด้านล่างของ HTML จะทำให้การดาวน์โหลดและการดำเนินการของ JS ล่าช้าจนกว่าจะมีการสร้าง DOM แต่คุณจะยังคงมีความล่าช้าเพิ่มเติมโดยรอการดาวน์โหลด
— แบรดฟรอสต์
@BradFrost - การดาวน์โหลดกำลังบล็อกในมุมมองของฉันในแง่ที่ใช้แบนด์วิดท์อินเทอร์เน็ตและสำหรับผู้ที่มีการเชื่อมต่อที่ช้าฉันเห็นว่ามันเป็นสิ่งจำเป็นที่จะต้องโหลดเอกสารเป็นครั้งแรกและเมื่อมันถูกสร้างขึ้นให้เริ่มดาวน์โหลดไฟล์จาวาสคริปต์ . สิ่งนี้เป็นจริงในกรณีที่เนื้อหาไม่คู่กันอย่างแน่นหนากับจาวาสคริปต์สำหรับการแสดงผลทุกอย่าง (เช่นSPA )
— vsync

คำตอบ:

405

</body>เก็บสคริปต์ของคุณขวาก่อน Async สามารถใช้กับสคริปต์ที่มีอยู่ในบางสถานการณ์ (ดูการสนทนาด้านล่าง) ผู้เลื่อนเวลาจะไม่สร้างความแตกต่างอย่างมากสำหรับสคริปต์ที่อยู่ที่นั่นเนื่องจากการแยกวิเคราะห์ DOM นั้นได้ทำไปแล้ว

นี่คือบทความที่อธิบายถึงความแตกต่างระหว่าง async และ Defer นี้: http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/

HTML </body>ของคุณจะแสดงได้เร็วขึ้นในเบราว์เซอร์รุ่นเก่าถ้าคุณเก็บสคริปต์ในตอนท้ายของร่างกายที่ถูกต้องก่อน ดังนั้นเพื่อรักษาความเร็วในการโหลดในเบราว์เซอร์รุ่นเก่าคุณไม่ต้องการเก็บไว้ที่อื่น

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

คุณสามารถใส่สคริปต์ใน<head>แท็กและตั้งค่าdeferและการโหลดสคริปต์จะถูกเลื่อนออกไปจนกว่า DOM จะได้รับการแยกวิเคราะห์และที่จะได้รับการแสดงหน้าอย่างรวดเร็วในเบราว์เซอร์ใหม่ที่สนับสนุนเลื่อน แต่มันจะไม่ช่วยคุณเลย ในเบราว์เซอร์รุ่นเก่าและมันไม่ได้เร็วไปกว่าการวางสคริปต์ไว้ก่อน</body>ที่จะทำงานกับเบราว์เซอร์ทั้งหมด </body>ดังนั้นคุณสามารถดูว่าทำไมมันเป็นเพียงที่ดีที่สุดที่จะนำพวกเขามีสิทธิก่อน

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

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

— jfriend00
แหล่งที่มา
8
ผู้เลื่อนขั้นควรเรียกใช้งานตามลำดับ แต่ยังคงทำงานก่อนที่จะโหลดเนื้อหา ไม่ได้หมายความว่าการใส่ไว้ในหัวจะเร็วขึ้นเนื่องจากมันสามารถเริ่มดาวน์โหลดได้ก่อนที่ body html จะถูกแจง
— เควิน
9
คุณบอกว่าการวางสคริปต์headและตั้งค่าให้พวกเขาdeferจะไม่เร็วไปกว่าการวางสคริปต์ก่อนหน้า</body>แต่จากสิ่งที่ฉันอ่านมานั้นไม่ถูกต้อง ลองคิดดู - ถ้าคุณใส่สคริปต์เข้าไป<head>แล้วพวกมันจะเริ่มดาวน์โหลดทันทีในขณะที่ถ้ามันถูกต้องก่อน</body>องค์ประกอบอื่น ๆ ทั้งหมดจะถูกดาวน์โหลดก่อน
— เนท
12
@Nate - มันจะไม่ทำให้เอกสารของคุณโหลดเร็วขึ้นซึ่งเป็นจุดของฉัน คุณถูกต้องว่าสามารถปรับปรุงการโหลดสคริปต์ได้เร็วขึ้น แต่ก็สามารถชะลอการโหลดเอกสารและเนื้อหาเนื่องจากคุณใช้แบนด์วิดท์ของคุณและใช้การเชื่อมต่อแบบ จำกัด ที่เบราว์เซอร์จะทำให้กับเซิร์ฟเวอร์ที่กำหนด โหลดสคริปต์ขณะที่พยายามโหลดเนื้อหาของคุณด้วย
— jfriend00
4
"หากสคริปต์ที่สองของคุณขึ้นอยู่กับสคริปต์แรก ... จากนั้นคุณไม่สามารถทำให้เป็น async หรือเลื่อนได้" - นั่นไม่ใช่ความจริงโดยการเลื่อนไปตามลำดับ
— DisgruntledGoat
2
ณ จุดนี้ข้อกำหนด </body> ไม่จำเป็นสำหรับการพัฒนาเบราว์เซอร์ตั้งแต่ปี 2012 เมื่อคำตอบนี้ถูกโพสต์
— bgcode
843

ภาพนี้จะอธิบายแท็กสคริปต์ปกติ async และเลื่อนออกไป

ป้อนคำอธิบายรูปภาพที่นี่

  • สคริปต์ Async จะถูกดำเนินการทันทีที่โหลดสคริปต์ดังนั้นจึงไม่รับประกันว่าจะมีการดำเนินการ (สคริปต์ที่คุณรวมในตอนท้ายอาจทำงานก่อนไฟล์สคริปต์แรก)

  • สคริปต์ที่เลื่อนออกไปจะรับประกันลำดับของการดำเนินการที่ปรากฏในเพจ

อ้างอิงลิงค์นี้: http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

— Prasanth Bendra
แหล่งที่มา
ฉันคิดว่าตัวอย่างที่มีสคริปต์หลายตัวน่าจะดีกว่าเพื่อแสดงลำดับของพวกเขา
— vsync
4
@writofmandamus ดูเหมือนว่าasyncจะเป็นผู้ชนะ ดูstackoverflow.com/questions/13821151/…
— พระคุณ
ขอบคุณสำหรับคำอธิบายที่ดี อย่างไรก็ตามภาพไม่ได้ปรับขนาด ในกรณีที่มี<script>แท็กเท่านั้นความยาวทั้งหมดของการโหลดหน้าจะนานขึ้นตามเวลาที่ใช้ในการดาวน์โหลดไฟล์สคริปต์
— arni
@BhavikHirani ตามไซต์นี้การใช้ทั้ง async และ defer ในแท็กสคริปต์เดียวกันนั้นใช้ async หากเบราว์เซอร์รองรับหรือไม่ก็เลื่อนกลับไปที่หากไม่รองรับ async แต่สนับสนุนการเลื่อนออกไป พฤติกรรมนั้นแตกต่างกันมากดังนั้นฉันจะไม่แนะนำให้ใช้ทั้งคู่เนื่องจากผลลัพธ์ไม่แน่นอนและอาจเป็นแหล่งที่ดีสำหรับข้อบกพร่อง
— Adrian Wiik
@arni เฉพาะเมื่อใช้แบนด์วิดท์เต็มที่ซึ่งไม่ค่อยเป็น และการดาวน์โหลดทั้งสองจะแชร์แบนด์วิดท์ไม่ใช่บล็อกหนึ่ง - เพิ่มเติม: รูปภาพเหล่านี้แสดงการแยกวิเคราะห์เป็นสีเขียวไม่ใช่ดาวน์โหลด
— Robert Siemer
213

HTML5: async,defer

ใน HTML5 คุณสามารถบอกเบราว์เซอร์เมื่อเรียกใช้รหัส JavaScript ของคุณ มี 3 ความเป็นไปได้:

<script       src="myscript.js"></script>

<script async src="myscript.js"></script>

<script defer src="myscript.js"></script>

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

  2. ด้วยasync(แบบอะซิงโครนัส) เบราว์เซอร์จะยังคงโหลดหน้า HTML และแสดงผลในขณะที่เบราว์เซอร์โหลดและเรียกใช้สคริปต์ในเวลาเดียวกัน

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

— Dinesh
แหล่งที่มา
ต้องใช้เทมเพลต blogger.com async=""ก่อนที่จะตรวจสอบและบันทึกการเปลี่ยนแปลงเทมเพลต
— noobninja
1
หมายเหตุ: ไม่มีการรับประกันว่าสคริปต์จะทำงานตามลำดับที่ระบุโดยใช้ Async "ดังนั้นหากสคริปต์ที่สองของคุณขึ้นอยู่กับสคริปต์แรกให้หลีกเลี่ยง Async"
— Faisal Naseer
2
async- สคริปต์จะถูกดำเนินการทันทีที่มีการดาวน์โหลดโดยไม่คำนึงถึงลำดับในไฟล์ HTML
— vsync
30

ทั้งสองasyncและdeferสคริปต์เริ่มดาวน์โหลดทันทีโดยไม่หยุด parser และทั้งคู่สนับสนุนตัวonloadจัดการทางเลือกเพื่อจัดการกับความต้องการทั่วไปในการเริ่มต้นซึ่งขึ้นอยู่กับสคริปต์

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

แหล่งที่มาและรายละเอียดเพิ่มเติม: ที่นี่

— Zameer Khan
แหล่งที่มา
24

ประสบปัญหาชนิดเดียวกันและตอนนี้เข้าใจได้อย่างชัดเจนว่าจะใช้งานได้อย่างไรหวังว่าลิงก์อ้างอิงนี้จะเป็นประโยชน์ ...

async

เมื่อคุณเพิ่มแอตทริบิวต์ async ให้กับแท็กสคริปต์ของคุณสิ่งต่อไปนี้จะเกิดขึ้น

<script src="myfile1.js" async></script>
<script src="myfile2.js" async></script>
  1. ทำการร้องขอแบบขนานเพื่อดึงข้อมูลไฟล์
  2. แยกวิเคราะห์เอกสารต่อไปราวกับว่าไม่เคยถูกขัดจังหวะ
  3. ดำเนินการแต่ละสคริปต์ทันทีที่ไฟล์ถูกดาวน์โหลด

Defer

การเลื่อนคล้ายกับ async โดยมีความแตกต่างหลักอย่างหนึ่ง นี่คือสิ่งที่เกิดขึ้นเมื่อเบราว์เซอร์พบสคริปต์ด้วยแอตทริบิวต์ defer

<script src="myfile1.js" defer></script>
<script src="myfile2.js" defer></script>
  1. ทำการร้องขอแบบขนานเพื่อดึงข้อมูลแต่ละไฟล์
  2. แยกวิเคราะห์เอกสารต่อไปราวกับว่าไม่เคยถูกขัดจังหวะ
  3. เสร็จสิ้นการแยกวิเคราะห์เอกสารแม้ว่าไฟล์สคริปต์จะถูกดาวน์โหลด
  4. ดำเนินการแต่ละสคริปต์ตามลำดับที่พบในเอกสาร

การอ้างอิง: ความแตกต่างระหว่าง Async และ Defer

— kamesh
แหล่งที่มา
7

asyncและdeferจะดาวน์โหลดไฟล์ในระหว่างการแยกวิเคราะห์ HTML ทั้งสองจะไม่ขัดจังหวะ parser

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

  • สคริปต์ที่โหลดด้วยasyncไม่รับประกันคำสั่งซื้อใด ๆ ในขณะที่สคริปต์ที่โหลดด้วยdeferคุณสมบัติรักษาลำดับที่พวกเขาปรากฏบน DOM

ใช้<script async>เมื่อสคริปต์ไม่พึ่งพาสิ่งใด เมื่อสคริปต์ขึ้นอยู่กับการใช้งาน

ทางออกที่ดีที่สุดจะเพิ่มที่ด้านล่างของร่างกายจะไม่มีปัญหากับการบล็อกหรือการเรนเดอร์

— NavyaKumar
แหล่งที่มา
เพียงแค่ต้องการให้ความกระจ่างบางอย่างที่นี่มีสองสิ่งเกิดขึ้นที่นี่ 1. การดาวน์โหลดทรัพยากร 2. การดำเนินการของทรัพยากร การดาวน์โหลดทรัพยากรในทั้งสองกรณี (async และ defer) ไม่ได้ถูกบล็อกหมายความว่าพวกเขาจะไม่ปิดกั้นการแยกวิเคราะห์ของ html ในขณะที่การดำเนินการใน async จะบล็อกการแยกวิเคราะห์และในกรณีที่เลื่อนการดำเนินการจะเกิดขึ้น ดังนั้นจึงไม่ปิดกั้นในกรณีนี้
— pOoOf
5

ฉันคิดว่า Jake Archibald นำเสนอข้อมูลเชิงลึกบางอย่างให้กับเราในปี 2013 ซึ่งอาจเพิ่มความเป็นบวกให้กับหัวข้อ:

https://www.html5rocks.com/en/tutorials/speed/script-loading/

จอกศักดิ์สิทธิ์กำลังมีชุดของสคริปต์ที่ดาวน์โหลดทันทีโดยไม่ปิดกั้นการเรนเดอร์และดำเนินการโดยเร็วที่สุดตามลำดับที่เพิ่มเข้ามา น่าเสียดายที่ HTML เกลียดคุณและจะไม่ยอมให้คุณทำเช่นนั้น

( ... )

คำตอบนั้นอยู่ในข้อมูลจำเพาะของ HTML5 แม้ว่าจะซ่อนอยู่ที่ด้านล่างของส่วนการโหลดสคริปต์ " แอตทริบิวต์ async IDL ควบคุมว่าองค์ประกอบจะดำเนินการแบบอะซิงโครนัสหรือไม่หากตั้งค่าสถานะ" force-async "ขององค์ประกอบจากนั้นเมื่อได้รับแอตทริบิวต์ async IDL ต้องส่งคืนค่าจริงและตั้งค่า" force-async " การตั้งค่าสถานะต้องยกเลิกการตั้งค่าก่อน ... "

( ... )

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

[
    '//other-domain.com/1.js',
    '2.js'
].forEach(function(src) {
    var script = document.createElement('script');
    script.src = src;
    script.async = false;
    document.head.appendChild(script);
});

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

สคริปต์ด้านบนควรรวมอยู่ในส่วนหัวของหน้าจัดลำดับการดาวน์โหลดสคริปต์โดยเร็วที่สุดโดยไม่รบกวนการแสดงผลแบบก้าวหน้าและดำเนินการโดยเร็วที่สุดเท่าที่จะทำได้ตามลำดับที่คุณระบุ “ 2.js” นั้นสามารถดาวน์โหลดได้ฟรีก่อน“ 1.js” แต่มันจะไม่ถูกดำเนินการจนกว่า“ 1.js” จะดาวน์โหลดและดำเนินการสำเร็จหรือไม่สามารถทำได้ เย่! ดาวน์โหลด async แต่สั่งดำเนินการ !

ถึงกระนั้นนี่อาจไม่ใช่วิธีที่เร็วที่สุดในการโหลดสคริปต์:

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

เราสามารถเพิ่มการค้นพบกลับมาได้โดยใส่ไว้ในส่วนหัวของเอกสาร:

<link rel="subresource" href="//other-domain.com/1.js">
<link rel="subresource" href="2.js">

สิ่งนี้จะบอกเบราว์เซอร์ว่าหน้าต้องการ 1.js และ 2.js link [rel = subresource] นั้นคล้ายคลึงกับ link [rel = prefetch] แต่มีความหมายต่างกัน น่าเสียดายที่ขณะนี้รองรับ Chrome เท่านั้นและคุณต้องประกาศว่าสคริปต์ใดที่ต้องโหลดสองครั้งครั้งผ่านองค์ประกอบลิงก์และอีกครั้งในสคริปต์ของคุณ

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

— mjfneto
แหล่งที่มา
1

ดูเหมือนว่าพฤติกรรมของการเลื่อนและ async นั้นขึ้นอยู่กับเบราว์เซอร์อย่างน้อยในช่วงการดำเนินการ หมายเหตุการเลื่อนออกไปจะใช้กับสคริปต์ภายนอกเท่านั้น ฉันสมมติว่า async เป็นไปตามรูปแบบเดียวกัน

ใน IE 11 หรือต่ำกว่าดูเหมือนว่าคำสั่งจะเป็นดังนี้:

  • async (สามารถเรียกใช้งานบางส่วนขณะที่โหลดหน้าเว็บ)
  • ไม่มี (สามารถดำเนินการในขณะโหลดหน้า)
  • เลื่อน (ดำเนินการหลังจากโหลดหน้าเว็บเลื่อนทั้งหมดตามลำดับของตำแหน่งในไฟล์)

ใน Edge, Webkit ฯลฯ แอตทริบิวต์ async นั้นอาจถูกเพิกเฉยหรือถูกวางไว้ในตอนท้าย:

  • data-pagespeed-no-defer (ดำเนินการก่อนสคริปต์อื่น ๆ ขณะที่กำลังโหลดหน้าเว็บ)
  • ไม่มี (สามารถดำเนินการในขณะที่กำลังโหลดหน้าเว็บ)
  • เลื่อน (รอจนกระทั่งโหลด DOM เลื่อนทั้งหมดตามลำดับของตำแหน่งในไฟล์)
  • async (ดูเหมือนว่าจะรอจนกว่าโหลด DOM)

ในเบราว์เซอร์ที่ใหม่กว่าแอ็ตทริบิวต์ data-pagespeed-no-defer จะทำงานก่อนสคริปต์ภายนอกอื่น ๆ นี่สำหรับสคริปต์ที่ไม่ได้ขึ้นอยู่กับ DOM

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

ASIDE: ขนาดของจาวาสคริปต์ภายนอกไม่สำคัญเมื่อโหลด ... แต่ไม่มีผลกับลำดับการดำเนินการ

หากคุณกังวลเกี่ยวกับประสิทธิภาพของสคริปต์ของคุณคุณอาจต้องการพิจารณาการลดขนาดหรือเพียงแค่โหลดมันแบบไดนามิกด้วย XMLHttpRequest

— Charles Owen
แหล่งที่มา
data-pagespeed-no-deferเป็นแอตทริบิวต์ที่ใช้โดยฝั่งเซิร์ฟเวอร์ โมดูล PageSpeed data-pagespeed-no-deferแอตทริบิวต์โดยตัวเองจะไม่มีผลใด ๆ ในเบราว์เซอร์
— ไวยากรณ์
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.