In the page load performance among the page is blocked primarily affect page content (including images, etc.) in a timely manner presented in front of one of the important factors user, so we need to dispose of reasonable redeployment of CSS and JS files page.
Look at a piece of code
<!DOCTYPE> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>页面阻塞测试</title> <link rel="stylesheet" href="http://www.ueder.net/wp-content/themes/DerStyle/style.css" type="text/css" media="screen" /> <script type="text/javascript" src="http://www.ueder.net/testhtml/jquery/jquery.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> </head> <body> The following is blocked <div style=" height:100px; background:red;"></div> <img src="http://www.ueder.net/testhtml/picshow/datapic/0e0c883622903fb1a61e12be.jpg" /> </body> </html>
There firebug children's shoes can be seen, page content and pictures are head inside the redeployment script and css files blocked, page load time-consuming 5.5S, as shown stylesheet below if you have a script tag will also clog the subsequent loading of page content but we usually want to load the stylesheet priority, so as not to be seen streaking the page, so we only need to focus on the non-blocking script can be loaded. See following paragraph js
function loadScript(url, callback) { //创建script var script = document.createElement("script"); script.type = "text/javascript"; script.src = url; document.getElementsByTagName("head")[0].appendChild(script); //加载完毕回调 if(script.readyState) { //for IE script.onreadystatechange = function() { if(script.readyState == "loaded" || script.readyState == "complete") { script.onreadystatechange = null ; // herein by reference destruction event, Event resident memory to prevent IE IF (the callback) {the callback ();} } }; } else { //for Others script.onload = function() { if(callback){callback();} }; } }
The above code can be seen, we are using a js create a dynamic script tag and then assigned src to load external JS, while providing a callback function to ensure that the script is loaded before executing those functions code can be run properly.
Look again at page optimized
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>页面阻塞测试</title> <link rel="stylesheet" href="http://www.ueder.net/wp-content/themes/DerStyle/style.css" type="text/css" media="screen" /> <script type="text/javascript"> function loadScript(url, callback) { //创建script var script = document.createElement("script"); script.type = "text/javascript"; script.src = url; document.getElementsByTagName("head")[0].appendChild(script); //加载完毕回调 if(script.readyState) { //for IE script.onreadystatechange = function() { if(script.readyState == "loaded" || script.readyState == "complete") { script.onreadystatechange = null; if(callback){callback();} } }; } else { //for Others script.onload = function() { if(callback){callback();} }; } } // 加载script loadScript ( " http://www.ueder.net/testhtml/jquery/jquery.js " ); loadScript("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"); </script> </head> <body> The following content will not be blocked <div style=" height:100px; background:red;"></div> <img src="http://www.ueder.net/testhtml/picshow/datapic/0e0c883622903fb1a61e12be.jpg" /> </body> </html>
Again you can see the picture with firebug has not been blocked script, and the script is loaded in parallel, the entire page load time is also reduced a lot, the page total time reduced to 2.9S, as shown below
But there are still problems between loadScript and the content of the page if there is a script tag, then download the same content will be blocked, the solution is to add a loadScript setTimeout execute completely out of the document will be loaded JS load flow, asynchronous load, not It will further clog other content pages, and see the complete code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>页面阻塞测试</title> <link rel="stylesheet" href="http://www.ueder.net/wp-content/themes/DerStyle/style.css" type="text/css" media="screen" /> <script type="text/javascript"> function loadScript(url, callback) { setTimeout(function(){ //创建script var script = document.createElement("script"); script.type = "text/javascript"; script.src = url; document.getElementsByTagName("head")[0].appendChild(script); //加载完毕回调 if(script.readyState) { //for IE script.onreadystatechange = function() { if(script.readyState == "loaded" || script.readyState == "complete") { script.onreadystatechange = null; if(callback){callback();} } }; } else { //for Others script.onload = function() { if(callback){callback();} }; } },0); } // 加载script loadScript ( " http://www.ueder.net/testhtml/jquery/jquery.js " ); The loadScript ( " http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js " ); </ Script > </ head > < body > < Script type = "text / JavaScript" > // this code is executed just var a; </ Script > The following content will not be blocked <div style=" height:100px; background:red;"></div> <img src="http://www.ueder.net/testhtml/picshow/datapic/0e0c883622903fb1a61e12be.jpg" /> </body> </html>
Reproduced in: https: //www.cnblogs.com/JoannaQ/archive/2013/02/23/2923071.html