วิธีการสร้างโปรแกรมส่วนหน้าเว็บที่มีประสิทธิภาพเป็นปัญหาที่ฉันจะพิจารณาโดยไม่รู้ตัวทุกครั้งที่ฉันพัฒนาส่วนหน้า ไม่กี่ปีที่ผ่านมาวิศวกรส่วนหน้ายอดเยี่ยมใน Yahoo ตีพิมพ์หนังสือเกี่ยวกับการปรับปรุงประสิทธิภาพของเว็บ front-end ซึ่งทำให้เกิดความรู้สึกในอุตสาหกรรมเทคโนโลยีการพัฒนาเว็บทั้งหมดทำให้การเพิ่มประสิทธิภาพเว็บแนวหน้าเว็บลึกลับคำถามบนท้องถนนและการเพิ่มประสิทธิภาพส่วนหน้าเว็บ เมื่ออุตสาหกรรมทั้งหมดรู้คำตอบของความลับที่น่าตกใจเทคโนโลยีการเพิ่มประสิทธิภาพที่มีอยู่ไม่สามารถสร้างการก้าวกระโดดเชิงคุณภาพสำหรับเว็บไซต์ที่คุณพัฒนาได้อีกต่อไป เพื่อให้ประสิทธิภาพของเว็บไซต์เราพัฒนาได้ดีกว่าเว็บไซต์ของคนอื่นเราต้องคิดอย่างลึกซึ้งยิ่งขึ้นและจองทักษะที่ดีขึ้น
ระบบเหตุการณ์ใน JavaScript เป็นจุดเริ่มต้นแรกที่ฉันคิด ทำไมจึงเป็นระบบเหตุการณ์ JavaScript? เราทุกคนรู้ว่าส่วนหน้าเว็บมีสามเทคโนโลยี: HTML, CSS และ JavaScript เป็นที่ชัดเจนว่า HTML และ CSS รวมกันอย่างไร: Style, Class, ID และ HTML Tags ไม่มีอะไรจะพูดถึง แต่ JavaScript เข้ามาตรงกลางระหว่าง HTML และ CSS และให้ทั้งสามรวมกันอย่างไร ในที่สุดฉันก็พบว่าจุดเริ่มต้นนี้เป็นระบบเหตุการณ์ของ JavaScript ไม่ว่าเราจะเขียนโค้ดจาวาสคริปต์ที่ซับซ้อนหรือซับซ้อนแค่ไหนในที่สุดก็สะท้อนให้เห็นใน HTML และ CSS ผ่านระบบเหตุการณ์ ดังนั้นฉันจึงคิดว่าเนื่องจากระบบเหตุการณ์เป็นจุดเริ่มต้นสำหรับการรวมของทั้งสามครั้งจะมีการดำเนินงานเหตุการณ์จำนวนมากในหน้าโดยเฉพาะอย่างยิ่งในหน้าเว็บที่ซับซ้อนมากขึ้นในปัจจุบัน หากไม่มีเหตุการณ์เหล่านี้รหัส JavaScript ที่เราเขียนอย่างระมัดระวังสามารถใช้ในห้องสมุดเท่านั้นและฮีโร่ก็ไร้ประโยชน์ เนื่องจากมีฟังก์ชั่นเหตุการณ์จำนวนมากบนหน้าเว็บจะมีปัญหาที่ส่งผลกระทบต่อประสิทธิภาพเมื่อเขียนฟังก์ชั่นเหตุการณ์ที่เราคุ้นเคยหรือไม่? คำตอบที่ฉันได้ศึกษาคือมันเป็นปัญหาประสิทธิภาพที่แท้จริงและมันก็เป็นปัญหาที่มีประสิทธิภาพอย่างร้ายแรง
เพื่อชี้แจงคำตอบของฉันฉันต้องการอธิบายระบบเหตุการณ์ของ JavaScript ในรายละเอียด
ระบบเหตุการณ์เป็นจุดเริ่มต้นสำหรับการหลอมรวมของ JavaScript, HTML และ CSS จุดนี้เป็นเหมือนฟังก์ชั่นหลักใน Java เวทมนตร์ทั้งหมดเริ่มต้นที่นี่ ดังนั้นเบราว์เซอร์จะทำรายการนี้ให้เสร็จได้อย่างไร? ฉันได้ศึกษาสามวิธีพวกเขาคือ:
วิธีที่ 1: การประมวลผลเหตุการณ์ HTML
การประมวลผลเหตุการณ์ HTML คือการเขียนฟังก์ชั่นเหตุการณ์ลงในแท็ก HTML โดยตรง เนื่องจากวิธีการเขียนนี้ใกล้เคียงกับแท็ก HTML อย่างใกล้ชิดจึงเรียกว่าการประมวลผลเหตุการณ์ HTML ตัวอย่างเช่นรหัสต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
<อินพุต type = "ปุ่ม" id = "btn" name = "btn" onclick = "การแจ้งเตือน ('คลิกฉัน!')"/>
หากฟังก์ชั่นการคลิกมีความซับซ้อนการเขียนโค้ดเช่นนี้จะทำให้เกิดความไม่สะดวกอย่างแน่นอน ดังนั้นเรามักจะเขียนฟังก์ชั่นภายนอกและ onclick เรียกชื่อฟังก์ชันโดยตรงตัวอย่างเช่น:
การคัดลอกรหัสมีดังนี้:
<อินพุต type = "ปุ่ม" id = "btn" name = "btn" onclick = "btnclk ()"/>
ฟังก์ชั่น btnclk () {
การแจ้งเตือน ("คลิกฉัน!");
-
วิธีการเขียนข้างต้นเป็นวิธีการเขียนที่สวยงามมากผู้คนจำนวนมากจะใช้มันโดยไม่รู้ตัวในปัจจุบัน แต่หลายคนอาจไม่ทราบว่าวิธีการเขียนหลังไม่แข็งแกร่งเท่าวิธีการเขียนในอดีต นี่เป็นปัญหาที่ฉันพบเมื่อศึกษาเทคโนโลยีสคริปต์ที่ไม่ปิดกั้นเมื่อไม่นานมานี้เนื่องจากตามหลักการของการเพิ่มประสิทธิภาพส่วนหน้ารหัส JavaScript มักจะอยู่ที่ด้านล่างของหน้า เมื่อหน้าถูกบล็อกโดยสคริปต์ฟังก์ชั่นที่อ้างอิงในแท็ก HTML อาจยังไม่ได้ดำเนินการ ในเวลานี้เราคลิกปุ่มหน้าและผลลัพธ์จะได้รับการรายงาน "ฟังก์ชั่น XXX เป็นข้อผิดพลาดที่ไม่ได้กำหนด" ใน JavaScript ข้อผิดพลาดดังกล่าวจะถูกจับและจับได้ ดังนั้นเพื่อให้รหัสมีประสิทธิภาพมากขึ้นเราจะมีการเขียนใหม่ต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
<อินพุต type = "ปุ่ม" id = "btn" name = "btn" onclick = "ลอง {btnclk ();} catch (e) {}"/>
การเห็นรหัสข้างต้นไม่ใช่สิ่งที่สามารถอธิบายได้โดยบุคคลที่น่ารังเกียจ
วิธีที่ 2: การประมวลผลเหตุการณ์ระดับ DOM0
การประมวลผลเหตุการณ์ระดับ DOM0 เป็นการประมวลผลเหตุการณ์ที่สนับสนุนโดยเบราว์เซอร์ทั้งหมดในปัจจุบัน ไม่มีปัญหาความเข้ากันได้ การได้เห็นประโยคดังกล่าวจะทำให้ทุกคนที่ทำหน้าเว็บตื่นเต้น กฎสำหรับการประมวลผลเหตุการณ์ DOM0 คือ: แต่ละองค์ประกอบ DOM มีแอตทริบิวต์การประมวลผลเหตุการณ์ของตัวเองซึ่งสามารถกำหนดฟังก์ชั่นเช่นรหัสต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
var btndom = document.getElementById ("btn");
btndom.onclick = function () {
การแจ้งเตือน ("คลิกฉัน!");
-
แอตทริบิวต์เหตุการณ์ที่จัดการโดยเหตุการณ์ระดับ DOM0 ถูกกำหนดไว้ในรูปแบบของ "ON+NAME EVENTION" และแอตทริบิวต์ทั้งหมดอยู่ในตัวอักษรตัวพิมพ์เล็ก เรารู้ว่าองค์ประกอบ DOM เป็นวัตถุ JavaScript ในรหัส JavaScript ดังนั้นจึงเป็นเรื่องง่ายมากที่จะเข้าใจการประมวลผลเหตุการณ์ระดับ DOM0 จากมุมมองของวัตถุ JavaScript ตัวอย่างเช่นรหัสต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
btndom.onclick = null;
จากนั้นเหตุการณ์การคลิกปุ่มจะถูกยกเลิก
มาดูรหัสต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
btndom.onclick = function () {
การแจ้งเตือน ("คลิกฉัน!");
-
btndom.onclick = function () {
การแจ้งเตือน ("คลิก me1111!");
-
ฟังก์ชั่นถัดไปจะเขียนทับฟังก์ชั่นแรก
วิธีที่ 3: การประมวลผลเหตุการณ์ DOM2 และการประมวลผลเหตุการณ์เช่น
การประมวลผลเหตุการณ์ DOM2 เป็นโซลูชันการประมวลผลเหตุการณ์ที่เป็นมาตรฐาน แต่ IE เบราว์เซอร์ได้พัฒนาชุดของฟังก์ชั่นและฟังก์ชั่นคล้ายกับการประมวลผลเหตุการณ์ DOM2 แต่รหัสนั้นแตกต่างจากนั้น
ก่อนที่จะอธิบายวิธีที่สามฉันต้องเพิ่มแนวคิดบางอย่างมิฉะนั้นฉันจะไม่สามารถอธิบายความหมายแฝงของวิธีการที่สามได้
แนวคิดแรกคือ: การไหลของเหตุการณ์
ในการพัฒนาหน้าเรามักจะพบกับสถานการณ์นี้ ช่วงเวลาการทำงานของหน้าสามารถแสดงด้วยเอกสารใน JavaScript มี div ในหน้า DIV นั้นเทียบเท่ากับการซ้อนทับองค์ประกอบเอกสาร มีองค์ประกอบปุ่มใน div องค์ประกอบของปุ่มคือการซ้อนทับ DIV ซึ่งเทียบเท่ากับการซ้อนทับเอกสาร ดังนั้นปัญหาคือเมื่อเราคลิกปุ่มนี้พฤติกรรมการคลิกนี้ไม่เพียง แต่เกิดขึ้นบนปุ่ม ทั้ง DIV และเอกสารใช้สำหรับการดำเนินการคลิก ตามลอจิกองค์ประกอบทั้งสามนี้สามารถกระตุ้นเหตุการณ์คลิกได้ สตรีมเหตุการณ์อธิบายแนวคิดของสถานการณ์ข้างต้น สตรีมเหตุการณ์หมายถึง: ลำดับเหตุการณ์ที่ได้รับจากหน้า
แนวคิดที่สอง: ฟองสบู่และการจับเหตุการณ์
ฟองสบู่เป็นโซลูชันที่เสนอโดย Microsoft เพื่อแก้ปัญหาการไหลของเหตุการณ์ในขณะที่การจับเหตุการณ์เป็นโซลูชันการไหลของเหตุการณ์ที่เสนอโดย NetScape หลักการของพวกเขามีดังนี้:
เหตุการณ์เดือดเริ่มต้นด้วย div ตามด้วยร่างกายและในที่สุดก็เป็นเอกสารและการจับเหตุการณ์จะถูกย้อนกลับเอกสารแรกตามด้วยร่างกายและในที่สุดก็เป็นองค์ประกอบเป้าหมาย div ในทางตรงกันข้ามโซลูชันของ Microsoft นั้นมีมนุษยธรรมมากขึ้นและสอดคล้องกับนิสัยการทำงานของผู้คนโซลูชันของ NetScape นั้นน่าอึดอัดใจมาก นี่คือผลที่ตามมาของสงครามเบราว์เซอร์ Netscape ช้าลงและแก้ปัญหาการไหลของเหตุการณ์โดยการเสียสละรหัสที่ผู้ใช้คุ้นเคย
Microsoft ได้ออกแบบระบบเหตุการณ์ใหม่ร่วมกับเหตุการณ์ฟองสบู่ซึ่งเป็นที่รู้จักกันทั่วไปว่าการประมวลผลเหตุการณ์เช่นในอุตสาหกรรม วิธีการประมวลผลเหตุการณ์ IE ดังแสดงในรหัสต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
var btndom = document.getElementById ("btn");
btndom.attachevent ("onclick", function () {
การแจ้งเตือน ("คลิกฉัน!");
-
เพิ่มเหตุการณ์ผ่านวิธีการแนบขององค์ประกอบ DOM ภายใต้ IE เมื่อเปรียบเทียบกับการประมวลผลเหตุการณ์ DOM0 วิธีการเพิ่มเหตุการณ์ได้เปลี่ยนจากแอตทริบิวต์เป็นวิธีการดังนั้นเมื่อเราเพิ่มเหตุการณ์เราต้องส่งพารามิเตอร์ลงในวิธีการ วิธีการแนบได้รับสองพารามิเตอร์ พารามิเตอร์แรกคือประเภทเหตุการณ์ การตั้งชื่อของประเภทเหตุการณ์เหมือนกับการตั้งชื่อเหตุการณ์ในการประมวลผลเหตุการณ์ DOM0 พารามิเตอร์ที่สองคือฟังก์ชันเหตุการณ์ ข้อดีของการใช้วิธีการคือถ้าเรากำลังเพิ่มเหตุการณ์คลิกลงในองค์ประกอบเดียวกันดังที่แสดงด้านล่าง:
การคัดลอกรหัสมีดังนี้:
btndom.attachevent ("onclick", function () {
การแจ้งเตือน ("คลิกฉัน!");
-
btndom.attachevent ("onclick", function () {
แจ้งเตือน ("คลิกฉันด้วย!");
-
เรียกใช้มันทั้งสองกล่องโต้ตอบจะปรากฏขึ้นตามปกติทำให้เราสามารถเพิ่มเหตุการณ์การคลิกหลายครั้งในองค์ประกอบ DOM ถ้าเราไม่ต้องการกิจกรรมล่ะ? เราควรทำอย่างไร? ฉันให้วิธีการ detachevent สำหรับการลบเหตุการณ์ รายการพารามิเตอร์เหมือนกับสิ่งที่แนบมา หากเราต้องการลบเหตุการณ์การคลิกบางอย่างเพียงแค่ผ่านพารามิเตอร์เดียวกับเหตุการณ์เพิ่มดังที่แสดงในรหัสต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
btndom.detachevent ("onclick", function () {
แจ้งเตือน ("คลิกฉันด้วย!");
-
เมื่อรันมันผลที่ตามมาจะร้ายแรงมากและเราสับสน การคลิกครั้งที่สองไม่ถูกลบ เกิดอะไรขึ้น? ฉันพูดถึงก่อนหน้านี้ว่าการลบเหตุการณ์ต้องใช้พารามิเตอร์ผ่านเช่นการเพิ่มเหตุการณ์ อย่างไรก็ตามในฟังก์ชั่นที่ไม่ระบุชื่อของ JavaScript แม้ว่ารหัสของฟังก์ชันที่ไม่ระบุชื่อทั้งสองจะเหมือนกัน JavaScript จะใช้ตัวแปรที่แตกต่างกันเพื่อเก็บไว้ภายใน เป็นผลให้ปรากฏการณ์ที่เราเห็นไม่สามารถลบเหตุการณ์คลิกได้ดังนั้นรหัสของเราจะต้องเขียนเช่นนี้:
การคัดลอกรหัสมีดังนี้:
var ftn = function () {
แจ้งเตือน ("คลิกฉันด้วย!");
-
btndom.attachevent ("onclick", ftn);
btndom.detachevent ("onclick", ftn);
วิธีการที่เพิ่มเข้ามาและวิธีการที่ถูกลบด้วยวิธีนี้ชี้ไปที่วัตถุเดียวกันดังนั้นเหตุการณ์จึงถูกลบออกได้สำเร็จ สถานการณ์ที่นี่บอกเราว่าเราต้องมีนิสัยที่ดีในการเขียนเหตุการณ์ที่เราต้องกำหนดการดำเนินการอย่างอิสระและไม่ใช้ฟังก์ชั่นที่ไม่ระบุชื่อเป็นนิสัย
ถัดไปคือการประมวลผลเหตุการณ์ DOM2 หลักการของมันจะแสดงในรูปด้านล่าง:
DOM2 เป็นเหตุการณ์ที่ได้มาตรฐาน การใช้กิจกรรม DOM2 การส่งมอบเหตุการณ์เริ่มต้นจากวิธีการจับภาพนั่นคือจากเอกสารและจากนั้นไปยังร่างกาย DIV เป็นจุดสื่อกลาง เมื่อเหตุการณ์ถึงจุดสื่อกลางเหตุการณ์จะอยู่ในขั้นตอนเป้าหมาย หลังจากเหตุการณ์เข้าสู่ขั้นตอนเป้าหมายเหตุการณ์เริ่มต้นขึ้นและจัดการและในที่สุดเหตุการณ์ก็สิ้นสุดลงในเอกสาร (ฉันชี้ไปที่เอกสารในบทความนี้ แต่สถานการณ์ที่แท้จริงคือเบราว์เซอร์บางตัวจะเริ่มจับเหตุการณ์และสิ้นสุดฟองสบู่ในหน้าต่างอย่างไรก็ตามฉันคิดว่าไม่ว่าเบราว์เซอร์จะถูกตั้งค่าในระหว่างการพัฒนาอย่างไร ผู้คนใช้ในการจำแนกขั้นตอนเป้าหมายเป็นส่วนหนึ่งของฟองส่วนใหญ่เป็นเพราะเหตุการณ์ฟองสบู่ใช้กันอย่างแพร่หลายในการพัฒนา
การประมวลผลเหตุการณ์ DOM2 นั้นยากมาก เมื่อแต่ละเหตุการณ์ถูกเรียกใช้องค์ประกอบทั้งหมดจะถูกสำรวจสองครั้ง เมื่อเทียบกับเหตุการณ์ IE การแสดงนั้นแย่กว่าเหตุการณ์ IE มาก ฉันแค่เดือดปุด ๆ เท่านั้นดังนั้นฉันต้องสำรวจเพียงครั้งเดียว อย่างไรก็ตามการเดินทางผ่านน้อยลงไม่ได้หมายความว่าระบบเหตุการณ์ IE นั้นมีประสิทธิภาพมากกว่า การสนับสนุนระบบเหตุการณ์สองระบบในเวลาเดียวกันจะนำความยืดหยุ่นมาสู่การพัฒนาของเราจากมุมมองของการพัฒนาและการออกแบบ จากมุมมองนี้เหตุการณ์ DOM2 ยังคงเป็นที่ต้องการมาก รหัสสำหรับเหตุการณ์ DOM2 มีดังนี้:
การคัดลอกรหัสมีดังนี้:
var btndom = document.getElementById ("btn");
btndom.addeventListener ("คลิก", function () {
การแจ้งเตือน ("คลิกฉัน!");
},เท็จ);
var ftn = function () {
แจ้งเตือน ("คลิกฉันด้วย!");
-
btndom.addeventListener ("คลิก", ftn, false);
การเพิ่มเหตุการณ์ในการประมวลผลเหตุการณ์ DOM2 ใช้ AddEventListener ซึ่งได้รับพารามิเตอร์มากกว่าหนึ่งพารามิเตอร์มากกว่าการประมวลผลเหตุการณ์เช่น สองคนแรกหมายถึงพารามิเตอร์สองพารามิเตอร์ของวิธีการประมวลผลเหตุการณ์ IE ความแตกต่างเพียงอย่างเดียวคือคำนำหน้าจะถูกลบออกในพารามิเตอร์แรกและพารามิเตอร์ที่สามคือค่าบูลีน หากค่าของมันเป็นจริงเหตุการณ์จะถูกประมวลผลในโหมดการจับภาพด้วยค่าเท็จ เหตุการณ์ถูกประมวลผลในฟองสบู่ ด้วยพารามิเตอร์ที่สามเราสามารถเข้าใจได้ว่าทำไมองค์ประกอบเหตุการณ์ควรทำงานสองครั้งในการประมวลผลเหตุการณ์ DOM2 วัตถุประสงค์คือการเข้ากันได้กับทั้งสองรุ่นเหตุการณ์ อย่างไรก็ตามโปรดทราบที่นี่ว่าไม่ว่าเราจะเลือกที่จะจับหรือฟองสบู่ทั้งสอง Traversal จะดำเนินการตลอดไป หากเราเลือกวิธีการประมวลผลเหตุการณ์หนึ่งวิธีจะไม่มีฟังก์ชั่นการประมวลผลเหตุการณ์ในกระบวนการประมวลผลเหตุการณ์อื่น นี่คือหลักการของการเดินเล่นในรถในเกียร์ที่เป็นกลาง ด้วยการออกแบบวิธีการจัดกิจกรรม DOM2 เรารู้ว่าเหตุการณ์ DOM2 สามารถดำเนินการเพียงหนึ่งในสองวิธีการประมวลผลเหตุการณ์ที่รันไทม์ เป็นไปไม่ได้ที่ระบบสตรีมเหตุการณ์สองระบบจะกระตุ้นในเวลาเดียวกัน ดังนั้นแม้ว่าองค์ประกอบจะถูกสำรวจสองครั้ง แต่ฟังก์ชั่นเหตุการณ์ไม่สามารถกระตุ้นได้สองครั้ง โปรดทราบว่าฉันหมายความว่าไม่มีการยั่วยุสองครั้งซึ่งหมายถึงฟังก์ชั่นเหตุการณ์ ในความเป็นจริงเราสามารถจำลองสถานการณ์ที่โมเดลสตรีมเหตุการณ์สองรายการถูกดำเนินการในเวลาเดียวกันเช่นรหัสต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
btndom.addeventListener ("คลิก", ftn, true);
btndom.addeventListener ("คลิก", ftn, false);
แต่วิธีการเขียนนี้เป็นการประมวลผลหลายเหตุการณ์ซึ่งเทียบเท่ากับการคลิกปุ่มสองครั้ง
DOM2 ยังมีฟังก์ชั่นในการลบเหตุการณ์ ฟังก์ชั่นนี้คือ removeEventListener เขียนดังนี้:
การคัดลอกรหัสมีดังนี้:
btndom.removeeVentListener ("คลิก", ftn, false);
เช่นเดียวกันสำหรับเหตุการณ์ IE นั่นคือพารามิเตอร์จะต้องสอดคล้องกับพารามิเตอร์ที่กำหนดเหตุการณ์ อย่างไรก็ตามเมื่อใช้ removeVentListener พารามิเตอร์ที่สามจะไม่ผ่าน ค่าเริ่มต้นคือการลบเหตุการณ์ฟองเนื่องจากค่าเริ่มต้นเป็นเท็จหากพารามิเตอร์ที่สามไม่ผ่าน ตัวอย่างเช่น:
การคัดลอกรหัสมีดังนี้:
btndom.addeventListener ("คลิก", ftn, true);
btndom.removeeVentListener ("คลิก", ftn);
เรียกใช้และพบว่าเหตุการณ์ไม่ได้ถูกลบออกเรียบร้อยแล้ว
ในที่สุดฉันอยากจะบอกว่าการจัดการเหตุการณ์ DOM2 นั้นได้รับการสนับสนุนอย่างดีใน IE9 รวมถึง IE9 หรือสูงกว่าและ IE8 ด้านล่างไม่สนับสนุนเหตุการณ์ DOM2
มาเปรียบเทียบสามวิธีเหตุการณ์ด้านล่างดังนี้:
การเปรียบเทียบ 1: การเปรียบเทียบวิธีหนึ่งสำหรับด้านหนึ่งและอีกสองวิธี
วิธีการเขียนวิธีหนึ่งคือการรวม HTML และ JavaScript คุณมีฉันและฉันมีคุณ ทำให้วิธีนี้ลึกซึ้งยิ่งขึ้นเพื่อให้ได้การพัฒนาที่หลากหลายของ HTML และ JavaScript ในคำซอฟต์แวร์มันคือการมีเพศสัมพันธ์รหัส การมีเพศสัมพันธ์รหัสไม่ดีและมันแย่มาก นี่คือระดับของโปรแกรมเมอร์มือใหม่ดังนั้นเมื่อวิธีการพ่ายแพ้อย่างสมบูรณ์อีกสองวิธีจะชนะ
การเปรียบเทียบ 2: วิธีที่ 2 และวิธีการ 3
พวกเขาสองคนเขียนด้วยวิธีเดียวกัน บางครั้งมันยากมากที่จะบอกว่าใครดีขึ้นหรือแย่ลง เมื่อดูที่เนื้อหาข้างต้นเราพบว่าความแตกต่างที่ใหญ่ที่สุดระหว่างโหมด 2 และโหมด 3 คือมีเพียงเหตุการณ์เดียวในองค์ประกอบ DOM และเพียงครั้งเดียวในขณะที่โหมด 3 สามารถอนุญาตให้เหตุการณ์ในองค์ประกอบ DOM มีฟังก์ชั่นการจัดการเหตุการณ์หลายอย่าง ในการประมวลผลเหตุการณ์ DOM2 โหมด 3 ยังช่วยให้เราสามารถควบคุมวิธีการไหลของเหตุการณ์ได้อย่างแม่นยำ ดังนั้นฟังก์ชั่นของโหมด 3 จึงมีประสิทธิภาพมากกว่าโหมด 2 ดังนั้นเมื่อเทียบกับโหมด 3 จึงดีกว่าเล็กน้อย
ต่อไปนี้เป็นจุดสนใจของบทความนี้: ปัญหาประสิทธิภาพของระบบเหตุการณ์ เพื่อแก้ปัญหาประสิทธิภาพการทำงานเราต้องหาโฟกัส ที่นี่ฉันจะคิดถึงปัญหาประสิทธิภาพของระบบเหตุการณ์จากจุดโฟกัสสองจุดคือ: ลดจำนวนการสำรวจและการใช้หน่วยความจำ
ก่อนอื่นจำนวนการเดินทาง ไม่ว่าจะเป็นการจับกระแสเหตุการณ์หรือสตรีมเหตุการณ์เดือดพวกเขาจะสำรวจองค์ประกอบ แต่พวกเขาทั้งหมดจะเดินทางผ่านหน้าต่างหรือเอกสารด้านบน หากองค์ประกอบ DOM ของหน้ามีความสัมพันธ์ระหว่างพ่อแม่และลูกลึกยิ่งมีองค์ประกอบที่คุณสำรวจมากเท่าไหร่ก็ยิ่งเป็นอันตรายมากเท่าไหร่ก็ยิ่งเป็นอันตรายเช่นการประมวลผลเหตุการณ์ DOM2 วิธีแก้ปัญหาการสำรวจของกระแสเหตุการณ์นี้? คำตอบของฉันคือไม่ เพื่อนบางคนที่นี่อาจมีคำถามทำไมไม่มีอีกแล้ว? มีวัตถุเหตุการณ์ในระบบเหตุการณ์ซึ่งเป็นเหตุการณ์ วัตถุนี้มีวิธีการป้องกันการเดือดหรือจับเหตุการณ์ ทำไมฉันถึงบอกว่าไม่มีใคร? คำถามของเพื่อนคนนี้สมเหตุสมผล แต่ถ้าเราต้องการใช้วิธีนี้เพื่อลดการเดินทางผ่านไปรหัสของเราจะจัดการกับความสัมพันธ์ระหว่างองค์ประกอบของพ่อกับลูกชายและความสัมพันธ์ขององค์ประกอบปู่ หากองค์ประกอบของหน้าซ้อนกันมากนี่เป็นงานที่ไม่สามารถทำให้เสร็จได้ดังนั้นคำตอบของฉันคือปัญหาของการเดินทางไม่สามารถเปลี่ยนแปลงได้และเราสามารถปรับให้เข้ากับมันได้
ดูเหมือนว่าการลดการสำรวจไม่สามารถแก้ปัญหาประสิทธิภาพของระบบเหตุการณ์ได้ดังนั้นตอนนี้เราสามารถพิจารณาการใช้หน่วยความจำเท่านั้น ฉันมักจะได้ยินคนพูดว่า C# มีประโยชน์มาก แต่มันก็ดีกว่าสำหรับการพัฒนาส่วนหน้าเว็บ เราสามารถลากปุ่มไปยังหน้าใน C# ide โดยตรง หลังจากปุ่มถึงหน้ารหัส JavaScript จะเพิ่มเหตุการณ์ในปุ่มโดยอัตโนมัติ แน่นอนฟังก์ชั่นเหตุการณ์ภายในเป็นฟังก์ชั่นที่ว่างเปล่า ดังนั้นฉันคิดว่าเราสามารถวาง 100 ปุ่มบนหน้าด้วยวิธีนี้ หากรหัสเดียวไม่ทำงานจะมีการประมวลผลเหตุการณ์ 100 ปุ่มซึ่งสะดวกมาก ในที่สุดเราเพิ่มเหตุการณ์ปุ่มเฉพาะลงในปุ่มใดปุ่มหนึ่งเพื่อให้หน้ารัน หน้านี้มีประสิทธิภาพหรือไม่? ใน JavaScript แต่ละฟังก์ชั่นเป็นวัตถุและแต่ละวัตถุใช้หน่วยความจำดังนั้นรหัสฟังก์ชั่นเหตุการณ์ 99 ที่ไร้ประโยชน์นี้จะต้องใช้หน่วยความจำเบราว์เซอร์ที่มีค่าจำนวนมาก แน่นอนว่าเราจะไม่ทำสิ่งนี้ในสภาพแวดล้อมการพัฒนาที่แท้จริง แต่ในยุคปัจจุบันของการพัฒนา Ajax ที่ได้รับความนิยมและหน้าเดียวนั้นบ้าและเป็นที่นิยมมีกิจกรรมมากมายบนหน้าเว็บซึ่งหมายความว่าแต่ละเหตุการณ์มีฟังก์ชั่นเหตุการณ์ แต่ทุกการดำเนินการ ในเวลานี้เหตุการณ์อื่น ๆ กำลังนอนหลับขณะนอนราบซึ่งไม่ได้มีบทบาทและใช้หน่วยความจำคอมพิวเตอร์
เราต้องการวิธีแก้ปัญหาในการเปลี่ยนแปลงสถานการณ์นี้และมีวิธีแก้ปัญหาดังกล่าวในความเป็นจริง เพื่ออธิบายแผนนี้อย่างชัดเจนฉันต้องการเพิ่มความรู้พื้นฐานก่อน ในการอภิปรายของการประมวลผลเหตุการณ์ DOM2 ฉันพูดถึงแนวคิดของวัตถุเป้าหมาย นอกจากนี้ยังมีแนวคิดของวัตถุเป้าหมายในการประมวลผลเหตุการณ์การจับภาพเหตุการณ์และการประมวลผลเหตุการณ์ฟอง วัตถุเป้าหมายคือองค์ประกอบ DOM ของการดำเนินการเฉพาะของเหตุการณ์ ตัวอย่างเช่นปุ่มในการดำเนินการปุ่มคลิกคือวัตถุเป้าหมาย ไม่ว่าวิธีการประมวลผลเหตุการณ์ใดฟังก์ชันเหตุการณ์จะมีวัตถุเหตุการณ์ วัตถุเหตุการณ์มีเป้าหมายแอตทริบิวต์เป้าหมายจะชี้ไปที่วัตถุเป้าหมายเสมอและวัตถุเหตุการณ์มีแอตทริบิวต์อื่น ๆ CurrentTarget ซึ่งชี้ไปที่องค์ประกอบ DOM ที่ไหลไปยังเหตุการณ์การจับภาพหรือฟอง จากคำอธิบายข้างต้นเรารู้ว่าไม่ว่าจะเป็นเหตุการณ์การจับภาพหรือเหตุการณ์ฟองสบู่การไหลของเหตุการณ์จะไหลไปยังเอกสาร หากเราเพิ่มเหตุการณ์คลิกบนเอกสารและปุ่มบนหน้าไม่เพิ่มเหตุการณ์คลิกเราจากนั้นเราคลิกปุ่มและเรารู้ว่าเหตุการณ์คลิกบนเอกสารจะทริกเกอร์ มีรายละเอียดที่นี่ว่าเมื่อมีการเรียกเหตุการณ์การคลิกเอกสารเป้าหมายของเป้าหมายเหตุการณ์คือปุ่มแทนที่จะเป็นเอกสารดังนั้นเราจึงสามารถเขียนรหัสเช่นนี้:
การคัดลอกรหัสมีดังนี้:
<อินพุต type = "ปุ่ม" id = "btn" name = "btn" value = "ปุ่ม"/>>>>>>>>>>>>
<a href = "#" id = "aa"> aa </a>
document.addeventListener ("คลิก", function (evt) {
var target = evt.target;
switch (target.id) {
กรณี "btn":
การแจ้งเตือน ("ปุ่ม");
หยุดพัก;
กรณี "AA":
การแจ้งเตือน ("A");
หยุดพัก;
-
},เท็จ);
การรันเราพบว่าเอฟเฟกต์นั้นเหมือนกับเหตุการณ์ที่เราเขียนปุ่มแยกกัน แต่ประโยชน์ของมันชัดเจนในตัวเอง ฟังก์ชั่นหนึ่งจัดการฟังก์ชั่นเหตุการณ์ของทั้งหน้าและไม่มีฟังก์ชั่นเหตุการณ์ที่ไม่ได้ใช้งานซึ่งสมบูรณ์แบบ แผนนี้ยังมีชื่อมืออาชีพ: การมอบหมายงาน วิธีการของผู้แทนของ JQuery นั้นทำตามหลักการนี้ ในความเป็นจริงประสิทธิภาพของการมอบหมายงานไม่เพียง แต่สะท้อนให้เห็นในการลดฟังก์ชั่นเหตุการณ์ แต่ยังช่วยลดการดำเนินการผ่าน DOM ตัวอย่างเช่นในตัวอย่างข้างต้นเราเพิ่มฟังก์ชั่นในเอกสาร เอกสารเป็นวัตถุระดับบนสุดบนหน้าและประสิทธิภาพของการอ่านมันสูงมาก เมื่อพูดถึงเหตุการณ์วัตถุเฉพาะเราไม่ได้ใช้การดำเนินการ DOM แต่ใช้แอตทริบิวต์เป้าหมายของวัตถุเหตุการณ์ ทั้งหมดนี้สามารถสรุปได้ในประโยคเดียวเท่านั้น: มันเร็วจริงๆไม่มีเหตุผลที่จะเร็ว
การมอบหมายงานสามารถนำผลพลอยได้ที่ยอดเยี่ยมมาให้เรา เพื่อนที่ใช้ jQuery ควรใช้วิธีการสด คุณลักษณะของวิธีการสดคือคุณสามารถเพิ่มการดำเนินงานเหตุการณ์ในองค์ประกอบหน้า แม้ว่าองค์ประกอบนี้จะไม่มีอยู่บนหน้าเว็บในปัจจุบันคุณสามารถเพิ่มเหตุการณ์ได้ หลังจากทำความเข้าใจกับกลไกการมอบหมายงานหลักการของการใช้ชีวิตนั้นง่ายต่อการเข้าใจ ในความเป็นจริงการถ่ายทอดสดของ JQuery นั้นทำผ่านการมอบหมายงานและ Live ยังเป็นวิธีที่มีประสิทธิภาพในการเพิ่มเหตุการณ์
หลังจากทำความเข้าใจกับการมอบหมายงานเราจะพบว่าวิธีการผูกของ jQuery เป็นวิธีที่ไม่มีประสิทธิภาพ เนื่องจากใช้วิธีการนิยามเหตุการณ์ดั้งเดิมเราจึงควรใช้การผูกด้วยความระมัดระวัง ในความเป็นจริงนักพัฒนา jQuery ได้สังเกตเห็นปัญหานี้เช่นกัน jQuery เวอร์ชันใหม่มีวิธีการ วิธี ON มีฟังก์ชั่นทั้งหมดของวิธีการ BIND, Live และ Delegate ดังนั้นฉันขอแนะนำให้เพื่อนที่ได้อ่านบทความนี้ควรละทิ้งวิธีการก่อนหน้านี้ในการเพิ่มเหตุการณ์และใช้กับฟังก์ชั่นเพื่อเพิ่มเหตุการณ์
การมอบหมายงานมีข้อได้เปรียบอีกประการหนึ่ง ในตัวอย่างของการมอบหมายงานในบทความข้างต้นฉันเพิ่มเหตุการณ์ในเอกสาร ที่นี่ฉันต้องการทำการเปรียบเทียบ ใน jQuery เราถูกใช้เพื่อวางคำจำกัดความของเหตุการณ์องค์ประกอบ DOM ในวิธีการพร้อมดังที่แสดงด้านล่าง:
การคัดลอกรหัสมีดังนี้:
$ (เอกสาร) .ready (function () {
xxx.bind ("คลิก" ฟังก์ชัน () {});
-
ฟังก์ชั่น Ready จะถูกดำเนินการหลังจากโหลดเอกสาร Page DOM มันถูกดำเนินการก่อนมากกว่าฟังก์ชั่น ONLOAD สิ่งนี้มีประโยชน์มากมายล่วงหน้า ข้อดีอย่างหนึ่งก็คือการปรับปรุงประสิทธิภาพ คำจำกัดความของเหตุการณ์เช่น jQuery ยังเป็นวิธีปฏิบัติมาตรฐาน ฉันเชื่อว่าเพื่อนบางคนจะต้องผูกเหตุการณ์บางอย่างนอกพร้อมและในที่สุดก็พบว่าปุ่มจะไม่ถูกต้อง สถานการณ์ที่ไม่ถูกต้องนี้บางครั้งใช้เวลาสักครู่และมันจะดีหลังจากนั้นไม่นาน ดังนั้นเรามักจะเพิกเฉยต่อหลักการของปัญหานี้และอย่าผูกเหตุการณ์ในฟังก์ชันที่พร้อม การดำเนินการนี้เป็นเหตุการณ์ที่มีผลผูกพันก่อนที่ DOM จะถูกโหลดและภายใต้ช่วงเวลานี้เราจะผูกเหตุการณ์กับพวกเขาจริง ๆ มีความเป็นไปได้สูงที่องค์ประกอบบางอย่างไม่ได้ถูกสร้างขึ้นบนหน้าดังนั้นการผูกเหตุการณ์จะไม่ถูกต้อง ดังนั้นเหตุผลที่พร้อมกำหนดเหตุการณ์คือเพื่อให้แน่ใจว่าองค์ประกอบทั้งหมดของหน้าถูกโหลดเพื่อกำหนดเหตุการณ์ขององค์ประกอบ DOM หลังจากโหลด อย่างไรก็ตามปัญหาสามารถหลีกเลี่ยงได้เมื่อใช้ผู้แทนเหตุการณ์ ตัวอย่างเช่นเหตุการณ์ที่มีผลผูกพันกับเอกสารเอกสารแสดงถึงทั้งหน้าดังนั้นจึงเป็นเวลาที่เร็วที่สุดในการโหลด ดังนั้นจึงเป็นเรื่องยากที่จะบรรลุผู้ได้รับมอบหมายเหตุการณ์ในเอกสารและมันก็ยากที่จะทำให้เบราว์เซอร์รายงาน "ฟังก์ชั่น XXX ที่ไม่ได้กำหนด" เพื่อสรุปคุณสมบัตินี้: รหัสผู้แทนเหตุการณ์สามารถเรียกใช้ได้ในทุกขั้นตอนของการโหลดหน้าเว็บซึ่งจะช่วยให้นักพัฒนามีอิสระมากขึ้นในการปรับปรุงประสิทธิภาพของหน้าเว็บหรือเพิ่มเอฟเฟกต์หน้าเว็บ
ตกลงบทความนี้ถูกเขียนขึ้น ราตรีสวัสดิ์.