0

I'm currently building a little SPA framework of my own. I'm just curious, how does some things work in a background.

Let's say, I want to dynamically import a script from the server.

The method that I'm currently using is including a script tag to the head, with "async" attribute set to true. Something like this.

for (let requiredScript of requiredScripts){
  var $head = document.getElementsByTagName('head')[0];
  var $script = document.createElement('script');
  $script.src = requiredScript;
  $script.async = true;
  $script.onload = function(){
    callback();
  }

  $head.appendChild($script);
}

How does this work exactly in browsers? I read that browsers spawn a new thread for every script in the head tag, and when they load, they exacute them. (I could also use defer attribute, but it doesnt matter there).

This (if it works as I expect it to work), is great. Syntax is ugly, but it works. With a little disadvantage: I can't explicitly set the header for those requests. For example, I want to add a JWT token to every request for restricted resource, which I can't, and I have to use ajax call. But this is not a part of this question.

So, second way to load my resources (there's a third way, ES6 import, but I'm not gonna use this for now) is to load my resources via an AJAX call. But from the nature of XMLHttp request, I get only a string, or maybe JSON, but not a script, so I have to call eval(), which is both slow and insecure.

But let's get to the question. What exactly is a resource call in a script tag? How does it differ from xmlhttp request (or an ajax call)? What exactly does browser do, when parsing html file and evaluating the line with script tag? Can I import a javascript file as a binary file, and make browser just execute it? (faster and safer option that eval()). I want to have full control and understanding behind what I'm doing, but I feel very confused and can't find the right answers on this topic.

Every explanation (or even a helpful link) would be much appretiated.

Improve this question
6
  • The browser basically just does an HTTP GET operation and then parses and interprets the script. Pre-parsing on the server will be possible once web assembly becomes widely implemented. Commented Jan 5, 2016 at 16:56
  • The browser "Network" console will show you those HTTP transactions if you want to look at them. Commented Jan 5, 2016 at 16:56
  • "The browser basically just does an HTTP GET operation and then parses and interprets the script" This is exactly what confuses me. Can I do this somehow myself? I mean, can I tell browser to use this "HTTP GET", and then use his default parser and interpreter on the response? It seems so stupid to me, that all we have is an old, weak XMLHttp request that makes simple things complicated. Commented Jan 5, 2016 at 17:01
  • You can issue an ordinary xhr to get the script and then eval() it, though there are some slight differences in some obscure details about how eval() works. Commented Jan 5, 2016 at 17:03
  • However the browser won't let you issue xhr to other domains, but it's perfectly OK with fetching script content from other domains via the implicit GET done by <script> tag processing. Commented Jan 5, 2016 at 17:04

1 Answer 1

Reset to default
1

What exactly is a resource call in a script tag?

A <script> tag just tells the browser to do an http GET on the URL in the script tag and then send the resulting text to the Javascript interpreter to be parsed and run. You can watch the network tab in the browser debugger to see the exact http GET operation that it is doing.

How does it differ from xmlhttp request (or an ajax call)?

The initial request in both is an http GET so that doesn't differ at all. An xmlhttp request is subject to same-origin security protections. A <script> tag is not subject to same-origin protections so it can load a script from anywhere.

What exactly does browser do, when parsing html file and evaluating the line with script tag?

I think this is described above (an http GET, then result passed to the JS parser).

Can I import a javascript file as a binary file, and make browser just execute it? (faster and safer option that eval())

No, not really. First off, a JS file is not binary, it's text. There is not yet an adopted and widely implemented standard for pre-parsed/compiled binary Javascript. You can read about Emscripten and Asm.js to see some of the work being done in this regard, though Emscripten really targets conversion of other language code into JS.

When you say "safer than eval()", you'd have to describe what problem you're trying to protect from. Either loading a script tag or loading the script with Ajax and then calling eval() on it is going to evaluate the script in the global context and going to have wide ranging capabilities to muck with your page.

You can control the loading and execution yourself (if not a cross-origin request) by using an XMLHttpRequest to retrieve the script text and then you can parse and execute it yourself either by inserting the text into a script tag or by calling eval() on it. Unless you want to modify or verify the script in some way before executing it, there is really no benefit to manually loading it yourself.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Thanks for the answer. So, I guess calling eval() is not that evil as I thoght it is. But, I'd like to know one more thing. When I put xmlhttp responseText with my javascript code into a script tag, it gets interpreted by browser's Javascript interpreter and then executed. How does this differ from calling eval()? Does eval() use the browser's interpreter aswell? Or do I get some benefits from inserting the responseText to the script tag?
@MatúšČongrády - I rather doubt the JS engine implements completely separate parsers and interpreters for <script> tags vs. eval(). It is almost for certain that most of the parsing and interpreting code is shared between the two. If you wanted to compare the performance of the two, you'd have to devise a performance test and run it in a number of browsers since this will be implementation specific, not something that is defined by a standard.
@MatúšČongrády - eval() and <script> tags have pretty much the same safety concerns. You have to trust the code you're running. Where eval() gets its reputation as something to be avoided is when executing code provided by an untrusted source (such as a user) or when the code can clearly be written without using eval() at all by just more intelligent coding.
@MatúšČongrády - did this answer your question? If so, you indicate that to the community by checking the green checkmark to the left of the answer. If not,, then please comment back about what is not yet answered.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.