CODEWITHSUNDEEP
javascripthtml
levant pied
levant pied

Reputation: 4501

Caching Javascript inlined in HTML

Instead of having an external .js file, we can inline Javascript directly in HTML, i.e.

Externalized version

<html>
<body>
  <script type="text/javascript" src="/app.js"></script>
</body>
</html>

Inlined version

<html>
<body>
  <script type="text/javascript">
    // app.js inlined
  </script>
</body>
</html>

However, it's not recommended:

The main reason is caching and pre-compiling - in the externalized version, the browser can download, pre-compile and store the file once for multiple pages, while it cannot do the same for inlined version.

However, is it possible to do something along these lines:

Inlined keyed version

<html>
<body>
  <script type="text/javascript" hash="abc">
    // app.js inlined
  </script>
</body>
</html>

That is, do this:

That is, if the browser already knows about the script, the server will render just this:

Inlined keyed version, subsequent fetches (of the same or other pages)

<html>
<body>
  <script type="text/javascript" hash="abc">
  </script>
</body>
</html>

where notably the script contents are empty.

This would allow for shorter script fetching with a natural fallback.

Is the above possible? If not, is some other alternative to the above possible?

Upvotes: 0

Views: 758

Answers (3)

Joseph
Joseph

Reputation: 119877

The Concept

Here's an interesting approach (after being bugged by notifications :P)

You could have the server render your script this way. Notice the weird type attribute. That's to prevent the script from executing. We'll get to that in a second.

<script type="text/cacheable" data-hash="9182n30912830192c83012983xm019283x">
  //inline script
</script>

Then create a library that looks for these scripts with weird types, get the innerHTML of these scripts, and execute them in the global context as if they were normally executing (via eval or new Function). This makes them execute like normal scripts. Here's a demo:

<script type="text/cacheable" data-hash="9182n30912830192c83012983xm019283x">
  alert(a);
</script>

<script type="text/cacheable" data-hash="9182n30912830192c83012983xm019283x">
  alert(b);
</script>

<script>

    // Let's say we have a global
    var a = "foo";
    var b = "bar"

    // Getting the source
    var scripts = Array.prototype.slice.call(
        document.querySelectorAll('script[type="text/cacheable"]')
    );

    scripts.forEach(function(script){
       // Grabbing
       var source = script.innerHTML;
       // Create a function (mind security on this one)
       var fn = new Function(source);
       // Execute in the global scope
       fn.call(window);
    });

</script>

However...

Since you have the script source (the innerHTML), you can cache them somewhere locally (like in localStorage) and use the hash as its identifier. Then you can store the same hash in the cookie, where future page-requests can tell the server "Hey, I have cached script with [hash]. Don't print the script on the page anymore". Then you'll get this in future requests:

<script type="text/cacheable" data-hash="9182n30912830192c83012983xm019283x"></script>

That covers up the first half. The second phase is when your library sees an empty script. The other thing your library should do is when it sees an empty script, it should look up for that script with that hash in your local storage, get the script's source and execute it like you just did in the first place.

The Catch

Now there's always a trade-off in everything, and I'll highlight what I can think of here:

Pros

  • You only need one request for everything. Initial pageload contains scripts, subsequent pages become lighter because of the missing code, which is already cached by then.

  • Instant cache busting. Assuming the hash and code are 1:1, then changing the content should change the hash.

Cons

  • This assumes that pages are dynamic and are never cached. That's because if you happen to create a new script, with new hash, but had the client cache the page, then it will still be using the old hashes thus old scripts.

  • Initial page load will be heavy due to inlined scripts. But this can be overcome by compressing the source using a minifier on the server. Overhead of minification can also be overcome by caching minified results on the server.

  • Security. You'll be using eval or new Function. This poses a big threat when unauthorized code manages to sneak in. In addition, the threat is persistent because of the caching.

  • Out of sync pages. What happens if you get an empty script, whose hash is not in the cache? Perhaps the user deleted local storage? You'll have to issue a request to the server for it. Since you want the source, you'll have to have AJAX.

  • Scripts are not "normal". Your script is best put at the end of the page so that all inline scripts will be parsed by then. This means your scripts execute late and never in the time they get parsed by the browser.

  • Storage limits. localStorage has a size limit of 5-10MB, depending on which browser we're talking about. Cookies are limited to 4KB generally.

  • Request size. Note that cookies are shipped up to the server on request and down to the browser on response. That additional load might be more of a hassle than it is for good.

  • Added server-side logic. Because you need to know what needs to be added, you need to program your server to do it. This makes the client-side implementation dependent on the server. Switching servers (say from PHP to Python) wouldn't be as easy, as you need to port over the implementation.

Upvotes: 2

TKrugg
TKrugg

Reputation: 2415

If your <script> is not introduced as type=text/javascript, it will simply not be executed. So you could have many tags like theses:

<script type="text/hashedjavascript" hash="abc">...</script>
<script type="text/hashedjavascript" hash="efg">...</script>

Then when the DOM is loaded, pick one and evaluate it. I made an example here: http://codepen.io/anon/pen/RNGQEM

But it smells, real bad. It's definitely better to fetch two different files. Actually what you should do, is have a single file my-scripts.js that contains the code for each of your script, wrapped in a function

// file: my-scripts.js

function script_abc(){
    // what script abc is supposed to do
}
function script_efg(){
    // what script efg is supposed to do
}

Then execute whatever your cookie tells you to. This is how AMD builders concatenate multiples files in one.

Also look for an AMD library such as requirejs

Edit: I misunderstood your question, removed the irrelevant part.

Upvotes: 1

goat
goat

Reputation: 31854

I don't know of a way to do what you asked, so I'll provide an alternative that might still suit your needs.

If you're really after a low latency first page load, you could inline the script, and then after the page loads, load the script via url so that it's in the browser cache for future requests. Set a cookie once you've loaded the script by direct url, so that your server can determine whether to inline the script or provide the external script url.

first page load

<script>
// inlined my-script.js goes here.
</script>
<script>
$(function(){
    // load it again, so it's in the browser cache.
    // notice I'm not executing the script, just loading it.
    $.ajax("my-script.js").then(function(){
        // set a cookie marking this script as cached
    });
});
</script>

second page load

<script src="my-script.js"></script>

Obviously, this has the drawback that it loads the script twice. It also adds additional complexity for you to take care of when you update your script with new code - you need to make sure you address the cookie being for a old version.

I wouldn't bother with all this unless you really feel the need to optimize the first page. It might be worth it in your case.

Upvotes: 4

Related Questions