ความคิดเห็น: การโหลดแบบอะซิงโครนัสสามารถเข้าใจได้ว่าเป็นการประมวลผลที่ไม่ปิดกั้นพร้อมกัน ในอดีตเราใช้เทคนิค JavaScript ต่าง ๆ เพื่อทำสิ่งนี้ ตอนนี้ WebKit ได้ใช้แอตทริบิวต์ async async ของแท็กสคริปต์สำหรับ HTML5 เพื่อนที่สนใจสามารถเรียนรู้ได้
(หมายเหตุของนักแปล: การโหลดแบบอะซิงโครนัสสามารถเข้าใจได้ว่าเป็นการประมวลผลที่ไม่ปิดกั้นพร้อมกัน)หนึ่งในเหตุผลที่ฉันตื่นเต้นเกี่ยวกับ HTML5 คือมันใช้คุณสมบัติที่รอคอยมายาวนานในอุตสาหกรรม เราจำเป็นต้องแสดงพรอมต์ว่างเปล่าในกล่องอินพุต แต่ทั้งหมดจะถูกนำไปใช้ใน JavaScript นอกจากนี้เรายังต้องการให้บล็อกทั้งหมดสามารถคลิกได้ซึ่งใช้งานโดยใช้ JavaScript
ตอนนี้ WebKit ใช้คุณสมบัติ async assynchronous ของแท็กสคริปต์สำหรับ HTML5 ในอดีตเราเคยใช้เทคนิคจาวาสคริปต์ต่าง ๆ ในการทำเช่นนี้ แต่ตอนนี้คุณสมบัติใหม่ทำให้มันค่อนข้างง่ายในการป้องกันการบล็อก
async - แอตทริบิวต์ HTML
ดังที่ฉันได้กล่าวไปแล้วการเพิ่มแอตทริบิวต์ Async นั้นง่ายมาก:
<!-ระบุ async และ onload callback->
<script async src = "siteScript.js"> </script>
ในความเป็นจริงหากการออกแบบโครงสร้าง JavaScript และ HTML ของคุณมีความสมเหตุสมผลดังนั้น 90% ของกรณีองค์ประกอบสคริปต์ของคุณสามารถโหลดแบบอะซิงโครนัสได้
การเลื่อนเวลา - แอตทริบิวต์ HTML
เบราว์เซอร์ Safari เพิ่มแอตทริบิวต์การเลื่อนเวลาเพิ่มเติม
<!-ระบุการเลื่อนเวลาเอฟเฟกต์คล้ายกับ async->
<สคริปต์เลื่อน src = "siteScript.js"> </script>
ความแตกต่างระหว่าง async และ defer
บล็อกอย่างเป็นทางการของ WebKit อธิบายถึงความแตกต่างระหว่าง Async และ Delfer
-
ภายใต้สถานการณ์ปกติหากเบราว์เซอร์พบสคริปต์ภายนอกเมื่อแยกวิเคราะห์ไฟล์ต้นฉบับ HTML กระบวนการแยกวิเคราะห์จะถูกหยุดชั่วคราวและคำขอจะถูกส่งไปดาวน์โหลดไฟล์สคริปต์ การแยกวิเคราะห์ DOM จะดำเนินการต่อไปหลังจากดาวน์โหลดสคริปต์และดำเนินการอย่างสมบูรณ์ ตัวอย่างเช่น:
<script src = myblockingscript.js> </script>
ในระหว่างกระบวนการดาวน์โหลดเบราว์เซอร์จะถูกบล็อกไม่ให้ทำงานที่เป็นประโยชน์อื่น ๆ รวมถึงการแยกวิเคราะห์ HTML ดำเนินการสคริปต์อื่น ๆ และแสดงเค้าโครง CSS แม้ว่าสแกนเนอร์ WebKit preload สามารถตรวจจับ multithreading ในระหว่างขั้นตอนการดาวน์โหลด แต่ก็ยังมีความล่าช้าเครือข่ายขนาดใหญ่สำหรับบางหน้า
มีเทคนิคมากมายในการปรับปรุงความเร็วในการแสดงหน้า แต่พวกเขาทั้งหมดต้องการรหัสเพิ่มเติมและทักษะเฉพาะเบราว์เซอร์ ตอนนี้สคริปต์ไม่จำเป็นต้องเรียกใช้สคริปต์แบบซิงโครนัสโดยการเพิ่มแอตทริบิวต์ async หรือเลื่อนเวลา ตัวอย่างมีดังนี้:
<script async src = "myasyncscript.js"> </script>
<สคริปต์เลื่อน src = "mydeferscript.js"> </script>
สคริปต์ Async และ Async จะไม่ถูกดาวน์โหลดจะถูกดาวน์โหลดทันทีโดยไม่หยุดการแยกวิเคราะห์ HTML ทั้งการสนับสนุนการเรียกคืนเหตุการณ์ OnLoad เพื่อแก้ปัญหาการเริ่มต้นที่ต้องใช้สคริปต์เพื่อดำเนินการ
ความแตกต่างระหว่างทั้งสองคือความแตกต่างในการดำเนินการ:
สคริปต์ Async จะถูกเรียกใช้งานทันทีหลังจากดาวน์โหลดไฟล์สคริปต์และเวลาดำเนินการจะต้องเป็นก่อนที่เหตุการณ์การโหลดของหน้าต่างจะถูกทริกเกอร์ ซึ่งหมายความว่าสคริปต์ async หลายรายการมีแนวโน้มที่จะไม่ถูกดำเนินการตามลำดับที่ปรากฏในหน้า
ในทางตรงกันข้ามเบราว์เซอร์ช่วยให้มั่นใจได้ว่าสคริปต์เลื่อนเวลาหลายรายการจะถูกดำเนินการตามลำดับการเกิดขึ้นในหน้า HTML และเวลาดำเนินการก่อนที่ความละเอียดของ DOM จะเสร็จสมบูรณ์
ต่อไปนี้เป็นตัวอย่างที่ใช้เวลา 1 วินาทีในการดาวน์โหลดและ 1 วินาทีในการแยกวิเคราะห์การดำเนินการอื่น ๆ เราจะเห็นว่าการโหลดหน้าทั้งหมดใช้เวลาประมาณ 2 วินาที
ตัวอย่างเดียวกัน แต่คราวนี้เราระบุแอตทริบิวต์การเลื่อนเวลาของสคริปต์ เพราะเมื่อดาวน์โหลดสคริปต์เลื่อนเวลาการดำเนินการอื่น ๆ สามารถดำเนินการแบบขนานได้ดังนั้นจึงเร็วขึ้นประมาณ 1 เท่า
-
เบราว์เซอร์ใดรองรับ Async และ Delfer
ยังกล่าวถึงในบทความที่อ้างถึงข้างต้น:
นอกเหนือจากเบราว์เซอร์เวอร์ชันใหม่ที่ใช้ WebKit แล้ว Firefox ยังรองรับคุณสมบัติการเลื่อนเวลาและ ONLOAD เป็นเวลานานและได้เพิ่มแอตทริบิวต์ ASYNC ตั้งแต่ FF3.6 IE ยังรองรับแอตทริบิวต์การเลื่อนเวลา แต่ไม่รองรับแอตทริบิวต์ Async เริ่มต้นจาก IE9 แอตทริบิวต์ ONLOAD จะได้รับการสนับสนุน
Aynsc ยอดเยี่ยมมาก!
ฉันมีความสุขมากที่ได้เห็น WebKit ใช้ async การบล็อกเป็นคอขวดประสิทธิภาพขนาดใหญ่สำหรับทุกเว็บไซต์และความสามารถในการระบุไฟล์สคริปต์การโหลดแบบอะซิงโครนัสโดยตรงจะทำให้หน้าเว็บเร็วขึ้นอย่างไม่ต้องสงสัย