当前位置: article > 正文

JavaScript高级程序设计第四版学习记录-第二章HTML中的JavaScript_src属性可以设置为跟网页再同一台服务器上,也可以在不同的域

作者：在线问答5 | 2024-07-23 19:29:22

踩

src属性可以设置为跟网页再同一台服务器上,也可以在不同的域

第二章 HTML中的JavaScript

2.1 script元素

<script>元素的八个属性

在这里插入图片描述

使用方式:

【行内JavaScript代码】直接在网页中嵌入JavaScript代码,包含在<script>中的代码会从上到下解析. 在<script>元素中的代码被计算完成之前，页面的其余内容不会被加载，也不会被显示.

<script>
 function sayHi() { 
 	console.log("Hi!"); 
 } 
</script>
1
2
3
4
5

【外部JavaScript文件】在网页中包含外部JavaScript文件,使用src属性,src属性的值是个URL，指向包含JavaScript的文件。可以是来自外部域的JavaScript文件，一个完整的URL地址。

<script src="example.js"></script>
<script src="http://www.somewhere.com/afile.js"></script>
1
2

与解释行内 JavaScript 一样，在解释外部 JavaScript 文件时，页面也会阻塞（阻塞时间也包含下载文件的时间）
解析URL地址的资源时，会向src属性指定的路径发送一个GET请求，以取得相应资源。

不管包含的是什么代码，浏览器都会按照<script>在页面中出现的顺序依次解释它们，前提是它们没有使用 defer 和 async 属性。第二个<script>元素的代码必须在第一个<script>元素的代码解释完毕才能开始解释，第三个则必须等第二个解释完，以此类推。

2.1.1 标签位置

过去，所有<script>都放在页面的<head>标签内, 外部css和JavaScript文件都集中放在一起, JavaScript文件放在<head>里意味着必须把所有 JavaScript 代码都下载、解析和解释完成后，才能开始渲染页面（页面在浏览器解析到<body>的起始标签时开始渲染）。对于需要很多 JavaScript 的页面，会导致页面渲染的明显延迟，在此期间浏览器窗口完全空白。

<!DOCTYPE html> 
<html> 
 <head> 
	 <title>Example HTML Page</title> 
	 <script src="example1.js"></script> 
	 <script src="example2.js"></script> 
 </head> 
 <body> 
	 <!-- 这里是页面内容 --> 
 </body> 
</html>
1
2
3
4
5
6
7
8
9
10
11

为解决这个问题，现代 Web 应用程序通常将所有JavaScript 引用放在<body>元素中的页面内容后面, 页面会在处理 JavaScript 代码之前完全渲染页面。用户会感觉页面加载更快了，因为浏览器显示空白页面的时间短了。

<!DOCTYPE html> 
<html> 
 <head> 
 	<title>Example HTML Page</title> 
 </head> 
 <body> 
	 <!-- 这里是页面内容 --> 
	 <script src="example1.js"></script> 
	 <script src="example2.js"></script> 
 </body> 
</html>
1
2
3
4
5
6
7
8
9
10
11

2.1.2 推迟执行脚本-defer

<script>元素的defer属性, 只对外部脚本文件有效, 表示脚本在执行时不会改变页面结构, 脚本可以延迟到文档完全被解析和显示之后再执行。在 IE7 及更早的版本中，对行内脚本也可以指定这个属性.

设置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>
1
2
3
4
5
6
7
8
9
10
11

虽然这个例子中的<script>元素包含在页面的<head>中，但它们会在浏览器解析到结束的</html>标签后才会执行。HTML5 规范要求脚本应该按照它们出现的顺序执行，因此第一个推迟的脚本会在第二个推迟的脚本之前执行，而且两者都会在 DOMContentLoaded 事件之前执行。

不过在实际当中，推迟执行的脚本不一定总会按顺序执行或者在 DOMContentLoaded事件之前执行，因此最好只包含一个这样的脚本。

2.1.3 异步执行脚本-async

<script>元素的async属性, 只对外部脚本文件有效, 表示应该立即开始下载脚本，但不能阻止其他页面动作，比如下载资源或等待其他脚本加载。

与 defer 不同的是，标记为 async 的脚本并不保证能按照它们出现的次序执行.

<html> 
 <head> 
	 <title>Example HTML Page</title> 
	 <script async src="example1.js"></script> 
	 <script async src="example2.js"></script> 
 </head> 
 <body> 
	 <!-- 这里是页面内容 --> 
 </body> 
