正文
谈谈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
