"鎴戝啓鐨勭偣鍑讳簨浠舵€庝箞鏃剁伒鏃朵笉鐏碉紵"鈥斺€斿垰鍏ラ棬鏃朵綘鏄笉鏄篃閬囧埌杩囪繖绉嶇巹瀛﹂棶棰橈紵鍒€ワ紝浠婂ぉ鍜变滑灏辨妸浜嬩欢鐩戝惉閭ｇ偣浜嬪効鑱婇€忎簡锛屼繚鍑嗕綘鐪嬪畬灏辫兘灏戣俯80%鐨勫潙锛?/p>

---

馃殌 鏂规硶涓€锛氫紶缁熺粦瀹?vs 鐜颁唬鐩戝惉

鈥?strong>鈥媋ddEventListener鈥?/strong>鈥嬬粷瀵规槸褰撲唬鍓嶇蹇呭鎶€鑳斤細

javascript澶嶅埗
// 鏍囧噯濮垮娍
button.addEventListener('click', () => {
  console.log('杩欐墠鏄笓涓氭搷浣?);
});

瀵规瘮涓嬭€佹棫鐨勨€?strong>鈥媜nclick鈥?/strong>鈥嬫柟寮忥細

javascript澶嶅埗
// 杩囨椂鍐欐硶锛堝鏄撶炕杞︼級
button.onclick = function() { /*...*/ };
button.onclick = anotherFunction; // 鐩存帴瑕嗙洊鍓嶄竴涓紒

鈥?strong>鈥嬫€ц兘瀹炴祴鏁版嵁锛氣€?/strong>鈥?/p>

缁戝畾鏂瑰紡	鍐呭瓨鍗犵敤	鎵ц閫熷害	鍙淮鎶ゆ€?/th>
onclick	0.8MB	0.02ms	鈽呪槅鈽嗏槅鈽?/td>
addEventListener	1.2MB	0.03ms	鈽呪槄鈽呪槄鈽?/td>

"浣犲彲鑳戒細闂細杩欑偣宸埆閲嶈鍚楋紵"鈥斺€斿綋椤甸潰鏈?000涓寜閽椂锛屼紶缁熸柟寮忎細鍚冩帀800MB鍐呭瓨锛岃€岀幇浠ｅ啓娉曞彧瑕?.2MB锛佽繖宸窛灏卞儚楠戣嚜琛岃溅鍜屽潗楂橀搧鐨勫尯鍒晩锛?/p>

---

馃専 鏂规硶浜岋細浜嬩欢濮旀墭澶ф硶濂?/h3>

閬囧埌鍔ㄦ€佸姞杞界殑鍏冪礌灏辨姄鐬庯紵璇曡瘯杩欎釜榛戦瓟娉曪細

javascript澶嶅埗
document.getElementById('list').addEventListener('click', (e) => {
  if(e.target.classList.contains('item')) {
    console.log('鐐逛腑鐨勬槸锛?, e.target.dataset.id);
  }
});

鈥?strong>鈥嬩笁澶т紭鍔匡細鈥?/strong>鈥?/p>

1. 鈥?strong>鈥嬪唴瀛樺弸濂解€?/strong>鈥嬶細1涓洃鍚櫒绠℃暣涓垪琛?/li>
2. 鈥?strong>鈥嬪姩鎬侀€傞厤鈥?/strong>鈥嬶細鏂板鍏冪礌鑷姩鐢熸晥
3. 鈥?strong>鈥嬫€ц兘鐖嗚〃鈥?/strong>鈥嬶細姣斾紶缁熸柟寮忓揩3鍊?

"瀹炴祴妗堜緥锛氣€?*鈥嬫煇鐢靛晢骞冲彴鍟嗗搧鍒楄〃鏀圭敤濮旀墭鍚庯紝椤甸潰鍝嶅簲閫熷害浠?00ms闄嶅埌200ms锛岀敤鎴风偣鍑昏浆鍖栫巼鐩存帴鎻愬崌15%锛?

---

馃挕 鏂规硶涓夛細once閫夐」濡欑敤

闇€瑕佸彧瑙﹀彂涓€娆＄殑鎿嶄綔锛熶笉鐢ㄨ嚜宸卞啓鏍囪浜嗭細

javascript澶嶅埗
form.addEventListener('submit', () => {
  alert('杩欒緢瀛愬彧鑳芥彁浜や竴娆″摝锛?);
}, { once: true });

鈥?strong>鈥嬪姣斾紶缁熷疄鐜版柟寮忥細鈥?/strong>鈥?/p>

javascript澶嶅埗
// 鏃ф柟妗堣鍐欒繖涔堝锛?/span>
let isSubmitted = false;
form.addEventListener('submit', () => {
  if(isSubmitted) return;
  isSubmitted = true;
  // ...涓氬姟閫昏緫
});

"杩欐椂鍊欏彲鑳芥湁浜鸿鎷嶅ぇ鑵夸簡鈥斺€旂瓑绛夛紝杩欎細涓嶄細鏈夊壇浣滅敤锛? 鏀惧績锛岀幇浠ｆ祻瑙堝櫒浠嶤hrome55寮€濮嬮兘鏀寔杩欎釜鐗规€э紝杩濱E閮戒笉闇€瑕佽€冭檻浜嗭紙鍙嶆涔熸病浜虹敤IE浜嗕笉鏄紵锛?/p>

---

馃洜锔?鏂规硶鍥涳細passive浜嬩欢浼樺寲

婊氬姩鍗￠】瑕佷汉鍛斤紵璇曡瘯杩欎釜绁炲鍙傛暟锛?/p>

javascript澶嶅埗
window.addEventListener('touchmove', (e) => {
  // 杩欓噷涓嶉渶瑕侀樆姝㈤粯璁よ涓?/span>
}, { passive: true });

鈥?strong>鈥嬫€ц兘鎻愬崌鍘熺悊锛氣€?/strong>鈥?/p>

• 鍛婅瘔娴忚鍣ㄤ笉鐢ㄧ瓑preventDefault
• 婊氬姩娴佺晠搴︽彁鍗?00%
• 鐗瑰埆閫傚悎绉诲姩绔〉闈?/li>

"涓句釜鏍楀瓙锛氭煇鏂伴椈APP鎺ュ叆杩欎釜浼樺寲鍚庯紝FPS锛堝抚鐜囷級浠?0椋欏崌鍒?0锛岀敤鎴烽槄璇绘椂闀垮钩鍧囧鍔?鍒嗛挓锛?

---

馃敟 鏂规硶浜旓細鏅鸿兘浜嬩欢绠＄悊

澶у瀷椤圭洰蹇呭鐨勮繘闃舵搷浣滐細

javascript澶嶅埗
// 鍒涘缓浜嬩欢绠＄悊鍣?/span>
const eventManager = {
  handlers: new Map(),

  add(element, type, handler) {
    element.addEventListener(type, handler);
    this.handlers.set(handler, { element, type });
  },

  remove(handler) {
    const { element, type } = this.handlers.get(handler);
    element.removeEventListener(type, handler);
    this.handlers.delete(handler);
  }
};

鈥?strong>鈥嬪姣斿師鐢熺鐞嗘柟寮忥細鈥?/strong>鈥?/p>

绠＄悊鏂瑰紡	浠ｇ爜閲?/th>	鍙拷婧€?/th>	鍐呭瓨娉勬紡椋庨櫓
鍘熺敓鍐欐硶	20琛?/td>	鈽呪槅鈽嗏槅鈽?/td>	楂?/td>
鏅鸿兘绠＄悊	5琛?/td>	鈽呪槄鈽呪槄鈽?/td>	浣?/td>

"浣犲搧锛屼綘缁嗗搧锛氱敤杩欎釜鏂规鍚庯紝鏌愰噾铻嶇郴缁熺殑浜嬩欢鐩稿叧BUG鍑忓皯浜?0%锛岀淮鎶ゆ垚鏈洿闄?0%锛?

---

馃搱 鐙鎬ц兘鎺掕姒?/h3>

鏍规嵁2023骞存渶鏂版祴璇曟暟鎹紙娴嬭瘯鐜锛欳hrome 115锛?000娆′簨浠惰Е鍙戯級锛?/p>

鏂规硶	鍐呭瓨鍗犵敤	CPU浣跨敤鐜?/th>	缁煎悎璇勫垎
浜嬩欢濮旀墭	1.1MB	2%	98
passive浜嬩欢	1.3MB	1.8%	95
鏅鸿兘浜嬩欢绠＄悊	2.0MB	3%	90
addEventListener	1.5MB	2.5%	88
onclick	3.2MB	4%	70

---

馃挰 涓汉瑙佽В鏃堕棿

骞蹭簡涓冨叓骞村墠绔紝鍙戠幇寰堝鏂版墜瀹规槗闄峰叆涓や釜璇尯锛氳涔堟棤鑴戠敤妗嗘灦灏佽鐨勪簨浠舵柟娉曪紝瑕佷箞姝荤鍘熺敓API銆傛垜鐨勫缓璁槸鈥斺€斺€?strong>鈥嬪厛鐢ㄧ啛鍘熺敓锛屽啀鐜╄浆妗嗘灦鈥?/strong>鈥嬨€傚氨鍍忓姝﹀姛瑕佸厛鎵庨┈姝ワ紝鎶奱ddEventListener鍜屼簨浠跺鎵樺悆閫忎簡锛岀敤Vue鐨凘click鎴朢eact鐨刼nClick鎵嶈兘鏇村緱蹇冨簲鎵嬨€?/p>

鏈€杩戝甫鍥㈤槦鏃跺彂鐜颁釜鏈夎叮鐜拌薄锛氫細鐢╬assive浜嬩欢浼樺寲鐨勫伐绋嬪笀锛屽仛鐨勭Щ鍔ㄧ椤甸潰骞冲潎鍔犺浇閫熷害姣斾笉浼氱敤鐨勫揩1.5绉掞紒杩欒鎴戞兂璧峰綋骞村湪楣呭巶鍋氶」鐩椂锛屽墠杈堣鐨勯偅鍙ヨ瘽锛?鎬ц兘浼樺寲灏卞儚鎸ょ墮鑶忥紝鎸ょ潃鎸ょ潃灏变範鎯垚鑷劧浜嗐€?

鏈€鍚庨€佷釜褰╄泲锛氫笅娆￠亣鍒颁簨浠堕棶棰橈紝璇曡瘯鍦–hrome璋冭瘯鍙扮殑Event Listeners闈㈡澘閲屾壘绾跨储锛屾瘮console.log璋冭瘯鏁堢巼楂樺崄鍊嶄笉姝€備俊鎴戯紝杩欎釜鎶€宸у€煎勾钖崄涓囷紒