ansi-to-html Performance issue because of lots of nested layers

Use the example on readme:

var Convert = require('ansi-to-html');
var convert = new Convert();

convert.toHtml('\x1b[30mblack\x1b[37mwhite');

this will generated a html structure like this:

<span>
  black
  <span>
    white
  </span>
</span>

But I think it's better to generate a html like this:

<span>
  black
</span>
<span>
  white
</span>

Lots of unnecessary nested layers will slow down the browser. Another package ansi-html doesn't have this problem.

May 06 '20 07:05 mapleeit

Could place this file to the root and execute.

"use strict";

const fs = require("fs");
const Convert = require("./lib/ansi_to_html");

const convert = new Convert();

let content = "";

for (let i = 0; i < 10000; i++) {
    content += '\x1b[30mblack\x1b[37mwhite\r\n\r\n';
}

fs.writeFileSync("./bench.html", `
<html>
    <body>
        ${convert.toHtml(content)}
    </body>
</html>
`);

And will get a html file bench.html. Open it with a browser and will see the terrible performance

May 12 '20 12:05 mapleeit

thanks for writing a test for that. There have been pending changes that I thought might make that kind of problem worse, but have just been speculating. https://github.com/rburns/ansi-to-html/issues/53#issuecomment-481477089 https://github.com/rburns/ansi-to-html/issues/59#issuecomment-618785490

Aug 26 '20 07:08 rburns

If you want to be more faithful to how ANSI works, e.g., so as to use the "undo"-type commands to undo a previous style if applied, you really have to use nesting. (And to support text-decoration, specifically, switching to <a> as per #75 should be necessary also.)

However, you might be able to find an HTML/CSS cleaner which optimizes the final result to potentially avoid some redundancy. A quick search of npm though didn't turn up useful results for me.

Aug 26 '20 07:08 brettz9

If you want to be more faithful to how ANSI works, e.g., so as to use the "undo"-type commands to undo a previous style if applied, you really have to use nesting.

you could also just close the tag of the previous applied style to 'undo' it. Text decoration might require nesting, depending on how you want to solve it, but not to billions of layers. Some additional logic could just close the previous tag, figure out the combined style of the next section and open a new tag

Oct 21 '20 07:10 TimoHocker

ansi-to-html ansi-to-html copied to clipboard

Performance issue because of lots of nested layers

ansi-to-html
ansi-to-html copied to clipboard