search

cujojs / curl

curl.js is small, fast, extensible module loader that handles AMD, CommonJS Modules/1.1, CSS, HTML/text, and legacy scripts.
https://github.com/cujojs/curl/wiki
Other
1.89k stars 216 forks source link

scripts in the head #240

Closed szepeviktor closed 10 years ago

szepeviktor commented 10 years ago 
var html = document.documentElement;
html.className = html.className.replace(/\bno-js\b/,'') + ' js';

Where/how should I put these statements to have them executed before content appears? (I know in the head, but is there a blocking way with curl to load/execute them?)

szepeviktor commented 10 years ago

btw. is it a good idea? http://dansajin.com/2013/01/25/ultimate-technique-inject-javascript/ is there measureable gain over a blocking <script> tag?

unscriptable commented 10 years ago

Hey @szepeviktor!

It all depends on how your content (HTML) will arrive. If the content is arriving synchronously with the page (in other words: if the content is in the body element, rather than generated or templated by javascript), then you should use a blocking script to handle the className replacement. This could be in the <head> or just before </body>.

When I write apps that have content in the body, I generally put this type of code at the end of </body>.

If your content is arriving async (generated or templated by javascript), then I like to put code like this inside thecurl([]).then() callback.

-- John

unscriptable commented 10 years ago

btw. is it a good idea? http://dansajin.com/2013/01/25/ultimate-technique-inject-javascript/ is there measureable gain over a blocking <script> tag?

I believe that using curl.js's data-curl-run attribute with an async attribute (both on the <script> that fetches curl.js) is faster than this code snippet. The reason is that his code snippet claims to wait for dom-ready (via setTimeout) before fetching curl.js.

Note, that the script in that blog post does not handle errors.

Here's the fastest way (afaict):

<head><!-- other stuff in here -->
<script async data-curl-run="path/to/run.js" src="path/to/curl.js"></script>
</head>

If you are concerned that fetching curl.js might slow down fetching of stylesheets in <link> elements, then you could put it just before </body>.

Closing this issue, but please continue to comment, if you wish!

-- John

szepeviktor commented 10 years ago

Thank you! Won't just before </body> cause FOUT?

unscriptable commented 10 years ago

Yes, it could cause FOUT -- or it could prevent it. It all depends on which files are being loaded by HTML and which by JavaScript (and when).

szepeviktor commented 10 years ago

nice support Thank you again!