src
这个属性的值是一个 URL,指向包含 JavaScript 代码的文件,比如:
<script src="app.js"></script>
这是引入一个app.js外部文件,文件本身只需包含要放在<script>
的 起始及结束标签中间的 JavaScript 代码。切记不可写成如:
<script src="app.js" /> //这种语法不能在HTML中使用
备注:</script> //会导致浏览器报错如需使用 应用转义字符
< \/script>
使用了 src 属性的<script>
元素不应该再在<script>
和<script>
标签中再包含其他 JavaScript 代码。如果两者都提供的话,则浏览器只会下载并执行脚本文件,从而忽略行内代码。
可以包含来自外部域的 JavaScript 文件。跟<img>
元素很像,<script>
元素的 src 属性可以是一个完整的 URL,而且这个 URL 指向的 4资源可以跟包含它的 HTML 页面不在同一个域中,比如这个例子:
<script src="http://www.baidu.com/afile.js"></script>
浏览器在解析这个资源时,会向 src 属性指定的路径发送一个 GET 请求,以取得相应资源,假定 是一个 JavaScript 文件。这个初始的请求不受浏览器同源策略限制,但返回并被执行的 JavaScript 则受限 制。当然,这个请求仍然受父页面 HTTP/HTTPS 协议的限制。
在包含外部域的 JavaScript 文件时,要确保该域是自己所有的,或者该域是一 个可信的来源。<script>
标签的integrity属性是防范这种问题的一个武器,但这个属性也不是所有 浏览器都支持。
不管包含的是什么代码,浏览器都会按照
标签位置
<!DOCTYPE html> 10 <html>
<head>
<title>Example HTML Page</title>
<script src="example1.js">
</script> <script src="example2.js">
</script>
</head>
<body>
<!-- 这里是页面内容 -->
</body>
</html>
我们过去都会把 script放在head标签中
但是当页面渲染前要完全加载完引入的js,如果js文件过多或者文件很大,页面渲染就会有一段时间的空白期
我们这样放置就会解决这个问题
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<!-- 这里是页面内容 -->
<script src="example1.js"></script>
<script src="example2.js"></script> </body>
</html>
这样引入的js文件会在页面完全渲染后处理javascript代码,用户感觉页面加快了
推迟执行脚本defer
HTML 4.01 为<script>
元素定义了一个叫 defer 的属性。这个属性表示脚本在执行的时候不会改 变页面的结构。也就是说,脚本会被延迟到整个页面都解析完毕后再运行。因此,在<script>
元素上 设置 defer 属性,相当于告诉浏览器立即下载,但延迟执行
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script defer src="example1.js"></script>
<script defer src="example2.js"></script> </head>
<body>
<!-- 这里是页面内容 -->
</body>
</html>
首先defer只有对外部引入的javascript有效
这里的js文件就是在浏览器解析完</html>
后才会去执行
异步执行脚本async
HTML5 为<script>
元素定义了 async 属性。从改变脚本处理方式上看,async 属性与 defer 类似。当然,它们两者也都只适用于外部脚本,都会告诉浏览器立即开始下载。不过,与 defer 不同的 是,标记为 async 的脚本并不保证能按照它们出现的次序执行,比如:
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script async src="example1.js"></script>
<script async src="example2.js"></script>
</head>
<body>
<!-- 这里是页面内容 -->
</body>
</html>
在这个例子中,第二个脚本可能先于第一个脚本执行。因此,重点在于它们之间没有依赖关系。给 脚本添加 async 属性的目的是告诉浏览器,不必等脚本下载和执行完后再加载页面,同样也不必等到 该异步脚本下载和执行后再加载其他脚本。正因为如此,异步脚本不应该在加载期间修改 DOM。