JavaScript ＜script＞

JavaScript script 元素

script元素

script 元素有 8 个属性：

async: 可选。表示应该立即执行下载脚本，当不能阻止其他页面动作，比如下载资源或者等待其他脚本加载。只对外部脚本有效。
charset：可选。使用 src 属性指定的代码字符集。这个属性很少使用，因为大多数浏览器都不在乎它的值。
crossorigin：可选。配置相关请求的 CORS (跨域资源请求)设置。默认不使用 CORS。crossorigin=“anonymous” 配置文件请求不必设置凭据标志。 crossorigin=“use-credentials” 设置凭据标志，意味着出站请求会包括凭据。
integrity：可选。允许比对接收到的资源和指定的加密签名以验证子资源完整性。如果接收到的资源的签名与这个属性指定的签名不匹配，则页面报错，脚本不会执行，这个属性可以用于确保内容分发网络（CDN）不会提供恶意内容。
language：废弃。表示代码块中的脚本语言。
src：可选。表示包含要执行的代码外部文件。
type：可选。代替language，表示代码块中脚本语言的内容类型（MIME类型）。这个值始终都是 “text/javascript”，尽管"text/javascript" 和 "text/ecmascript"已经废弃了，javascript 文件的 MIME 类型通常是 “application/x-javascript”，还有其他值。如：“application/javascript” 和 “application/ecmascript”。如果这个值是 module，则代码会被当做 ES6 模块，只有这个时候才能出现 import 和 export 关键字。

执行脚本方式：

推迟执行脚本

在 head 标签头部，script 标签中使用 defer 属性。例如：

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

defer 属性表示：文件立即开始下载，但是延迟执行。等到浏览器解析到标签后才会执行。且在 DOMContentLoaded 事件之前执行。

异步执行脚本

在 head 标签头部，为 script 元素定义 async 属性。例如：

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

async 属性表示：立即开始下载，不必等脚本下载和执行完成后再加载页面。

动态加载脚本：

创建一个 example.js 文件：

let script = document.createElement("script");
script.src = "example.js";
document.head.appendChild(script);

在把 HTMLElement 元素添加到 DOM 且执行到这段代码之前不会发送请求。默认这种方式创建的 script 元素是以异步方式加载的，相当于 async 属性。但是不是所有浏览器都支持 async 属性。

最有效的方法是在头部写如下代码：

<link rel="preload" href="example.js">

注意事项：

script 元素最好放在 body标签中的内容后面，因为在加载 script 中的代码或者加载外部文件的时候会等待文件或者代码执行完成后再执行后面的。如果放在 head 标签中，后面 body 标签中的 HTML 代码就要进行等待，如果 script 元素中的代码很多，则会造成页面一段时间空白。
假如是在 script 元素行内中写代码，要防止出现 " "这个字符串，如果必须出现则使用转义字符来表示： “</script>”。
如果使用外部文件，这使用 src 属性，确保传入的 URL 有效，且不能留空白。在出现 src 属性时，不要在 script 元素的行内中写任何代码，否者会被忽略。

JavaScript ＜script＞相关推荐

HTML中的JavaScript——＜script＞
以写博客的形式记录学习JavaScript高级程序设计的过程,也就是自己的笔记,以及理解.若有错请及时纠正我! <script>元素 src:是最熟悉的,就是用来包含需要执行的代码外部文件 ...
JavaScript ＜script＞标签
目录 1. HTML中使用JavaScript. 1.1 直接将JavaScript代码放入<script>标签中. 1.2 通过src引用外部JavaScript文件. 2. <s ...
JavaScript - ＜script＞元素
1.1 元素属性 1. async 可选表示应该立即下载脚本,但不妨碍页面中的其他操作.如下载其他资源或等待加载其他脚本只对外部脚本有效 async属性规定一旦脚本可用,则会异步执行语法: &l ...
原生JavaScript小白入门001之HTML为＜script＞标签定义的6种属性
HTML为script标签定义的6种属性 1. async属性 async属性:表示立刻下载脚本,并不会影响页面中其他操作,只对外部JS文件有效,用来改变外部脚本行为,设置了异步响应,实现异步加载. ...
在线文本替换工具、支持正则表达式（博客园文章里添加Javascript或＜script＞语句）
概况与介绍在博客园发布一篇文章,文章就是<在线文本替换工具 .支持正则表达式>https://www.cnblogs.com/lsllll44/articles/15522697.htm ...
javascript精要(2)-＜script＞标签加载时机与位置
1.以前,所有<script>元素都放在页面的标签内. (1)其目的在于:把外部的CSS和JS文件都集中放在一起. (2)但必须把所有的JS代码都下载.解析和解释完成后,才能开始渲染页面. ...
＜script type =“text / template”＞ ... ＜/ script＞的说明
本文翻译自:Explanation of I just stumbled upon something I've never seen before. 我偶然发现了一些我以前从未见过的东西. In t ...
＜script＞放在head内和body内有什么区别
加载的顺序不一样,你可以把HTML看成从上往下加载的. 例如在网速慢的情况下把js代码放到body底部用户会先看到网页结构,等js加载完成后才出现特效. 区别简述: 在HTML body部分中的Jav ...
＜script＞标签通过src属性调用js文件
1.js文件内代码的编写 js文件内,js代码的写法和script标签内相同,可以理解为script标签被隐藏而已,一切照旧即可. 2.js文件的调用使用script标签的src属性即可,Scrip ...