浅习一波 JavaScript 高级程序设计（第4版）p2
theme: smartblue
持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情
JavaScript 高级程序设计第 4 版（后简称高程4），相较于第 3 版，增加了 ES6 至 ES10 的全新内容，删除了旧版过时的内容，并在原有基础上充实了更加翔实的内容。
中文译版于 2020 年发售，妥妥的“新鲜出炉”，你要是问本瓜：当今学 JavaScript 哪家强，我只能说：红宝书第 4 版最在行。
于是乎，借着更文契机，本瓜将开启一个小系列，带你重看一遍高级程序设计4（先前只是跳着跳着看），将抽取精华，用最简单的话解释核心点、尽量把握全局、快速过一遍的同时，记录与工友们分享~~
正文
第二章，讲的是 html 中的 <script> 标签。
这里最重要的，也是面试中常考的点是：<script> 配置 async 和 defer 属性的区别。
async：表示应该立即开始下载脚本，但不能阻止其他页面动作，比如下载资源或等待其 他脚本加载。 defer：表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。
换句话说：配置了 async 和 defert ，加载脚本都不会阻塞页面的渲染，但在执行顺序上有差异；
async | 加载优先顺序。脚本在文档中的顺序不重要 —— 先加载完成的先执行 | 不相关。可能在文档加载完成前加载并执行完毕。如果脚本很小或者来自于缓存，同时文档足够长，就会发生这种情况。 |
|---|---|---|
defer | 文档顺序（它们在文档中的顺序） | 在文档加载和解析完成之后（如果需要，则会等待），即在 DOMContentLoaded 之前执行。 |
在实际开发中，defer 用于需要整个 DOM 的脚本，或脚本的相对执行顺序很重要的时候。
async 用于独立脚本，例如计数器或广告，这些脚本的相对执行顺序无关紧要。
除了解释async 和 defert，还介绍了其它几个属性，不作展开；
接着呢，说道 <script> 标签应该放在 <body> 标签中，而不是 <head> 标签中；
除了<script>标签，还有其他方式可以加载脚本，比如：
let script = document.createElement('script');
script.src = 'gibberish.js';
document.head.appendChild(script);💡 思考，这种加载脚本的方式是同步的，还是异步的？
另外，还强调了：将 JavaScript 代码放在外部文件中，比直接放在 HTML 中，是更好的实践。因为可以被更好的维护，更适合被分模块被缓存、更适合未来演变；
最后带过 文档模式 和 很少用到的 <noscript> 标签；
我们可以感受到：浏览器演变至今，已经统一了很多规范，兼容了很多支持，浏览器的支持在向好的一面发展。
小结
这就是第二章的浅读，比较简练，实际上也就这么多~ 抓住 async 和 defer 区别即可；
OK，以上便是本篇分享。 觉得不错点个赞吧👍👍👍，您的鼓励，我的动力，坚持输出质量好文~~ 欢迎评论留言 我是掘金安东尼，输出暴露输入，技术洞见生活。再会吧~~ 👋👋👋
腾讯云开发者
