读JavaScript高级程序设计感受_javascript高级程序设计读后感

作者：木道寻08 | 2024-07-17 00:16:31

踩

javascript高级程序设计读后感

第二章

HTML中的JavaScript

2.1<script>元素

属性：

1.async（可选）：立即开始下载脚本（异步下载），只对外部脚本有用
2.charset（可选）：使用src来指定代码的字符集，不常用
3.crossorigin（可选）：一种机制，用于一个网页向另一个域请求从第三方服务器获取资源，crossorigin= "anonymous"属性值表示它定义了一个 CORS 请求，该请求将在不传递凭证信息的情况下发送。crossorigin="usecredentials"属性值表示将发送带有凭据、cookie 和证书的 CORS  请求。
4.defer（可选）：表示脚本会被延迟到文档完全加载解析了之后才执行，只对外部脚本生效。
5.integrity（可选）：通过对比接收到的资源的签名和这个属性的签名是否相同来验证资源的完整性，如果不相同，脚本就不会被执行。
6.language（废弃）：用于表示代码块的脚本语言。
7.src（可选）：表示要执行的外部脚本文件。
8.type（可选）：用于代替language，其值始终是text/javascript
1
2
3
4
5
6
7
8

使用<script>的方式有两种：通过它直接在网页中嵌入 JavaScript 代码，以及通过它在网页中包含外部 JavaScript 文件。
在使用行内 JavaScript 代码时，要注意代码中不能出现字符串</script>。比如，下面的代码会导致浏览器报错：

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

浏览器解析行内脚本的方式决定了它在看到字符串</script>时，会将其当成结束的</script>标签。想避免这个问题，只需要转义字符“\”①即可：

<script> 
 function sayScript() { 
 console.log("<\/script>"); 
 } 
</script>
1
2
3
4
5

这样修改之后，代码就可以被浏览器完全解释，不会导致任何错误。

2.1.1标签位置

最开始所有<script>元素都被放在页面的标签内

<!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

这种方法是为了把从外部导入得脚本文件放在一起。但是把所有JavaScript文件都放在<head>里，也就意味着必须把所有 JavaScript 代码都下载、解析和解释完成后，才能开始渲染页面（页面在浏览器解析到<body>的起始标签时开始渲染）。如果脚本文件很多，会导致页面渲染产生明显的延迟，这时的页面完全处于空白。
后来为了解决这一问题，现代web应用会把脚本文件放在在<body>元素中的页面内容后面

<!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

这样一来，页面会在处理 JavaScript 代码之前完全渲染页面。用户会感觉页面加载更快了，因为浏览器显示空白页面的时间短了。

2.1.2 推迟执行脚本

具体做法就是使用defer属性，因为defer属性表示在脚本执行的时候不会改变页面结构，使得脚本会被延迟到整个页面解析完成之后再执行，所以，在<script>上设置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>标签后才会执行。

2.1.3 异步执行脚本

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

<!DOCTYPE html> 
<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
11

在这个例子中，第二个脚本可能先于第一个脚本执行。

2.1.4 动态加载脚本

加载脚本的方法，除了<script>标签外，还有通过向DOM中添加script元素也可以实现加载脚本。只需要创建一个script元素并且添加到DOM中就可以。

let script = document.createElement('script'); 
script.src = 'gibberish.js'; 
document.head.appendChild(script);
1
2
3

默认情况下，以这种方式创建的<script>元素是以异步方式加载的，相当于添加了 async 属性。不过这样做可能会有问题，因为所有浏览器都支持 createElement()方法，但不是所有浏览器都支持 async 属性。因此，如果要统一动态脚本的加载行为，可以明确将其设置为同步加载：

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

2.2 行内代码与外部文件

使用外部文件的理由：

1.可维护性。JavaScript 代码如果分散到很多 HTML 页面，会导致维护困难。而用一个目录保存所有 JavaScript 文件，则更容易维护，这样开发者就可以独立于使用它们的 HTML 页面来编辑代码。
2.缓存。浏览器会根据特定的设置缓存所有外部链接的 JavaScript 文件，这意味着如果两个页面都用到同一个文件，则该文件只需下载一次。这最终意味着页面加载更快。
3.适应未来。通过把 JavaScript 放到外部文件中，就不必考虑用 XHTML 或前面提到的注释黑科技。包含外部 JavaScript 文件的语法在 HTML 和 XHTML 中是一样的。
1
2
3

2.3 <noscript>元素

该元素是针对不支持JavaScript的早期浏览器，为不支持JavaScript的浏览器提供替代内容，如今，因为所有的浏览器已经支持JavaScript，所以只有两种情况可以看到这个元素：

浏览器不支持脚本
浏览器对脚本的支持被关闭
任何一个条件被满足，包含在中的内容就会被渲染。否则，浏览器不会渲染<noscript>中的内容。

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

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

2.4小结

JavaScript 是通过<script>元素插入到 HTML 页面中的。这个元素可用于把 JavaScript 代码嵌入到
HTML 页面中，跟其他标记混合在一起，也可用于引入保存在外部文件中的 JavaScript。本章的重点可
以总结如下:

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/木道寻08/article/detail/836927