在某些场景下，需要在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，它长时间的下载等待以及对浏览器造成的巨大压力是无法优化的，要么分段查看，要么下载后查看或者对其作分析后展现结果。