关于javascript在html中的位置

**//转发自https://www.cnblogs.com/zrl66/p/6046526.html**

关于javascript放在哪里更合适

脚本位置：

例如以下代码：

<html>
  <head>
      <title>Script Example</title>
      <script type="text/javascript" src="file1.js"></script>
      <script type="text/javascript" src="file2.js"></script>
      <script type="text/javascript" src="file3.js"></script>
     <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
     <p>Hello world!</p>
 </body> 
 </html>

上面看起来很正常的代码，在载入的时候就会有性能问题：在中加载三个js文件，由于脚本会阻塞页面渲染，知道他们全部下载并执行。

下图显示加载时：

为了尽量减少对整个页面的影响，让页面渲染完成之后开始下载执行js文件。例如：

<html>
  <head>
      <title>Script Example</title>
     <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
     <p>Hello world!</p>
　　　　<!-- 页面渲染完成后，下载执行js -->
      <script type="text/javascript" src="file1.js"></script>
      <script type="text/javascript" src="file2.js"></script>
      <script type="text/javascript" src="file3.js"></script>
 </body>
 </html>

Inline JavaScript

如果页面渲染的过程需要用到js文件，我们可以采取内联javascript。例如：

<html>
  <head>
      <title>Script Example</title>
     <link rel="stylesheet" type="text/css" href="styles.css">
    <script type="text/javascript" >
        /*写入相应的代码*/
    </script>   
  </head>
  <body>
     <p>Hello world!</p>
　　　　<!-- 页面渲染完成后，下载执行js -->
      <script type="text/javascript" src="file1.js"></script>
      <script type="text/javascript" src="file2.js"></script>
      <script type="text/javascript" src="file3.js"></script>
 </body>
 </html>

延迟脚本
　　 HTML4允许我们给script标签添加属性：“defer”来告诉我们本元素所含的脚本不会修改DOM，因此代码能够安全的延迟执行。该属性只有IE4+ 和 Firefox3.5+的浏览器支持。可以将<script “file1.js” defer>放到页面任何一处，他将会在页面解析到

异步加载
　　 HTML5允许我们给 script 标签添加属性： “async” 来告诉浏览器不必停下来等待该脚本执行，什么时候下载完什么时候执行该脚本就可以了。这样的话浏览器会边下载js文件边渲染后面的内容。

当然如果file2.js需要依赖file1.js，那么file1.js就不能异步加载了。

<html>
  <head>
      <title>Script Example</title>
      <script type="text/javascript" src="file1.js" async></script>
      <script type="text/javascript" src="file2.js" async></script>
      <script type="text/javascript" src="file3.js" async></script>
     <link rel="stylesheet" type="text/css" href="styles.css">  
  </head>
  <body>
     <p>Hello world!</p>
 </body>
 </html>

组织脚本

为了减少性能消耗，在大型的网站或者网络应用需要依赖数个js文件的时候。你可以把多个文件合成一个。例如：

<html>
  <head>
      <title>Script Example</title>
     <link rel="stylesheet" type="text/css" href="styles.css">
    <script type="text/javascript" >
        /*写入相应的代码*/
    </script>   
  </head>
  <body>
     <p>Hello world!</p>
　　　　<!-- 页面渲染完成后，下载执行js -->
      <script type="text/javascript" src="http://yui.yahooapis.com/combo?file1.js&file2.js&file3.js"></script>
 </body>
 </html>

还可以将就多个文件进行合并压缩，http://ganquan.info/yui/?hl=zh-CN ,1个100kb的js文件下载比4个25kb的js文件更快。

结论：

当页面加载时在HTML head部分中的JavaScripts会在被调用的时候才执行，在HTML body部分中的JavaScripts会在页面加载的时候被执行。

在页面加载时我们需要让页面内容尽快呈现给用户，页面初始渲染所需要的JS和CSS可以直接在标签中以代码形式插入。所有的外部文件引用可以放在页面内容之后，对于JS文件也可以采用异步加载。

关于defer跟async的可以参考 http://www.cnblogs.com/xiaokk06/p/4966801.html

关于javascript在html中的位置

猜你喜欢