Performance Issue: fromHtml is 10x Slower than hast-util-from-parse5

[zolero]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

hast-util-from-html

Link to runnable example

No response

Steps to reproduce

Set up a benchmark using src/parser.bench.ts.

Load html test: https://gist.github.com/zolero/6ecc0d238595b37fabb42cc86588998b

Run the benchmarks comparing hast-util-from-html and hast-util-from-parse5.
Observe the performance difference.

import path from "node:path";

import { fromHtml } from "hast-util-from-html";
import { fromParse5 } from "hast-util-from-parse5";
import { parse } from "parse5";
import { bench, describe } from "vitest";

describe("performance testing", () => {
    const html = fs.readFileSync(path.join(process.cwd(), `assets/html/real-world/bol-com.html`)).toString();
    bench("performance of HTML to HAST using hast-util-from-html", () => {
        fromHtml(html);
    });
    bench("performance of HTML to HAST using hast-util-from-parse5 + sourceCodeLocationInfo", () => {
        fromParse5(parse(html, { sourceCodeLocationInfo: true }));
    });
    bench("performance of HTML to HAST using hast-util-from-parse5 + w/o sourceCodeLocationInfo", () => {
        fromParse5(parse(html, { sourceCodeLocationInfo: false }));
    });
});

Expected behavior

I expected fromHtml to have similar or better performance compared to hast-util-from-parse5, considering both are intended to perform similar tasks.

Actual behavior

fromHtml is significantly slower than hast-util-from-parse5, which raises concerns about its efficiency in performance-critical applications.

Benchmark Results
Here are the results of my performance tests:

 ✓ src/parser.bench.ts (3) 5453ms
   ✓ performance testing (3) 5451ms
     name                                                                                       hz      min      max     mean      p75      p99     p995     p999     rme  samples   
   · performance of HTML to HAST using hast-util-from-html                                  4.5929   208.73   235.69   217.73   220.69   235.69   235.69   235.69  ±2.64%       10   slowest
   · performance of HTML to HAST using hast-util-from-parse5 + sourceCodeLocationInfo      23.1773  38.8248  49.1888  43.1457  44.3062  49.1888  49.1888  49.1888  ±4.92%       12   
   · performance of HTML to HAST using hast-util-from-parse5 + w/o sourceCodeLocationInfo  32.4982  25.4096  36.3745  30.7710  31.6351  36.3745  36.3745  36.3745  ±4.80%       17   fastest

Additional benchmark data:

 ✓ src/parser.bench.ts (3) 5510ms
   ✓ performance testing (3) 5508ms
     name                                                                                       hz      min      max     mean      p75      p99     p995     p999     rme  samples   
   · performance of HTML to HAST using hast-util-from-html                                  4.4994   211.85   247.17   222.25   221.88   247.17   247.17   247.17  ±3.59%       10   slowest
   · performance of HTML to HAST using hast-util-from-parse5 + sourceCodeLocationInfo      22.4136  41.9222  48.7456  44.6158  45.3911  48.7456  48.7456  48.7456  ±3.13%       12   
   · performance of HTML to HAST using hast-util-from-parse5 + w/o sourceCodeLocationInfo  32.9171  26.1313  35.0066  30.3794  31.1243  35.0066  35.0066  35.0066  ±3.47%       17   fastest

BENCH Summary
hast-util-from-parse5 + w/o sourceCodeLocationInfo is 1.47x faster than hast-util-from-parse5 + sourceCodeLocationInfo.
hast-util-from-parse5 + w/o sourceCodeLocationInfo is 7.32x faster than hast-util-from-html.

Affected runtime and version

v22.6.0

Affected package manager and version

1.22.22

Affected OS and version

Win 11

Build and bundle tools

Rollup

[wooorm]

Did you see the source?

https://github.com/syntax-tree/hast-util-from-html/blob/main/lib/index.js

I'm not sure what you're thinking. Like, source's pretty clear. You're probably turning some options on or off and profiling the difference?

[zolero]

Why be so rude wooorm, maybe it's time to move to Typescript and start having some proper type completions.

[zolero]

Did you see the source?

https://github.com/syntax-tree/hast-util-from-html/blob/main/lib/index.js

I'm not sure what you're thinking. Like, source's pretty clear. You're probably turning some options on or off and profiling the difference?

