Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve library with a further optimization #75

Open
batata004 opened this issue Sep 2, 2018 · 3 comments
Open

Improve library with a further optimization #75

batata004 opened this issue Sep 2, 2018 · 3 comments

Comments

@batata004
Copy link

batata004 commented Sep 2, 2018

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
Copy link
Member

amorey commented Sep 2, 2018

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
Copy link
Author

@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
Copy link
Member

amorey commented Sep 2, 2018

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants