成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

【譯】怎樣處理 Safari 移動(dòng)端對(duì)圖片資源的限制

Astrian / 1052人閱讀

摘要：可能部分限制已經(jīng)不再適用。當(dāng)移動(dòng)端的瀏覽器加載了到的圖片數(shù)據(jù)后，就會(huì)停止加載其他圖片，甚至瀏覽器還會(huì)崩潰。大多數(shù)網(wǎng)站都不會(huì)受到這條限制的影響，因?yàn)楸３猪?yè)面合理的大小通常是一種很聰明的做法。替換掉屬性后，舊的圖片數(shù)據(jù)最終得到了釋放。

原文作者：Thijs van der Vossen

本文翻譯自《How to work around the Mobile Safari image resource limit》，原文寫(xiě)于2010年10月25日。可能部分限制已經(jīng)不再適用。

翻譯本文的目的是作為《讀Zepto源碼之a(chǎn)ssets模塊》的附文，讀Zepto源碼系列文章已經(jīng)放到了github上，歡迎star: reading-zepto

正文開(kāi)始：

受限于 Ipad 和 Iphone 的可用內(nèi)存，Safari 瀏覽器的移動(dòng)端會(huì)比桌面端有著更嚴(yán)格的資源使用限制

其中之一是每個(gè) HTML 頁(yè)面的圖片數(shù)據(jù)總量。當(dāng)移動(dòng)端的 Safari 瀏覽器加載了 8 到 10MB 的圖片數(shù)據(jù)后，就會(huì)停止加載其他圖片，甚至瀏覽器還會(huì)崩潰。

大多數(shù)網(wǎng)站都不會(huì)受到這條限制的影響，因?yàn)楸３猪?yè)面合理的大小通常是一種很聰明的做法。

但是，在下面的場(chǎng)景中，你可能會(huì)遇到麻煩，如大型的圖片畫(huà)廊和幻燈片，或者是異步加載新數(shù)據(jù)的 web 應(yīng)用，例如模擬不同版塊切換時(shí)的原生動(dòng)畫(huà)（是的，你可以用移動(dòng)端 Safari 模擬 Flipboard 的切換效果 ）。

我們有充足的理由相信，只通過(guò)刪除不再需要的圖片元素，就可以不受這條限制的影響：

var img = document.getElementById("previous");
img.parentNode.removeChild(img);

但是然并卵，因?yàn)槟承┰颍瑢D片從 DOM （或者一個(gè)包含圖片的元素）中刪除時(shí)，圖片的真實(shí)數(shù)據(jù)并沒(méi)有釋放。真是頭大??！

而將圖片的 src 屬性設(shè)置為其他的（更小的）圖片鏈接，卻起到了作用。

var img = document.getElementById("previous");
img.src = "images/empty.gif";

替換掉 src 屬性后，舊的圖片數(shù)據(jù)最終得到了釋放。

我已經(jīng)徹底測(cè)試過(guò)這種方法，下面幾個(gè)方面是需要注意的：

將 src 屬性設(shè)置為其他圖片后，圖片數(shù)據(jù)不會(huì)立即釋放，需要一段時(shí)間讓垃圾回收器來(lái)真正地釋放內(nèi)存。這意味著，如果你太塊地插入圖片，依舊可能會(huì)陷入麻煩中。

在移動(dòng)端 Safari 觸發(fā)限制后，即便刪除一部分或者全部已經(jīng)加載的數(shù)據(jù)，Safari 也不會(huì)再加載額外的圖片，這種情況即便在切換到其他頁(yè)面時(shí)也繼續(xù)存在。這意味著在測(cè)試這項(xiàng)技術(shù)時(shí)，你需要經(jīng)常重啟 Safari（這差點(diǎn)把我逼瘋了）。

如果你想將圖片元素從 DOM 中刪除，你還必須確保在更改 src 前，元素不能為垃圾回收掉，否則，舊圖片數(shù)據(jù)不會(huì)被釋放。下面這個(gè)是最好的解決方案：

var img = document.getElementById("previous");
img.parentNode.removeChild(img);
img.src = "data:image/gif;base64," + 
      "R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=";
window.timeout(function() {
img = null;
}, 60000);

你可以看到，我使用了 data URI 作為替換圖片。

（如果你只是刪除圖片元素， iPad 在加載8張圖片后會(huì)停止繼續(xù)加載，如果用 Zepto 的 assets 插件，會(huì)持續(xù)加載。）

在上周我和 Thomas Fuchs 解釋了這項(xiàng)技術(shù)后，他立即將它加入了 Zepto 中。這個(gè)周末，我貢獻(xiàn)了一個(gè)測(cè)試函數(shù)，你可以自己用它來(lái)測(cè)試下。

