IncludeJS vs InjectJS

4,971 views
Skip to first unread message

Stan

unread,
Dec 1, 2011, 7:04:34 AM12/1/11
to phantomjs
Hi, it may sound strange, but I don't find a clear explanation of the
difference between includejs and injectjs. I guess that injectjs
inserts the code into existing container, while includejs inserts a
reference (something like <script src=...>). But this is just a guess.
Anyway, the methods look interchangable for me. Is this indeed so?

Best wishes,
Stan

Ariya Hidayat

unread,
Dec 1, 2011, 11:38:42 PM12/1/11
to phan...@googlegroups.com

Here is what the wiki page
http://code.google.com/p/phantomjs/wiki/ServiceIntegration says:

"The function includeJs behaves just like the usual dynamic script tag
loading technique."

If you are familiar with dynamic script tag loading, then you know how
includeJs works. If not, read
http://www.nczonline.net/blog/2009/06/23/loading-javascript-without-blocking/.

OTOH injectJs is like evaluating the contents of the specified file
name. It's blocking and thus not interchangable with includeJs.


--
Ariya Hidayat, http://ariya.ofilabs.com

Stan

unread,
Dec 2, 2011, 2:41:09 AM12/2/11
to phan...@googlegroups.com
Hi,
Thanks for the answer. I did read entire wiki. Still it's not completely clear to me.
Let us consider casperjs as a script for "embedding".
Whether the script will be evaluated in-place or not - depends on the script itself, imho.
For example, Casper code looks like (function(){}()), so even if it will be included, it will be evaluated at once. So what is the differense with injection here? Pardon me, if you think this is a dumb question. I'm used to dynamic script loading, and we always use a term injection as a synonym for it.

Ariya Hidayat

unread,
Dec 2, 2011, 10:41:43 AM12/2/11
to phan...@googlegroups.com
If IIFE is used, then the effect is almost the same. The only
remaining difference is the blocking vs non-blocking behavior (makes
sense if the script is remote, e.g. it takes a while to fetch it off
the server). Also, injectJs does not leave the residual script tag in
the web page.

Ivan De Marino

unread,
Dec 2, 2011, 7:44:27 PM12/2/11
to phan...@googlegroups.com
I'll try to clarify with an example.

Imagine you have 2 libraries, A and B.

B depends on A to work.

In a browser, using <script /> tag, you need to ensure that the tags are loaded "in order", and to do that you can:
- either put them in the <head> tag (forcing the browser to respect their order of loading)
- or put them in the <body> tag, leaving it up to you/your framework to ensure the ordering

includeJs works, as Ariya clearly said and you rightly spotted, adding a tag to the page <body>: plain simple, and with all the natural consequences.

injectJs is a bit different: 1) the library code is loaded in memory 2) the javascript thread is "paused" 3) the code is evaluated/loaded in javascript 4) javascript thread resumes

InjectJS is better suited for stuff on which the rest of your code depends. If you, instead, can go ahead with your code, and your dependency can be loaded "asynchronously", than you should prefer includeJs.

Ivan
--
Ivan De Marino
Front-End Developer @ Betfair

blog.ivandemarino.me | www.linkedin.com/in/ivandemarino | twitter.com/detronizator
Reply all
Reply to author
Forward
0 new messages