前面我們介紹過(guò)關(guān)于內(nèi)存和性能中的事件委托機(jī)制及應(yīng)用,若對(duì)事件委托機(jī)制感興趣，請(qǐng)點(diǎn)擊《結(jié)合實(shí)例介紹JS事件委托機(jī)制及應(yīng)用》查閱，關(guān)于性能方面是開(kāi)發(fā)過(guò)程中時(shí)刻需要考慮的問(wèn)題，例如，內(nèi)存示放、鏈接示放等接下我們著重介紹下連接及頁(yè)面等方面的性能管控。
? ? ? ?每當(dāng)將事件處理程序指定給元素時(shí)，運(yùn)行中的瀏覽器代碼與支持頁(yè)面交互的 JavaScript 代碼之間就會(huì)建立一個(gè)連接。這種連接越多，頁(yè)面執(zhí)行起來(lái)就越慢。如前所述，可以采用事件委托技術(shù)，限制建立的連接數(shù)量。另外，在不需要的時(shí)候移除事件處理程序，也是解決這個(gè)問(wèn)題的一種方案。內(nèi)存中留有那些過(guò)時(shí)不用的“空事件處理程序”（dangling event handler），也是造成 Web 應(yīng)用程序內(nèi)存與性能問(wèn)題的主要原因。?
? ? ? ?在兩種情況下，可能會(huì)造成上述問(wèn)題。第一種情況就是從文檔中移除帶有事件處理程序的元素時(shí)。這可能是通過(guò)純粹的 DOM操作，例如使用 removeChild()和 replaceChild()方法，但更多地是發(fā) 生在使用 innerHTML 替換頁(yè)面中某一部分的時(shí)候。如果帶有事件處理程序的元素被 innerHTML 刪除了，那么原來(lái)添加到元素中的事件處理程序極有可能無(wú)法被當(dāng)作垃圾回收。來(lái)看下面的例子。?

? ? ? ?

??
? ? ? ?
這里，有一個(gè)按鈕被包含在

元素中。為避免雙擊，單擊這個(gè)按鈕時(shí)就將按鈕移除并替換成一條消息；這是網(wǎng)站設(shè)計(jì)中非常流行的一種做法。但問(wèn)題在于，當(dāng)按鈕被從頁(yè)面中移除時(shí)，它還帶著一個(gè) 事件處理程序呢。在

元素上設(shè)置 innerHTML 可以把按鈕移走，但事件處理程序仍然與按鈕保持著引用關(guān)系。有的瀏覽器（尤其是 IE）在這種情況下不會(huì)作出恰當(dāng)?shù)靥幚?，它們很有可能?huì)將對(duì)元素和對(duì)事件處理程序的引用都保存在內(nèi)存中。如果你知道某個(gè)元素即將被移除，那么好手工移除事件處理程序，如下面的例子所示。?

? ? ? ?

?
?
在此，南昌網(wǎng)站制作公司百恒網(wǎng)絡(luò)前端開(kāi)發(fā)工師在提示大家在設(shè)置

的 innerHTML 屬性之前，先移除了按鈕的事件處理程序。這樣就確保了內(nèi)存可以被再次利用，而從 DOM中移除按鈕也做到了干凈利索。注意，在事件處理程序中刪除按鈕也能阻止事件冒泡。目標(biāo)元素在文檔中是事件冒泡的前提。 ? ? ??
? ? ? ? 采用事件委托也有助于解決這個(gè)問(wèn)題。如果事先知道將來(lái)有可能使用innerHTML 替換掉頁(yè)面中的某一部分，那么就可以不直接把事件處理程序添加到該部分的元素中。而通過(guò)把事件處理程序指定給較高層次的元素，同樣能夠處理該區(qū)域中的事件。?
? ? ? ? 導(dǎo)致“空事件處理程序”的另一種情況，就是卸載頁(yè)面的時(shí)候。毫不奇怪，IE8 及更早版本在這種情況下依然是問(wèn)題多的瀏覽器，盡管其他瀏覽器或多或少也有類(lèi)似的問(wèn)題。如果在頁(yè)面被卸載之前沒(méi) 有清理干凈事件處理程序，那它們就會(huì)滯留在內(nèi)存中。每次加載完頁(yè)面再卸載頁(yè)面時(shí)（可能是在兩個(gè)頁(yè) 面間來(lái)回切換，也可以是單擊了“刷新”按鈕），內(nèi)存中滯留的對(duì)象數(shù)目就會(huì)增加，因?yàn)槭录幚沓绦?占用的內(nèi)存并沒(méi)有被釋放。?
? ? ? ?一般來(lái)說(shuō)，好的做法是在頁(yè)面卸載之前，先通過(guò) onunload 事件處理程序移除所有事件處理程序。在此，南昌網(wǎng)絡(luò)公司工程師再次提示大家事件委托技術(shù)再次表現(xiàn)出它的優(yōu)勢(shì)——需要跟蹤的事件處理程序越少，移除它們就越容易。對(duì)這種類(lèi)似撤銷(xiāo)的操作，我們可以把它想象成：只要是通過(guò) onload 事件處理程序添加的東西，后都要通過(guò) onunload 事件處理程序?qū)⑺鼈円瞥?
? ? ? ?不要忘了，使用 onunload 事件處理程序意味著頁(yè)面不會(huì)被緩存在 bfcache中。如果你在意這個(gè)問(wèn)題，那么就只能在IE中通過(guò) onunload 來(lái)移除事件處理程序了。?
? ?本文僅限內(nèi)部技術(shù)人員學(xué)習(xí)交流,不得作于其他商業(yè)用途.希望此文對(duì)廣大技人員有所幫助。原創(chuàng)文章出自:南昌網(wǎng)站建設(shè)公司-百恒網(wǎng)絡(luò) http://m.gimmickmag.com/ 如轉(zhuǎn)載請(qǐng)注明出處!