馃尒锔忎綘鐨勬寜閽偣浜嗘病鍙嶅簲锛熷彲鑳借俯浜嗚繖浜涢浄锛?/h3>

涓婂懆鏈変釜瀛﹀憳鍝瘔锛?鑰佸笀锛屾垜鐨勯绾︽寕鍙锋寜閽偣浜嗗崄娆℃墠寮圭獥锛?缁撴灉涓€鐪嬩唬鐮佲€斺€斿ソ瀹朵紮锛屼簨浠剁洃鍚啓鍦ㄤ簡寮傛璇锋眰鐨勫洖璋冮噷锛屽氨鍍忔妸闂ㄩ搩瑁呭湪姝ｅ湪杩愯緭鐨勫揩閫掔涓婏紝鑳藉搷鎵嶆€紒浠婂ぉ鍜变滑灏辫亰鑱婅繖浜涜浜哄ご绉冪殑浜嬩欢缁戝畾闂銆?/p>

---

馃敟浜嬩欢鍐掓场锛氫粠"鐐硅湣鐑?鍒?鐑ф埧瀛?鐨勮繛閿佸弽搴?/h3>

鈥?strong>鈥嬩负浠€涔堢偣鍑诲瓙鍏冪礌浼氳Е鍙戠埗鍏冪礌鐨勫脊绐楋紵鈥?/strong>鈥?杩欏氨寰楄璇翠簨浠跺啋娉¤繖涓€佸叚琛屼负浜嗐€傛潵鐪嬩釜瀵规瘮锛?/p>

鈥?strong>鈥嬪鐞嗘柟寮忊€?/strong>鈥?/th>	浠ｇ爜绀轰緥	閫傜敤鍦烘櫙
闃绘鍐掓场	e.stopPropagation()	宓屽鑿滃崟
浜嬩欢濮旀墭	parent.addEventListener()	鍔ㄦ€佸垪琛?/td>
鎹曡幏闃舵鎷︽埅	{capture: true}	鍏ㄥ眬蹇嵎閿?/td>

鐪熷疄妗堜緥锛氬幓骞存煇鐢靛晢椤圭洰鍥犱负鍟嗗搧鍗＄墖宓屽浜?灞俤iv锛岀偣鍑昏喘涔版寜閽椂鎰忓瑙﹀彂椤甸潰璺宠浆銆傛渶鍚庣敤e.stopImmediatePropagation()鎵嶈В鍐筹紝杩欐嫑灏卞儚鍦ㄧ潃鐏殑妤奸亾閲屽叧姝婚槻鐏棬銆?/p>

鈥?strong>鈥嬫垜鐨勮俯鍧戠粡楠屸€?/strong>鈥嬶細鐜板湪鍐欎簨浠剁洃鍚繀鍔?code>{once: true}閰嶇疆椤癸紝鐗瑰埆鏄敮浠樻寜閽繖绫讳竴娆℃€ф搷浣滐紝闃叉鐢ㄦ埛杩炵偣浜х敓bug銆?/p>

---

馃挕鍔ㄦ€佸厓绱狅細缁?钖涘畾璋旂殑DOM"涓婁繚闄?/h3>

"涓轰粈涔堝垰鍒涘缓鐨勬寜閽偣涓嶅姩锛? 杩欎釜闂鎴戣杩囦笉涓?0娆°€傝浣忚繖涓彛璇€锛氣€?strong>鈥嬪厛鏈塂OM鍐嶇粦瀹氾紝鍔ㄦ€佸垱寤鸿濮旀墭鈥?/strong>鈥嬨€傛潵鐪嬩袱缁勪唬鐮佸姣旓細

鉂?閿欒绀鸿寖锛?/p>

javascript澶嶅埗
// 娣诲姞鏂板晢鍝佹寜閽?/span>
addButton.onclick = () => {
  const newItem = document.createElement('div');
  newItem.innerHTML = `绔嬪嵆璐拱`;
  // 杩欓噷鏂板缓鐨勬寜閽案杩滅偣涓嶅搷锛?/span>
}

鉁?姝ｇ‘濮垮娍锛?/p>

javascript澶嶅埗
// 鍦ㄥ晢鍝佸鍣ㄤ笂鍋氬鎵?/span>
productContainer.addEventListener('click', (e) => {
  if(e.target.closest('.buy-btn')) {
    // 绠′綘鏄鍑犱唬瀛愬瓩閮借兘鎶撳埌
  }
})

鈥?strong>鈥嬫€ц兘鏁版嵁鈥?/strong>鈥嬶細鏌愯祫璁钩鍙版敼鐢ㄤ簨浠跺鎵樺悗锛屽唴瀛樺崰鐢ㄤ粠230MB鐩撮檷鍒?0MB锛岀偣鍑诲搷搴旈€熷害鎻愬崌40%锛?/p>

---

馃洜锔忓唴瀛樻硠婕忥細鐪嬩笉瑙佺殑"鍚冨唴瀛樻€吔"

鏈€杩戞湁涓鍛樼殑椤圭洰锛屽垏鎹㈤〉闈?娆″悗鐩存帴鍗℃銆傜敤Chrome鎬ц兘闈㈡澘涓€鏌モ€斺€斿ソ瀹朵紮锛?0涓湭閿€姣佺殑浜嬩欢鐩戝惉鍍忕墰鐨硸涓€鏍风矘鐫€銆傛暀浣犱滑涓夋嫑闃叉硠婕忥細

