无堵塞的脚本加载_什么是脚本无堵塞加载-CSDN博客

本文链接：https://blog.csdn.net/g125989100/article/details/6938286

《高性能 javascript 》这本书买了快1年了，用了几天看完扔在一旁在就没动过...没时间看（借口）
前几天突然看到了这本书拿起来细心的看了看...唉之前太无知，准备细读下并记录下来

javascript 加载和执行

当浏览器遇到<script>标签时，当前 HTML 页面无从获知 javascript 是否会向 <p> 标签添加内容，或引入其他元素，或甚至关闭该标签。因此，这时浏览器会停止处理页面，先执行 javascript 代码，然后再继续解析和渲染页面。同样的情况也发生在实用在 src 属性加载 javascript 的过程中，浏览器必须先花时间下载外链文件中的代码，然后解析并执行它。在这个过程中，页面渲染和用户交互完全被阻止了。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>加载和执行</title>
</head>

<body>
<p> 
	<script type="text/javascript">
	document.write(+new Date());
	</script> 
</p>
</body>
</html>

无堵塞的脚本--动态脚本元素

通过文档对象模型（DOM）创建 <script> 元素,无论在何时启动下载，文件的下载和执行过程不会阻塞页面其他进程。

loadScript：

function loadScript(url,callback){
	var script = document.createElement("script");
	script.type = "text/javascript";
	if (script.readyState){
		script.onreadystatechange = function(){
			if (script.readyState == "loaded" || script.readyState == "complete"){
				script.onreadystatechange = null;//确保事件不被处理2次
				callback();
			};
		};
	} else {
		script.onload = function(){
			callback();
		};
	};
	script.src = url;
	document.getElementsByTagName("head")[0].appendChild(script);
};
loadScript("http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js",function(){
	alert("加载完成")
})

“加强版”的loadScript
1：lazyLoad
下载地址
https://github.com/rgrove/lazyload
2：LABjs
下载地址
http://labjs.com/