Language component makes my page freeze for 20 sec #2954
Comments
|
Strange. The text is too short to be a problem, so it's likely some DOM issue. Could you profile the highlighting process, so we get some more information? |
|
Your hint towards the text length was very useful. I had replaced the original and very long text with sample code before submitting this issue. Seems this caused the freeze. It may be possible to get more out of this profiling tool, but the most useful I could derive from it was the summary: I played around some more, and found an approach that does not cause a freeze, even with the long version text. <div class="json-pre-container">
<div class="json-source" style="display: none;">{"long": "text"}</div>
<pre><code></code></pre>
</div>
<script>
$(document).on('turbo:load', function() {
$(".json-pre-container").each(function() {
var pre_code = $(this).find("pre code");
var json_source = $(this).find(".json-source").text();
var source_json = JSON.stringify(JSON.parse(json_source), undefined, 2);
pre_code.addClass("language-json").html(source_json);
pre_code.text(source_json);
});
return Prism.highlightAll();
})
</script>Not sure why it helps, or if it's good practice. |
|
He, seems it didn't fix it after all. For a while it did. I've been there a few times. |
|
Could you share the profile itself? Please save the profile (see image below) and attach the file to your comment.
|
|
Seems the file can not be attached. Instead I've made it available here. The setup while profiling was as described in the steps 1-2 in the original issue description. |
|
Let me guess: the JSON you highlight has a string like this: I now know the problem. I'll fix it. |
|
My apologies, the issue (#2689) has already been fixed and will be released in the next version. |
|
Awesome man. And yes you are absolutely right, the JSON has a key/value pair, where the value is the source code of a website, e.g.: {"key": "<!DOCTYPE HTML> <!--[if lt IE 7]><html class=\"no-js lt-ie9 lt-ie8 lt-ie7\" lang=\"lv-lv\"><![endif]--> <!--[if IE 7]><html class=\"no-js lt-ie9 lt-ie8 ie7\" lang=\"lv-lv\"><![endif]--> <!--[if IE 8]><html class=\"no-js lt-ie9 ie8\" lang=\"lv-lv\"><![endif]--> <!--[if gt IE 8]><html class=\"no-js ie9\" lang=\"lv-lv\"><![endif]--><html lang=\"lv-lv\" class=\"menu-effect\"><head><meta charset=\"utf-8\" /><title>..."}Lots of escaped quotes. |
I am running a Ruby on Rails app which uses Webpack, but Prism is not loaded through it.
I have an issue with the browser freezing during syntax highlighting.
prism-coreandprism-autoloaderfrom a CDN:preandcodeelement is in the body.I visit my page in a browser. The entire page freezes for about 20 sec, after which the syntax highlighting happens.
I now execute
Prism.highlightAll();in my Google Chrome browser console. This, again, causes the page to freeze for about 20 sec, after whichundefinedis returned by the function. Since highlighting was already applied, nothing visible happens.I now add the following:
codeelement is now unstyled (not even a black background), but no freeze. When I run thePrism.highlightAll();the generic styling (white text on black background) happens in immediately, and the function returnundefinedright away. But then the freeze kicks in and only 20 secs later the JSON syntax highlighting happens.preandcodeelements turns the page back to normal.prism-autoloaderplugin and adding theprism-jsonplugin instead does not change anything. Removing both of them does bring the page back to normal (now with generic styling).Any help would be much appreciated.
The text was updated successfully, but these errors were encountered: