Re: [seattlejs] Delaying loading of scripts for faster page loads

From: John
Sent on: Friday, May 11, 2012 3:42 PM
We use requireJs to load scripts only after our initial rendering has completed. We have an initial group of dependencies that's loaded with requireJs early (e.g. jQuery - needed to complete rendering), then another group of dependencies that's loaded with requireJs when rendering is complete to enable interaction (e.g. connect.facebook.net/...).

If there is a crucial feature missing from requireJs, it would probably be most useful to propose a patch to that well-designed library rather than pursuing a parallel capability.

On Fri, May 11, 2012 at 2:09 PM, Jennifer Simonds <[address removed]> wrote:

Thanks for all the responses. It seems like these other libraries are all designed to load the scripts immediately, albeit asynchronously. LateLoad's aim is to delay the loading altogether until a specified time/event in the future, so I'll know that the browser wasn't wasting any of its time loading them until after my page has initialized.
 
I'll try out a couple of these & see if there are any significant differences between just async loading the scripts and delaying their loading altogether.
 
Jenny
 
----- Original Message -----
From: Ken Egozi
To: [address removed]
Sent: Thursday, May 10,[masked]:27 PM
Subject: Re: [seattlejs] Delaying loading of scripts for faster page loads

I liked the use of custom type to trick the browser, then automagically hook up and load deferred.

nit - 
>>  document.querySelectorAll('[type=delayed]');
'script[type=delayed]' to make it a wee bit more robust (and also faster). 
or maybe use  'defer' as type? 

anyway it is a neat solution to a problem that many of us have had to solve and re-solve many times in the past.


using RequireJS for 3rd party loading is interesting. having a common way of doing things helps a lot. it does come down to a not very natural way of script includes. an interesting idea could be to use the custom script type technique, then setup the use/require module to load these deferred scripts.


as for document.write by 3rd party widgets - that is a real pain. I wish they just stop doing that already.  
Maybe you could  try and load the widget into an iframe, then grab the markup from there.








On Thu, May 10, 2012 at 1:09 PM, Jacob Bixby <[address removed]> wrote:

