【译】怎样处理 Safari 移动端对图片资源的限制

Astrian 发布于2019-08-21 16:25 / 974人阅读

摘要：可能部分限制已经不再适用。当移动端的浏览器加载了到的图片数据后，就会停止加载其他图片，甚至浏览器还会崩溃。大多数网站都不会受到这条限制的影响，因为保持页面合理的大小通常是一种很聪明的做法。替换掉属性后，旧的图片数据最终得到了释放。

原文作者：Thijs van der Vossen

本文翻译自《How to work around the Mobile Safari image resource limit》，原文写于2010年10月25日。可能部分限制已经不再适用。

翻译本文的目的是作为《读Zepto源码之assets模块》的附文，读Zepto源码系列文章已经放到了github上，欢迎star: reading-zepto

正文开始：

受限于 Ipad 和 Iphone 的可用内存，Safari 浏览器的移动端会比桌面端有着更严格的资源使用限制

其中之一是每个 HTML 页面的图片数据总量。当移动端的 Safari 浏览器加载了 8 到 10MB 的图片数据后，就会停止加载其他图片，甚至浏览器还会崩溃。

大多数网站都不会受到这条限制的影响，因为保持页面合理的大小通常是一种很聪明的做法。

但是，在下面的场景中，你可能会遇到麻烦，如大型的图片画廊和幻灯片，或者是异步加载新数据的 web 应用，例如模拟不同版块切换时的原生动画（是的，你可以用移动端 Safari 模拟 Flipboard 的切换效果）。

我们有充足的理由相信，只通过删除不再需要的图片元素，就可以不受这条限制的影响：

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

但是然并卵，因为某些原因，将图片从 DOM （或者一个包含图片的元素）中删除时，图片的真实数据并没有释放。真是头大啊！

而将图片的 src 属性设置为其他的（更小的）图片链接，却起到了作用。

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

替换掉 src 属性后，旧的图片数据最终得到了释放。

我已经彻底测试过这种方法，下面几个方面是需要注意的：

将 src 属性设置为其他图片后，图片数据不会立即释放，需要一段时间让垃圾回收器来真正地释放内存。这意味着，如果你太块地插入图片，依旧可能会陷入麻烦中。

在移动端 Safari 触发限制后，即便删除一部分或者全部已经加载的数据，Safari 也不会再加载额外的图片，这种情况即便在切换到其他页面时也继续存在。这意味着在测试这项技术时，你需要经常重启 Safari（这差点把我逼疯了）。

如果你想将图片元素从 DOM 中删除，你还必须确保在更改 src 前，元素不能为垃圾回收掉，否则，旧图片数据不会被释放。下面这个是最好的解决方案：

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张图片后会停止继续加载，如果用 Zepto 的 assets 插件，会持续加载。）

在上周我和 Thomas Fuchs 解释了这项技术后，他立即将它加入了 Zepto 中。这个周末，我贡献了一个测试函数，你可以自己用它来测试下。

最后，所有文章都会同步发送到微信公众号上，欢迎关注,欢迎提意见：

译者：对角另一面

云服务器 GPU云服务器移动端对webRTC的支持情况移动safari是否支持webrtc 图片的颜色处理怎样在oss中使用带ip限制的访问控制

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88515.html

2017-09-11 前端日报

摘要：前端日报精选使用实现和交互的弹幕效果类型检测理解的闭包深入理解之代理和反射，和它们在之中的优先级中文译区块链是如何工作的用演示知乎专栏译怎样处理移动端对图片资源的限制掘金技术周刊的正则表达式掘金开发环境搭建掘金与复杂业务组件的 2017-09-11 前端日报精选使用canvas实现和HTML5 video交互的弹幕效果【JS】类型检测理解 JavaScript 的闭包深入理解ES6...

antyiwei 2019-08-21 16:25 评论0 收藏0
读Zepto源码之Stack模块

摘要：读源码系列文章已经放到了上，欢迎源码版本本文阅读的源码为改写原有的方法模块改写了以上这些方法，这些方法在调用的时候，会为返回的结果添加的属性，用来保存原来的集合。方法的分析可以看读源码之模块。 Stack 模块为 Zepto 添加了 addSelf 和 end 方法。读 Zepto 源码系列文章已经放到了github上，欢迎star: reading-zepto 源码版本本文阅读的...

crossea 2019-08-21 17:03 评论0 收藏0
读Zepto源码之assets模块

摘要：模块是为解决移动版加载图片过大过多时崩溃的问题。因为没有处理过这样的场景，所以这部分的代码解释不会太多，为了说明这个问题，我翻译了这篇文章作为附文怎样处理移动端对图片资源的限制，更详细地解释了这个模块的应用场景。 assets 模块是为解决 Safari 移动版加载图片过大过多时崩溃的问题。因为没有处理过这样的场景，所以这部分的代码解释不会太多，为了说明这个问题，我翻译了《How to...

thursday 2019-08-21 16:25 评论0 收藏0
读Zepto源码之Form模块

摘要：模块处理的是表单提交。表单提交包含两部分，一部分是格式化表单数据，另一部分是触发事件，提交表单。最终返回的结果是一个数组，每个数组项为包含和属性的对象。否则手动绑定事件，如果没有阻止浏览器的默认事件，则在第一个表单上触发，提交表单。 Form 模块处理的是表单提交。表单提交包含两部分，一部分是格式化表单数据，另一部分是触发 submit 事件，提交表单。读 Zepto 源码系列文章已...

陈江龙 2019-08-21 17:12 评论0 收藏0
读Zepto源码之IOS3模块

摘要：用法与参数要理解这段代码，先来看一下的用法和参数用法参数回调函数，有如下参数上一个回调函数返回的值或者是初始值当前值当前值在数组中的索引调用的数组初始值，如果没有提供，则为数组的第一项。接下来，检测回调函数是否为，如果不是，抛出类型错误。 IOS3 模块是针对 IOS 的兼容模块，实现了两个常用方法的兼容，这两个方法分别是 trim 和 reduce 。读 Zepto 源码系列文章...

lavnFan 2019-08-21 16:51 评论0 收藏0