</html>
1
2
3
4
5
6
7
8
9
10

在这个例子中，第二个脚本可能先于第一个脚本执行。因此，重点在于它们之间没有依赖关系。给脚本添加 async 属性的目的是告诉浏览器，不必等脚本下载和执行完后再加载页面，同样也不必等到该异步脚本下载和执行后再加载其他脚本。正因为如此，异步脚本不应该在加载期间修改 DOM。

异步脚本保证会在页面的 load 事件前执行，但可能会在DOMContentLoaded之前或之后。Firefox 3.6、Safari 5 和 Chrome 7 支持异步脚本。使用 async 也会告诉页面你不会使用document.write，不过好的 Web 开发实践根本就不推荐使用这个方法。

2.1.4 动态加载脚本

使用DOM API，向DOM中动态添加script元素加载指定脚本，默认异步加载，相当于添加了async属性。
在这里插入图片描述

2.1.5 XHTML中的变化 (略)

2.1.6 废弃的语法 (略)

自 1995 年 Netscape 2 发布以来，所有浏览器都将 JavaScript 作为默认的编程语言。type 属性使用一个 MIME 类型字符串来标识<script>的内容，但 MIME 类型并没有跨浏览器标准化。即使浏览器默认使用 JavaScript，在某些情况下某个无效或无法识别的 MIME 类型也可能导致浏览器跳过（不执行）相关代码。
因此，除非使用 XHTML 或<script>标签要求或包含非 JavaScript 代码，最佳做法是不指定 type 属性。

2.2 行内代码与外部文件 (略)

推荐使用外部文件的理由：可维护性 / 缓存 / 适应未来

2.3 文档模式 (略)

使用doctype切换文档模式。

混杂模式 quirks mode 在不同浏览器中差异很大
标准模式 standards mode
准标准模式 almost standards mode

混杂模式：让IE像IE5一样支持一些非标准的特性；
标准模式：让IE具有兼容标准的行为；
准标准模式：让浏览器支持很多标准的特性，但是没有标准规定的那么严格，
混杂模式和标准模式主要区别只体现在通过CSS渲染的内容方面，但对JS也有一些关联影响，或者称为副作用。而准标准模式主要区别在于如何对待图片元素周围的空白（在表格中使用图片时最明显）。

主要以混杂模式和标准模式（即混杂模式以外的模式）为主。

2.4 noscript元素 (略)

<noscript>元素出现，用于给不支持 JavaScript 的浏览器提供替代内容。
<noscript>元素可以包含任何可以出现在<body>中的 HTML 元素，<script>除外。在下列两种情况下，浏览器将显示包含在<noscript>中的内容：
 浏览器不支持脚本；
 浏览器对脚本的支持被关闭。
任何一个条件被满足，包含在中的内容就会被渲染。否则，浏览器不会渲染<noscript>中的内容

<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> 
1
2
3
4
5
6
7
8
9
10
11
12

这个例子是在脚本不可用时让浏览器显示一段话。如果浏览器支持脚本，则用户永远不会看到它。

2.5 小结

JavaScript 是通过<script>元素插入到 HTML 页面中的。这个元素可用于把 JavaScript 代码嵌入到HTML 页面中，跟其他标记混合在一起，也可用于引入保存在外部文件中的 JavaScript。本章的重点可以总结如下。
 要包含外部 JavaScript 文件，必须将 src 属性设置为要包含文件的 URL。文件可以跟网页在同一台服务器上，也可以位于完全不同的域。
 所有<script>元素会依照它们在网页中出现的次序被解释。在不使用 defer 和 async 属性的情况下，包含在<script>元素中的代码必须严格按次序解释。
 对不推迟执行的脚本，浏览器必须解释完位于<script>元素中的代码，然后才能继续渲染页面的剩余部分。为此，通常应该把<script>元素放到页面末尾，介于主内容之后及</body>标签之前。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <title>AIZOO-<%= htmlWebpackPlugin.options.title %></title>
</head>

<body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-AMS_HTML"></script>

</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

 可以使用 defer 属性把脚本推迟到文档渲染完毕后再执行。推迟的脚本原则上按照它们被列出的次序执行。
 可以使用 async 属性表示脚本不需要等待其他脚本，同时也不阻塞文档渲染，即异步加载。异步脚本不能保证按照它们在页面中出现的次序执行。
 通过使用<noscript>元素，可以指定在浏览器不支持脚本时显示的内容。如果浏览器支持并启用脚本，则<noscript>元素中的任何内容都不会被渲染。

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】