ใน IE6/7 JavaScript จะขัดขวางการแสดงหน้าจากสองด้าน:
ทรัพยากรหน้าเว็บภายใต้แท็กสคริปต์จะหยุดการร้องขอและดาวน์โหลดก่อนที่จะโหลดสคริปต์
องค์ประกอบ HTML ภายใต้แท็กสคริปต์จะหยุดการเรนเดอร์ก่อนที่จะโหลดสคริปต์
ใน IE6/7 Firefox2/3 Safari3 Chrome1 และ Opera แท็กสคริปต์จะขัดขวางการดาวน์โหลด:
แม้ว่าสคริปต์สามารถเกิดขึ้นพร้อมกันภายใต้ IE8, Safari4 และ Chrome2 แต่ก็ยังขัดขวางการดาวน์โหลดทรัพยากรอื่น ๆ :
มี 6 วิธีในการดาวน์โหลดสคริปต์ควบคู่ไปกับแหล่งข้อมูลอื่น ๆ :
1.xhr Eval
2.xhr Injection - ดาวน์โหลดสคริปต์ผ่าน XHR จากนั้นสร้างแท็กสคริปต์และแทรกลงในเอกสาร (แท็กตัวหรือหัว) จากนั้นตั้งค่าแอตทริบิวต์ข้อความของแท็กสคริปต์เป็นค่าของการตอบสนองของ XHR
3.xhr in iframe - ใส่แท็กสคริปต์ใน iframe และดาวน์โหลดผ่าน iframe
4.Script DOM Element - สร้างแท็กสคริปต์และชี้แอตทริบิวต์ SRC ไปยังที่อยู่สคริปต์ของคุณ
5.Script Delfer - เพิ่มแอตทริบิวต์การเลื่อนเวลาของแท็กสคริปต์ นี่เป็นสิ่งที่ใช้ได้ใน IE เท่านั้น แต่ Firefox3.1 ยังรองรับคุณลักษณะนี้ด้วย
6. ใช้ document.write method เพื่อเขียน <script src = ""> ในหน้านี้ใช้ได้เฉพาะใน IE เท่านั้น
คุณสามารถดูตัวอย่างการใช้งานของแต่ละวิธีผ่าน Cuzillion
หากมีสคริปต์แบบอินไลน์บางอย่างที่ต้องดำเนินการหลังจากดำเนินการสคริปต์ภายนอกพวกเขาจะต้องซิงโครไนซ์ เรียกว่า "การมีเพศสัมพันธ์" การมีเพศสัมพันธ์สคริปต์แบบอะซิงโครนัสบทความนี้แนะนำวิธีการบางอย่างที่สามารถใช้งาน "การมีเพศสัมพันธ์" ในปัจจุบัน
headjs สามารถเปิดใช้งาน JS ในการดาวน์โหลดพร้อมกัน (แต่ดำเนินการตามลำดับ): http://headjs.com/
การคัดลอกรหัสมีดังนี้:
head.js ("/path/to/jQuery.js", "/google/analytics.js", "/js/site.js", function () {
// ทั้งหมดเสร็จแล้ว
-
// กรณีที่ง่ายที่สุด โหลดและเรียกใช้สคริปต์เดี่ยวโดยไม่ต้องปิดกั้น
head.js ("/path/to/file.js");
// โหลดสคริปต์และเรียกใช้ฟังก์ชันหลังจากโหลดแล้ว
head.js ("/path/to/file.js", function () {
-
// โหลดไฟล์แบบขนาน แต่ดำเนินการตามลำดับ
head.js ("file1.js", "file2.js", ... "filen.js");
// เรียกใช้ฟังก์ชันหลังจากโหลดสคริปต์ทั้งหมดแล้ว
head.js ("file1.js", "file2.js", function () {
-
// ไฟล์ถูกโหลดแบบขนานและดำเนินการเพื่อให้พวกเขามาถึง
head.js ("file1.js");
head.js ("file2.js");
head.js ("file3.js");
// ก่อนหน้านี้สามารถเขียนเป็น
head.js ("file1.js"). js ("file1.js"). js ("file3.js");