What happens if I include code within <script src=foo>.</script>

[csdude55]

I'm having a really hard time fully testing this because my browser keeps caching and giving me mixed results! Before I waste too much more time, I thought maybe those more intelligent than me might already know.

Let's say that I do:

<script src="https://example.com/foo.js">
var lorem = 'ipsum';
</script>

What exactly happens here? Is lorem set before or after the contents of foo.js? Can I use lorem inside of foo.js, or the results of foo.js in place of where I declared lorem?

[csdude55]

Answering my own question here, but it appears that the inline code is processed before foo.js. But it's not valid code:

[html.spec.whatwg.org...]

I'm taking a guess here that the inline code processes because of the time it takes to load foo.js, which kinda makes it unreliable. Which is probably why it's not valid, even though it seems to work.

It's not really important, just seems like a waste of space to use:

<script src="https://example.com/foo.js"></script>
<script>
var lorem = 'ipsum';
</script>

[lucy24]

Doesn't it depend on whether lorem is intended to be a local or a global variable?

[csdude55]

Good question, and I'm not really sure :-O

Real world, I have an inline script where I define JS variables with the values of PHP variables. Then I run foo.js that access those variables. Then I have a third script that uses PHP variables and runs functions that are created in foo.js.

This is just typed up for an example so please forgive typos and logic errors! But something like:

<?php
 $ipsum= 'something';

 echo <<<EOF
<script>
var a,
 lorem = '$ipsum';
</script>

<script src="https://example.com/foo.js">
 /*
 * if (lorem)
 *  a = 'b';
 *
 * function this(that) {
 *  // do something
 * }
 */
</script>

<script>
var foo = this(a);
</script>

EOF;
?>

I just thought it might be slightly more efficient if I could move one of those two inline scripts to the middle of the one that calls src, but I guess it's a no-no. When I tried then sometimes it would work and sometimes it wouldn't, which is why I'm guessing that it depends on how quickly foo.js loads in the background.

[Peter_S]

Yes, stick with standards. If something is "unexpected", it might work one day, and not work the next. Browsers can also have different interpretation of the code.

This is not producing any kind of optimization anyhow.

However, you can minify your "foo.js" script, using a tool like [jscompress.com...] for example. DO NOT overwrite your "foo.js" file with the minified version, otherise you won't be able to update it.

[csdude55]

I've been going over my site with a fine toothed comb for awhile now, micro-optimizing everything that I can find. Most of the time my little tweaks shave off a few microseconds, but all combined I've cut my load time by about 60%! Since that results in more pages per session, I figure that it's worth the effort. I'm just doing it in my down time, anyway.

This is one of those that would have removed a whopping 18 bytes per page, which would probably have resulted in saving 1 microsecond! LOL