十年專注于品牌網站建設 十余年專注于網站建設_小程序開發_APP開發,低調、敢創新、有情懷!
      南昌百恒網絡微信公眾號 掃一掃關注
      小程序
      tel-icon全國服務熱線:400-680-9298,0791-88117053
      掃一掃關注百恒網絡微信公眾號
      掃一掃打開百恒網絡微信小程序

      百恒網絡

      南昌百恒網絡

      關于內存和性能中移除事件處理程序詳細介紹

      百恒網絡 2017-01-12 5173

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


      ? ? ? ?

      ??
      ? ? ? ?
      這里,有一個按鈕被包含在
      元素中。為避免雙擊,單擊這個按鈕時就將按鈕移除并替換成一 條消息;這是網站設計中非常流行的一種做法。但問題在于,當按鈕被從頁面中移除時,它還帶著一個 事件處理程序呢。在
      元素上設置 innerHTML 可以把按鈕移走,但事件處理程序仍然與按鈕保持 著引用關系。有的瀏覽器(尤其是 IE)在這種情況下不會作出恰當地處理,它們很有可能會將對元素和 對事件處理程序的引用都保存在內存中。如果你知道某個元素即將被移除,那么好手工移除事件處理 程序,如下面的例子所示。?


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

      400-680-9298,0791-88117053
      掃一掃關注百恒網絡微信公眾號
      掃一掃打開百恒網絡小程序

      歡迎您的光顧,我們將竭誠為您服務×

      亚洲AV乱码久久精品蜜桃| 一本一本久久a久久精品综合麻豆 一本色道久久88综合日韩精品 | 亚洲精品国产肉丝袜久久| 日韩精品无码免费专区网站| 无码国产亚洲日韩国精品视频一区二区三区| 国产福利vr专区精品| 四虎成人精品一区二区免费网站| 精品一久久香蕉国产二月| 久久99国产乱子伦精品免费| 久久久久久亚洲精品中文字幕| 国内精品伊人久久久久av一坑| 精品多毛少妇人妻AV免费久久| 精品女同一区二区| 亚洲综合日韩中文字幕v在线| 国产精品国产三级国产专播下 | 国产午夜精品一区二区三区小说| 精品一区二区AV天堂| 日韩视频在线观看免费| 国产SUV精品一区二区88L| 国产精品特黄毛片| 精品免费久久久久久成人影院| 免费看国产精品3a黄的视频| 国产乱子精品免费视观看片| 亚洲国产综合精品| 亚洲福利一区二区精品秒拍| 亚洲综合一区二区精品久久| 精品无人码麻豆乱码1区2区| 久久精品国产网红主播| 99视频精品全部在线播放| 久久亚洲精品中文字幕无码| 久久国产精品电影| 久久91精品国产99久久yfo| 亚洲成人精品久久| 老司机性色福利精品视频| 久久久免费精品re6| 亚洲精品天天影视综合网 | 国产a不卡片精品免费观看| 日韩成人在线视屏| 亚洲日韩精品无码一区二区三区| 国产精品亚洲精品日韩已满 | 99精品热女视频专线|