在html页面中插入Javascript的主要方法,就是使用<script>元素,插入有两种方法。
内部嵌入
<script type="text/javascript"> function sayHi(){ alert("hi"); } </script>
包含在<script>元素内部的javascript代码将被从上到下依次解释。解释器会解释一个函数的定义,然后将定义保存在自己的环境中。在解释器对<script>元素内部的所有代码求值完毕以前,页面的其余内容都不会被浏览器加载或者显示。
外部链接
<script type="text/javascript" src="example.js"></script>
在解析外部的javascript文件时,页面的处理也会暂时停止。
标签的位置
按照传统的方法,所有的<script>元素应该放在页面的<head>元素中,这样做
出现的问题:
在文档的<head>元素中包含所有的js文件,意味着必须等到全部的js代码都被下载下来,解析,执行完成后,才能开始呈现页面的内容,对于需要很多js代码的页面来说,无疑会导致浏览器出现明显的延迟,而延迟窗口将会是一片空白,为了避免这个问题,现代web应用程序一般都会
解决的方法
把全部的js引用放在<body>元素中页面内容的后面。
延迟脚本
HTML4.01为<script>标签定义了defer属性。
defer属性的用途
表明脚本在执行时不会影响页面的构造,相当于告诉浏览器立即下载,但是延迟执行,但是脚本会按照先后顺序执行。
<script type="text/javascript" defer="defer" src="example.js"></script>
异步脚本
HTML5为<script>元素定义了async属性
async属性的用途
只适用于外部脚本文件,并告诉浏览器立即下载,标记为async的脚本并不保证按照指定他们的先后顺序执行,从而异步加载页面的其他内容。
<script type="text/javascript" async src="example.js"></script>