script元素放在< head >中
<!DOCTYPE html>
<html>
<head>
<title>the location of 'script' is here</title>
<script src='demo.js'></script>
<script src='demo1.js'></script>
<script src='demo2.js'></script>
<script src='demo3.js'></script>
</head>
<body>
<!-- 页面的内容 -->
</body>
</html>
如上代码段,将script元素放在head元素中。这种做法意味着:等到所有JavaScript代码都被下载、解析和执行完成后,才能呈现页面的内容(body标签)。
如果有许多JS代码需要下载、解析和执行,那打开浏览器将会出现一段时间的空白。
故现代Web应用会将script元素放在body元素页面内容的后面。
script元素放在body元素内容的后面
<!DOCTYPE html>
<html>
<head>
<title>the location of 'script' is not here</title>
</head>
<body>
<!-- 页面的内容 script元素放在这之后-->
<!-- 这样就不会因为等待处理JS代码,而长时间看着空白的页面-->
<script type='text/javascript' src='demo.js'></script>
<script type='text/javascript' src='demo1.js'></script>
</body>
</html>
把script元素放在body页面内容的后面,用户在打开浏览器时,不会像之前一样要长时间等待空白页面。