标签的位置
按照传统的做法，所有<script>元素都应该放在页面的<head>元素中，例如：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Example HTML Page</title> 5 <script type="text/javascript" src="example1.js"></script> 6 <script type="text/javascript" src="example2.js"></script> 7 </head> 8 <body> 9 <!-- 这里放内容 --> 10 </body> 11 </html>
这种做法的目的就是把所有外部文件（包括 CSS 文件和 JavaScript 文件）的引用都放在相同的地方。
可是，在文档的<head>元素中包含所有 JavaScript 文件，意味着必须等到全部 JavaScript 代码都被下载、
解析和执行完成以后，才能开始呈现页面的内容（浏览器在遇到<body>标签时才开始呈现内容）。对于
那些需要很多 JavaScript 代码的页面来说，这无疑会导致浏览器在呈现页面时出现明显的延迟，而延迟
期间的浏览器窗口中将是一片空白。为了避免这个问题，现代 Web 应用程序一般都把全部 JavaScript 引
用放在<body>元素中页面内容的后面，如下例所示：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Example HTML Page</title> 5 </head> 6 <body> 7 <!-- 这里放内容 --> 8 <script type="text/javascript" src="example1.js"></script> 9 <script type="text/javascript" src="example2.js"></script> 10 </body> 11 </html>
这样，在解析包含的 JavaScript 代码之前，页面的内容将完全呈现在浏览器中。而用户也会因为浏
览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。
时间： 2024-10-18 16:17:24