Zepto源碼之assets模塊

;(function($){
  var cache = [], timeout

  $.fn.remove = function(){
    return this.each(function(){
      if(this.parentNode){
        if(this.tagName === 'IMG'){
          cache.push(this)
          this.src = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='
          if (timeout) clearTimeout(timeout)
          timeout = setTimeout(function(){ cache = [] }, 60000)
        }
        this.parentNode.removeChild(this)
      }
    })
  }
})(Zepto)

分析

從源碼上看，我們可以看出來，此模塊就是刪除元素的時候，對 IMG 元素進行特殊處理，將其內容放入 cache 緩衝數組中。然後將內容賦值成一個 1*1 的圖片。然後再移除該元素。並過 6 秒後清空 cache 數組中的內容。

看到這裏不由的有一點不解，爲什麼要執行這樣的操作，直接除去圖片元素不就可以了麼。通過查閱資料，我找到了以下內容：

Because of the memory available on an iPad or iPhone, Mobile Safari has much stricter resource limits than most desktop browsers.
One of these limits is the total amount of image data that can be loaded on a single HTML page. When Mobile Safari has loaded between 8 to 10 MB of image data it will simply stop displaying any more images. It might even crash.
This limit doesn’t affect most websites since it’s generally a good idea to keep web pages reasonably small.
However, you can get in trouble with big image galleries and slideshows or with web applications that load new data asynchronously, for example to enable smooth ‘native’ transitions between different sections (yes, you can do those Flipboard transitions with Mobile Safari).

也就是爲了處理 iphone 與 Ipad 下大圖片不能正常處理，且刪除之後其實內容還是存在於內存中，沒有真正的刪除而進行的操作。

參考文章：https://www.fngtps.com/2010/mobile-safari-image-resource-limit-workaround/