Script脚本放置位置
2017-04-01 本文已影响61人
mnikn
按照惯例，我们把外部的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>
