JavaScript Tag Loading Visualized

[wbmnfktr]

JavaScript Tag Loading Visualized by Wes Bos

 

See here for more/discussion: 

 

[Stefanowitsch]

It seems you have more and more options nowadays to use everyday things.

One thing I don't like about using the "defer" method (even it seems as the go-to method today) is that when you make use of frontend frameworks that manipulate the look of elements on your website this results in some ugly "jumping around of elements that are not aligned/styled yet because the script is waiting to be executed".

I am using UIkit and when using "defer" on the uikit.min.js file it will execute after the HTML is parsed. So for a few milliseconds on page load you can see some of the  dropdown menus visible in the main navigation for example. That is because I make use of the uk-navbar component, which relies on the uikit.min.js file:

uk-navbar="align: center; animation: uk-animation-slide-top-small; animate-out: true"

When loading the script the normal way (no defer or async) you see no dropdown menu at all when the page is loaded. Because then the script is executed before all of the page is loaded.

I think even when there are best-practices how to to stuff you always should check what is more important for your project. Having a consistent look or save a few fractions of some milliseconds on loading time.

[elabx]

On 8/23/2023 at 12:40 AM, Stefanowitsch said:

I am using UIkit and when using "defer" on the uikit.min.js file it will execute after the HTML is parsed. So for a few milliseconds on page load you can see some of the  dropdown menus visible in the main navigation for example.

A bit offtopic: Specifically in UIkit I've overcome most some of these issues adding the classes along the attributes of the components, for example if you have a uk-dropdown or uk-drop components, add the uk-drop class too. See how the uk-drop class is the one with the display:none property, hence the issue of seeing it when the js hasn't added the class to the component.

.uk-drop {
    display: none;
    position: absolute;
    z-index: 1020;
    --uk-position-offset: 0px;
    --uk-position-viewport-offset: 0;
    box-sizing: border-box;
    width: 300px;
}

All assuming you load the CSS before the document.

[Stefanowitsch]

15 hours ago, elabx said:

A bit offtopic: Specifically in UIkit I've overcome most some of these issues adding the classes along the attributes of the components, for example if you have a uk-dropdown or uk-drop components, add the uk-drop class too. See how the uk-drop class is the one with the display:none property, hence the issue of seeing it when the js hasn't added the class to the component.

.uk-drop {
    display: none;
    position: absolute;
    z-index: 1020;
    --uk-position-offset: 0px;
    --uk-position-viewport-offset: 0;
    box-sizing: border-box;
    width: 300px;
}

All assuming you load the CSS before the document.

Ah! That did the trick. Thank you!

I now went from this:

return "<div class='uk-navbar-dropdown'><ul class='uk-nav uk-navbar-dropdown-nav'>$output</ul></div>";

To this (also added the 'uk-drop' class as you mentioned).

return "<div class='uk-navbar-dropdown uk-drop'><ul class='uk-nav uk-navbar-dropdown-nav'>$output</ul></div>";

Now I can use "defer" without having the flashy dropdown menus on page load. This is a trick I bet I want to try on some other UIkit components aswell, if they behave a little bit clunky.

[szabesz]

On 8/23/2023 at 1:02 AM, wbmnfktr said:

JavaScript Tag Loading Visualized by Wes Bos

Interesting but I find it hard to digest this chart as being a useful overview. I keep looking at it and fail to "keep anything of it in my brain". 

I find the following "cheat sheet" much more informative and therefore usable: https://addyosmani.com/blog/script-priorities/ 

Edited August 29, 2023 by szabesz
typo

[wbmnfktr]

Woah... (positive and surprised emphasis here)

The graph I posted above made it super easy for me to understand differences in loading JS while the one you mentioned... did the absolute opposite.
It did almost nothing for me on first look to understand anything.
I have to read, have to compare, this, and that... which isn't that of a problem but for a quick first look while trying to understand. NOPE.

Sure, the one from your example explains a lot more (which is great), talks about differences, and you learn way more yet ... just looking at it doesn't work for me, what the other one does.
Sometimes I just need a good visual hint that explains a more or less complex situation, which mine did (for me at least). That was the reason I posted it here.

So we are quite different in consuming such information, and that's super interesting.