วิธีเริ่มต้นใช้งาน VUE3.0 อย่างรวดเร็ว: ป้อน
คำแนะนำที่เกี่ยวข้องกับการเรียนรู้: บทช่วยสอน JavaScript
ตัวจัดการเหตุการณ์สามารถโต้ตอบกับแอปพลิเคชันเว็บสมัยใหม่ได้ นักพัฒนาจำนวนมากจึงใช้แอปพลิเคชันจำนวนมากในเพจโดยไม่ตั้งใจ ใน JavaScript จำนวนตัวจัดการเหตุการณ์บนเพจจะเกี่ยวข้องโดยตรงกับประสิทธิภาพโดยรวมของเพจ มีสาเหตุหลายประการ เช่น 1 แต่ละฟังก์ชันเป็นวัตถุและใช้พื้นที่หน่วยความจำ ยิ่งมีวัตถุมาก ประสิทธิภาพก็ยิ่งแย่ลง 2 จำนวนการเข้าชม DOM ที่จำเป็นสำหรับตัวจัดการเหตุการณ์ที่ระบุจะทำให้เกิดความล่าช้าในลำดับแรก การโต้ตอบกับหน้า
สำหรับ (ให้ค่าของค่า) {
ul.innerHTML += '<li>${value}</li>';} รหัสนี้ไม่มีประสิทธิภาพเนื่องจากต้องตั้งค่า innerHTML หนึ่งครั้งสำหรับการวนซ้ำแต่ละครั้ง ไม่เพียงเท่านั้น จะต้องอ่าน innerHTML ก่อนในแต่ละลูป และนั่นคือ กล่าวคือ จำเป็นต้องเข้าถึง innerHTML สองครั้งในหนึ่งวง
ให้ itemHtml = "";for(let ค่าของค่า){
itemsHtml += '<li>${value}</li>';}ul.innerHTML = itemsHtml; หลังจากการปรับเปลี่ยนนี้ ประสิทธิภาพจะสูงขึ้นมาก เฉพาะโค้ด innerHTML เท่านั้นที่สามารถทำได้ : :
ul.innerHTML = values.map(value => '<li>${value}</li>').join(' ');
วิธีแก้ปัญหาสำหรับตัวจัดการเหตุการณ์มากเกินไปคือการใช้การมอบหมายเหตุการณ์ การมอบหมายกิจกรรมใช้ประโยชน์จากเหตุการณ์ที่เกิดขึ้น ทำให้คุณสามารถใช้ตัวจัดการเหตุการณ์เพียงตัวเดียวในการจัดการเหตุการณ์ประเภทเดียว ตัวอย่างเช่น เหตุการณ์การคลิกจะแสดงขึ้นที่เอกสาร ซึ่งหมายความว่าคุณสามารถระบุตัวจัดการเหตุการณ์ onclick สำหรับทั้งหน้า แทนที่จะระบุตัวจัดการเหตุการณ์แยกกันสำหรับแต่ละองค์ประกอบที่คลิกได้
<ul id="myGirls"> <li id="girl1">บีบี ดง</li> <li id="girl2">หยุนหยุน</li> <li id="girl3">Medusa</li></ul>
ประกอบด้วยสามรายการที่ควรดำเนินการบางอย่างเมื่อคลิก วิธีปกติคือการระบุตัวจัดการเหตุการณ์สามตัว:
ให้ item1 = document.getElementById("girl1 ");let item2 = document.getElementById("girl2");let item3 = document.getElementById("girl3");item1.addEventListener("click",(event) => {
console.log("ฉันชื่อ Bibi Dong!");})item2.addEventListener("คลิก",(event) => {
console.log("ฉันชื่อ Yunyun!");})item3.addEventListener("คลิก",(event) => {
console.log("I am Medusa!");}) มีโค้ดที่เหมือนกันมากเกินไป และโค้ดก็น่าเกลียดเกินไป
การใช้การมอบหมายเหตุการณ์ เพียงเพิ่มตัวจัดการเหตุการณ์ให้กับโหนดบรรพบุรุษร่วมขององค์ประกอบต่างๆ แล้วคุณก็สามารถแก้ไขความอัปลักษณ์ได้!
ให้ list = document.getElementById("myGirls");list.addEventListener("click",(event) => {
ให้ target = event.target;
สวิตช์ (target.id) {
กรณี "girl1":
console.log("ฉันชื่อบีบีดง!");
หยุดพัก;
กรณี "girl2":
console.log("ฉันคือยุนยุน!");
หยุดพัก;
กรณี "girl3":
console.log("ฉันคือเมดูซ่า!");
หยุดพัก;
}}) ออบเจ็กต์เอกสารพร้อมใช้งานได้ตลอดเวลา และคุณสามารถเพิ่มตัวจัดการเหตุการณ์ลงไปได้ตลอดเวลา (โดยไม่ต้องรอ DOMContentLoaded หรือโหลดเหตุการณ์) และใช้เพื่อจัดการเหตุการณ์บางประเภททั้งหมดในเพจ ซึ่งหมายความว่าตราบใดที่เพจแสดงองค์ประกอบที่สามารถคลิกได้ มันก็จะทำงานโดยไม่ชักช้า
ประหยัดเวลาในการตั้งค่ากิจวัตรกิจกรรมหน้า
ลดหน่วยความจำที่จำเป็นสำหรับทั้งหน้าและปรับปรุงประสิทธิภาพโดยรวม
โดยการกำหนดตัวจัดการเหตุการณ์ให้กับองค์ประกอบ การเชื่อมต่อจะถูกสร้างขึ้นระหว่างโค้ดเบราว์เซอร์และโค้ด JavaScript ที่รับผิดชอบในการโต้ตอบกับเพจ ยิ่งการติดต่อดำเนินต่อมากเท่าใด ประสิทธิภาพของเพจก็จะยิ่งแย่ลงเท่านั้น นอกเหนือจากการจำกัดการเชื่อมต่อดังกล่าวผ่านการมอบหมายเหตุการณ์แล้ว ควรลบตัวจัดการเหตุการณ์ที่ไม่ได้ใช้ออกทันที ประสิทธิภาพที่ไม่ดีของเว็บแอปพลิเคชั่นจำนวนมากเกิดจากตัวจัดการเหตุการณ์ที่ไม่มีประโยชน์ที่เหลืออยู่ในหน่วยความจำ
มีเหตุผลสองประการสำหรับปัญหานี้:
เช่น การลบโหนดผ่านเมธอด DOM RemoveChild() หรือ แทนที่Child() วิธีที่พบบ่อยที่สุดคือการใช้ innerHTML เพื่อแทนที่บางส่วนของหน้าโดยรวม ในขณะนี้ หากมีตัวจัดการเหตุการณ์ในองค์ประกอบที่ถูกลบโดย innerHTML โปรแกรมรวบรวมขยะจะไม่ถูกล้างตามปกติ
ดังนั้นหากคุณรู้ว่าองค์ประกอบจะถูกลบคุณควรลบตัวจัดการเหตุการณ์ด้วยตนเองเช่น btn.onclick = null;//删除事件处理程序ยังสามารถช่วยแก้ไขปัญหานี้ได้ แทนที่ด้วย innerHTML อย่าเพิ่มตัวจัดการเหตุการณ์ให้กับองค์ประกอบ เพียงเพิ่มลงในโหนดระดับที่สูงกว่า
หากตัวจัดการเหตุการณ์ไม่ได้รับการล้างข้อมูลหลังจากยกเลิกการโหลดเพจแล้ว ตัวจัดการเหตุการณ์เหล่านั้นจะยังคงอยู่ในหน่วยความจำ หลังจากนั้น ทุกครั้งที่เบราว์เซอร์โหลดและยกเลิกการโหลดเพจ (เช่น ไปข้างหน้า ย้อนกลับ หรือรีเฟรช) จำนวนอ็อบเจ็กต์ที่เหลืออยู่ในหน่วยความจำจะเพิ่มขึ้นเนื่องจากตัวจัดการเหตุการณ์ไม่ได้ถูกรีไซเคิล
โดยทั่วไป วิธีที่ดีที่สุดคือลบตัวจัดการเหตุการณ์ทั้งหมดในตัวจัดการเหตุการณ์ onunload ก่อนที่เพจจะถูกยกเลิกการโหลด ข้อดีของการมอบหมายกิจกรรมยังเห็นได้ในขณะนี้ เนื่องจากมีตัวจัดการเหตุการณ์น้อย จึงง่ายต่อการจดจำว่าจะลบตัวใด
la ps = document.getElementsByTagName("p");for(let i = 0;i<ps.length;++i){
ให้ p = document.createElement("p");
document.body.appendChild(p);} la ps = document.getElementsByTagName("p");for(let i = 0,len=ps.length;i<len;++i){
ให้ p = document.createElement("p");
document.body.appendChild(p);} บรรทัดแรกในนิพจน์ 1 รับ HTMLCollection ที่มีองค์ประกอบ <p> ทั้งหมดในเอกสาร เนื่องจากคอลเลกชันนี้เป็นแบบเรียลไทม์ ทุกครั้งที่คุณเพิ่มองค์ประกอบ <p> ใหม่ลงในเพจ จากนั้นสอบถามคอลเลกชันนี้ จะมีอีกหนึ่งรายการ เนื่องจากเบราว์เซอร์ไม่ต้องการบันทึกคอลเลกชันในแต่ละครั้งที่สร้างขึ้น เบราว์เซอร์จะอัปเดตคอลเลกชันในการเข้าชมแต่ละครั้ง แต่ละวงจะประเมินค่า i < ps.length ซึ่งหมายถึงแบบสอบถามเพื่อรับองค์ประกอบ <p> ทั้งหมด เนื่องจากองค์ประกอบ <p> ใหม่ถูกสร้างขึ้นและเพิ่มลงในเอกสารภายในเนื้อหาของลูป ค่า ps.length จะเพิ่มขึ้นในแต่ละครั้งผ่านการวนซ้ำ เนื่องจากค่าทั้งสองจะเพิ่มขึ้น ฉัน จะไม่เท่ากับ ps.length ดังนั้นนิพจน์ 1 จะทำให้เกิดการวนซ้ำไม่สิ้นสุด
ในนิพจน์ 2 ตัวแปร len ที่เก็บความยาวของชุดจะถูกเตรียมใช้งาน เนื่องจาก len เก็บความยาวของชุดไว้ที่จุดเริ่มต้นของลูป และค่านี้จะไม่เพิ่มขึ้นแบบไดนามิกเมื่อชุดเพิ่มขึ้น ( for循环中初始化变量处只会初始化一次) ดังนั้นจึงสามารถหลีกเลี่ยงปัญหาการวนซ้ำไม่สิ้นสุดที่ปรากฏในนิพจน์ 1 ได้
หากคุณไม่ต้องการเริ่มต้นตัวแปร คุณยังสามารถใช้การวนซ้ำแบบย้อนกลับได้:
la ps = document.getElementsByTagName("p");for(let i = ps.length-1;i>=0;--i ){
ให้ p = document.createElement("p");
document.body.appendChild(p);} 
คำแนะนำที่เกี่ยวข้อง: บทช่วยสอน JavaScript
ข้างต้นเป็นความเข้าใจเชิงลึกเกี่ยวกับปัญหาหน่วยความจำและประสิทธิภาพของ JavaScript สำหรับข้อมูลเพิ่มเติม โปรดใส่ใจกับบทความอื่น ๆ ที่เกี่ยวข้องบนเว็บไซต์ PHP Chinese!
