Defer JS parsing with Tab Bar

Hello,

I’m running some speed tests and I got thinking, does anyone know how to defer parsing of external javascript until it’s tab bar parent is clicked? I have a few HTML embeds inside of tab bars with external JS that I want to execute only when tabbed into.

Thanks for the help!

Hi @moofawsaw,

do you need the JS upfront to make your application work?

If not, load your scripts async. Like this:

<script src="demo_async.js" async> $DoSomething </script>

For the tab click, use eval() to execute the script.

P.S.: If you want to go all out, use HTTP2 w/ server PUSH. Fast as lightning (instant loading).

More speed?
P.P.S.: Put the CSS for your minimal UI (e.g. Navbar + Menu) inline in the <head> of your html document. Don’t worry, I have tested it with 1000 lines of CSS. Result? Lightning fast.

Best,
Karl-Heinrich

Hey Karl,

Thanks for the reply.

Most of my JS are tucked away in tabs and only one or two of the calls from the screenshot are actually needed at first load.

Are you able to provide an example of using the eval() method for the tab click?

Hi @moofawsaw

Could you at least share your hosted domain link :slight_smile: ?
So I can have a look at your scripts with my own tools, before I recommend anything :stuck_out_tongue:

Best,
Karl-Heinrich