javascript FileReader 与 window.URL.createObjectURL
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31742072/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
FileReader vs. window.URL.createObjectURL
提问by nightlyop
I'm building a mobile website and I'd like to use the Camera API to take photos. The images should be displayed on the website and uploaded to a server. According to the introduction to the Camera API on MDNthe images can be accessed and displayed on the website using FileReaderor window.URL.createObjectURL. I testedthese possible solutions successfully with an iPad (Safari and Chrome) and an Android tablet (Chrome and Firefox).
我正在构建一个移动网站，我想使用相机 API 来拍照。图像应显示在网站上并上传到服务器。根据MDN 上 Camera API的介绍，可以使用FileReader或访问图像并在网站上显示window.URL.createObjectURL。我使用 iPad（Safari 和 Chrome）和 Android 平板电脑（Chrome 和 Firefox）成功测试了这些可能的解决方案。
What is the difference between FileReaderand window.URL.createObjectURL? I think window.URL.createObjectURLis newer but not a standard yet. Is there a difference in the performance?
FileReader和 和有什么不一样window.URL.createObjectURL？我认为window.URL.createObjectURL是较新的，但还不是标准。性能上有区别吗？
回答by Alex Nikulin
There is difference.
有区别。
1) time
1次
createObjectURLis synchronously executed (immediately)FileReader.readAsDataURLis asynchronously executed (after some time)
createObjectURL同步执行（立即）FileReader.readAsDataURL异步执行（一段时间后）
2) memory usage
2）内存使用
createObjectURLreturns url with hash, and store object in memory until document triggers unload event (e.g. document close) or executerevokeObjectURLFileReader.readAsDataURLreturnsbase64that contains many characters, and use more memory than blob url, but removes from memory when you don't use it (by garbage collector)
createObjectURL返回带有哈希值的 url，并将对象存储在内存中，直到文档触发卸载事件（例如文档关闭）或执行revokeObjectURLFileReader.readAsDataURL返回base64包含许多字符，并使用比 blob url 更多的内存，但在您不使用它时从内存中删除（通过垃圾收集器）
3) support
3）支持
createObjectURLfrom IE 10 and all modern browsersFileReader.readAsDataURLfrom IE 10 and all modern browsersFrom me, is better to use blob url's (via
createObjectURL), it is more efficient and faster, but if you use many object urls, you need to release these urls byrevokeObjectURL(to free memory). For example, you can call URL.revokeObjectURL inside an Image onload handler and the Image object will keep the image data, without losing it, Nahuel Greco (c).
createObjectURL来自 IE 10 和所有现代浏览器FileReader.readAsDataURL来自 IE 10 和所有现代浏览器在我看来，使用 blob url 的 (via
createObjectURL) 更好，效率更高，速度更快，但是如果您使用许多对象 url，则需要通过revokeObjectURL(以释放内存)释放这些 url。 例如，您可以在 Image onload 处理程序中调用 URL.revokeObjectURL，Image 对象将保留图像数据，而不会丢失它，Nahuel Greco (c)。
