javascript标签在页面中位置的问题分析
通常的写法：
<html> <head> <title>javascript标签在页面中的位置_www.jbxue.com</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>元素中，放在页面的内容后面，如下所示：
<html> <head> <title>javascript标签在页面中的位置_www.jbxue.com</title> </head> <body> <!-- 这里放内容 --> <script type="text/javascript" src="example1.js"></script> <script type="text/javascript" src="example2.js"></script> </body> </html>
这样，在解析包含的JavaScript代码之前，页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。
或者也可以使用<script>标签的defer属性表明脚本在执行时不会影响页面的构造，即脚本会被延迟到整个页面都解析完毕后再运行：
<html> <head> <title>javascript_position_www.jbxue.com</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>
上述两种写法的实际效果是一样的。
但是，并非所有的浏览器都支持defer属性，有些浏览器会忽略这个属性，不延迟脚本的执行。
您可能感兴趣的文章：
javascript标签在页面中位置的问题分析
HTML5中的header标签是什么意思？HTML5中header标签具体使用方法你知道吗？
html5 header标签是什么意思？html5 header标签的用法详解（附实例）
html5中新特性之语义化标签的实例分析
HTML5语义化总结
HTML5中的hgroup是干啥的？HTML5中的hgroup标签的具体用法在这，点进来看看吧
html5容易被忽略的小知识
seo页面优化教程
seo优化之企业网站标题怎么定位
html5 details标签的作用是什么？<details>标签的使用方法介绍(附使用实例)