第2章在 HTML中使用JavaScript-KeepStudy

第2章在 HTML中使用JavaScript

### 2.1　script元素 11

> 将JavaScript插入HTML的主要方法是使用<script>元素。<script>元素有下列8个属性。
>
> - **async：**可选。表示应该立即开始下载脚本，但不能阻止其他页面动作，比如下载资源或等待其他脚本加载。只对外部脚本文件有效。
> - **charset：**可选。使用src属性指定的代码字符集。这个属性很少使用，因为大多数浏览器不在乎它的值。
> - **crossorigin：**可选。配置相关请求的CORS（跨源资源共享）设置。默认不使用CORS。crossorigin="anonymous"配置文件请求不必设置凭据标志。crossorigin="use-credentials"设置凭据标志，意味着出站请求会包含凭据。
> - **defer：**可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。
> - **integrity：**可选。允许比对接收到的资源和指定的加密签名以验证子资源完整性（SRI, Subresource Integrity）。如果接收到的资源的签名与这个属性指定的签名不匹配，则页面会报错，脚本不会执行。这个属性可以用于确保内容分发网络（CDN, Content Delivery Network）不会提供恶意内容。
> - **language：**废弃。大多数浏览器都会忽略这个属性，不应该再使用它。
> - **src：**可选。表示包含要执行的代码的外部文件。
> - **type：**可选。按照惯例，这个值始终都是"text/javascript"。

##### 2.1.1 标签位置

- > **把所有JavaScript文件都放在<head>里：**意味着必须把所有JavaScript代码都下载、解析和解释完成后，才能开始渲染页面（页面在浏览器解析到<body>的起始标签时开始渲染）。对于需要很多JavaScript的页面，这会导致页面渲染的明显延迟，在此期间浏览器窗口完全空白。
  >
  > **将所有JavaScript引用放在<body>元素中的页面内容后面：**意味着必须把所有JavaScript代码都下载、解析和解释完成后，才能开始渲染页面（页面在浏览器解析到<body>的起始标签时开始渲染）。对于需要很多JavaScript的页面，这会导致页面渲染的明显延迟，在此期间浏览器窗口完全空白。，现代Web应用程序通常使用这种方式。

##### 2.1.2 推迟执行脚本

- > 在<script>元素上设置defer属性，相当于告诉浏览器立即下载，但延迟执行。
  >
  > 不过在实际当中，推迟执行的脚本不一定总会按顺序执行或者在DOMContentLoaded事件之前执行，因此最好只包含一个这样的脚本。
  >
  > 注意 对于XHTML文档，指定defer属性时应该写成defer="defer"。

##### 2.1.3 异步执行脚本

- > HTML5为<script>元素定义了async属性。从改变脚本处理方式上看，async属性与defer类似。当然，它们两者也都只适用于外部脚本，都会告诉浏览器立即开始下载。不过，与defer不同的是，标记为async的脚本并不保证能按照它们出现的次序执行。注意 对于XHTML文档，指定async属性时应该写成async="async"。

##### 2.1.4 动态加载脚本

- > 通过向DOM中动态添加script元素同样可以加载指定的脚本。只要创建一个script元素并将其添加到DOM即可。
  >
  > ```javascript
  > let script = document.createElement('script');
  > script.src = 'gibberish.js';
  > script.async = false;
  > document.head.appendChild(script);
  > ```
  >
  > 以这种方式获取的资源对浏览器预加载器是不可见的。这会严重影响它们在资源获取队列中的优先级。根据应用程序的工作方式以及怎么使用，这种方式可能会严重影响性能。要想让预加载器知道这些动态请求文件的存在，可以在文档头部显式声明它们：
  >
  > ```javascript
  >  <link rel="preload" href="gibberish.js">
  > ```

##### 2.1.5 XHTML中的变化

- > 可扩展超文本标记语言（XHTML, Extensible HyperText Markup Language）是将HTML作为XML的应用重新包装的结果。与HTML不同，在XHTML中使用JavaScript必须指定type属性且值为text/javascript, HTML中则可以没有这个属性。XHTML已经退出历史舞台。

### 2.2　行内代码与外部文件 18

> 虽然可以直接在HTML文件中嵌入JavaScript代码，但通常认为最佳实践是尽可能将JavaScript代码放在外部文件中。不过这个最佳实践并不是明确的强制性规则。

### 2.3　文档模式 18

> 三种文档模式：混杂模式（quirks mode）、标准模式（standards mode）、准标准模式（almost standards mode）。
>
> 标准模式通过下列几种文档类型声明开启：
>
> ```html
> <! -- 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
> <! -- 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/frameset.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-frameset.dtd">
> ```

### 2.4　noscript元素 19

> <noscript>元素可以包含任何可以出现在<body>中的HTML元素，<script>除外。在下列两种情况下，浏览器将显示包含在<noscript>中的内容： 浏览器不支持脚本；浏览器对脚本的支持被关闭。
>
>
> ```html
> <! DOCTYPE html>
> <html>
> <head>
> <title>Example HTML Page</title>
> <script defer="defer" src="example1.js"></script>
> <script defer="defer" src="example2.js"></script>
> </head>
> <body>
> <noscript>
> 	<p>This page requires a JavaScript-enabled browser.</p>
> </noscript>
> </body>
> </html>
> ```

顶部

JavaScript高级程序设计(4)

目录

相关推荐