2.1<script>元素
<script>定义的属性中比较常用的有src(要执行代码的外部文件),defer(脚本可以延迟到文档完全被解析和显示之后进行),async(异步下载该脚本),type(默认是text/javascript,在非IE浏览器可以使用 application/javascript)
一个栗子:
<script type="text/javascript">
function helloscript(){
alert("Hi!")
}
</script>
2.1.1 标签的位置
把全部javascript代码放到</body>前(即<body>元素中页面内容的后面)
原因1: 不需要等到所有javascript代码加载完之后,才开始呈现页面的内容
原因2:javascript中可能包含操作dom的代码,避免提前加载因为找不到元素报错
2.1.2 延迟脚本
使用范围
- 只支持外部脚本文件
- 并非所有浏览器都支持
所以将延迟脚本放到页面底部仍是最佳选择
<head>
<script defter="defer" src="example.js"></script>
</head>
HTML5规范要求脚本按照他们的先后顺序执行,然而现实中,第一个脚本不一定先于第二个延迟脚本执行,脚本也不一定会在DOMContetnLoaded事件触发前执行,因此最好只包含一个延迟脚本。
2.1.3 异步脚本
适用范围
- 只适用于外部文件
- 并非所有浏览器都支持
<head>
<script async src="example1.js"></script>
<script async src="example2.js"></script>
</head>
并不能保证按照他们的制定先后顺序执行,一定会在页面的load事件前执行,但不一定在DOMContentLoaded事件前执行
2.2 嵌入代码和外部文件
从可维护性、可缓存(两个页面使用同一个文件只需要下载一次)、适应未来等角度考虑,推荐使用外部文件。