HTML中的JavaScript

黄小仙ya

4733人浏览 · 2022-08-16 14:15:20

黄小仙ya · 2022-08-16 14:15:20 发布

HTML中的JavaScript

1. <script>元素
2. 行内代码与外部文件
3. 文档模式
4. \<noscript>元素
5. 小结

1.

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

属性：

async ：可选。立即开始下载脚本，但不阻止其他页面动作。只对外部脚本有效。
charset ：可选。使用src属性指定的代码字符集。少用。
crossorigin：可选。配置相关请求的CORS（跨源资源共享）设置。默认不使用CORS。crossorigin="use-credentials"设置凭证标志，意味着出站请求会包含凭据。
defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本有效。
integrity：可选。允许比对接收到的资源和指定的加密签名以验证子资源的完整性。
language：废弃。
src：可选。表示包含要执行的代码外部文件。
type：可选。代替language，表示代码块中脚本语言的内容类型。值为module时代码会被当成ES6模块，只有这时候代码中才能出现import和export关键字。

使用<script>有两种方式：

内部引入：直接在网页中嵌入JavaScript代码。包含在<script>内的代码会被从上到下解析。脚本内不能出现</script>，会导致被解析为该脚本已结束，要避免这个问题需要用到转义字符串\。
外部引入：通过src包含外部JavaScript文件。使用了src的<script>元素不应该在标签内再包含其他JavaScript代码，包含的话浏览器只会下载并执行脚本文件，忽略行内代码。

（在没有defer与async的情况下，按<script>在页面中出现的顺序执行）

1.1 标签位置

由于页面在浏览器解析到<body>标签的起始标签时开始渲染，所以当大量js代码放在<head>内时会有明显延迟。现在web应用通常将所有js代码放在<body>元素中的页面内容后面，这样，页面会在处理js代码之前完全渲染页面。

1.2 推迟执行脚本`defer`

defer属性只对外部脚本文件有效。这个属性表示脚本在执行的时候不会改变页面的结构，脚本会被延迟到整个页面都解析完毕后（即页面解析到</html>标签后）再运行。不过在实际当中，推迟执行的脚本不一定总会按顺序执行或者在DOMContenLoaded事件之前执行，因此 最好只包含一个这样的脚本。

1.3 异步执行脚本`async`

async属性只适用于外部脚本。给脚本添加async实行的目的是告诉浏览器，不必等该脚本下载和执行后再加载页面，同样也不必等该异步脚本下载和执行后再加载其他脚本。因此，异步脚本不应该再加载期间修改DOM。异步脚本保证会在页面的load事件前执行，但可能在DOMContentLoaded之前或之后。一般不推荐。

1.4 动态加载脚本

通过向DOM中动态添加script元素同样可以加载指定脚本。默认情况下，以这种方式创建的<script>元素是以异步加载的，但不是所浏览器都支持async属性，所以要统一动态脚本的加载行为，可以明确将其设置为同步加载。

let script = document.createElement('script');
script.src = 'gibberish.js';
script.async = false;
document.head.appendChild(script);

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

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

1.5 XHTML中的变化

xhtml和html有什么区别（引用自其他博主）

在XHTML中使用js必须指定type属性为“text/javascript”
XHTML中小于号<会被解析为一个标签的开始

<script type="text/javascript">
//<![CDATA[
	...JS代码
//]]>
</script>

以上格式适用于所有现代浏览器，它可以通过XHTML的验证，而且对XHTML之前的浏览器也能优雅地降级。

1.6 废弃的语法

小部分不支持js的浏览器会把<script>元素的内容输出到页面上，从而破坏页面的外观。采用以下代码可解决。

<script><!--
	...JS代码
//--></script>

2. 行内代码与外部文件

通常认为最佳实践尽可能是将js代码放在外部文件中。

可维护性
缓存
适应未来

3. 文档模式

最初的文档模式有两种：混杂模式 和 标准模式。前者让IE像IE5一样（支持一些非标准的特性），后者让IE具有兼容标准的行为。这两种模式的主要区别只体现在通过CSS渲染的内容方面，但对js也有一些关联影响。

随着浏览器普遍实现，又出现了第三种文档模式：准标准模式。这种模式下的浏览器支持很多标准的特性，但是没有标准规定得那么严格。主要区别在于如何对待图片元素周围的空白（在表格中使用图片时最明显）。

混杂模式在所有浏览器中都基本上就没有浏览器一致性可言。

标准模式通过下列几种文档类型声明开启：

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

<!-- XHTML 1.0 Strict -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- HTML5 -->
<!DOCTYPE HTML>

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

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

<!--  HTML 4.01 Frameset -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/framaeset.dtd">

<!--  XHTML 1.0 Transitional -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!--  XHTML 1.0 Frameset -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-framaeset.dtd">

4. <noscript>元素

当浏览器不支持脚本或浏览器对脚本的支持被关闭时，浏览器将显示包含在<noscript>中的内容。

5. 小结

要包含外部js文件，必须将src属性设置为要包含文件的URL。文件可以跟网页在同一台服务器上，也可以位于完全不同的域。
所有<script>元素会依照它们在网页中出现的次序被解释。在不使用defer和async属性的情况下，包含在<script>元素中的代码必须严格按次序解释。
对不推迟执行的脚本，浏览器必须解完位于<script>元素中的代码，然后才能继续渲染页面的剩余部分。为此，通常应该把<script>元素放到页面末尾，介于主内容之后及<body>标签之前。
可以使用defer属性把脚本推迟到文档渲染完毕后再执行。推迟的脚本原则上按照它们被列出的次序执行。
可以使用async属性表示脚本不需要等待其他脚本，同时也不阻塞文档渲染，即异步加载。异步脚本不能保证按照它们在页面中出现的次序执行。
通过使用<noscript>元素，可以指定在浏览器不支持脚本时显示的内容。如果浏览器支持并启用脚本，则<noscript>元素中的任何内容都不会被渲染。