在某些场景下,需要在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. FastDateFormat

    1 public static final FastDateFormat ISO_DATE_FORMAT = FastDateFormat.getInstance("yyyy-MM-dd&q ...

  2. ubuntu16.04 install flash

    今天安装了一下flash,发现不同版本的Ubuntu复制的位置不同,此处介绍Ubuntu16.04的安装方式 1.首先下载flash,下载tar.gz的 2.解压缩到当前目录 3,打开terminal ...

  3. mac安装虚拟机

    1. 安装VirtualBox 2. 新建,按照步骤一步步选择 3.安装系统镜像 xp_sp3_74070.iso CN_WIN7_SP1_X64_33in1_V1.2.iso 设置磁盘分区等 4.V ...

  4. iOS判断是模拟器还是真机

    #if TARGET_IPHONE_SIMULATOR //模拟器   #elif TARGET_OS_IPHONE //真机   #endif

  5. 移动前端不得不了解的html5 head 头标签

    本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head 头标签. 移动端的工作已经越来越成为前端工作的重要内容,除了平常的项目开发,HTML 头部标签功能,特别是meta标签 ...

  6. 有哪些LabVIEW快捷键让你相见恨晚

    前言 任何一门工具,当你使用它到极致的时候,往往都朝着这样子的两个方向发展 1. 具有鼠标操作功能的软件,他的使用的极致就是脱离鼠标,迈向键盘 2. 主要是键盘操作的,他的极致就是脚本自动化,或者说一 ...

  7. scrapy 和 scrapy_redis 安装

    安装sqlslte,scrapy需要这个模块 yum install sqlite-devel python3.5 下载包自己编译安装 ./configure make make install 自带 ...

  8. ant 自动化编译

    bulid.xml配置: <?xml version="1.0" encoding="UTF-8" ?> <project name=&quo ...

  9. 在excel worksheet中添加button 和对Excel workbook做权限控制相关的新知识

    添加button在worksheet中 1. Shapes Object (Excel) Reference:http://technet.microsoft.com/zh-cn/library/ff ...

  10. ABP理论学习之Abp Session

    返回总目录 本篇目录 介绍 注入Session 使用Session属性 介绍 当应用程序要求用户登录时,那么应用程序也需要知道当前用户正在执行的操作.虽然ASP.NET本身在展现层提供了Session ...