Skip to content

Instantly share code, notes, and snippets.

@frontenddeveloping

frontenddeveloping/index.html

Created May 29, 2014 06:23
Show Gist options
  • Save frontenddeveloping/062864e198949f373ad6 to your computer and use it in GitHub Desktop.
Save frontenddeveloping/062864e198949f373ad6 to your computer and use it in GitHub Desktop.
Download ZIP
FileReader.prototype.readAsArrayBuffer vs FileReader.prototype.readAsDataUrl
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>FileReader test</title>
</head>
<body>
<form action="">
<input type=file multiple accept="image/*"><br/>
<input type=submit value="Run test">
</form>
<div id="data-url-result"></div>
<div id="blob-result"></div>
<script src=test.js></script>
</body>
</html>
Raw
test.js
(function () {
if (!window.Promise || !window.URL || !window.FileReader || !window.Blob) {
return alert("There is not enought javascript support for run the tests");
}
document.addEventListener('DOMContentLoaded', function () {
var fileControl = document.querySelector('input[type=file]'),
testFormNode = document.querySelector('form'),
dataUrlResultNode = document.querySelector('#data-url-result'),
blobResultNode = document.querySelector('#blob-result');
function runBlobTests (filesArray) {
var promisesArray = [];
filesArray.forEach(function (file) {
var promise = new Promise(function (file, resolve, reject) {
var reader = new FileReader(),
startTime = Date.now();
reader.onload = function (resolve, startTime, e) {
var image = new Image(),
blob;
image.onload = function (resolve, startTime) {
URL.revokeObjectURL(this.src);
resolve(Date.now() - startTime);
}.bind(image, resolve, startTime);
blob = new Blob([e.target.result]);
image.src = URL.createObjectURL(blob);
}.bind(null, resolve, startTime);
reader.readAsArrayBuffer(file);
}.bind(null, file));
promisesArray.push(promise);
});
return Promise.all(promisesArray).then(function(values) {
var globalTestTime = 0;
values.forEach(function (value) {
globalTestTime += value;
});
blobResultNode.innerHTML = 'You browser spend ' + globalTestTime + ' ms for complete loading ' + values.length + ' images as a ArrayBuffer';
});
}
function runDataUrlTests (filesArray) {
var promisesArray = [];
filesArray.forEach(function (file) {
var promise = new Promise(function (file, resolve, reject) {
var reader = new FileReader(),
startTime = Date.now();
reader.onload = function (resolve, startTime, e) {
var image = new Image();
image.onload = function (resolve, startTime) {
URL.revokeObjectURL(this.src);
resolve(Date.now() - startTime);
}.bind(image, resolve, startTime);
image.src = e.target.result;
}.bind(null, resolve, startTime);
reader.readAsDataURL(file);
}.bind(null, file));
promisesArray.push(promise);
});
return Promise.all(promisesArray).then(function(values) {
var globalTestTime = 0;
values.forEach(function (value) {
globalTestTime += value;
});
dataUrlResultNode.innerHTML = 'You browser spend ' + globalTestTime + ' ms for complete loading ' + values.length + ' images as a DataUrl';
});
}
function runTests (files) {
var filesArray = [].slice.call(files);
if (!filesArray[0]) {
return alert("Please, select any files for tests...")
}
runDataUrlTests(filesArray).then(runBlobTests.bind(null, filesArray));
}
testFormNode.addEventListener('submit', function (e) {
e.preventDefault();
runTests(fileControl.files);
}, false);
}, false);
}());
@frontenddeveloping
Copy link
Author

This gist compare FileReader.prototype.readAsArrayBuffer vs FileReader.prototype.readAsDataUrl - which is faster to read,create and load images from input[type="file"]. Because FileReader API is async, I use javascript native Promises (Chrome, Firefox support) to control and render test time.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment