Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

question: script variations; defer and async?

See original GitHub issue

Could someone provide a little more explanation of what the prism.js script does and where we may place it?

The official instructions say to load it at the end of the document using <script src="prism.js"></script>. But most modern browsers now seem to support async and defer when used in <head>, according to an answer on Stack Overflow. According to one explanation with diagrams, we should be able to load the script in <head> and just use defer to have it load asynchronously yet execute after the document.

Issue Analytics

State:
Created 4 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

mAAdhaTTahcommented, Jan 5, 2020

I don’t even need to use defer?

You may want to use defer for performance reasons, but that depends on the particulars of your setup. Leaving out defer means it pauses while the script is downloaded and executed. Adding it allows the browser to continue parsing & rendering and delay the script execution until that process has completed.

It’s worth testing that on your site to see what’s fastest for you, but Prism should function correctly in all scenarios, as long as all Prism scripts have the same attributes, e.g. if you have Prism core + the autoloader, either both or neither should use defer.

1reaction

RunDevelopmentcommented, Dec 27, 2019

You can generally place Prism’s <script>s anywhere you like. If Prism detects that the page is currently loading, it will delay the highlighting until the DOM is ready, so it doesn’t really matter when Prism is loaded/its script is executed. The highlighting itself is done via the Prism.highlightAll method.

The only restriction to your total freedom is plugins/languages in separate files. In that case, you’ll have to use defer or the no-attribute version of both <script>s because with multiple files, order matters.

But if you only have one Prism file, then you should be able to place this anywhere you like and in any way you like, I think. (I can’t think of a configuration which doesn’t work at least.)