＜script＞元素属性详解及html引入js执行顺序[defer][async]

最新推荐文章于 2024-04-30 16:57:21 发布

小嘴抹了蜜儿

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量890

点赞数 1

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/weixin_44339178/article/details/125681949

版权

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。