You can actually load external nonAMD scripts using a url for the path (just be sure to drop the .js from the file path, since require adds it in) and making use of the use.js plugin (http://tbranyen.com/post/amdrequirejs-shim-plugin-for-loading-incompatible-javascript)

example (using easel which is nonAMD):

require.config({ use: { "easeljs": { attach: "easeljs" }, paths: {"use": "local/use/path", "easeljs": "http://code.createjs.com/easeljs-0.4.2.min"}}); 

usage: 

require(["use!easeljs"], function(){ });

Also it should be mentioned that require.js currently doesn't support delayed module evaluation (yet), however it is in the roadmap for v2.0. The use.js style shimming will be added with the new shim config and errbacks would allow you to wrap any external nonAMD modules with local fallbacks.


On May 10, 2012, at 12:16 PM, Thomas Wilburn wrote:

No, it's only AMD. You can use the require optimizer to package arbitrary
scripts as AMD, but only if you own them--it doesn't work for 3rd party
stuff on remote servers.

Does RequireJs handle arbitrary scripts? I had the (probably false)
impression that it was only AMD.

On Thu, May 10, 2012 at 11:47 AM, Jeff Lembeck  wrote:
I tend to use require.js for handling modular loading.

It&#39;s really fanastic for the purpose of handling dependencies as
well.

http://requirejs.org/



On Thu, May 10, 2012 at 11:33 AM, Tony Bentley  wrote:
To answer question #1, I&#39;ve had great success with head.js for
controlling blocking and non-blocking JS resource loading.

-Tony



On May 10, 2012, at 10:44 AM, Jennifer Simonds wrote:

I was struggling with 3rd-party page widgets that immediately load in
JavaScript files, thus slowing down the page load. Disqus was the real
killer for me - it loads in around a dozen scripts &amp; css files!
Some of my
pages rely on AJAX to initialize the page&#39;s contents, so they
became
embarrassingly slow to load.

So I wrote a class, LateLoad.js, that makes it easy to delay loading
external scripts until window.onload, $(document).ready, a fixed
timeout, or
when you explicitly tell it it&#39;s OK to load. It works like a champ
on all
but one of the few widgets I&#39;ve used it for.

http://www.atomicjetpacks.com/blog/6/lateload-a-javascript-class-to-delay-widget-loading

I have 2 questions:

1. I&#39;ve seen scattered blog &amp; StackOverflow posts on this
subject, &amp; Steve
Souders writes at length about some techniques to use, but is there a
class
or library that &quot;everyone&quot; already uses to accomplish this?
If I&#39;m
reinventing some wheel that everyone already uses &amp; is happy with,
it might
not be worth it for me to push this out there on the world.

2. If you try LateLoad, could you please report back your results -
good or
bad - in the comments on my site so I can build up a compatibility
list? The
results would drive future development.

Thanks!
Jenny Simonds
W. Seattle





--
Please Note: If you hit &quot;REPLY&quot;, your message will be sent
to everyone on this mailing list ([address removed])
http://www.meetup.com/seattlejs/
This message was sent by Jennifer Simonds ([address removed])
from Seattle JS.
To learn more about Jennifer Simonds, visit his/her member profile:
http://www.meetup.com/seattlejs/members/13490690/
Set my mailing list to email me

As they are sent
http://www.meetup.com/seattlejs/list_prefs/?pref=1

In one daily email
http://www.meetup.com/seattlejs/list_prefs/?pref=2

Don&#39;t send me mailing list messages
http://www.meetup.com/seattlejs/list_prefs/?pref=0
Meetup, PO Box 4668 #37895 New York, New York[masked] |
[address removed]





--
Please Note: If you hit &quot;REPLY&quot;, your message will be sent to
everyone on this mailing list ([address removed])
http://www.meetup.com/seattlejs/
This message was sent by Tony Bentley ([address removed]) from
Seattle JS.
To learn more about Tony Bentley, visit his/her member profile:
http://www.meetup.com/seattlejs/members/6840069/
Set my mailing list to email me

As they are sent
http://www.meetup.com/seattlejs/list_prefs/?pref=1

In one daily email
http://www.meetup.com/seattlejs/list_prefs/?pref=2

Don&#39;t send me mailing list messages
http://www.meetup.com/seattlejs/list_prefs/?pref=0
Meetup, PO Box 4668 #37895 New York, New York [masked] |
[address removed]





--
Please Note: If you hit &quot;REPLY&quot;, your message will be sent to
everyone on this mailing list ([address removed])
http://www.meetup.com/seattlejs/
This message was sent by Jeff Lembeck ([address removed]) from Seattle
JS.
To learn more about Jeff Lembeck, visit his/her member profile:
http://www.meetup.com/seattlejs/members/12086345/
Set my mailing list to email me

As they are sent
http://www.meetup.com/seattlejs/list_prefs/?pref=1

In one daily email
http://www.meetup.com/seattlejs/list_prefs/?pref=2

Don&#39;t send me mailing list messages
http://www.meetup.com/seattlejs/list_prefs/?pref=0
Meetup, PO Box 4668 #37895 New York, New York [masked] |
[address removed]






--
Please Note: If you hit "REPLY", your message will be sent to everyone on
this mailing list ([address removed])
This message was sent by Christopher ([address removed]) from
Seattle JS.
To learn more about Christopher, visit his/her member profile
Set my mailing list to email me As they are sent | In one daily email |
Don't send me mailing list messages

  Meetup, PO Box 4668 #37895 New York, New York[masked] |
[address removed]





--
Please Note: If you hit "REPLY", your message will be sent to everyone on this mailing list ([address removed])
http://www.meetup.com/seattlejs/
This message was sent by Thomas Wilburn ([address removed]) from Seattle JS.
To learn more about Thomas Wilburn, visit his/her member profile: http://www.meetup.com/seattlejs/members/39708452/
Set my mailing list to email me

As they are sent
http://www.meetup.com/seattlejs/list_prefs/?pref=1

In one daily email
http://www.meetup.com/seattlejs/list_prefs/?pref=2

Don't send me mailing list messages
http://www.meetup.com/seattlejs/list_prefs/?pref=0
Meetup, PO Box 4668 #37895 New York, New York[masked] | [address removed]






--
Please Note: If you hit "REPLY", your message will be sent to everyone on this mailing list ([address removed])
This message was sent by Jacob Bixby ([address removed]) from Seattle JS.
To learn more about Jacob Bixby, visit his/her member profile

Set my mailing list to email me As they are sent | In one daily email | Don't send me mailing list messages

Meetup, PO Box 4668 #37895 New York, New York[masked] | [address removed]





--
Please Note: If you hit "REPLY", your message will be sent to everyone on this mailing list ([address removed])
This message was sent by Ken Egozi ([address removed]) from Seattle JS.
To learn more about Ken Egozi, visit his/her member profile
Set my mailing list to email me As they are sent | In one daily email | Don't send me mailing list messages

Meetup, PO Box 4668 #37895 New York, New York[masked] | [address removed]




--
Please Note: If you hit "REPLY", your message will be sent to everyone on this mailing list ([address removed])
This message was sent by Jennifer Simonds ([address removed]) from Seattle JS.
To learn more about Jennifer Simonds, visit his/her member profile
Set my mailing list to email me As they are sent | In one daily email | Don't send me mailing list messages

Meetup, PO Box 4668 #37895 New York, New York[masked] | [address removed]

Our Sponsors

  • Twilio

    Easily integrate text messaging, phone calls and VOIP into your app!

  • Formidable Labs

    Enterprise grade node, web and mobile app development.

Sign up

Meetup members, Log in

By clicking "Sign up" or "Sign up using Facebook", you confirm that you accept our Terms of Service & Privacy Policy