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

      百恒網絡

      南昌百恒網絡

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

      百恒網絡 2017-01-12 5172

      前面我們介紹過關于內存和性能中的事件委托機制及應用,若對事件委托機制感興趣,請點擊《結合實例介紹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
      掃一掃關注百恒網絡微信公眾號
      掃一掃打開百恒網絡小程序

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

      七次郎在线视频精品视频| 国产手机精品视频| 无码精品人妻一区二区三区免费看 | 精品福利视频第一| 亚洲?V无码成人精品区日韩| 无码人妻精品一二三区免费| 亚洲中文字幕精品久久| 精品久久久久久久久午夜福利| 久久久久久亚洲精品成人| 久久中文字幕2021精品| 青青青国产依人精品视频 | 国产亚洲精品免费视频播放| 亚洲精品无码你懂的网站| 日韩午夜伦y4480私人影院| 日韩大片高清播放器| 日韩精品电影一区亚洲| 精品久久洲久久久久护士| 在线播放精品一区二区啪视频| 精品人妻无码一区二区三区蜜桃一 | 国产99久久久国产精品小说| 国产精品久久久久久久久 | 日韩在线视频一区| 日韩免费一区二区三区| 精品96在线观看影院| 四虎精品免费永久免费视频| 精品3d动漫视频一区在线观看| 日韩精品电影在线观看| 日韩不卡中文字幕| 国产精品永久免费| 国产精品午夜无码AV天美传媒| 亚洲AV无码乱码麻豆精品国产| 亚洲国产午夜精品理论片| 久久久精品久久久久三级| 2021国内精品久久久久久影院| 99久久国产亚洲综合精品| 欧美日韩精品不卡在线观看| 黑巨人与欧美精品一区| 精品国产柚木在线观看| 国产午夜亚洲精品不卡电影| 日韩人妻一区二区三区免费| 日韩a在线观看免费观看|