在web上逐行输出较大的txt文件

时间：2022-05-08 11:48:56

在某些场景下，需要在web上展示一些日志文件，这些日志文件是放在文件服务器上的一些txt。

当日志文件很大时，下载日志会导致页面长时间卡住，一直在loading状态，而且下载完日志之后分析日志并生成dom，瞬间大量的dom渲染可能导致页面崩溃。

于是想着优化一下日志的输出方式，开始下载即在页面上一行一行打印日志，就像一些IDE中输出程序的编译过程一样。

最终实现的方法如下：

在下载文件的时候，让请求过一层代理，代理写输出流的时候分段输出：

​

int l;

        byte[] buffer = new byte[100];

        string llength = "";

        int lsum = 0;

        do

        {

            l = proxyResponseStream.Read(buffer, 0, buffer.Length);

            llength += "," + l;

            lsum += l;

            if (l > 0)

            {

                context.Response.Write(System.Text.Encoding.UTF8.GetString(buffer, 0, l));

                context.Response.Flush();

            }

        }

        while (l > 0);

        context.Response.End();

客户端请求：

var xhr = new XMLHttpRequest();

xhr.open('GET', url, true);

xhr.onreadystatechange = function (e) {

                if (this.readyState == 3) {

                    //alert(1);

                    var newload = e.target.responseText.slice(logs[type].length);

                    var newloadLogs = newload.split('\n');

                    newloadLogs.forEach(function (line, index) {

                        if (index == newloadLogs.length - 1) return;

                        logs[type] += line + '\n';

                        $("#" + type).append("<p class='logline " + getLogType(line) + "'>" + line + "</p>");

                        document.body.scrollTop = document.body.scrollHeight;

                    });

                }

            };

            xhr.onload = function () {

                if (callback) callback();

            }

            xhr.send();
onreadystatechange

response多次输出值时，readystate一直是3，onreadystatechange事件可以被多次触发,。

这样确实可以实现上面所说，无需等待直接开始逐行打印日志。

但是在实现的过程中发现了这样一些问题：

1.response对象在向客户端写输出流的时候，自己也是有设置一个类似buffer的东西的，只不过这个buffer尺寸很大，对于一般的txt，就算捕获了readystatechange事件，也感觉不出来是在分段输出。当buffer的尺寸被手动设小，满了直接flush的时候，就可以看到日志一小段一小段的打印出来了。不幸的是，这样会大大降低文件被下载的速度，并且占用大量系统资源，失去了优化日志展现的初衷。

2.response在一段一段输出文件内容的时候，在readystatechange事件中并不能获得每一段输出的值，而是把新输出的内容不断往已输出内容后边append。这样要一段一段解析dom，就需要不断的去记录位置、截取字符串，这样对浏览器来说是一个巨大的消耗。

3.我拿一个30M大小的txt在本机上测试，开始输出日志后CPU占用瞬间到90%，输出大约一半后浏览器崩溃...

所以最终得出的结论是：这种方式只能作为日志文件不大的情况下，对交互体验的一种优化，且需要消耗大量系统资源。浏览器中不适合直接展示比较大的txt，它长时间的下载等待以及对浏览器造成的巨大压力是无法优化的，要么分段查看，要么下载后查看或者对其作分析后展现结果。

相关文章