浅习一波 JavaScript 高级程序设计(第4版)p2

简介: JavaScript 高级程序设计第 4 版(后简称高程4),相较于第 3 版,增加了 ES6 至 ES10 的全新内容,删除了旧版过时的内容,并在原有基础上充实了更加翔实的内容。

image.png

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 区别即可;


相关文章
|
人工智能 JavaScript 前端开发
JavaScript高级程序设计继承(二)
有时候可能需要定义这样一个类,它可供其他类继承,但本身不会被实例化。虽然 ECMAScript 没 有专门支持这种类的语法 ,但通过 new.target 也很容易实现。new.target 保存通过 new 关键字调 用的类或函数。通过在实例化时检测 new.target 是不是抽象基类,可以阻止对抽象基类的实例化:
145 0
|
存储 JavaScript 前端开发
《JavaScript高级程序设计》__ 作用域&内存
前言 大家好,我是HoMeTown,web领域有一本神书大家应该都有看过,这本书我看过两遍,但是每次看都是粗粗的略过一些重要的知识点,甚至一些面试过程中的问题,在这本书里都能找到答案。
38038 3
《JavaScript高级程序设计》__ 作用域&内存
|
JavaScript 前端开发
《JavaScript高级程序设计》__ 语言基础(上)(1)
前言 大家好,我是HoMeTown,web领域有一本神书大家应该都有看过,这本书我看过两遍,但是每次看都是粗粗的略过一些重要的知识点,甚至一些面试过程中的问题,在这本书里都能找到答案。
149 3
|
移动开发 JavaScript 前端开发
《JavaScript高级程序设计》__ HTML中的JavaScript
前言 大家好,我是HoMeTown,web领域有一本神书大家应该都有看过,这本书我看过两遍,但是每次看都是粗粗的略过一些重要的知识点,甚至一些面试过程中的问题,在这本书里都能找到答案
128 3
|
JavaScript 前端开发
浅习一波JavaScript高级程序设计(第4版)p7-生成器
于是乎,借着更文契机,本瓜将开启一个小系列,带你重看一遍高级程序设计4(先前只是跳着跳着看),将抽取精华,用最简单的话解释核心点、尽量把握全局、快速过一遍的同时,记录与工友们分享~~
|
设计模式 JavaScript 前端开发
浅习一波JavaScript高级程序设计(第4版)p7-迭代器
JavaScript 高级程序设计第 4 版(后简称高程4),相较于第 3 版,增加了 ES6 至 ES10 的全新内容,删除了旧版过时的内容,并在原有基础上充实了更加翔实的内容。 中文译版于 2020 年发售,妥妥的“新鲜出炉”,你要是问本瓜:当今学 JavaScript 哪家强,我只能说:红宝书第 4 版最在行。
|
存储 JavaScript 前端开发
浅习一波JavaScript高级程序设计(第4版)p6
JavaScript 高级程序设计第 4 版(后简称高程4),相较于第 3 版,增加了 ES6 至 ES10 的全新内容,删除了旧版过时的内容,并在原有基础上充实了更加翔实的内容。
|
Web App开发 XML JSON
《JavaScript高级程序设计》__ 什么是JavaScript?
前言 大家好,我是HoMeTown,web领域有一本神书大家应该都有看过,这本书我看过两遍,但是每次看都是粗粗的略过一些重要的知识点,甚至一些面试过程中的问题,在这本书里都能找到答案。
165 0
|
JavaScript 前端开发
《JavaScript高级程序设计》__ 基本引用类型(下)
前言 大家好,我是HoMeTown,web领域有一本神书大家应该都有看过,这本书我看过两遍,但是每次看都是粗粗的略过一些重要的知识点,甚至一些面试过程中的问题,在这本书里都能找到答案。
109 0
|
JavaScript 前端开发 索引
《JavaScript高级程序设计》__ 基本引用类型(上)
前言 大家好,我是HoMeTown,web领域有一本神书大家应该都有看过,这本书我看过两遍,但是每次看都是粗粗的略过一些重要的知识点,甚至一些面试过程中的问题,在这本书里都能找到答案。
106 0