在HTML5之前,浏览器解析到<script,,,/>元素时，浏览器会停止继续解析，执行HTML页面，而是执行以下两个动作：
1，根据src属性下载对应的javascript脚本文件
2，解析/执行javascrpt文件
如果脚本文件先执行调用在其后加载HTML元素，则会出错
HTML5增强属性defer 用于指定脚本延迟执行，它会告诉浏览器等整个页面加载之后再执行该<script,,,/>元素中的脚本。
myTest.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 延迟执行脚本</title>
<script type="text/javascript" src="defer.js" defer>
</script>
</head>
<body>
<div id="target"></div>
</body>
</html>
defer.js文件
var tg = document.getElementById("myTest");
tg.innerHTML = "前端讲义";
如果导入脚本异常/耗时，这时浏览器无法向下执行，页面将长时间空白
HTML5增强属性async,指定该属性<script.../>元素会启动新线程，异步执行，不会阻塞浏览器继续往下解析HTML页面元素
async.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 异步执行 </title>
<script type="text/javascript" src="async.js" async>
</script>
</head>
<body>
<div>前端讲义</div>
</body>
</html>
async.js文件
var sum = 0;
for (var i = 0 ; i < 200000000 ; i++)
{
sum += i;
}
alert(sum);
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
