scheibome / kss-scheibo

KSS-Scheibo - a template for the KSS-node styleguide
https://kss-scheibo.scheibitz.com/
MIT License
7 stars 2 forks source link

Improve loading performance #14

Closed pixeldesu closed 1 year ago

pixeldesu commented 1 year ago

I recently noticed that large styleguides (or even just styleguide sections) would freeze my entire browser.

I did some performance profiling and found out that the reasoning behind it is the syntax highlighting of PrismJS being applied to all markup sections on load.

This Pull Request disables automatic highlighting (using the data-manual attribute) and adds methods and events to trigger rendering when required.

scheibome commented 1 year ago

The highlight is now missing on the start page.

image

It could be added in KssMarkup.prototype.init as the example below.

var docsHighlights = document.querySelectorAll('pre.hljs');
for (var docsHighlight of docsHighlights) {
    self.highlightMarkup(docsHighlight);
}