使用FileReader.readAsArrayBuffer()在浏览器中处理大文件

小渣渣

HTML5的FileReader API可以让客户端浏览器对用户本地文件进行读取，这样就不再需要上传文件由服务器进行读取了，这大大减轻了服务器的负担，也节省了上传文件所需要的时间。不过在实践中我发现用FileReader.readAsText()可以轻易地处理一个300k的日志文件，但当日志文件有1G、甚至2G那么大，浏览器就会崩溃。这是因为readAsText()会一下子把目标文件加载至内存，导致内存超出上限。所以如果Web应用常常需要处理大文件时，我们应该使用FileReader.readAsArrayBuffer()来一块一块读取文件。

测试场景

我们的场景很简单，就是使用JavaScript来获取某个IIS日志的时间范围

样例IIS日志：

#Software: Microsoft Internet Information Services 10.0
#Version: 1.0
#Date: 2016-08-18 06:53:55
#Fields: date time s-ip cs-method cs-uri-stem cs-uri-query s-port cs-username c-ip cs(User-Agent) cs(Referer) sc-status sc-substatus sc-win32-status time-taken
2016-08-18 06:53:55 ::1 GET / - 80 - ::1 Mozilla/5.0+(Windows+NT+10.0;+WOW64;+Trident/7.0;+rv:11.0)+like+Gecko - 200 0 0 476
2016-08-18 06:53:55 ::1 GET /iisstart.png - 80 - ::1 Mozilla/5.0+(Windows+NT+10.0;+WOW64;+Trident/7.0;+rv:11.0)+like+Gecko http://localhost/ 200 0 0 3
2016-08-18 08:45:34 10.172.19.198 GET /test/pac/wpad.dat - 80 - 10.157.21.235 Mozilla/5.0+(Windows+NT+6.1;+Win64;+x64;+Trident/7.0;+rv:11.0)+like+Gecko - 404 3 50 265
2016-08-18 08:46:44 10.172.19.198 GET /test/pac/wpad.dat - 80 - 10.157.21.235 Mozilla/5.0+(Windows+NT+6.1;+Win64;+x64;+Trident/7.0;+rv:11.0)+like+Gecko - 200 0 0 6

我们的目标就是获取该段日志的时间范围：

开始时间：2016-08-18 06:53:55
结束时间：2016-08-18 08:46:44

使用readAsText()的实现

使用readAsText()实现是比较简单的，得到整个文件的字符串后，从头获取每一行的前19个字符，判断是否满足日期的格式，如果满足那么这19个字符就是开始时间，同理从尾部遍历每一行来获取结束时间，代码如下：

登录可见。

样例IIS日志（大小：1k）的运行结果符合我们的预期。



可是一旦我们选择了一个较大的IIS日志（大小：2G），浏览器就崩溃了。原因就是readAsText()会先把整个文件加载到内存中，那么如果文件太大，内存就不够用了，浏览器进程就会崩溃。


使用readAsArrayBuffer()的实现

由于JavaScript中的File对象继承自Blob，所以我们完全可以用Blob.slice()方法将文件切成小块来处理，大致思路是：

先取文件的前10k内容，转换成文本
从头获取每一行的前19个字符，判断是否满足日期的格式，如果满足那么这19个字符就是开始时间
再取文件尾部的10k内容，转换成文本
同理从尾部内容遍历每一行来获取结束时间

代码如下：

登录可见。

使用了readAsArrayBuffer()后，即使是2G多的IIS日志，我们也能在很短的时间内获得我们想要的结果。

小渣渣

登录可见。

haowanxing

学习和借鉴一下楼主的方法