5

从ansi_up到xterm提升了几十倍性能

 9 months ago
source link: https://blog.ops-coffee.cn/s/ansi-up-js-to-xterm-js-performance
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

从ansi_up到xterm提升了几十倍性能

无论是任务系统还是作业系统都会去执行linux命令或脚本，命令或脚本的输出也会实时展示在Web页面上，在终端中执行命令或脚本可以输出颜色，主要是因为这些有颜色的文字周围包含了颜色相关的ANSI码，例如：\033[31m运维咖啡吧\033[0m

20231206.01.png

如何在Web页面上输出时同样展示颜色呢，这里我用到了ansi_up.js，ansi_up是一个简单易用的Javascript库，可将包含ANSI颜色转义码的文本转换为HTML。纯前端插件使用起来确实简单，只依赖一个js文件，示例代码如下：

<script src="../ansi_up.js" type="text/javascript"></script>
<script type="text/javascript">
  var ansi_up = new AnsiUp;

  var string  = "\033[35m 运维咖啡吧 \033[0m"
  var html = ansi_up.ansi_to_html(string);

  $('#J_details').append(html);
</script>

这么使用一直没有问题，直到刚刚，小伙伴跟我说，执行了一个作业，日志输出到一半开始报错，之后前端页面直接卡死无法使用，简单排查就定位到了问题，这个作业是去一组主机上过滤日志文件输出错误日志，错误日志太多执行结果较大，不过也就2MB，ansi_up性能有限已经无法渲染，问题定位到了，如何解决

我先是查了ansi_up的文档，没有找到解决的方案，然后问了最懂程序员的AI搜索引擎，他给了我答案

20231206.02.png

修复ansi_up.js这个难度太大，Jupyter这个也不懂，但是xterm.js我熟啊，之前在做webssh项目时就是通过xterm.js来实现前后端的实时交互的。xterm是一个专业的前端终端组件，可以直接在浏览器中实现一个命令行终端应用，功能强大、配置复杂，但基本使用较为简单，示例代码如下：

<html>
  <head>
    <link href="/static/plugins/xterm/xterm.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="terminal"></div>

    <script src="/static/plugins/xterm/xterm.js"></script>
    <script>
      var term = new Terminal();
      term.open(document.getElementById('terminal'));
      term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
    </script>
  </body>
</html>

通过term.write写数据，实际测试下来，一次性60MB的数据也能正常渲染，几十倍的性能提升，是真的强大。虽然这个问题解决了，渲染恢复了正常，但发现了更为问题，作业执行过程中日志是先写入缓存的，日志输出太大会导致缓存被占满从而进程OOM，同时日志展示也不会分页，一次请求占用几十上百MB的内存，很快就导致系统OOM

日志输出太多实际上就失去了意义，根本也看不过来，由于大量的数据传输，前端体验也会变差，还提升了系统OOM的风险，限制日志输出大小似乎成了最好的解决方式，说干就干，代码比较简单

# 输出日志超过2M则强制结束
if len(old_log) > 2 * 1024 * 1024 or len(new_log) > 2 * 1024 * 1024:
    details = '输出日志超大，当前作业已被系统强制结束'

判断下当前的日志记录大小以及新产生的日志大小是否超过2MB，如果超过则直接终止作业，同时提示用户调整

20231206.03.png

至此问题才算完全解决。我不禁在想，我们都喜欢自由，不设限制，但有些时候受限才是为了更自由

能看到这里一定是真爱，关注一下吧

wx.sou1.png

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK