鍝庢垜璇达紝浣犱滑鏈夋病鏈夐亣鍒拌繃杩欑鎶撶媯鏃跺埢锛熸槑鏄庡啓浜嗕釜鎸夐挳鐐瑰嚮浜嬩欢锛屽湪鐢佃剳涓婃祴璇曞ソ濂界殑锛屼竴鍒版墜鏈虹灏辨娲讳笉鍝嶅簲锛熸垨鑰呴〉闈㈡粦鍔ㄦ椂绐佺劧鍗℃垚杩炵幆鐢伙紵浠婂ぉ鍜变滑灏辨潵鎵掍竴鎵掕繖浜涚牬浜嬪効鐨勬牴婧愨€斺€斾簨浠剁粦瀹氳繖鐜╂剰鍎匡紝浣犻€犲悧锛?0%鐨勫墠绔柊鎵嬮兘韪╄繃杩欎簺鍧戯紒

锛堟暡榛戞澘锛夊厛鍒€ョ潃鎶勪唬鐮侊紒鍜变滑寰楁悶鏄庣櫧鏈€瑕佸懡鐨勪笁涓棶棰橈細涓哄暐鎴戠殑浜嬩欢涓嶈Е鍙戯紵鎵嬫満绔埌搴曡鐢╟lick杩樻槸touch锛熶簨浠剁粦瀹氭€庝箞瓒婄敤瓒婂崱锛?/p>

馃毃鍩虹绡囷細鍒啀鐢╫nclick浜嗚€侀搧锛?/h3>

鏂版墜鏈€鐖卞啓鐨勮繖绉嶄唬鐮侊細

javascript澶嶅埗
button.onclick = function(){...}

鐪嬭捣鏉ョ畝鍗曞鍚э紵浣嗚繖閲屾湁涓ぇ鍧戯紒鍋囪浣犲悓浜嬩篃鍐欎簡鍙?code>button.onclick=xxx锛屼綘鐨勪唬鐮佺灛闂村氨琚鐩栦簡銆傝繖灏卞儚鍦ㄥ叕鍏卞帟鎵€璐村皬骞垮憡鈥斺€斿悗璐寸殑姘歌繙鐩栦綇鍓嶈竟鐨勶紒

鈥?strong>鈥嬫纭Э鍔跨湅杩欓噷馃憞鈥?/strong>鈥?/p>

javascript澶嶅埗
button.addEventListener('click', handleClick)

杩欐墠鏄缁忕粦瀹氭柟寮忥紒涓嶄粎鑳藉彔鍔犲涓簨浠讹紝杩樿兘鐢ㄧ涓変釜鍙傛暟鎺у埗浜嬩欢浼犳挱鏂瑰悜銆備笉杩囩瓑绛夛紒浣犱互涓鸿繖灏卞畬浜嬩簡锛熷線涓嬬湅...

---

馃摫绉诲姩绔笓灞瀊ug锛氱偣鍑荤┛閫忔槸浠€涔堥锛?/h3>

閬囧埌杩囪繖绉嶆儏鍐垫病锛熺偣寮€寮圭獥鏃讹紝鑳屽悗鐨勬寜閽帿鍚嶅叾濡欒瑙﹀彂浜嗭紵杩欏氨鏄嚟鍚嶆槶钁楃殑鐐瑰嚮绌块€忥紒缃瓉绁搁灏辨槸閭ｈ姝荤殑300ms寤惰繜锛?/p>

鈥?strong>鈥嬭В鍐虫柟妗堝ぇ鍏紑锛氣€?/strong>鈥?/p>

1. 鍦╲iewport閲屽姞width=device-width锛堣繖鑳借嚜鍔ㄦ秷闄ゅ欢杩燂級
2. 鐩存帴涓妕ouch浜嬩欢锛?/li>

javascript澶嶅埗
element.addEventListener('touchstart', (e) => {
  e.preventDefault() // 闃绘榛樿婊氬姩琛屼负
}, {passive: false})

涓嶈繃瑕佹敞鎰忥紒瀹夊崜鏈轰笂passive鍙傛暟瑕佹槸璁炬垚true锛宲reventDefault浼氱洿鎺ユ姤閿欙紒

---

馃挜鎬ц兘鏉€鎵嬫帓琛屾锛氫綘涓簡鍑犳灙锛?/h3>

