<script>脚本解析顺序问题

按照传统的做法,所有<script>元素都应该放在页面的<head>元素中,例如:

<!DOCTYPE html> 
<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> 

这种做法目的是把外部文件(CSS和JS)放置在相同位置。可是这种做法会等到<head>元素中的javascript脚本全部下载、解析、执行完毕后,再开始解析页面的内容。

对于那些需要很多javaScript代码的页面来说,这无疑会导致浏览器在呈现页面时出现明显的延迟,而延迟期间的浏览器窗口中将是一片空白。

为了避免这个问题,现代Web应用程序一般都把javaScript引用放在<body>元素中页面内容的后面,如下例所示:

<!DOCTYPE html> 
<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代码之前,页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。

上次更新时间: 2020-02-06 14:54:00