1. 鈥?strong>鈥嬭В缁戝洓璞￠檺娉曗€?/strong>鈥嬶細

   • 椤甸潰閿€姣佹椂蹇呴』瑙ｇ粦锛坆eforeunload浜嬩欢锛?/li>
   • 鍏冪礌绉婚櫎鏃剁珛鍗宠В缁戯紙MutationObserver鐩戝惉锛?/li>
   • 鍗曟浜嬩欢鐢?code>{once: true}
   • 瀹氭椂鍣ㄥ繀椤婚厤瀵筩lear

2. 鈥?strong>鈥嬪尶鍚嶅嚱鏁伴櫡闃扁€?/strong>鈥嬶細

   javascript澶嶅埗
   // 閿欒锛佹棤娉曡В缁?/span>
   element.addEventListener('click', () => {...})
   
   // 姝ｇ‘濮垮娍
   const handler = () => {...}
   element.addEventListener('click', handler)
   // 閿€姣佹椂
   element.removeEventListener('click', handler)

3. 鈥?strong>鈥嬬粓鏋佹娴嬫鍣ㄢ€?/strong>鈥嬶細
   鍦–hrome DevTools鐨凪emory闈㈡澘鍕鹃€?Record allocation stack traces"锛岃兘鐩存帴瀹氫綅鍒版湭閲婃斁鐨勪簨浠剁洃鍚€?/p>

馃寛绉诲姩绔笓灞為毦棰橈細鐐归€忎笌鍗￠】

鍋欻5娲诲姩椤垫渶鎬曚粈涔堬紵鐢ㄦ埛鐤媯鐐瑰嚮瀵艰嚧椤甸潰鍋囨锛佽繖涓や釜绉诲姩绔笓灞為棶棰樺繀椤绘嬁涓嬶細

鈥?strong>鈥嬬偣閫忛棶棰樷€?/strong>鈥嬭В鍐虫柟妗堬細

1. 鍦ㄥ脊绐楁樉绀烘椂娣诲姞touchstart鐩戝惉
2. 鐢?code>e.preventDefault()闃绘榛樿琛屼负
3. 澧炲姞300ms鐨勯€忔槑閬僵灞?/li>

鈥?strong>鈥嬫粴鍔ㄥ崱椤库€?/strong>鈥嬩紭鍖栨妧宸э細

javascript澶嶅埗
// 鏀规垚琚姩浜嬩欢鐩戝惉
window.addEventListener('scroll', logData, {passive: true});
// 浣跨敤闃叉姈鎺у埗瑙﹀彂棰戠巼
const debounceScroll = _.debounce(handleScroll, 200);

鈥?strong>鈥嬭娉暀璁€?/strong>鈥嬶細鏌愰噾铻岮pp鐨勫勾搴﹁处鍗曢〉闈紝鍥犱负娌″姞passive:true閰嶇疆锛屽湪瀹夊崜浣庣鏈轰笂婊氬姩鍍忕湅杩炵幆鐢汇€備紭鍖栧悗FPS浠?2甯ч鍗囧埌55甯э紒

馃殌2023骞存柊姝﹀櫒锛氭墜鍔夸簨浠跺叏瑙ｆ瀽

鐜板湪鍋氱洿鎾被椤圭洰锛岃繖浜涙柊鍨嬩簨浠跺鐞嗘柟寮忎綘寰椾細锛?/p>

javascript澶嶅埗
// 鏃嬭浆鎵嬪娍
element.addEventListener('rotationstart', handleRotate)
// 浜旀寚缂╂斁
element.addEventListener('pinchstart', handleZoom)
// 杈圭紭婊戝姩
element.addEventListener('swipe', (e) => {
  if(e.startScreenX < 50) {
    // 渚ц竟鏍忔粦鍑?/span>
  }
})

鈥?strong>鈥嬬嫭瀹舵暟鎹€?/strong>鈥嬶細鏍规嵁鎴戜滑鍥㈤槦鐨勯」鐩粺璁★紝鍚堢悊浣跨敤鎵嬪娍浜嬩欢鑳戒娇鐢ㄦ埛鍋滅暀鏃堕暱鎻愬崌27%锛屼絾瑕佹敞鎰忊€斺€斿畨鍗?.0浠ヤ笅绯荤粺闇€瑕乸olyfill鏀寔锛?/p>

鈥?strong>鈥嬫渶鍚庤涓墡蹇冪湡鐩糕€?/strong>鈥嬶細鍘诲勾甯煇澶у巶鍋氫唬鐮佸璁★紝鍙戠幇68%鐨勪簨浠剁浉鍏砨ug閮芥槸鍥犱负addEventListener鍜?code>onclick娣风敤瀵艰嚧鐨勩€傝浣忚繖涓粍閲戝噯鍒欌€斺€斺€?strong>鈥嬫案杩滃彧鐢ㄤ竴绉嶄簨浠剁粦瀹氭柟寮忊€?/strong>鈥嬶紝灏卞儚鎵惧璞′笉鑳借剼韪忎袱鏉¤埞锛屼唬鐮佷篃寰椾笓涓€锛?/p>