Web performance, inline script questions

can anyone explain on web performance, load external css (combined css) load external javascript (combined javascript) inline css / inline javascript <- will开发者_开发技巧 block other resource downloading, recommended to put the javascript before external css

how can i put the javascript before external css when i combined the javascript? Is there a way to not block the loading of the images without making the inline javascript to be external scripts?

Update
To clarify, according the the web performance blogs/articles we should load external stuff first, load the external css first before the javascript. Then do the inline style/javascript but there is a catch on the inline javascript because once we do it after loading the external resources the other resources below the stack (images) are then blocked.

Say in firefox where you have 6 connections (assuming), you open 2 connections on the external css/external javascript therefore you still have 4 connections left, now you want to utilized that open connections but the problem is that there is an inline javascript that would block the downloading of other resources and would only continue to download after the inline javascript is executed.

Some say that you need to put the inline javascript before the external so that the open connections are utilized but the problem is that you need some references from the external making it impossible to put it before the external resources. Other blogs/article said that we should put the inline javascript to external and combine them making one external javascript (on the backend, cached), but this seems to be a lot of work on the current site im doing.

Is there any way to utilize the web performance if you have an inline javascript that requires/dependent on your external javascripts? Thanks

well, in general you want:

• your external javascript to be loaded asynchronously (and in one file if possible, minified and compressed by your webserver off course)
• your inline javascript to be non-blocking

if you want to achieve that, you might want to look into labjs which is:

an all-purpose, on-demand JavaScript loader [that] reduces resource blocking during page-load [...] by loading (and executing) all scripts in parallel as fast as the browser will allow. You can easily specify which scripts have execution order dependencies and LABjs will ensure proper execution order.

I'm currently doing some tests to compare a normal page with multiple javascript-resources with the same page but with labjs, if you're interested I can keep you posted on the results.

when using jquery, you could try: http://code.google.com/p/rloader/

When you link to a javascript file in your header for example, both the DOM construction and the rendering is delayed until the script file finishes downloading and is also ran.

The most efficient way is to move the external JS file to the bottom of your element, and add the inline script it relies on directly after it.

Ideally, unless your site is completely unusable without JavaScript, you should move all your JS assets at the end of your body element and keep just the stylesheets in the head along any critical inline scripts that have no dependencies.

If you want to take this to the next level, after moving them to the end of your body, you can make use of the defer attribute on the external script tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer To avoid any potential dependencies problems, you can put your inline script in a separate file loaded from your own domain and load it after this external script while using the same defer attribute on it.

Defer maintains the execution of the JS files in the order they appear in the source code while not blocking rendering.