JS编程建议之JS代码在页面中的位置

时间:2014年03月08日作者:小侃评论次数:0

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

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Example HTML Page</title>
  5.         <script type=”text/javascript”></script>
  6.         <script type=”text/javascript”></script>
  7.     </head>
  8.     <body>
  9.          <!– 这里放内容 –>
  10.     </body>
  11. </html>

这种用法的目的就是把所有外部文件(包括CSS文件和JavaScritp文件)的引用都放在相同的地方。可是,在文档的<head>元素中包含所有JavaScritp文件,意味着必须等到全部JavaScript代码都被下载、解析和执行完成以后,才能开始呈现页面的内容(浏览器在遇到<body>时才开始呈现内容)。对于那些很多JavaScritp代码的页面来说,这无疑会导致浏览器在呈现页面时出现明显诞迟,而延迟期间的浏览器窗口中将是一片空白。为了避免这个问题,现代Web应用程序一般都把全部JavaScritp引用放在<body>元素中页面内容的后面,如下例所示:

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Example HTML Page</title>
  5.     </head>
  6.     <body>
  7.         <!– 这里放内容 –>
  8.         <script type=”text/javascript”></script>
  9.         <script type=”text/javascript”></script>
  10.     </body>
  11. </html>

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

声明: 本文采用 BY-NC-SA 协议进行授权 | 小侃's Blog
转载请注明转自《JS编程建议之JS代码在页面中的位置

0条评论

暂时没有评论!

发表评论

*

*