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

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

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

最终实现的方法如下:

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

  1. int l;
  2. byte[] buffer = new byte[100];
  3. string llength = "";
  4. int lsum = 0;
  5. do
  6. {
  7. l = proxyResponseStream.Read(buffer, 0, buffer.Length);
  8. llength += "," + l;
  9. lsum += l;
  10. if (l > 0)
  11. {
  12. context.Response.Write(System.Text.Encoding.UTF8.GetString(buffer, 0, l));
  13. context.Response.Flush();
  14. }
  15. }
  16. while (l > 0);
  17. context.Response.End();

客户端请求:

  1. var xhr = new XMLHttpRequest();
  2. xhr.open('GET', url, true);
  3. xhr.onreadystatechange = function (e) {
  4. if (this.readyState == 3) {
  5. //alert(1);
  6. var newload = e.target.responseText.slice(logs[type].length);
  7. var newloadLogs = newload.split('\n');
  8. newloadLogs.forEach(function (line, index) {
  9. if (index == newloadLogs.length - 1) return;
  10. logs[type] += line + '\n';
  11. $("#" + type).append("<p class='logline " + getLogType(line) + "'>" + line + "</p>");
  12. document.body.scrollTop = document.body.scrollHeight;
  13. });
  14. }
  15. };
  16. xhr.onload = function () {
  17. if (callback) callback();
  18. }
  19. xhr.send();
  1. 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. c和oc小知识

    1.const const 修饰了*p1 / *p2 const int * p1=&age; int const * p2=&age;//和上面的意义一样 ,换句话说就是 在 “ * ...

  2. python面试总结

    1.python的优势 1.1 python是一门胶水语言,能够结合各种语言 1.2 python是支持面向对象编程 1.3 python是完全开放源代码,有大量的技术支持文档, 1.4 可移植,py ...

  3. MSSQL数据库表加锁

    所指定的表级锁定提示有如下几种: 1. HOLDLOCK: 在该表上保持共享锁,直到整个事务结束,而不是在语句执行完立即释放所添加的锁. 2. NOLOCK:不添加共享锁和排它锁,当这个选项生效后,可 ...

  4. Learning Play! 2.4

    1) Activator Download typesafe-activator-1.3.5.zip, extract, set path 2) Create new project activato ...

  5. Android 怎么退出整个应用程序?

    方法一: 我们在写android应用程序时,经常会遇到想退出当前Acitivity,或者直接退出应用程序.我之前的一般操作是按返回键,或者直接按home键直接返回,其实这两种操作都没有关闭当前应用程序 ...

  6. 对Java数组中去除重复项程序分析

    我作为一个Java菜鸟,只会用简单的办法来处理这个问题.如果有大神看到,请略过,感激不尽! 所以首先先分析这道题目:数组中重复的数据进行删除,并且要让数组里的数据按原来的顺序排列,中间不能留空. 既然 ...

  7. js将数字转成大写中文

    <script type="text/javascript"> //主函数 function DX(n) { if (!/^(0|[1-9]\d*)(\.\d+)?$/ ...

  8. (翻译)《Hands-on Node.js》—— Why?

    事出有因 为何选择event loop? Event Loop是一种推进无阻塞I/O(网络.文件或跨进程通讯)的软件模式.传统的阻塞编程也是用一样的方式,通过function来调用I/O.但进程会在该 ...

  9. ASP.Net MVC3 图片上传详解(form.js,bootstrap)

    图片上传的插件很多,但很多时候还是不能切合我们的需求,我这里给大家分享个我用一个form,file实现上传四张图片的小demo.完全是用jquery前后交互,没有用插件. 最终效果图如下: 玩过花田人 ...

  10. ASP.NET MVC学前篇之Lambda表达式、依赖倒置

    ASP.NET MVC学前篇之Lambda表达式.依赖倒置 前言 随着上篇文章的阅读,可能有的朋友会有疑问,比如(A.Method(xxx=>xx>yy);)类似于这样的函数调用语句,里面 ...