标签位置
传统的做法,所有<script>元素都应该放在页面的<head>元素,,意味着必须等 到全部JavaScript 代码都被下载、解析和执行完成以后,才能开始呈现页面的
内容(浏览器在遇到<body>标签时才开始呈现内容)。对于那些需要很多
JavaScript 代码的页面来说,这无疑会导致浏览器在呈现页面时出现明显的延
迟,而延迟期间的浏览器窗口中将是一片空白。
为了避免这个问题,现代Web 应用程序一般都把全部JavaScript 引用放在
<body>元素中页面内容的后面。这样,在解析包含的JavaScript 代码之前,页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。
延迟脚本
<script type="text/javascript" defer="defer" src="example1.js"></script>
其中包含的脚本将延迟到浏览器遇到</html>标签后再执行。
虽然HTML5规范要求脚本按照顺序执行,就是按照第一个延迟脚本会先于第二个延迟脚本执行,而这两个脚本也会先于DOMContentLoaded 事件执行。
But ! ! !
在现实当中,对于延迟脚本你的执行,并不一定会按顺序执行,也不一定会按照DOMContentLoaded 事件触发前执行,因此最好只包含一个延迟脚本。
因为兼容性的原因,延迟脚本放置在页面底部仍然是最佳的选择。
defer 属性只适用于外部脚本文件,在XHTML 文档中,要把defer 属性设置为defer="defer"。
异步脚本
<script type="text/javascript" async src="example1.js"></script>
其特点跟defer脚本基本一致,建议异步脚本不要在加载期间修改DOM。异步脚本一定会在页面的load 事件前执行,但可能会在DOMContentLoaded 事件触发之前或之后执行。支持异步脚本的浏览器有Firefox 3.6、Safari 5 和Chrome。
在XHTML 文档中,要把async 属性设置为async="async"。
XHTML中的用法
略~~~
<noscript>元素
早期浏览器都面临一个特殊的问题,即当浏览器不支持JavaScript 时如何让页面平稳地退化。对这个问题的最终解决方案就是创造一个<noscript>元素,用以在不支持JavaScript 的浏览器中显示替代的内容,现在基本废弃。
小结
把JavaScript 插入到HTML 页面中要使用<script>元素。使用这个元素可以把JavaScript 嵌入到HTML 页面中,让脚本与标记混合在一起;也可以包含外部的JavaScript 文件。而我们需要注意的地方有:
所有<script>元素都会按照它们在页面中出现的先后顺序依次被解析。在不使用defer 和async 属性的情况下,只有在解析完前面<script>元素中的代码之后,才会开始解析后面<script>元素中的代码。
由于浏览器会先解析完不使用defer 属性的<script>元素中的代码,然后再解析后面的内容,所以一般应该把<script>元素放在页面最后,即主要内容后面,</body>标签前面。
使用defer 属性可以让脚本在文档完全呈现之后再执行。延迟脚本总是按照指定它们的顺序执行。
使用async 属性可以表示当前脚本不必等待其他脚本,也不必阻塞文档呈现。不能保证异步脚本按照它们在页面中出现的顺序执行。另外,使用<noscript>元素可以指定在不支持脚本的浏览器中显示的替代内容。但在启用了脚本的情况下,浏览器不会显示<noscript>元素中的任何内容。