Arranged inline script
Description: The script does not generate additional HTTP request within a line, but will block parallel downloads page resources, but also blocking gradually rendering.
1 inline script blocking parallel downloads
When the script is executed within the line, it will block all other download resources, until the end of the line in the script execution. In addition to blocking parallel downloads, inline script also blocked rendering.
Solution: (1) to move to the back line of the script within the page all the resources to achieve parallel downloading and progressive rendering.
(2) applies asynchronous callback start the execution of javascript (let the browser execute asynchronously inline script, it is possible to achieve parallel downloading and progressive rendering).
Example:
function code(){
var start = Number( new Date());
while ( (start + 3000) > Number(new Date()) ){};
}
setTimeout(code, 0);
If we want to execute a function asynchronously without blocking the browser rendering, better approach is to apply onload event to trigger code to run:
function code(){
var start = Number( new Date());
while ( (start + 3000) > Number(new Date()) ){};
}
window.onload = code;
If the inline script execution time is very short, then applies delay is 0 milliseconds setTimeout program is a good balance between fast rendering and javascrip fast execution. If a long time, available onload
(3) the applicable script defer attribute
It allows the browser to a delay in the execution line of the script at the same time continue parsing and rendering the page. In support defer browser, which lets two pictures downloaded in parallel; defer is relatively simple parallel download solution, but
It only supports IE and inline scripts FireFox3.1 in; and obstruction gradually rendering.
(4) holding the execution order css and javaScript
Browser is to apply them in the order listed in the stylesheet page, with the application of the rules css download applies to both internal style sheets and line styles. In order to ensure the proper execution of the order browser, a time to download a script.
Inline script block the browser's other acts (download and rendering). When inline script placed after the style sheet, the behavior will be significantly delayed downloaded resources.
(5) within the stylesheet line script blocking
When the inline script back in style table, the browser can begin to execute inline script after stylesheets fully downloaded. In the line of the script behind the style sheet will block all subsequent download resources. Inline style sheets after the script is located,
Cause behind the style sheet resources of the excess must download time download time, leading to slower page.
Solution: position within the adjustment line of the script, so no style sheets between now and any other resources. Inline script should be placed before downloading style sheets, if other resources are scripts that might be in the line of code dependencies between scripts and external script.
Is generally recommended to be placed inline script before stylesheets, you can avoid all of the code depends. After confirming If you do not rely on the code, then the move can be seen in the line of the script resource allows them to load more quickly, leading to better gradually rendering results.