search

kubetail-org / loadjs

A tiny async loader / dependency manager for modern browsers (961 bytes)
MIT License
2.58k stars 151 forks source link

Best way to use LoadJS? #34

Open 9mm opened 7 years ago

9mm commented 7 years ago

Hey,

Most projects I build always do terrible on Google Page Speed because of async loading and whatnot. I found this library and I'm excited to finally use it because I think this is the approach Google wants me to take for the fastest page render time.

On my sites I use rails which minifies all css and js into single files, and then I also have jQuery (using google CDN so its probably cached). So I'm wondering the best way to use loadJS if I have only 3 files (and I'm not using it as a dependency manager).

Will this cause a FOUC while the CSS loads? Also can I use a absolute URL for a path instead of a local path?

amorey commented 7 years ago

Hi @9mm! I'm happy to hear you're considering using LoadJS for your project.

In terms of URLs, you can use relative or absolute paths (including "//") to load files.

In terms of FOUC, loading CSS asynchronously can cause FOUC unless you wait until after the CSS has been loaded to render the content programmatically. To do this with loadjs you can use the success callback:

loadjs(['/path/to/application.css', '/path/to/jquery.js', '/path/to/application.js'], {
  success: function() {
    renderContent();
  }
});

In general, there's always a tradeoff between optimizing for pageload times and complexity but to keep things simple you could trigger the CSS download in the <head> and then load non-essential JS asynchronously after the window load event fires:

<link rel="stylesheet" type="text/css" href="/path/to/application.css">
<script>
  window.addEventListener('load', function() {
    loadjs(['/path/to/jquery.js', '/path/to/application.js']);
  });
</script>

Also, note that if you embed the loadjs code in the <head> that will also save you another trip to the server (for uncached files).

Hope that helps! Let me know if you have any other questions.

9mm commented 7 years ago

Awesome, thanks!

9mm commented 7 years ago

That's super helpful

amorey commented 7 years ago

I think this will be a useful issue for others to see so I'm adding an "archive" label and reopening it.

ghost commented 7 years ago

I am also wanting to tweak loading of scripts and stylesheets for a WP theme with loadJS and highly interested to learn how I could implement the renderContent(); function on successfull script and stylesheet load.

If not specifically for WP, on a simple static site with a few pages, how could I there possibly implement this renderContent(); approach on successful asynchronous load please? Could you elaborate or do you have a tiny jsFiddle perhaps?

I think performance optimization is the way to go and real measurable value for devs and clients alike.

Thank you for any help.

amorey commented 7 years ago

Can you explain what you're trying to do in more detail? In that example, renderContent() is just meant to be a placeholder for code that actually manipulates the DOM after jQuery and the application script loads.

ghost commented 7 years ago

Thank you for the swift reply.

I am trying to get rid of the fout and/or fouc that loading the stylesheet and script (not used for layout) asynchronously, produces. Since rendering of DOM content continues while the sheet and script are fetched, un-styled content can be seen.

I am somehow trying to for example make that un-styled content completely invisible before the loading is finished. For example give html a class of display none while loadJS gets the data and once done remove that class from the html element and let the style and script for the site take over.

Does that make sense? What other way could I possibly utilize to get rid of the fout / fouc?

amorey commented 7 years ago

The code inside the LoadJS success callback won't get executed until after the dependencies have been met so you as long as you add the DOM content there then you shouldn't see FOUT or FOUC.

If you already have content on the page that will get affected by the stylesheet then that's a different story. I don't think there's a one-size-fits-all solution to that but have you considered setting the default body display to none (body {display: none;}) and then overriding it after the the page stylesheet loads?

tabrez500 commented 5 years ago

Hello, @amorey I've noticed that once the files are loaded and cached. Let's say there are 2 pages each loading single file. Once they are cached I don't want them to show up in Network calls again (even tho it says loaded from cache). Is there any way I can achieve this? Just thought you could maybe help me on this, Thanks :smile:

amorey commented 5 years ago

@tabrez500 Sorry, I don't know of a way to control what the browser displays in the network calls list.