最后，所有文章都會(huì)同步發(fā)送到微信公眾號(hào)上，歡迎關(guān)注,歡迎提意見(jiàn)：

譯者：對(duì)角另一面

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/88515.html

相關(guān)文章

  • 2017-09-11 前端日?qǐng)?bào)

    摘要：前端日?qǐng)?bào)精選使用實(shí)現(xiàn)和交互的彈幕效果類型檢測(cè)理解的閉包深入理解之代理和反射，和它們?cè)谥械膬?yōu)先級(jí)中文譯區(qū)塊鏈?zhǔn)侨绾喂ぷ鞯挠醚菔局鯇谧g怎樣處理移動(dòng)端對(duì)圖片資源的限制掘金技術(shù)周刊的正則表達(dá)式掘金開(kāi)發(fā)環(huán)境搭建掘金與復(fù)雜業(yè)務(wù)組件的 2017-09-11 前端日?qǐng)?bào) 精選 使用canvas實(shí)現(xiàn)和HTML5 video交互的彈幕效果【JS】類型檢測(cè)理解 JavaScript 的閉包深入理解ES6...

    antyiwei 評(píng)論0 收藏0

  • 讀Zepto源碼之Stack模塊

    摘要：讀源碼系列文章已經(jīng)放到了上，歡迎源碼版本本文閱讀的源碼為改寫(xiě)原有的方法模塊改寫(xiě)了以上這些方法，這些方法在調(diào)用的時(shí)候，會(huì)為返回的結(jié)果添加的屬性，用來(lái)保存原來(lái)的集合。方法的分析可以看讀源碼之模塊。 Stack 模塊為 Zepto 添加了 addSelf 和 end 方法。 讀 Zepto 源碼系列文章已經(jīng)放到了github上，歡迎star: reading-zepto 源碼版本 本文閱讀的...

    crossea 評(píng)論0 收藏0

  • 讀Zepto源碼之a(chǎn)ssets模塊

    摘要：模塊是為解決移動(dòng)版加載圖片過(guò)大過(guò)多時(shí)崩潰的問(wèn)題。因?yàn)闆](méi)有處理過(guò)這樣的場(chǎng)景，所以這部分的代碼解釋不會(huì)太多，為了說(shuō)明這個(gè)問(wèn)題，我翻譯了這篇文章作為附文怎樣處理移動(dòng)端對(duì)圖片資源的限制，更詳細(xì)地解釋了這個(gè)模塊的應(yīng)用場(chǎng)景。 assets 模塊是為解決 Safari 移動(dòng)版加載圖片過(guò)大過(guò)多時(shí)崩潰的問(wèn)題。因?yàn)闆](méi)有處理過(guò)這樣的場(chǎng)景，所以這部分的代碼解釋不會(huì)太多，為了說(shuō)明這個(gè)問(wèn)題，我翻譯了《How to...

    thursday 評(píng)論0 收藏0

  • 讀Zepto源碼之Form模塊

    摘要：模塊處理的是表單提交。表單提交包含兩部分，一部分是格式化表單數(shù)據(jù)，另一部分是觸發(fā)事件，提交表單。最終返回的結(jié)果是一個(gè)數(shù)組，每個(gè)數(shù)組項(xiàng)為包含和屬性的對(duì)象。否則手動(dòng)綁定事件，如果沒(méi)有阻止瀏覽器的默認(rèn)事件，則在第一個(gè)表單上觸發(fā)，提交表單。 Form 模塊處理的是表單提交。表單提交包含兩部分，一部分是格式化表單數(shù)據(jù)，另一部分是觸發(fā) submit 事件，提交表單。 讀 Zepto 源碼系列文章已...

    陳江龍 評(píng)論0 收藏0

  • 讀Zepto源碼之IOS3模塊

    摘要：用法與參數(shù)要理解這段代碼，先來(lái)看一下的用法和參數(shù)用法參數(shù)回調(diào)函數(shù)，有如下參數(shù)上一個(gè)回調(diào)函數(shù)返回的值或者是初始值當(dāng)前值當(dāng)前值在數(shù)組中的索引調(diào)用的數(shù)組初始值，如果沒(méi)有提供，則為數(shù)組的第一項(xiàng)。接下來(lái)，檢測(cè)回調(diào)函數(shù)是否為，如果不是，拋出類型錯(cuò)誤。 IOS3 模塊是針對(duì) IOS 的兼容模塊，實(shí)現(xiàn)了兩個(gè)常用方法的兼容，這兩個(gè)方法分別是 trim 和 reduce 。 讀 Zepto 源碼系列文章...

    lavnFan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<