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

在web上逐行输出较大的txt文件的更多相关文章

  1. java合并一个文件夹下所有txt文件,输出到另一个txt

    最近写了个单元测试,递归调用方法,把同一个文件夹里所有的txt合并输出到一个txt文件.参考了两个博客,分别是已有的方法,还有个就是检测txt文件所用编码的技术贴.如果不检测txt文件的编码,那么转换 ...

  2. 将Java和Javac的命令在控制台的输出重定向到txt文件

    当我们在Windows控制台窗口执行程序时,输入如下命令: demo.exe > out.txt 就可以把demo程序的输出重定向到out.txt文件里面. 但是这种方法对于java和javac ...

  3. WEB上传大文件解决方案

    众所皆知,web上传大文件,一直是一个痛.上传文件大小限制,页面响应时间超时.这些都是web开发所必须直面的. 本文给出的解决方案是:前端实现数据流分片长传,后面接收完毕后合并文件的思路.下面贴出简易 ...

  4. WEB上传大文件

    众所皆知,web上传大文件,一直是一个痛.上传文件大小限制,页面响应时间超时.这些都是web开发所必须直面的. 本文给出的解决方案是:前端实现数据流分片长传,后面接收完毕后合并文件的思路.下面贴出简易 ...

  5. web上传大文件(>4G)有什么解决方案?

    众所皆知,web上传大文件,一直是一个痛.上传文件大小限制,页面响应时间超时.这些都是web开发所必须直面的. 本文给出的解决方案是:前端实现数据流分片长传,后面接收完毕后合并文件的思路. 实现文件夹 ...

  6. java web(四):request、response一些用法和文件的上传和下载

    上一篇讲了ServletContent.ServletCOnfig.HTTPSession.request.response几个对象的生命周期.作用范围和一些用法.今天通过一个小项目运用这些知识.简单 ...

  7. Web上传文件的原理及实现

    现在有很多Web程序都有上传功能,实现上传功能的组件或框架也很多,如基于java的Commons FileUpload.还有Struts1.x和Struts2中带的上传文件功能(实际上,Struts2 ...

  8. Web上传超大文件解决方案

    文件上传下载,与传统的方式不同,这里能够上传和下载10G以上的文件.而且支持断点续传. 通常情况下,我们在网站上面下载的时候都是单个文件下载,但是在实际的业务场景中,我们经常会遇到客户需要批量下载的场 ...

  9. web前端之HTML的大框架(body元素与frameset元素)

    web前端之HTML的大框架      body元素与frameset元素 对于从事html的人员来说,我们一般熟悉的框架是先声明html ,然后在<html>标签对里包着<head ...

随机推荐

  1. HDU 3584 Cube (三维 树状数组)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3584 Cube Problem Description Given an N*N*N cube A,  ...

  2. @Autowired

    1. Spring框架中进行注入式,使用@Autowired. @Autowired可以对成员变量.方法和构造函数进行标注,来完成自动装配的工作,这里必须明确:@Autowired是根据类型进行自动装 ...

  3. SQL 查找重复项及批量修改数据成固定格式

    1.查找表中多余的重复记录,重复记录是根据单个字段(peopleId)来判断select * from peoplewhere peopleId in (select   peopleId  from ...

  4. iOS判断对象相等 重写isEqual、isEqualToClass、hash

    相等的概念是探究哲学和数学的核心,并且对道德.公正和公共政策的问题有着深远的影响. 从一个经验主义者的角度来看,两个物体不能依据一些观测标准中分辨出来,它们就是相等的.在人文方面,平等主义者认为相等意 ...

  5. 解决 adb.exe 停止工作小续

    继adb 停止工作的问题之后,又碰见了adb 停止工作的问题. 在使用adb install app.apk 之后给出错误信息如下: * daemon not running. starting it ...

  6. 9.30notes

    memcached   缓存机制,减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度. array_slice(data['list'],0,10) ...

  7. Session 、Application 和 HttpContext 的使用区别

    在ASP.NET WEB页面开发中,经常会需要保存一些信息,以便在不同的页面或时间段都能够访问到.这其中便会用到Session和Application. Session .Application 和 ...

  8. IRP完成例程返回值理解

    第一,完成例程里面直接返回STATUS_SUCCESS,这时候IRP已经继续向上回卷,失去了对IRP的控制. 第二,完成例程里面返回STATUS_MORE_PROCESSING_REQUIRED,仍具 ...

  9. Python黑帽编程 3.5 DTP攻击

    Python黑帽编程 3.5 DTP攻击 在上一节,<Python黑帽编程 3.4 跨越VLAN>中,我们讨论了一般的VLAN中实施攻击的方法,这一节属于扩展内容,简单演示下Cisco特有 ...

  10. 剑指Offer面试题:33.二叉树的深度

    一.题目一:二叉树的深度 1.1 题目说明 题目一:输入一棵二叉树的根结点,求该树的深度.从根结点到叶结点依次经过的结点(含根.叶结点)形成树的一条路径,最长路径的长度为树的深度.例如下图中的二叉树的 ...