A: 页面级js
在</body>前写<script type="text/javascript"></script>,js代码在script标签里面写
我们在编程后期的话,会把type值改变,当成一个库存,比如变为type="text/tpl"
B: 外部引入js文件
<script src="demo.js"></script>
如果同时存在页面级js和外部引入的js文件,那么会以外部引入的js文件为主
html代码:
<script src="demo.js">
document.write("输出的是页面级js");
</script>
demo.js代码:
document.write("输出的是外部js文件");
执行结果:
C: 页面级js和外部js文件都要放到body内容之后,</body>之前,原因:
如果script放在<head>标签中,意味着必须等到全部的javascript代码全部被下载,解释,执行完成后,才开始呈现页面的内容(浏览器在遇到<body>标签之后才开始呈现内容),对于那些需要很多javascript代码的页面来说,这无疑会导致浏览器在呈现页面时出现明显的延迟,为了避免这个问题,现代Web应用程序一般把JavaScript引用放在<body>内容之后,</body>之前
这样,在解析包含的JavaScript代码之前,页面的内容将完全呈现在浏览器中,而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开的页面速度加快了
下面附带的讲一下<script>的属性:(介绍完这个知道其实script放的位置其实不止一种):
1 async:可选,表示应该立即下载该脚本,但不妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本,只对外部脚本文件有效
2 charset:可选,表示通过src属性指定的代码的字符集,由于大多数的浏览器都会忽略它的值,因此这个属性很少有人用
3 defer: 可选,表示脚本可以延迟搭配文档完全被解析和显示之后再执行,支队外部脚本有效,IE7及更早版本也支持这个属性
4 language:已废弃,原来用来表示编写代码使用的脚本语言(如JavaScript,JavaScript1.2或VBScript ),大多数浏览器都会忽略这个属性,因此也没有必要再用了
5 src: 可选,表示包含要执行代码的外部文件
6 type: 可以看成是language的替代属性;表示编写代码使用的脚本语言的内容类型(也称为MIME类型),虽然text/javascript 和text/ecmascript都已经不被推荐使用了,但人们一直向来都还是text/JavaScript,实际上,服务器在传送JavaScript文件时使用的MIME类型通常是application/x-javascript,但在type中设置这个值却可能导致脚本文件被忽略,另外,在非IE浏览器中还可以使用以下值:application/javascript 和 applicat/ecmascript,考虑到约定俗成和最大限度的浏览器兼容性,目前type属性的值依旧是text/javascript,不过这个属性也不是必需的,如果没有指定这个属性,则其默认的值依旧是text/javascript
根据上面的<.script>属性,衍生出了延迟脚本和异步脚本
延迟脚本:
defer属性,表明脚本在执行时不会影响页面的构造,<script type="text/javascript" src="example1.js">可以放在head中,这个脚本将延迟到浏览器遇到</html>标签后执行,HTML5规范要求脚本按照他们出现的先后顺序执行,因此第一个脚本会优先于第二个延迟脚本执行,而这两个脚本会优先于DOMContentLoaded事件执行
在现实中,延迟脚本不一定会按照顺序执行,也不一定会在DOMContentLoaded事件触发前执行,因此最好只包含一个延迟脚本
前面提过,defer只适用于外部脚本文件,这一点在HTML5已经明确规定,因此支持HTML5的实现会忽略给嵌入脚本设置的defer属性,IE4~IE7还支持对嵌入脚本的defer属性,IE8及之后版本则完全支持HTNL5行为
IE4,FireFox3.5,Safari5和Chrome 是最早支持defer属性的浏览器,其他浏览器会忽略这个属性,像平常一样处理这个脚本,为此,把延迟脚本放在页面最底部仍然是最佳选择
异步脚本:
HTML5中为<script>设置了async属性,这个属性与defer属性类似,都用于改变处理脚本的行为,同样与defer相似,async只适用于外部脚本文件,并告诉浏览器立即下载文件,但与defer不同的是,标记为async的脚本并不保证按照指定他们的顺序执行,如果在head中写两个异步脚本文件,第二个异步脚本文件可能会在第一个异步脚本文件之前执行,因此确保两者之间相互不依赖非常重要
指定async属性的目的是不让页面等待两个脚本的下载和执行,从而异步加载页面其他内容,为此,异步脚本不建议在加载期间修改DOM
异步脚本一定会在页面的load事件前执行没打不可能会在DOMContentLoaded事件触发之前或者之后执行,支持异步脚本的浏览器有FireFox3.6,Safari5 和 Chrome