การดำเนินการแบบอะซิงโครนัสเร็วขึ้น (SettimeOut หลายเบราว์เซอร์)

หากเราต้องการเรียกใช้ฟังก์ชั่นแบบอะซิงโครนัสวิธีแรกที่เราคิดว่าจะเป็นไปอย่างแน่นอน

ตัวอย่างเช่น: settimeout (ฟังก์ชั่น (/* ทำบางสิ่งหลังจาก 1S*/) {}, 1000}

แล้วถ้าคุณต้องการเรียกใช้ฟังก์ชั่นแบบอะซิงโครนัสเร็วที่สุดล่ะ?

จะเป็น:

 settimeout (ฟังก์ชั่น ( /* ทำอะไรโดยเร็วที่สุด* /) {}, 0}

น่าเสียดายที่เพื่อหลีกเลี่ยงความเป็นไปได้ของการติดขัดเธรด UI ในรังนกของ Settimeout เบราว์เซอร์จะกำหนดช่วงเวลาการดำเนินการขั้นต่ำสำหรับการตั้งถิ่นฐานและช่วงเวลาการดำเนินการขั้นต่ำสำหรับเบราว์เซอร์ที่แตกต่างกันจะแตกต่างกัน ช่วงเวลาการดำเนินการจริงของ Settimeout 0 ใน Chrome อยู่ที่ประมาณ 12ms

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

ลองมาดูด้านเบราว์เซอร์วิธีการดำเนินการแบบอะซิงโครนัสที่ใช้กันทั่วไปคืออะไร

Setimmediate: วิธีนี้ใช้การดำเนินการแบบอะซิงโครนัสเร็วกว่า SettimeOut 0 โดยมีเวลาดำเนินการใกล้กับ 0ms มากขึ้น แต่มีเพียง IE/Node รองรับเท่านั้น

RequestAnimationFrame: วิธีนี้มักใช้เมื่อทำลูปแอนิเมชั่น วิธีนี้จะถูกดำเนินการเมื่อเบราว์เซอร์รีเฟรช UI ความถี่สูงสุดของการรีเฟรช UI โดยทั่วไปคือ 60fps ดังนั้นโดยทั่วไปแล้วการร้องขอจึงช้ากว่า settimeout 0

นอกเหนือจากการใช้ฟังก์ชั่นแบบอะซิงโครนัสแล้วยังมีวิธีการบางอย่างที่สามารถใช้การโทรแบบอะซิงโครนัสได้

ใช้ onMessage:

เมื่อสื่อสารกับ iframes วิธีการ onmessage มักจะใช้ แต่จะเกิดอะไรขึ้นถ้าหน้าต่าง postmessage เดียวกันนั้นถูกมอบให้กับตัวเอง? ในความเป็นจริงมันเทียบเท่ากับการดำเนินการฟังก์ชั่นแบบอะซิงโครนัส

ตัวอย่างเช่น:

 var dosth = function () {} window.addeventListener ("ข้อความ", dosth, true); window.postMessage ("", "*");

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

 var newscript = document.createElement ("script"); newscript.onreadyStateChange = dosth; document.documentElement.AppendChild (newscript);

การเพิ่มสคริปต์ลงในเอกสารจะดำเนินการ OnReadyStateChange แต่วิธีนี้สามารถใช้ในเบราว์เซอร์ภายใต้ IE เท่านั้น

แล้วใครที่เร็วที่สุดกับวิธีการเหล่านี้?

ทดสอบแล้ว

ภายใต้ Chrome:

Setimmediate: ไม่พร้อมใช้งาน

Settimeout 0: 12ms

onMessage: 6ms

OnReadyStateChange: ไม่รองรับ

ภายใต้ Chrome, onmessage เร็วกว่า settimeout 0

Firefox:

Setimmediate: ไม่พร้อมใช้งาน

Settimeout 0: 7ms

OnMessage: 7MS

OnReadyStateChange: ไม่รองรับ

ภายใต้ Firefox, OnMessage และ Settimeout 0 อยู่ที่ความเร็วเท่ากัน

IE9:

Setimmediate: ไม่พร้อมใช้งาน

Settimeout 0: 11ms

OnMessage: 7ms 10ms

OnReadyStateChange: 2ms

ใน IE9 เวลา OnreadyStateChange เร็วกว่าอีกสอง

โดยรวม, setimmediate <ReadyStateChange <onMessage <settimeout 0 <RequestAnimationFrame

ดังนั้นเราจึงสามารถห่อหุ้มวิธีการทำงานแบบอะซิงโครนัสได้อย่างรวดเร็ว:

 var setzerotimeout = (function () {if (window.setimmediate) {// ie10+ เวอร์ชันใช้ window setimmediatetereturn native.setimmediate;} อื่นถ้า ("onreadystatechange" ใน document.createlement ("script")) {return function ฟังก์ชัน () {/* เวอร์ชันโดยใช้ onMessage*/}} else {return window.settimeout;}}) ();