XF 2.2 Any performance advantages of loading external javascript this way?

[V3NTUS]

So uhm, while browsing some add-ons I installed, I found this code in one of its templates:

<xf:js>
<script async defer
src="https://example.com/script.js">
</script>
</xf:js>

I thought it was wrong at first, as I couldn't find any documentation related to it. All these years, if I had an external javascript file to include, I just used to do:

<script async defer src="https://example.com/script.js">
</script>

Or

<xf:js src="https://example.com/script.js" />

But I never really thought about merging them. Any performance advantages in wrapping the script within xf:js tags? Also, assuming the javascript file isn't external, what would be the recommended way to load it, if I'd like to defer, async load it but also combine it? Would something like this work?

<xf:js async defer src="https://mywebsite.com/script.js" />

Thank you.

 

[Chris D]

So uhm, while browsing some add-ons I installed, I found this code in one of its templates:

I thought it was wrong at first, as I couldn't find any documentation related to it. All these years, if I had an external javascript file to include, I just used to do:

It is wrong.

This will produce invalid HTML and cause a JavaScript error.

The purpose of the <xf:js>...</xf:js> tags is to inject <script>...</script> tags but deferred to the footer. So if in the middle of some content template, e.g. thread_view or similar if you use <xf:js>...</xf:js> then the contents get inserted into <script>...</script> tags but actually in the <footer> element of the PAGE_CONTAINER rather than in the actual place you inserted it.

This code:

<xf:js>
<script async defer
src="https://example.com/script.js">
</script>
</xf:js>

Produces this HTML in the footer:

<script>

    <script async defer
        src="https://example.com/script.js">
    </script>

</script>

And that is completely invalid. The browser will attempt to run this bit as JavaScript itself rather than rendering the <script> tag as HTML as intended:

    <script async defer
        src="https://example.com/script.js">

This will cause a Uncaught SyntaxError: Unexpected token '<' error in the console.

Whichever add-on is doing this you should report it as a bug as it may be having unintended side effects.

We don't support async or defer properties on our <xf:js> tags so you'd need to continue using the existing approaches you mentioned.