按照惯例,我们把外部的javascript脚本放在head标签里。
<!DOCTYPE html>
<head>
<title>javascript</title>
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</head>
<body>
</body>
但是由于head里面放置javascript脚本,因此网页内容必须等所有的javascript脚本下载、解析、执行完后才显示,这样会导致页面的显示有明显的延迟,因此我们把script脚本放在body里面。
<!DOCTYPE html>
<head>
<title>javascript</title>
</head>
<body>
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</body>
这样虽然解决了问题,但是我们真的没办法把script脚本放在head里面吗?script里面有一些属性可设置script脚本的执行方式。
延迟脚本
script标签里面定义了defer属性,表明脚本会立刻下载,但等整个网页都绘制完再执行,脚本按顺序执行。
<!DOCTYPE html>
<head>
<title>javascript</title>
<script type="text/javascript" defer="defer" src="example1.js"></script>
<script type="text/javascript" defer="defer" src="example2.js"></script>
</head>
<body>
</body>
异步脚本
script标签里面定义了async属性,功能和defer相似,但是并不按脚本顺序执行。
<!DOCTYPE html>
<head>
<title>javascript</title>
<script type="text/javascript" async src="example1.js"></script>
<script type="text/javascript" async src="example2.js"></script>
</head>
<body>
</body>