javascript标签在页面中的位置探讨

最新推荐文章于 2021-05-01 11:51:21 发布

转载最新推荐文章于 2021-05-01 11:51:21 发布 · 576 阅读

js 专栏收录该内容

5 篇文章

订阅专栏

本文探讨了在HTML中引入JavaScript文件的不同位置及其影响。通常，JS文件可以放置在<head>或<body>标签内，<head>标签内的JS文件会导致页面加载速度减慢；而放置在<body>标签内的JS文件则会在页面内容加载完成后执行，减少了用户等待时间。

在制作网页的过程中需要引用js文件，引用位置可以在<head></head>之间，或者在<body></body>之间，实际上位置的不同会有所差异。
-实例一，在<head></head>之间

<html> 
<head> 
<title>Example HTML Page</title> 
<script type="text/javascript" src="example1.js"></script> 
<script type="text/javascript" src="example2.js"></script> 
</head> 
<body> 
</body> 
</html>

这是通常的做法，将所有<script>元素都放在<head>中。请注意：无论引用多少外部js文件，浏览器都会按照<script>元素在页面中出现的先后顺序依次解析 。也就是说，只有在第一个<script>元素包含的代码解析完成后，第二个<script>包含的代码才会被解析，然后才是第三个、第四个…
这种做法的优点是所有外部文件（CSS和JavaScript）的引用都在同一位置。但是文档的<head>元素中包含所有JavaScript文件，意味着必须等到全部JavaScript代码都被下载、解析和执行完成以后，才能开始呈现页面的内容（浏览器在遇到<body>标签时才开始呈现内容）。对于那些需要很多JavaScript代码的页面来说，无疑会导致浏览器在呈现页面时出现明显延迟，在此期间浏览器窗口将是一片空白。

为了避免这个问题，现代Web应用程序一般都会把JavaScript引用放在<body>元素中，放在页面的内容后面，如下所示：
-实例二，在<body></body>之间

<html> 
<head> 
<title>Example HTML Page</title> 
</head> 
<body> 
<script type="text/javascript" src="example1.js"></script> 
<script type="text/javascript" src="example2.js"></script> 
</body> 
</html>

这样，在解析包含的JavaScript代码之前，页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。

或者也可以使用<script>标签的defer属性表明脚本在执行时不会影响页面的构造，即脚本会被延迟到整个页面都解析完毕后再运行，代码如下：
-实例三，使用defer属性

<html> 
<head> 
<title>Example HTML Page</title> 
<script type="text/javascript" defer="defer" src="example1.js"></script> 
<script type="text/javascript" defer="defer" src="example2.js"></script> 
</head> 
<body> 
</body> 
</html>