简单的html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Hello World</title>
<!--<head>处放置script元素-->
<script src="...外部脚本路径"></script>
<script type="text/javascript">
function testA() {
}
</script>
</head>
<body>
<div id="app"></div>
<!--<body>处放置script元素-->
<script src="...外部脚本路径"></script>
<script type="text/javascript">
function testB() {
}
</script>
</body>
</html>
<script>
加载顺序、使用方式的说明:
type="text/javascript"
可加可不加,即使没有指定该属性,默认值也是它。<script>
有两种使用方式: 页面中嵌入javascript代码 和 引入外部javascript文件<script>
元素内部的代码会被从上到下依次解释。(在<script>
元素内部所有的代码解释完之前,页面其余内容都不会被浏览器加载和显示)<script>
元素在解析外部文件(包括下载)时,页面的处理也会暂停(同于解析内部代码)<script>
元素在引入外部文件(使用src)时,就不能再嵌入内部代码(<script>
和</script>
之间添加代码),否则嵌入的代码会被忽略
<script>
的解析顺序的说明:
- 浏览器会按照
<script>
元素在页面中出现的先后顺序,对它们依次进行解析
<script>
存放位置的说明:
- 传统做法,
<script>
元素都应该放在页面的<head>
元素中。(这种做法的目的是把所有的外部文件引用都放在一起,例如 CSS文件和Javascript文件) - 但是,放在
<head>
元素中,就意味着必须等到全部的javascript代码都被下载、解析和执行完成以后,才能开始呈现页面内容。(因为浏览器在遇到<body>
标签时才开始呈现内容) - 因此,放在
<head>
元素中,容易出现较长时间的空白页面(因为呈现被阻塞,如果javascript代码需要很多的话) - 所以,最终
<script>
元素一般都放在<body>
标签中页面内容的后面(也就是</body>
标签的前面)
==================================
<script>
几个记录:
- 所有
<script>
元素都会按照它们在页面中出现的先后顺序依次被解析。(在不使用defer
和async
属性的情况下) defer
属性,表示延迟解析脚本,即让脚本在文档完全呈现后再执行。(延迟脚本总是按照指定它们的顺序执行)async
属性,表示异步解析脚本,即表示当前脚本不必等待其他脚本,也不必阻挡文档呈现。(区别于defer
,异步脚本不能按照在页面中的出现的顺序执行)
<script defer="defer" src="...外部脚本路径"></script>
<script async="async" src="...外部脚本路径"></script>