And I'm not sure what you're thinking since everything I did is described pretty clearly to me and easy to reproduce. It's actually 10 times slower, using parse5 ^7.1.2.

 ✓ src/ast/html/hast.bench.ts (3) 5274ms
   ✓ performance testing HTML to HAST (3) 5272ms
     name                                                                                       hz      min      max     mean      p75      p99     p995     p999     rme  samples
   · performance of HTML to HAST using hast-util-from-html                                  4.3773   215.06   276.67   228.45   236.65   276.67   276.67   276.67  ±5.84%       10   slowest
   · performance of HTML to HAST using hast-util-from-parse5 + sourceCodeLocationInfo      39.9635  20.7337  30.9236  25.0229  27.1483  30.9236  30.9236  30.9236  ±5.63%       21
   · performance of HTML to HAST using hast-util-from-parse5 + w/o sourceCodeLocationInfo  45.5799  19.1052  24.9510  21.9395  23.3539  24.9510  24.9510  24.9510  ±3.41%       23   fastest
 ✓ src/ast/html/utils/sanitize.bench.ts (1) 616ms
   ✓ performance testing HAST (1) 612ms
     name                                  hz     min     max    mean     p75     p99    p995    p999     rme  samples
   · performance of HAST sanitization  679.29  1.0909  7.5912  1.4721  1.4849  3.3327  3.5710  7.5912  ±3.54%      340


 BENCH  Summary

  performance of HTML to HAST using hast-util-from-parse5 + w/o sourceCodeLocationInfo - src/ast/html/hast.bench.ts > performance testing HTML to HAST
    1.14x faster than performance of HTML to HAST using hast-util-from-parse5 + sourceCodeLocationInfo
    10.41x faster than performance of HTML to HAST using hast-util-from-html

[zolero]

Setting file to true, which results in type a error, but returns an equal hast tree after removing only the position property from root object.

import { fromHtml } from "hast-util-from-html";
import { fromParse5 } from "hast-util-from-parse5";
import { parseFragment } from "parse5";
import { describe, expect, it } from "vitest";

describe("hast parser hast-util-from-html vs hast-util-from-parse5", () => {
    // Deep equal fromHtml and fromParse
    it("should deep equal HAST correctly", async () => {
        const html = `<div class="container"><header><h1>Welcome to My Website</h1><nav><ul><li><a href="/home">Home</a></li><li><a href="/about">About Us</a></li><li><a href="/services">Services</a></li><li><a href="/contact">Contact</a></li></ul></nav></header><main><section class="intro"><h2>About Our Company</h2><p>We are a <strong>leading</strong> company in the industry, with over <em>20 years</em> of experience.</p><p>Our mission is to provide <a href="/services#quality">top-notch services</a> to our clients.</p></section><section class="features"><h2>Our Features</h2><ul><li>Feature 1: High quality</li><li>Feature 2: Reliability</li><li>Feature 3: Affordability</li></ul></section><section class="testimonials"><h2>What Our Clients Say</h2><blockquote><p>"This company exceeded our expectations!"</p><footer>- Jane Doe, CEO of ExampleCorp</footer></blockquote><blockquote><p>"Outstanding service and support!"</p><footer>- John Smith, Manager at TechSolutions</footer></blockquote></section></main><aside><h3>Latest News</h3><article><h4>New Product Launch</h4><p>We are excited to announce the launch of our new product, <strong>ProductX</strong>. <a href="/news/productx">Read more</a></p></article><article><h4>Upcoming Webinar</h4><p>Join us for an exclusive webinar on industry trends. <a href="/webinar">Register now</a></p></article></aside><footer><p>&copy; 2024 My Website. All rights reserved.</p><p><a href="/privacy-policy">Privacy Policy</a> | <a href="/terms-of-service">Terms of Service</a></p></footer></div>`;

        const hast = fromHtml(html, { fragment: true });
        const hast1 = fromParse5(parseFragment(html, { sourceCodeLocationInfo: true }), {
            file: true
        });

        // Remove last position property for deep equal check
        delete (hast as any).position;
        delete (hast1 as any).position;

        expect(hast).toEqual(hast1);
    });
});

[wooorm]

maybe it's time to move to Typescript and start having some proper type completions.

Please learn more about TypeScript.
TypeScript is already used in this project.
Type completions are already there.

everything I did is described pretty clearly to me and easy to reproduce

Why stop there? If you are profiling things, you can find out what branches take time?
Hence me asking: look at the code. There are different sets of code. One does more than the other. The first is slower than the second. That makes sense?

[zolero]

I wish you good luck with the management of your projects @wooorm.

[wooorm]

Am I to understand that you are not at all intersted in contributing to open source? You just want to say that there might be a problem, and then expect someone to do work for you?

[zolero]

@wooorm your attitude demotivates me significantly to even make any contribution to your repositories, it surely motivates me to fork and do a complete recreation of it... other then that, I am done here.

[wooorm]

You don‘t understand what open source is. What you describe is exactly what I give you: https://github.com/syntax-tree/hast-util-from-html/blob/main/license. What you don’t get, is free customer service.