谈谈javascript放在哪里更合适

　　关于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>

　　上面看起来很正常的代码，在载入的时候就会有性能问题：在<head>中加载三个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></script>放到页面任何一处，他将会在页面解析到<script>标签时才会并行下载，但是不会执行file1.js文件，知道DOM加载完成。下载的时候不会阻塞浏览器的其他进程。

　　异步加载

　　  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可以直接在 <head> 标签中以代码形式插入。所有的外部文件引用可以放在页面内容之后，对于JS文件也可以采用异步 加载。

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

 

posted @ 2016-11-09 15:14  Auler  阅读(4540)  评论(0)  编辑  收藏  举报