《红宝书》 |什么是script元素

什么是script元素

将JavaScript插入HTML的主要方法是使用<script>元素。

script元素的8个属性

src：可选。指定要加载的外部JS文件。
type：可选。表示代码块中脚本语言的内容类型（也称MIME类型，在浏览器中，通常是text/javascript；如果加载或包含ES6模块代码，module）
language：废弃。用于表示代码块中的脚本语言。
crossorigin：可选。配置相关请求的CORS（跨院资源共享）设置。
如果是跨域请求，crossorigin="anonymous"表示请求不用设置凭据标志（比如cookie）；crossorigin="use-credential"表示设置凭据标志，意味着出站请求会包含凭证。

<script>、<link>、<img>、<audio>、<video>均可使用，它们本身不受同源策略限制；origin包含三部分：protocol协议、domain域名、port端口，只有全部匹配才叫同源
integrity：可选。允许对比接受到的资源和指定的加密签名已验证子资源的完整性。如果接收到的资源的前面与这个属性指定的资源不匹配，页面会报错，脚本不会执行。可以用于确保内容分发网络不会提供恶意内容。
chartset：可选。使用src属性指定的代码字符集。（少用）

涉及脚本加载时期的两个属性：

async：可选，只对外部脚本有效。表示立即开始下载脚本，然后中断文档解析并立即执行脚本。不必等脚本下载和执行完后再加载页面，也不必等到该异步脚本下载和执行后再加载其他脚本。
defer：可选，只对外部脚本有效。表示立即开始下载但在文档解析和显示完成后执行脚本。

使用script元素

在标签内直接嵌入

<script>
    function sayHi(){
        console.log('Hi!')
    }
</script>

在<script>元素中的代码被计算完成后，页面的其余内容才会被加载和显示。注意：使用行内JavaScript代码时，不能出现字符串</script>。这是因为浏览器解析行内脚本时，看到</script>会将其当成结束的</script>标签，这个时候需要用到转义字符“\”即可：

<!-- 错误 -->
<script>
    function sayHi(){
        console.log('</script>')
    }
</script>

<!-- 正确 -->
<script>
    function sayHi(){
        console.log('<\/script>')
    }
</script>

引用外部文件

<script src="example.js"></script>

引用外部文件有如下好处：可维护；可缓存，浏览器会根据特定的设置缓存所有外部链接的JavaScript文件。

注意，浏览器不会检查文件的扩展名（比如JavaScript文件的.js）。所以，你可以通过服务器端脚本语言动态生成JavaScript代码；或者在浏览器中将JavaScript扩展语言（如typeScript或JSX）转移为JavaScript。服务器经常会根据文件扩展名来确定响应的正确MIME类型，如果不打算使用.js扩展名，一定要确保服务器能返回正确的MIME类型。

使用src属性的<script>不应该再在元素里面包含其他JavaScript代码，如果两者都提供，则浏览器会忽略行内代码。

标签位置

过去，我们把<script>放在页面的<head>标签内，这意味着必须把所有JavaScript代码都下载、解析和解释完成后才能渲染页面，导致页面渲染延迟。为了解决这个问题，我们通常把<script>放在<body>标签中页面内容的后面

动态加载脚本

JavaScript可以使用DOM API向DOM中动态添加<script>元素，只需创建一个<script>元素并将其添加到DOM即可：

let script=document.createElement('script');
script.src='szd.js';
document.head.appendChild(script);

默认情况下，以这种方式创建的<script>元素是异步加载的。然而不是所有浏览器都支持async属性，因此可以明确将其设置为同步加载：

let script=document.createElement('script');
script.src='szd.js';
script.async=false;//指明同步
document.head.appendChild(script);

然而以这种方式获取的资源对浏览器的预加载器是不可见的，这会影响他们在资源获取队列中的优先级。要想让预加载器知道这些动态请求文件的存在，可以在文档头部显式声明：

<link ref="preload" href="szd.js">

文档模式

混杂模式（quirks mode）：通过省略文档开头的doctype声明作为开启

标准模式（standards mode）：

<!-- HTML 4.01 Strict -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.did">

<!-- HTML5 -->
<!DOCTYPE html>

准标准模式（almost standards mode）：通过过渡性文档类型（Transitional）和框架集文档类型（Frameset）触发
```

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.did">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.did">
```
混杂模式和标准模式的主要区别体现在通过CSS渲染的内容方面，也对JavaScript也有一点关联影响，称为副作用；准标准模式的主要区别在于如何对待图片元素周围的空白

noscript元素

对于浏览器不支持JavaScript的问题，可以通过<noscript>元素进行优雅降级。<noscript>元素可以包含任何可以在<body>出现的HTML元素，<script>除外。一旦浏览器不支持脚本或者对脚本的支持被关闭，<noscript>中的内容就会被渲染：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script src="example.js"></script>
</head>
<body>
    <noscript>
        <p>请使用支持JavaScript脚本的浏览器运行此页面</p>
    </noscript>
</body>
</html>

小结

通过src属性设置文件的URL来引用外部文件，它可以跟页面在同一台服务器，也可以位于不同的域。
在不使用defer和async的属性的情况下，所有script元素会按照它们在页面出现的持续被解析，里面的代码也会严格按照次序解析。
通常把script元素放到页面末尾，介于内容之后及/body之前。
使用noscript元素可以指定在浏览器不支持脚本时显示的内容。

posted @ 2021-02-03 21:28 sanhuamao 阅读(323) 评论(0) 编辑收藏举报

刷新页面返回顶部

sanhuamao