前面我們介紹過關于內(nèi)存和性能中的事件委托機制及應用,若對事件委托機制感興趣,請點擊《結(jié)合實例介紹JS事件委托機制及應用》查閱,關于性能方面是開發(fā)過程中時刻需要考慮的問題,例如,內(nèi)存示放、鏈接示放等接下我們著重介紹下連接及頁面等方面的性能管控。
? ? ? ?每當將事件處理程序指定給元素時,運行中的瀏覽器代碼與支持頁面交互的 JavaScript 代碼之間就 會建立一個連接。這種連接越多,頁面執(zhí)行起來就越慢。如前所述,可以采用事件委托技術,限制建立 的連接數(shù)量。另外,在不需要的時候移除事件處理程序,也是解決這個問題的一種方案。內(nèi)存中留有那 些過時不用的“空事件處理程序”(dangling event handler),也是造成 Web 應用程序內(nèi)存與性能問題的 主要原因。?
? ? ? ?在兩種情況下,可能會造成上述問題。第一種情況就是從文檔中移除帶有事件處理程序的元素時。 這可能是通過純粹的 DOM操作,例如使用 removeChild()和 replaceChild()方法,但更多地是發(fā) 生在使用 innerHTML 替換頁面中某一部分的時候。如果帶有事件處理程序的元素被 innerHTML 刪除 了,那么原來添加到元素中的事件處理程序極有可能無法被當作垃圾回收。來看下面的例子。?
? ? ? ?
??
? ? ? ?
這里,有一個按鈕被包含在
元素中。為避免雙擊,單擊這個按鈕時就將按鈕移除并替換成一 條消息;這是網(wǎng)站設計中非常流行的一種做法。但問題在于,當按鈕被從頁面中移除時,它還帶著一個 事件處理程序呢。在
元素上設置 innerHTML 可以把按鈕移走,但事件處理程序仍然與按鈕保持 著引用關系。有的瀏覽器(尤其是 IE)在這種情況下不會作出恰當?shù)靥幚?,它們很有可能會將對元素?對事件處理程序的引用都保存在內(nèi)存中。如果你知道某個元素即將被移除,那么好手工移除事件處理 程序,如下面的例子所示。?
? ? ? ?
?
?
在此,南昌網(wǎng)站制作公司百恒網(wǎng)絡前端開發(fā)工師在提示大家在設置
? ? ? ?
?
在此,南昌網(wǎng)站制作公司百恒網(wǎng)絡前端開發(fā)工師在提示大家在設置
的 innerHTML 屬性之前,先移除了按鈕的事件處理程序。這樣就確保了 內(nèi)存可以被再次利用,而從 DOM中移除按鈕也做到了干凈利索。 注意,在事件處理程序中刪除按鈕也能阻止事件冒泡。目標元素在文檔中是事件冒泡的前提。 ? ? ??
? ? ? ? 采用事件委托也有助于解決這個問題。如果事先知道將來有可能使用innerHTML 替換掉頁面中的某一部分,那么就可以不直接把事件處理程序添加到該部分的元素 中。而通過把事件處理程序指定給較高層次的元素,同樣能夠處理該區(qū)域中的事件。?
? ? ? ? 導致“空事件處理程序”的另一種情況,就是卸載頁面的時候。毫不奇怪,IE8 及更早版本在這種 情況下依然是問題多的瀏覽器,盡管其他瀏覽器或多或少也有類似的問題。如果在頁面被卸載之前沒 有清理干凈事件處理程序,那它們就會滯留在內(nèi)存中。每次加載完頁面再卸載頁面時(可能是在兩個頁 面間來回切換,也可以是單擊了“刷新”按鈕),內(nèi)存中滯留的對象數(shù)目就會增加,因為事件處理程序 占用的內(nèi)存并沒有被釋放。?
? ? ? ?一般來說,好的做法是在頁面卸載之前,先通過 onunload 事件處理程序移除所有事件處理程序。 在此,南昌網(wǎng)絡公司工程師再次提示大家事件委托技術再次表現(xiàn)出它的優(yōu)勢——需要跟蹤的事件處理程序越少,移除它們就越容易。對這 種類似撤銷的操作,我們可以把它想象成:只要是通過 onload 事件處理程序添加的東西,后都要通 過 onunload 事件處理程序?qū)⑺鼈円瞥?
? ? ? ?不要忘了,使用 onunload 事件處理程序意味著頁面不會被緩存在 bfcache中。 如果你在意這個問題,那么就只能在IE中通過 onunload 來移除事件處理程序了。?
? ?本文僅限內(nèi)部技術人員學習交流,不得作于其他商業(yè)用途.希望此文對廣大技人員有所幫助。原創(chuàng)文章出自:南昌網(wǎng)站建設公司-百恒網(wǎng)絡 http://www.myforexfactory.net/ 如轉(zhuǎn)載請注明出處!
? ? ? ? 采用事件委托也有助于解決這個問題。如果事先知道將來有可能使用innerHTML 替換掉頁面中的某一部分,那么就可以不直接把事件處理程序添加到該部分的元素 中。而通過把事件處理程序指定給較高層次的元素,同樣能夠處理該區(qū)域中的事件。?
? ? ? ? 導致“空事件處理程序”的另一種情況,就是卸載頁面的時候。毫不奇怪,IE8 及更早版本在這種 情況下依然是問題多的瀏覽器,盡管其他瀏覽器或多或少也有類似的問題。如果在頁面被卸載之前沒 有清理干凈事件處理程序,那它們就會滯留在內(nèi)存中。每次加載完頁面再卸載頁面時(可能是在兩個頁 面間來回切換,也可以是單擊了“刷新”按鈕),內(nèi)存中滯留的對象數(shù)目就會增加,因為事件處理程序 占用的內(nèi)存并沒有被釋放。?
? ? ? ?一般來說,好的做法是在頁面卸載之前,先通過 onunload 事件處理程序移除所有事件處理程序。 在此,南昌網(wǎng)絡公司工程師再次提示大家事件委托技術再次表現(xiàn)出它的優(yōu)勢——需要跟蹤的事件處理程序越少,移除它們就越容易。對這 種類似撤銷的操作,我們可以把它想象成:只要是通過 onload 事件處理程序添加的東西,后都要通 過 onunload 事件處理程序?qū)⑺鼈円瞥?
? ? ? ?不要忘了,使用 onunload 事件處理程序意味著頁面不會被緩存在 bfcache中。 如果你在意這個問題,那么就只能在IE中通過 onunload 來移除事件處理程序了。?
? ?本文僅限內(nèi)部技術人員學習交流,不得作于其他商業(yè)用途.希望此文對廣大技人員有所幫助。原創(chuàng)文章出自:南昌網(wǎng)站建設公司-百恒網(wǎng)絡 http://www.myforexfactory.net/ 如轉(zhuǎn)載請注明出處!