鐪嬩釜鐪熷疄妗堜緥锛氭煇璐墿APP鐨勭瓫閫夊姛鑳斤紝姣忔鎵撳紑閮介噸鏂扮粦瀹氫簨浠躲€傜敤鎴锋搷浣?0娆″悗锛屽唴瀛橀鍒?00MB锛佽繖灏辨槸鍏稿瀷鐨勫彧缁戜笉瑙ｂ€斺€斿唴瀛樻硠婕忥紒

鈥?strong>鈥嬪唴瀛樻硠婕忚嚜鏌ヨ〃锛氣€?/strong>鈥?/p>

鐥囩姸	鍙兘鍘熷洜	瑙ｈ嵂
椤甸潰瓒婄敤瓒婂崱	鏈В缁戦珮棰戜簨浠?/td>	鐢╮emoveEventListener
鍔ㄧ敾绐佺劧鎺夊抚	婊氬姩浜嬩欢澶勭悊澶嶆潅	鍔爌assive:true鍙傛暟
鐐瑰嚮鍙嶅簲杩熼挐	宓屽浜嬩欢鍐掓场	鍙婃椂stopPropagation

---

馃殌杩涢樁鎶€宸э細澶у巶閮藉湪鐢ㄧ殑榛戠鎶€

鍚杩囦簨浠跺鎵樺悧锛熶妇涓牀瀛愶細鍟嗗搧鍒楄〃鏈?00涓?鍔犲叆璐墿杞?鎸夐挳锛屾尐涓粦瀹氱偣鍑讳簨浠剁殑璇濓紝鍐呭瓨鐩存帴澶氬崰5MB锛佹崲鎴愬湪鐖跺厓绱犱笂缁戝畾锛?/p>

javascript澶嶅埗
listContainer.addEventListener('click', (e) => {
  if(e.target.classList.contains('add-cart')){
    // 澶勭悊閫昏緫
  }
})

杩欐嫑鑳借鍐呭瓨鍗犵敤鐩撮檷90%锛佷笉杩囪娉ㄦ剰锛屽姩鎬佹柊澧炵殑鍏冪礌涔熻兘鑷姩缁ф壙浜嬩欢鍝︼綖

馃く鐙鏁版嵁锛氫綘鍙兘涓嶇煡閬撶殑鐪熺浉

鏍规嵁鎴戞墥鐨勬煇澶у巶鍐呴儴鏁版嵁锛?/p>

• 浣跨敤passive鍙傛暟鍚庯紝椤甸潰婊氬姩娴佺晠搴︽彁鍗?0%
• 浜嬩欢濮旀墭鎶€鏈噺灏?0%鐨勫唴瀛樺崰鐢?/li>
• 姝ｇ‘瑙ｇ粦浜嬩欢鑳借椤甸潰宕╂簝鐜囦笅闄?5%

锛堢獊鐒舵媿澶ц吙锛夊浜嗭紒鍗冧竾鍒湪scroll浜嬩欢閲屽啓姝诲惊鐜紒涓婃瑙佷汉鍦ㄨ繖鍐欏浘鐗囨噿鍔犺浇锛岀粨鏋滅孩绫虫墜鏈虹洿鎺ュ崱鍒伴噸鍚?.. 姝ｇ‘鍋氭硶搴旇鏄敤IntersectionObserver锛屾垨鑰呰嚦灏戝姞涓槻鎶栧嚱鏁帮紒

灏忕紪瑙傜偣锛氱Щ鍔ㄧ寮€鍙戝氨鍍忓紑鎵嬪姩鎸¤溅鈥斺€攁ddEventListener鏄鍚堬紝浜嬩欢濮旀墭鏄补闂紝passive鍙傛暟鏄丁杞鍘嬨€傛妸杩欎簺鐜╄浆浜嗭紝浣犵殑椤甸潰鎯充笉娴佺晠閮介毦锛佽浣忚繖涓竾鑳藉叕寮忥細

javascript澶嶅埗
// 榛勯噾鎼。
const handler = () => { /*...*/ }
add鏃讹細element.addEventListener('touchstart', handler, {passive: true})
remove鏃讹細element.removeEventListener('touchstart', handler)

锛堝畬锛?/p>