在web上逐行输出较大的txt文件
在某些场景下,需要在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文件的更多相关文章
- java合并一个文件夹下所有txt文件,输出到另一个txt
最近写了个单元测试,递归调用方法,把同一个文件夹里所有的txt合并输出到一个txt文件.参考了两个博客,分别是已有的方法,还有个就是检测txt文件所用编码的技术贴.如果不检测txt文件的编码,那么转换 ...
- 将Java和Javac的命令在控制台的输出重定向到txt文件
当我们在Windows控制台窗口执行程序时,输入如下命令: demo.exe > out.txt 就可以把demo程序的输出重定向到out.txt文件里面. 但是这种方法对于java和javac ...
- WEB上传大文件解决方案
众所皆知,web上传大文件,一直是一个痛.上传文件大小限制,页面响应时间超时.这些都是web开发所必须直面的. 本文给出的解决方案是:前端实现数据流分片长传,后面接收完毕后合并文件的思路.下面贴出简易 ...
- WEB上传大文件
众所皆知,web上传大文件,一直是一个痛.上传文件大小限制,页面响应时间超时.这些都是web开发所必须直面的. 本文给出的解决方案是:前端实现数据流分片长传,后面接收完毕后合并文件的思路.下面贴出简易 ...
- web上传大文件(>4G)有什么解决方案?
众所皆知,web上传大文件,一直是一个痛.上传文件大小限制,页面响应时间超时.这些都是web开发所必须直面的. 本文给出的解决方案是:前端实现数据流分片长传,后面接收完毕后合并文件的思路. 实现文件夹 ...
- java web(四):request、response一些用法和文件的上传和下载
上一篇讲了ServletContent.ServletCOnfig.HTTPSession.request.response几个对象的生命周期.作用范围和一些用法.今天通过一个小项目运用这些知识.简单 ...
- Web上传文件的原理及实现
现在有很多Web程序都有上传功能,实现上传功能的组件或框架也很多,如基于java的Commons FileUpload.还有Struts1.x和Struts2中带的上传文件功能(实际上,Struts2 ...
- Web上传超大文件解决方案
文件上传下载,与传统的方式不同,这里能够上传和下载10G以上的文件.而且支持断点续传. 通常情况下,我们在网站上面下载的时候都是单个文件下载,但是在实际的业务场景中,我们经常会遇到客户需要批量下载的场 ...
- web前端之HTML的大框架(body元素与frameset元素)
web前端之HTML的大框架 body元素与frameset元素 对于从事html的人员来说,我们一般熟悉的框架是先声明html ,然后在<html>标签对里包着<head ...
随机推荐
- FastDateFormat
1 public static final FastDateFormat ISO_DATE_FORMAT = FastDateFormat.getInstance("yyyy-MM-dd&q ...
- ubuntu16.04 install flash
今天安装了一下flash,发现不同版本的Ubuntu复制的位置不同,此处介绍Ubuntu16.04的安装方式 1.首先下载flash,下载tar.gz的 2.解压缩到当前目录 3,打开terminal ...
- mac安装虚拟机
1. 安装VirtualBox 2. 新建,按照步骤一步步选择 3.安装系统镜像 xp_sp3_74070.iso CN_WIN7_SP1_X64_33in1_V1.2.iso 设置磁盘分区等 4.V ...
- iOS判断是模拟器还是真机
#if TARGET_IPHONE_SIMULATOR //模拟器 #elif TARGET_OS_IPHONE //真机 #endif
- 移动前端不得不了解的html5 head 头标签
本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head 头标签. 移动端的工作已经越来越成为前端工作的重要内容,除了平常的项目开发,HTML 头部标签功能,特别是meta标签 ...
- 有哪些LabVIEW快捷键让你相见恨晚
前言 任何一门工具,当你使用它到极致的时候,往往都朝着这样子的两个方向发展 1. 具有鼠标操作功能的软件,他的使用的极致就是脱离鼠标,迈向键盘 2. 主要是键盘操作的,他的极致就是脚本自动化,或者说一 ...
- scrapy 和 scrapy_redis 安装
安装sqlslte,scrapy需要这个模块 yum install sqlite-devel python3.5 下载包自己编译安装 ./configure make make install 自带 ...
- ant 自动化编译
bulid.xml配置: <?xml version="1.0" encoding="UTF-8" ?> <project name=&quo ...
- 在excel worksheet中添加button 和对Excel workbook做权限控制相关的新知识
添加button在worksheet中 1. Shapes Object (Excel) Reference:http://technet.microsoft.com/zh-cn/library/ff ...
- ABP理论学习之Abp Session
返回总目录 本篇目录 介绍 注入Session 使用Session属性 介绍 当应用程序要求用户登录时,那么应用程序也需要知道当前用户正在执行的操作.虽然ASP.NET本身在展现层提供了Session ...