Jump to content

JavaScript Tag Loading Visualized


wbmnfktr
 Share

Recommended Posts

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.

  • Like 1
Link to comment
Share on other sites

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.

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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 by szabesz
typo
  • Like 3
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

 Share

×
×
  • Create New...