你的位置:首页 > Java教程

[Java教程]谈谈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