kubetail-org / loadjs

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

Improve library with a further optimization #75

Open batata004 opened 6 years ago

batata004 commented 6 years ago

Hi,

First I need to say this library saved around 40% of the time spent loading my page. Using pingdom without loadjs my website would take almost 4 seconds to load, now it's almost close to 2 seconds. Thanks for the dev(s)!

But I think this library can still go a little bit further and save a few more ms from the page loading time! In my case, I have to download 5 JS files A, B, C, D and E. However, A and B must be executed in series (first A needs to be executed and then B). After A and B are executed, I can execute C, D and E but it does not need to be inseries: C, D and E can be executed out of order BUT A and B must be already executed.

Reading carefully the documentation I came up with this:

loadjs(["A.js","B.js"], {success:function(){loadjs(["C.js","D.js","E.js"],{success:function(){ },async:true});},async:false});

This code works great, no problems at all. BUT I see an optimization that could be done: C, D and E could already be downloaded while A and B are being downloaded. So when A and B are executed, the browser wouldnt need to start downloading C, D and E cause it probably could have already downloaded it, and could only execute it.

Is there anyway to acomplish this level of optimization with loadjs?

amorey commented 6 years ago

By default, LoadJS uses <script> tags to load files so it can control execution order (via async: false) but not specific execution times. However here are some ideas on how to accomplish your goal:

  1. Load all files using async: false. This might delay execution time if, for example, C downloads more slowly than D and E but with browser caching this shouldn't be a problem with subsequent page loads.
  2. Use rel="prefetch" to trigger downloads as soon as possible. This solves the problem but isn't implemented in Safari and Opera mini.
  3. Use XHR objects for lower-level control over execution time. This only works if C, D, and E are hosted on the same domain as the site.

Here's a good article about the details of script loading: https://www.html5rocks.com/en/tutorials/speed/script-loading/

batata004 commented 6 years ago

@amorey thanks again for the support! I read the link you provided and carefully read what you said but unfortunatelly it wouldnt be practical or easy to implement that method in a cross browser way.

I am sad that this use case that I proposed is not supported by the library but it is still a very valuable library!

I just have one more question: in case the user is using IE9 (with async false) or IE8 (for example), what is the fallback? The browser will stil try to download the resoures or it will fail completely?

amorey commented 6 years ago

IE9 ignores the async attribute so LoadJS will initialize the downloads in the order you specify but it can't guarantee execution order. LoadJS doesn't support IE8.