The amount of <span> elements can impact rendering performance

[janko]

Prerequisites

• [x] Put an X between the brackets on this line if you have done all of the following:
  • Reproduced the problem in Safe Mode: https://flight-manual.atom.io/hacking-atom/sections/debugging/#using-safe-mode
  • Followed all applicable steps in the debugging guide: https://flight-manual.atom.io/hacking-atom/sections/debugging/
  • Checked the FAQs on the message board for common solutions: https://discuss.atom.io/c/faq
  • Checked that your issue isn't already filed: https://github.com/issues?utf8=✓&q=is%3Aissue+user%3Aatom
  • Checked that there is not already an Atom package that provides the described functionality: https://atom.io/packages

Description

I'm using this package separately from Atom, for syntax highlighting code snippets in markdown files. I've noticed that when I switched from Highlight.js/Prism to Highlights, my page rendering performance reduced.

This appears to be due to the number of <span> elements Highlights generates. In addition to the ones that have class attributes with token names, there are also a lot of <span> elements generated which don't have any class attribute.

When I tried stripping just the classless <span> tags, the rendering performance was now instant again.

Steps to Reproduce

const Highlights = require("highlights")

const highlighter = new Highlights()

const html = highlighter.highlightSync({
  fileContents: 'answer = 42',
  scopeName: 'source.ruby',
})

console.log(html)

<pre class="editor editor-colors">
  <div class="line">
    <span class="source ruby">
      <span>answer&nbsp;</span>
      <span class="keyword operator assignment ruby">
        <span>=</span>
      </span>
      <span>&nbsp;</span>
      <span class="constant numeric ruby">
        <span>42</span>
      </span>
    </span> 
  </div>
</pre>

Expected behavior:

That highlighting produces only the tags that are necessary.

Actual behavior:

Highlighting produces many <span> tags that are not needed (the script above produces 4 such tags).

Versions

Highlights 3.1.4

[rsese]

Thanks again @janko -

I'm using this package separately from Atom, for syntax highlighting code snippets in markdown files. I've noticed that when I switched from Highlight.js/Prism to Highlights, my page rendering performance reduced.

As I mentioned in https://github.com/atom/highlights/issues/69#issuecomment-545617638, can you confirm if this behavior causes a performance problem in Atom?

[janko]

Not that I know of, I don't use Atom, I've only experienced it when using the library standalone.