2 📖 《JavaScript 高级程序设计》__ HTML 中的 JavaScript

作者：HoMeTown

2023-01-17
北京
本文字数：2262 字
阅读完需：约 7 分钟

2 📖 《JavaScript高级程序设计》__ HTML中的JavaScript

前言

大家好，我是 HoMeTown，web 领域有一本神书大家应该都有看过，这本书我看过两遍，但是每次看都是粗粗的略过一些重要的知识点，甚至一些面试过程中的问题，在这本书里都能找到答案。

工作这么多年，到现在为止对这本书都没有一个系统的知识点记录，这次想从头读一遍这一本 JavaScript 高级程序设计【第 4 版】，并把重要的知识点记录下来，同时加上自己的见解。

script 标签

script 标签出现的原因是为了解决早期js引入html页面的同时，不会导致页面在其他浏览器中渲染出问题。

通过<script></script>的方式可以将一段 script 脚本插入到 html 中，或者引入到 html 中。

script 标签有以下属性：

async
charset
crossorigin
defer
integrity
language
src
type

async 异步执行脚本

可选值，开启 async 后，浏览器会立即开始下载脚本，这个动作是异步的，不能阻止页面其他动作。必须是引入外部文件的 script 上才能使用，也就是必须与src属性同时使用。

<script        async        src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"        ></script><script>  console.log(jQuery); //  Uncaught ReferenceError: jQuery is not defined</script>

复制代码

上面这段代码会抛出错误，因为上面的script async src=jquery是异步，并不会影响下面的script脚本，并且后面这段script脚本执行时，上面的脚本还未加载完毕。

改造一下：

 <script         async         src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"         ></script><script>  setTimeout(() => {    console.log(typeof jQuery); // function  }, 1000);</script>

复制代码

charset 指定字符集

可选值，使用src属性时，指定的代码字符集，一般很少用，一般为UTF-8,Unicode 的字符编码。兼容 ASCII。

corssorigin 开启跨域校验

可选值，开启后可以要求服务器是否进行 cors 校验，属性的可用值：

anonymous 对此元素的 CORS 请求将不设置凭据标志（默认值）
use-credentials 对此元素的 CORS 请求将设置凭证标志；这意味着请求将提供凭据
"" 与 corssorigin="anonymous"效果相同

HTML5 新增属性，其实本来<script>标签就是可以跨域请求资源的，那为啥还要有这么一个属性呢？红宝书上对这个属性并没有太多的解释。

查阅资料后发现script 标签请求资源的时候，request header里是没有origin的：

加上crossorigin后就有了，值为null：

其实这样还是能请求成功，因为这个文件设置了access-control-allow-origin: *，随便找一个没有设置的，测试如下：

删除这个属性，测试如下：

只是有代码上的报错，但是不跨域了。

总结一下：

设置了crossorigin就相当于开启了 cors 校验。
开启 cors 校验之后，跨域的 script 资源在运行出错的时候，window.onerror可以捕获到完整的错误信息。
crossorigin=use-credentials可以跨域带上 cookie。

defer 延迟执行脚本

可选值，脚本可以延迟到文档完全被解析和显示以后才执行，举个例子：

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <script defer src="./defer1.js"></script>    <script defer src="./defer2.js"></script>  </head>  <body>    <div id="box"></div>    <script>      let box = document.querySelector("#box");      box.innerHTML = "HoMeTown";      for (var i = 0; i < 999999; i++) {        console.log(i);      }    </script>  </body></html>

复制代码

执行结果如下：

也就是说，即使我的 script 标签在顶部，只要加了defer属性之后其实就是在文档全部解析渲染完毕后执行的。需要注意的是，defer 属性的支持是从 IE4、Firefox3.5、Safari5 和 Chrome7 开始的，其他浏览器则会忽略这个属性，因此，最好还是把要推迟执行的脚本放在页面底部比较好。

integrity web 安全文件资源完整性校验

可选值，允许比对接收到的资源和指定的加密签名以验证子资源的完整性（SRI，Subresource Integrity），如果接收到的资源的签名和这个属性置顶的签名不匹配，页面会报错。这个属性可以确保 CDN(Content Delivery Network)不会提供恶意内容。

src 引入外部 js 文件

可选值，引入外部 js 代码文件。

type 规定内容类型

可选值，表示代码块中语言的内容类型（MIME 类型）。一般情况下始终为text/javascript，如果值为moddule，则代码会被当成ES6模块，只有这时候，代码中才能出现import和export关键字。

举个例子：

<script type="module">  import { num } from "./type.js";  console.log(num);</script>

复制代码

noscript 标签

针对早期浏览器不支持 JavaScript 标签的问题，<noscript>标签诞生，现在基本上所有浏览器都支持Js，所以这个基本没什么作用了，但是有的浏览器支持禁用 Js，所以，项目里还是写上这个标签比较稳妥。

<noscript>  您的浏览器不支持JavaScript，请更换浏览器。</noscript>

复制代码

总结

script 标签支持的属性需要明白什么意思，有什么作用。
noscript 标签是在不支持 js 的浏览器中才生效的，如果支持，则看不到该标签内的内容。

下次见~ 我的朋友，我是HoMeTown👨‍💻‍，➕我 VX，💊你进群，这是一个大家共同成长、共同学习的社群！在这里你可以：讨论技术问题、了解前端资讯、打听应聘公司、获得内推机会、聊点有的没的。
👉 vx: hometown-468【单独拉你】
👨‍👩‍👧 公众号：秃头开发头秃了 【关注回复“进群”】

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/b68e455a8fa52c9175ed55dcc】。文章转载请联系作者。

HoMeTown

关注

还未添加个人签名 2022-12-29 加入

还未添加个人简介

发布

暂无评论

创作场景

2 📖 《JavaScript 高级程序设计》__ HTML 中的 JavaScript

前言

script 标签

async 异步执行脚本

charset 指定字符集

corssorigin 开启跨域校验

defer 延迟执行脚本

integrity web 安全文件资源完整性校验

src 引入外部 js 文件

type 规定内容类型

noscript 标签

总结

HoMeTown

评论