持续记录二刷“红宝书”

想学吉他！

已于 2023-11-05 21:13:30 修改

阅读量146

点赞数

分类专栏：红宝书（第四版）文章标签： javascript 前端

于 2023-10-12 23:57:49 首次发布

本文链接：https://blog.csdn.net/ccqsss/article/details/133801230

版权

红宝书（第四版）专栏收录该内容

1 篇文章 0 订阅

订阅专栏

持续记录监督自己二刷红宝书的收获，持续更新（监督自己）

写在前面：
红宝书是去年3月入手的（2022年3月30号入手），去年断断续续最终没有坚持下去，每天看十页，最终看了526页（总共800多页），一刷没能看完，希望这次二刷可以坚持看完，并在此记录每次看到之后学习到的东西，持续更新。喜欢可以收藏下，一起监督并成长学习和进步！！！

第一天 (2023-10-12 23:23)

学习了第1章（什么是JavaScript）以及第2章（HTML 中的 JavaScript）

第1章主要介绍了JavaScript的由来，是网景公司的杰作，以及他一开始的用途，用来解决当时表单的校验让其在客户端完成，增加用户交互体验，节省请求，以及后来JavaScript的开放，以及实现，为了更好的让其发展，并让全部浏览器统一实现，基于ECMAScript，完整的JS包含了对ECMAScript标准的实现，还包括了DOM（文档对象模型）和BOM（浏览器对象模型）的实现，随着版本的不断更新，主要的五大浏览器厂商对JS的支持逐渐标准化。

第2章主要讲解了再HTML中如何引入JS脚本文件，引入方式是通过<script><script/>元素标签来实现，这个元素有许多属性，例如src async defer…,需要注意的是在HTML中加载JS文件会阻塞网页加载以及页面渲染，而且多个外部脚本文件是根据先后顺序一次引入加载的（当然可以使用async 等属性控制其加载顺序），一般的方式是把脚本放到body最后让其加载，或者通过defer这种类似属性，让脚本延迟到整个页面都解析完毕后再运行，或使用async异步加载，这样不会阻塞文档渲染，但异步加载不能保证多个外部脚本在页面中的执行顺序。

行内代码不如外部.js文件好处多，外部文件可维护性好，有缓存（例如多个页面都用到了同一个文件，这个文件只需要下载一次，提高页面加载速度）

第二天（2023-10-13）

学习了第3章（数据类型）

var let const 使用const优先，let次之，var尽可能不使用（var存在声明提升，声明的变量会自动提升到函数作用域顶部）

let声明的变量作用域是块作用域也就是 {} 这里面的
for循环初始条件 let i = 0 这样可以防止 var i = 0 开始在最后一次输出时打印的问题

数据类型

typeof 操作符用来确定任意变量的数据类型
原始类型 6 个简单数据类型（undefined null Boolean Number String Symbol）复杂数据类型 1 个 (Object)
null值表示一个空对象指针在定义将来要保存对象值的变量时，建议使用null来初始化
判断一个值是不是介于JS能表示的最小值和最大值之间，使用 isFinite()函数判断
数值转化可以使用 Number() parseInt() parseFloat()

第三天（2023-10-14 11:54）

学习了第3章（数据类型）

String 类型：几乎所有值都有toSting()方法，用途是返回当前值的字符串等价物 null和undefined没有此方法（但是可以用String（）方法），toSting()方法对数值调动时可以传入一个参数，表示已对应的 2 8 16 进制输出数值的字符串表示
标签函数：
在JavaScript中，标签函数（Tag function）是一种特殊类型的函数，用于处理模板字面量（Template literals）。模板字面量是带有特殊语法的字符串，可以包含插值表达式和多行文本。
标签函数的语法形式是，在模板字面量前面紧跟着一个函数名并使用调用符号（例如反引号）括起来，如下所示：

function myTagFunction(strings, ...values) {
  // 对模板字面量进行处理
  // strings 是一个字符串数组，包含模板字面量中的所有文本部分
  // values 是一个值数组，包含模板字面量中的插入值
  
  // 在这里可进行自定义的逻辑操作
  // 操作可以根据需要处理字符串和插入值
  
  // 返回最终处理结果
  return finalResult;
}

const result = myTagFunction`Hello, ${name}! The answer is ${answer}.`;

在这个例子中，myTagFunction 是一个标签函数，它接收两个参数：strings 和 values。strings 是一个字符串数组，包含模板字面量中的所有文本部分；values 是一个值数组，包含模板字面量中的插入值。

标签函数可以执行任意的逻辑操作来处理模板字面量，例如字符串拼接、格式化、过滤、安全转义等。在处理完成后，标签函数返回最终的处理结果。

通过使用标签函数，我们可以对模板字面量进行定制化的处理，使得模板字面量的使用更加灵活和功能丰富。

原始字符串：使用String>raw标签函数可以原样输出转化前的字符表示
Symbol类型：符号是原始类型，且符号实例是唯一的，不可变的符号的用途是确保对象属性使用唯一标识符，不会发生属性冲突的危险。用法 let sym = Symbol() 即生成一个符号
一元操作符：只操作一个值的操作符
按位非 ~ 最终效果是数值取反并减一例如 let a = 6 ~a === -7
标签语句（Labeled Statement）是一种在 JavaScript 中用于标记语句的特殊语法。它可以用来在嵌套的循环或条件语句中明确指定需要跳转到的目标位置，并在特定情况下使用 continue 或 break 关键字跳转到标签语句所在的位置。

下面是一个使用标签语句的简单示例：

outerLoop: for (let i = 0; i < 3; i++) {
  console.log("外部循环：" + i);
  innerLoop: for (let j = 0; j < 3; j++) {
    if (j === 1) {
      console.log("跳过内部循环：" + j);
      continue outerLoop;
    }
    console.log("内部循环：" + j);
  }
}

在这个例子中，我们使用了两个嵌套的 for 循环，并给外层循环和内层循环分别添加了标签 outerLoop和 innerLoop。标签形式为一个标识符后面跟着冒号。

在内层循环中，当 j 的值等于 1 时，我们使用 continue 和标签名 outerLoop 来实现跳过整个外层循环。因此，当 j 为 1 时，内层循环将终止，并直接跳转到外层循环的下一次迭代。

通过在跳转语句中使用标签，我们可以指定在多层嵌套结构中跳转到具体的位置。这在某些特定的循环或条件逻辑下是很有用的。

需要注意的是，滥用标签语句可能会导致代码难以理解和维护。因此，建议只在有明确需求且合理的情况下使用标签语句。

with 语句是 JavaScript 中的一种语法结构，它允许你在特定的代码块中将一个对象作为上下文来简化访问该对象的属性。

下面是一个使用 with 语句的简单示例：

const person = {
  name: "John",
  age: 30,
};

with (person) {
  console.log(name); // 输出：John
  console.log(age); // 输出：30
}

在这个例子中，我们在 with 语句块中使用了 person 对象作为上下文。在 with 块内部，我们可以直接访问该对象的属性 name 和 age，而无需使用对象名称作为前缀。这样可以为代码提供一定的简洁性。

需要注意的是，使用 with 语句存在一些潜在的问题和风险，因此在编写代码时需要小心使用：

性能开销： with 语句会在每次访问属性时进行作用域链的查找，可能导致性能上的损失。因此，在大型代码库或需要优化性能的情况下，应避免使用 with 语句。
作用域混淆： with 语句会引入一定的作用域混淆，使得代码更难理解、维护和调试。由于访问未声明的变量时会自动创建全局变量，可能会导致意外的行为和错误。
严格模式下禁用： 在严格模式下，with 语句被禁用，任何使用 with 的代码都会导致语法错误。因此，在使用严格模式的情况下，无法使用 with 语句。

由于上述问题和风险，建议在编写代码时避免或谨慎使用 with 语句，并尽可能使用对象名称来访问属性，以提高代码的可读性和维护性。

第四天（2023-10-15 00:14）

学习了第4章（变量、作用域与内存）

原始值就是简单的数据引用值是由多个值构成的对象
变量或函数的上下文决定了他们可以访问哪些数据以及他们的行为
上下文中的代码在执行的时候会创建变量对象的一个作用域链
内部上下文可以通过作用域链访问外部上下文中的一切，但是外部上下文无法访问内部上下文中的任何东西
垃圾回收两种实现方式标记清理引用计数
垃圾回收程序的运行会影响性能
执行上下文可以理解为作用域

第五天（2023-10-16 23:08）

学习了第5章（基本引用类型）

引用类型是把数据和功能组织到一块的结构也被叫做对象定义
对象被称为是某个特定引用类型的实例
函数也是一种引用类型
原始值包装类型：目的是为了方便操作原始值（这种特殊的原始值被赋予特殊的引用类型） Boolean Number String

第六天（2023-10-17 21:07）

继续学习了第5章（基本引用类型）第6章（集合引用类型）

string字符串方法
repeat（）：这个方法接收一个整数参数，表示要将字符串复制多少次，然后返回拼接所有副本后的结果
padStart() padEnd() : 这两个方法的第一个参数是长度，第二个参数是可选的填充字符串

Math对象

Math对象提供了一些辅助计算的属性和方法
min() max():最大最小值
Math.ceil()) Math.floor() Math.round() Math.fround() :向上取整向下取整四舍五入返回数值最接近的单精度浮点值表示
random(): 返回生成一个0~1范围内的随机数（包含0，但不包含1）

集合引用类型章节相关知识点

在给一个函数传递参数时有一个好的方法：对必选参数使用命名参数，再通过一个对象字面量来封装多个可选参数

对象的属性一般是通过点语法来存取，同时也可以使用[]中括号来存取属性，相比于点语法中括号的优势在于可以通过变量访问属性（例如 let a = “name” obj{name:zhangsna,age:18} obj[a] 这里变量 a 等同于 name）
数组的5个迭代方法 every() filter() forEach() map() some() 这些方法都不改变调用他们的原数组
数组的2个归并方法 reduce() reduceRight() 这两个方法都会迭代数组的所有项，并在此基础上构建一个最终的返回值例如求和计算商品总价格时候使用

第七天（2023-10-18 23:50）

继续学习了第6章（集合引用类型）

定型数组
Map WeakMap
Set WeakSet
迭代与扩展操作

第八天（2023-10-19 23:00）

学习了第7章（迭代器与生成器）第8章（对象、类与面向对象编程）

迭代器和生成器是ES6引入的两个新的语言特性

对象就是一组没有特定顺序的值
对象的属性就是他的一些特征，这些特征决定了他们在JS中的行为

第九天（2023-10-21）

学习了第8章（对象、类与面向对象编程）

同一个构造函数创建的两个实例，共享同一个原型对象
原型用于在多个对象实例间共享属性和方法
hasOwnProperty():这个方法用于确定某个属性是在实例上还是在原型上面
对象迭代的方法： Object.vallues() Object.entries() 前一个返回对象值的数组，后一个返回对象键值对的数组，注意对象中的符合属性会被忽略。

类相关知识

类就是一种特殊的函数
使用instanceof操作符检查一个对象与类构造函数，来确定这个对象是不是类的实例

第十天（2023-10-22 14：00）

学习了第9章第10章（代理与反射）（函数）

ec6新增的代理和反射为开发者提供了拦截并向基本操作嵌入额外行为的能力
代理是一种新的基础性语言能力，且只能在百分之百支持他们的平台上有用
代理是目标对象的抽象，用作目标对象的替身，但又可以完全独立于目标对象。目标对象既可以直接被操作，也可以通过代理来操作，但直接操作会绕过代理施予的行为。
代理是使用Proxy构造函数创建的。
反射API为开发者准备好了样板代码，在此基础上开发者可以用最少的代码修改捕获的方法。
代理可以捕获13种不同的基本操作，这些操作有各自不同的反射API方法、参数、···
只要在代理上调用，所有捕获器都会拦截他们对应的反射API

函数

函数声明函数表达式箭头函数三种方式来定义一个函数，实例化一个函数
把函数想象为对象，把函数名想象为指针
不使用大括号，箭头函数后面只能有一行代码，省略大括号会隐式的返回这行代码的值
箭头函数不能使用arguments super ，也不能用作构造函数，也没有prototype属性
es6新增了扩展操作符，使用它可以非常简洁的操作和组合集合数据，扩展操作符既可以用于调用函数时传参，也可以用于定义函数参数（因为它利用js这门语言的弱类型及参数长度可变的特点）
函数声明会在任何代码执行之前先被读取并添加到执行上下文，这个过程叫作函数声明提升。
在标准函数中，this引用的是把函数当成方法调用的上下文对象
在箭头函数中，this引用的是定义箭头函数的上下文
函数有两个方法 apply() call() 这两个方法都会以指定的this值来调用函数（即会设置调用函数时函数体内this对象的值）
创建一个函数再把他赋值给一个变量，这样创建的函数叫做匿名函数（也叫做兰姆达函数）
尾调用，即外部函数的返回值是一个内部函数的返回值
闭包：闭包指的是哪些引用了另一个函数作用域中变量的函数，通常是在嵌套函数中实现的。
单例对象就是只有一个实例的对象
可以访问私有变量的公共方法叫做特权方法

第十一天（2023-10-23 21：11）

学习了第11章（期约与异步函数）

使用async 和 await 关键字定义异步函数的机制
异步行为是为了优化因计算量大而时间长的操作
期约（promise）是对尚不存在结果的一个替身
es6新增的引用类型 Promise，通过new操作符来实例化
创建新期约时需要传入执行器（也就是函数）作为参数，不然会抛出SyntaxError
期约是一个有三种状态的对象分别是待定兑现拒绝（状态确定为兑现或拒绝后是不可逆的）
期约实例的方法是连接外部同步代码与内部异步代码之间的桥梁
Promise.finally() 方法用于给期约添加onFinaly处理程序，这个处理程序主要用来避免.then 成功或失败中的共同的冗余代码（但是此处理程序没有办法知道期约的状态是解决还是拒绝，所以这个方法主要用于添加清理代码）
Promise.all() Promise.race() 可以将多个期约实例组合成一个期约

第十二天（2023-10-24 20：37）

继续学习了第11章第12章（期约与异步函数）（BOM）

异步函数，也称为 async/await ，是es6期约模式在es函数中的应用 让以同步方式写的代码能够异步执行
async 关键字用于声明异步函数，使用async关键字可以让函数具有异步特征，但总体上其代码任然是同步求值的。
异步函数始终返回期约对象
await 关键字会暂停执行异步函数后面的代码
await 关键字必须在异步函数中使用
利用异步函数可以在程序中加入非阻塞的暂停（不需要使用setTimeout()的运行时行为来实现了）

BOM是使用JavaScript开发WEB应用程序的核心
BOM提供了与网页无关的浏览器功能对象
BOM的核心是window对象，表示浏览器的实例
把窗口移动到左上角可以这样写 window.moveTo(0,0)

第十三天（2023-10-25 20：57）

继续学习了第12章第13章（BOM）（客户端检测）

location对象既是window的属性，也是document的属性，提供了当前窗口中加载文档的信息，以及通常的导航功能。
navigator对象的属性通常用于确定浏览器的类型，主要返回浏览器相关的属性，和浏览器的功能等。
通过history.length，可以确定用户浏览器的起点是不是你的页面。
screen对象中保存着客户端显示器的信息。

能力检测
用户代理检测
要获取浏览器当前的位置，可以使用getCurrentPosition()方法。

第十四天（2023-10-26 21：07）

继续学习了第14章（DOM）

文档对象模型DOM是HTML和XML文档的编程接口
DOM中总共有12种节点类型，这些类型都继承一种基本类型
Node类型每个节点都有nodeType属性，表示该节点的类型
Document类型是JavaScript中表示文档节点的类型
Element 类型表示XML 或 HTML元素
HTML5规范，自定义属性名应该前缀data-以方便验证
Text类型
Comment 类型 DOM中的注释通过Comment类型表示
CDATASection 类型表示XML中特有的CDATA区块
DocumentType类型的节点包含文档的文档类型信息
DocumentFragment 类型唯一一个在标记中没有对应表示的类型文档片段作用为了避免多次渲染
Attr类型

第十五天（2023-10-27 21：29）

继续学习了第14章第15章（DOM）（DOM扩展）

MutationObserber接口，可以在DOM被修改时异步执行回调
文档对象模型DOM是语言中立的HTML和XML文档的API

querySelectedAll（）返回NodeList实例一个属性和方法都不缺，但是它是一个静态的快照，而不是实时的查询。这样的底层实现避免了使用NodeList对象可能造成的性能问题。
matches() 返回一个布尔值此方法接受一个CSS选择符参数，如果元素匹配则该选择符返回true,否则返回false
焦点管理 document.activeElement,始终包含当前拥有焦点的DOM元素。
使用focus（）方法，可以以代码的方式让某个元素自动获取焦点
document.readState 用来判断文档是否加载完毕和 onload 事件处理程序要完成的事情一样
compatMode 属性，用来检查页面渲染模式两种渲染模式标准或混杂模式渲染
非受控元素就是像《/script》元素和《/style》元素这样的在页面上看不到他们就是非受控元素
DOM 规定了JavaScript与HTML文档交互的核心API

第十六天（2023-10-28 10：48）

学习了第16章第17章（DOM2和DOM3）（事件）

DOM2和DOM3

DOM1主要定义了HTML和XML文档的底层结构；DOM2和DOM3在这些结构之上加入更多的交互能力，提供了更高级的XML特性。
命名空间（Namespaces）：命名空间是用于避免元素和属性名称冲突的机制。通过使用命名空间前缀，可以将元素和属性限定在特定的命名空间下。

事件

JavaScript与HTML的交互是通过事件实现的，事件代表文档或浏览器窗口中某个有意义的时刻。
监听器 === 处理程序
事件流描述了页面接受事件的顺序事件冒泡事件捕获
event事件对象包含与特定事件相关的属性和方法
type属性在一个处理程序处理多个事件时很有用（可以通过switch 判断不同的事件类型从而执行不同的操作）
preventDefault（）用于取消默认行为的事件
stopPropagation（）方法用于立即阻止事件流在DOM结构中穿模，取消后续的事件捕获或冒泡
与load事件相对的是unload事件，unload事件会在文档卸载完成后触发常用于清理引用，以避免内存泄漏
鼠标事件中获取鼠标点击的坐标有三个不同类型的坐标

客户端坐标客户端视口中的坐标 clientX | clientY
页面坐标页面上的坐标 pageX | pageY
屏幕坐标整个电脑显示器屏幕的坐标 screenX | screenY

键盘与输入事件 textInput事件会在文本被插入到文本框之前触发，使我们更方便地截获文本输入。
textInput事件身上有个inputMethod的属性，可以利用该属性知道用户如何将文本输入到控件中的，从而可以辅助验证（例如键盘输入粘贴拖放操作手写语音方式输入的等等）

第十七天（2023-10-29 12：23）

继续学习了第17章第18章（事件）（动画与Canvas图形）

设备事件可以用于确定用户使用设备的方式
利用事件委托可以只使用一个事件处理程序来管理一种类型的事件（事件委托利用事件冒泡）

第18章动画与Canvas图形

《canvas》是HTML5最受欢迎的新特性，这个元素会占据一块页面区域，让JavaScript可以动态在上面绘制图片。 canvas元素自身提供了一些API 包括基础绘图能力的2D上下文和被称为WebGL的3D上下文。

重绘（Repaint）和重排（Reflow）是网页渲染过程中的两个重要步骤。

重绘指的是改变元素的可视属性，例如颜色、背景、边框等，并且不影响其布局位置的操作。当元素的可视属性发生改变时，浏览器会重新绘制该元素，将新的样式应用到元素上。重绘的过程不涉及到元素的位置变化，只是单纯地改变元素的外观。

重排指的是改变元素的布局属性，例如尺寸、位置、文档流等。当元素的布局属性发生改变时，浏览器会重新计算并调整元素的大小和位置，以适应新的布局。重排的过程会涉及到整个文档的重新布局，它比重绘的成本要高。因为在重排过程中，浏览器需要重新计算文档内所有元素的位置关系，并重新绘制这些元素。 == 重排必然会引起重绘？？？？？ ==

重绘和重排的频繁发生会影响网页性能。因此，为了提高页面性能，我们应该尽量减少重绘和重排的频率。以下是一些减少重绘和重排的常见优化技巧：

- 使用 CSS 的 transform 属性代替 top/left 属性进行动画效果，因为 transform 不会引起重排。
- 将需要批量修改的 DOM 元素离线处理，例如先将其隐藏(display:none)，进行修改后再显示，以减少重绘和重排的次数。
- 使用 CSS3 的过渡（transition）和动画（animation）效果，因为它们可以利用浏览器的硬件加速，减少重绘和重排的成本。
- 避免频繁访问布局属性，将其缓存起来以减少重排次数。
- 对于频繁变动的元素，可以使用绝对定位（position:absolute）或固定定位（position:fixed）脱离文档流，减少重排的范围。

综上所述，重绘和重排是网页渲染过程中的两个重要步骤，了解它们的概念和优化技巧可以帮助我们提高网页性能。

创建《canvas》元素时至少要设置其width和height属性，这样才能告诉浏览器在多大面积上绘图。出现在开始和结束标签的内容时后备数据，会在浏览器不支持canvas元素时显示。
可以使用toDataURL（）方法导出canvas元素上的图像
2D绘图上下文提供了绘制2D图形的方法

填充和描边
绘制矩形
绘制路径
绘制文本
变换
绘制图像
阴影
渐变
图案
图像数据
合成

WebGL是画布的3D上下文 WebGL不是W3C制定的标准
WebGL只能绘制三种形状点线和三角形其他形状必须通过这三种形状在3D空间的组合来绘制。
HTML5的《canvas》元素为JavaScript提供了动态创建图形的API，这些图形需要使用特定上下文绘制，主要有两种，第一种是支持基本绘图操作的2D上下文，第二种是3D上下文，也就是WebGL（WebGL是浏览器对OpenGL ES2.0的实现。OpenGL ES2.0是游戏图形开发常用的一个标准。WebGL支持比2D上下文更强大的绘图能力）。

第十八天（2023-10-30 21：51）

学习了第19章（表单脚本）

HTML5为表单字段增加了autofocus属性，支持的浏览器会自动为带有该属性的元素设置焦点。

第十九天（2023-10-31 23：04）

继续学习了第19章第20章（表单脚本）（JavaScript API）

富文本编辑也就是所谓的“所见即所得”编辑。
基本的技术就是在空白HTML文件中嵌入一个iframe，通过designMode属性，可以将这个空白文档变成可以编辑的。另一种方式是给任何元素指定contenteditable 属性，只要添加了这个属性的元素就可以被用户编辑。（这种方式更受欢迎，因为不需要额外的iframe 空白页和JavaScript，只需要给元素添加一个contenteditable属性即可）

第20章JavaScript API相关

腻子脚本是啥

第二十天（2023-11-01 20：52）

继续学习了第20章（JavaScript API）

Atomics API 通过强制同一时刻只能对缓冲区执行一个操作，可以让多个上下文安全地读写一个SharedArryBuffer（它与ArrayBuffer具有同样的API ，二者的主要区别是ArrayBuffer必须在不同执行上下文间切换，SharedArryBuffer则可以被任意多个执行上下文同时使用）。
在多个执行上下文之间共享内存意味着并发线程操作成为了可能。
跨文档消息，也简称XDM，是一种在不同执行上下文（如不同工作线程或不同源的页面）之间传递信息的能力。
-XMD的核心是POSTMessage（）方法。使用这个方法可以能实现与其他窗口通信。
Encoding API主要用于实现字符串与定型数组之间的转换。
FileAPI 与 BlobAPI是为了让Web开发者能够安全的方式访问客户端机器上的文件，从而更好地狱这些文件交互而设计的。
File API提供了FileReward类型，让我们可以实际从文件中读取数据。
FileReward类型表示一种异步文件读取机制。可以把FileReward想象成类似于XMLHttpRequest，只不过适用于从文件系统读取文件，而不是从服务器读取数据。
Blob是File的超类。表示二进制大对象。是JavaScript对不可修改二进制数据的封装类型。Blob构造函数可以接受一个参数，并指定文件类型。例如 new Blob([‘abcd’],{type:‘application/json’})
对象URL也称为Blob URL，是指引用存储在File或Blob中数据的URL。对象URL的优点是不用把文件内容读取到JavaScript也可以使用文件。要创建对象URL，可以使用 URL。createObjectURL（）方法，并传入File或Blob对象，这个函数返回一个值指向内存中地址的字符串。可以直接给img等DOM元素使用。
组合使用HTML5拖放API 与 File API 可以创建读取文件信息的功能。
拖放事件某个元素被拖动时，会按顺序触发以下事件 dragstart drag dragend
在把元素拖动到一个有效的放置目标上时，会依次触发以下事件 dragenter dragover dragleave/drop
HTML5 在所有HTML元素上规定了一个draggable属性，如果该属性为TRUE则可以拥有拖放能力，反之就没有。
Steams API是为了解决 Web应用如何消费有序的小信息块而不是大块信息，主要体现在以下应用场景，网络负载是以连续信息包形式交付的，而流式处理可以让应用在数据一到达就能使用，而不必等到所有数据都加载完毕。或者是大块数据可能要分小部分处理，例如视频处理数据压缩图像编码 JSON解析等都可以分为小部分进行处理，而不必等到所有数据都在内存中时再处理。
提到流，可以把数据想象成某种通过管道输送的液体。流的基本单位是块，块可以是任意数据类型，但通常是定型数组。每个块都是离散的流片段，可以作为一个整体来处理。

第二十一天（2023-11-02 21：08）

继续学习了第20章第21章（JavaScript API）（错误处理与调试）

date.now()知识毫秒级精度 window.performance.now()这个方法返回一个微秒精度的浮点值。
影子DOM的内容会实际渲染到页面上，而HTML模板的内容不会。

第21章错误处理与调试

try/catch语句作为JavaScript中处理异常的一种方式
finally子句，无论try中出不出错，都会执行finally中的代码。在try中return也阻挡不了 finally子句中的代码执行。
捕获错误的目的是阻止浏览器以其默认方式响应；抛出错误的目的是为错误提供有关发生原因的说明。
因为JavaScript是松散类型的，不会验证函数参数，所以很多错误只有在代码真正运行起来时才会出现。（使用静态代码分析工具例如typescript 在代码没有执行前预先发现和判断可能出现的错误！）

第二十二天（2023-11-03 22：53）

继续学习了第21章（错误处理与调试）

如果知道预期的确切类型，那么最好使用 instanceof 来确定值的正确类型。
原始类型的值应该使用typeof检测，而对象值应该使用instanceof检测。

第二十三天（2023-11-04 10：46）

学习了第22章第23章第24章第25章（处理XML）（JSON）（网络请求与远程资源）（客户端存储）

XML 一度是互联网上存储和传输结构化数据的标准。
Xpath是为了在DOM文档中定位特定节点而创建的。
接口规范定义类型，实例化类型在实例上有方法类型是对接口的实现
XSLT是可扩展样式语言转换，是与XML相伴的一种技术。
HTML的设计目的是用于表示和呈现内容，使其具有结构化的文档形式，用于在 web 浏览器中显示。而XML的设计目的是用于存储和传输数据，而不是用于呈现或展示数据。
XML更适用于描述和存储数据，以及实现不同系统之间的数据交互；而HTML更适用于在 web 浏览器中展示和呈现内容，以及构建网页。虽然它们具有一些相似之处，但其主要设计目的和用途有所不同。

JSON

JSON是JavaScript的严格子集，利用JavaScript中的几种模式来表示结构化数据。
JSON是一种数据格式，而不是编程语言。
JSON也不是只能在JavaScript中使用，他是一种通用数据格式。很多语言都有解析和序列化JSON的内置能力。
JSON借用了JavaScript的语法，但是不要把它跟JavaScript语言混淆。
例如JavaScript字符串与JSON字符串的主要区别是，JSON字符串必须使用双引号，因为单引号会导致语法错误。
JSON对象有两个方法 stringify（） parse（）这两个方法可以将JavaScript序列化为JSON字符串，以及将JSON解析为原生JavaScript值。
序列化选项，JSON.stringify()方法除了要序列化的对象，还可以接收两个参数，这两个参数可以用于缩进结果JSON字符串选项。单独或组合使用这些参数可以更好地控制JSON序列化。
字符串缩进，JSON.stringify()方法的第三个参数控制缩进和空格。在这个参数是数值时，表示每一级缩进的空格数，是字符串值而非数值时，那么就会使用字符串而非空格俩缩进。
toJSON()方法，在JSON.stringify之上定义JSON序列化。可以在要序列化的对象上添加toJSON方法，序列化时会基于这个方法返回适当的JSON表示。
解析选项 JSON.parse() 方法也可以接收一个额外的参数，这个函数会针对每个键/值对都调用一次。这个函数被称为还原函数。还原函数经常用于把日期字符串转换为Date对象。

总结：JSON是一种轻量级的数据格式，可以方便地表示复杂数据结构。这个格式使用JavaScript语法的一个子集表示对象数组字符串数值布尔值和 null 。虽然XML也拿给你胜任同样的角色，但是JSON更加简洁，JavaScript支持也更好。更重要的是，所有浏览器都已经原生支持全局JSON对象。 ECMAScript 5 定义了原生JSON对象，用于将JavaScript对象序列化为JSON字符串，以及将JSON数组解析为JavaScript对象。JSON.stringify() 和 JSON.parse() 方法分别用于实现这两种操作。这两个方法都有一些选项可以用来改变默认行为，以实现过滤或修改流程。

网络请求与远程资源

Ajax技术涉及发送服务器请求额外数据而不刷新页面。 XHR对象由微软发明，被其他浏览器借鉴。XHR为发送服务器请求和获取响应提供了合理的接口。
XHR对象的API被普遍认为比较难用，而Fetch API 自诞生以后就迅速成为了XHR更具现代替代标准。 Fetch API 支持promise 期约和服务线程 service worker。
let xhr = new XMLHttpRequest();
同源URL，也就是域名相同端口相同协议相同。
XHR 对象有一个readyState属性，表示当前处在请求/响应过程哪个阶段。每次readyState从一个值变成另一个值，都会触发readstatechange事件。
在收到响应之前如果想异步取消请求，可以调用abort()方法。
http头部，每个http请求和响应都会携带一些头部字段，这些字段对开发者很有用。
GET请求，用于向服务器查询某些信息，必要时，需要在get请求的URL后面添加查询字符串参数。
POST请求，用于向服务器发送应该保存的数据。每个post请求都应该在请求体中携带提交的数据，而get请求则不然，post请求的请求体可以包含非常多的数据，而且数据格式是任意的。
FormData类型便于表单序列化，也便于创建与表单类似格式的数据然后通过XHR发送。
例如 let data = new FormData(); data.apppend(“name”,“zhagnsan”);
append()方法接收两个参数，键和值，相当于表单字段名称和该字段的值。
此外，通过直接给FormData构造函数传入一个表单元素，也可以将表单中的数据作为键值对填充进去。
progress 事件，在浏览器接收数据期间，这个事件会反复触发。每次触发时，onpprogress 事件处理程序都会收到event对象，其target属性是XHR对象，且包含3个额外属性 lengthComputable （表示进度信息是否可用） position（表示接收到的字节数） totalSize(表示响应的ContentLength头部定义的总字节数) 有了这些信息，就可以给用户提供进度条了。
跨域资源共享CORS 定义了浏览器如何实现跨源通信。 cors背后的基本思路就是使用自定义的http头部允许浏览器和服务器互相了解。
预检请求 OPTIONS
凭据请求（cookie http认证客户端SSL证书）
图片探测是利用img标签实现跨域通信的最早的一种技术。但是只能利用图片探测实现浏览器与服务器单向通信。
JSONP JSONP看起来跟JSON一样，只是被包在一个函数里。他是Web服务上流行的一种JSON变体。相比于图片探测，使用JSONP可以直接访问，实现浏览器与服务器的双向通信。
Fetch API能够执行XMLHttpRequest对象的所有任务，但更容易使用，接口也更现代化。
XMLHttpRequest可以选择异步或同步，二FetchAPI必须是异步。
实时读取和操作网络请求返回的数据通过FetchAPI的ReadableStream。
Web Socket的目标是通过一个长时连接实现与服务器全双工、双向的通信。
Web Socket使用了自定义协议，所以URL方案稍有变化，不能再使用http:// 或 https：// ，而要使用ws://和wss://。
要创建一个新的 Web Socket ，就要实例化一个 Web Socket对象并传入提供连接的URL。例如 let socket = new WebSocket(“ws://www.baidu.com”);
同源策略不适用于 WebSocket，因此可以打开任意站点的连接。
WebSocket与XHR类似，也有一个readyState属性表示当前连接的状态。
任何时候都可以调用close（）方法关闭 WebSocket 连接

客户端存储

cookie 由古老的网景公司发明，是在客户端存储数据的一个选项。
实际开发中担心碰到每个域的cookie限制，则可以考虑使用子cookie这个方案。
Web Storage的目的是解决通过客户端存储不需要频繁发回服务器的数据时使用cookie的问题。
Web Storage的第二版定义了两个对象，localStorage和sessionStorage。localStorage是永久存储机制，sessionStorage是跨会话的存储机制。这两种浏览器存储API提供了在浏览器中不受刷新影响而存储数据的两种方式。
对于sessionStorage 和 localStorage 上的任何更改都会触发storage事件，但storage事件不会区分这两者。
IndexDB，是浏览器中存储结构化数据的一个方案。他的设计几乎完全是异步的。他也是类似于MySQL或webSQL database的数据库。与传统的数据库最大的区别在于，indexedDB使用对象存储而不是使用表格保存数据。

第二十四天（2023-11-05 11：17）

学习了第26章第27章第28章（模块）（工作者线程）（最佳实践）

将代码拆分成独立的块，然后再把这些块连接起来可以通过模块模式来实现。这种模式背后的思想很简单：把逻辑分块，各自封装，相互独立，每个块自行决定对外暴露什么，同时自行决定引入执行哪些外部代码。
模块系统有 CommonJS ADM ES6
CommonJS规范概述了同步声明依赖模块定义。这个规范主要用于在服务器端实现模块代码组织，也可以用于定义在浏览器中使用的模块依赖。但是CommonJS模块语法不能在浏览器中直接运行。
与CommonJS不同，AMD支持可选地为模块指定字符串标识符。
ES6模块是作为一整块JavaScript代码而存在的，带有type=“module” 属性的《script》标签会告诉浏览器相关代码应该作为模块执行，而不是作为传统的脚本执行。他也是集AMD和CommonJS之大成者。
ES6模块支持两种导出：命名导出和默认导出不同的导出方式对应不同的导入方式

工作者线程

工作者线程的价值：允许把主线程的工作转嫁给独立的实体，而不会改变现有的单线程模型。
使用工作者线程，浏览器可以在原始页面环境之外再分配一个完全独立的二级子环境，这个子环境不能与依赖单线程交互的API互（例如DOM）操作，但可以与父环境并行执行代码。
工作者线程的类型有三种专用工作者线程共享工作者线程服务工作者线程
专用工作者线程，通常被叫做工作者线程只能被创建它的页面使用。
共享工作者线程与专用工作者线程非常相似，主要区别是共享工作者线程可以被多个不同的上下文使用，包括不同的页面。任何与创建共享工作者线程的脚本同源的脚本，都可以向共享工作者线程发送消息或从中接受消息。
服务工作者线程与前两个线程截然不同，他的主要用途是拦截、重定向和修改页面发送的请求，充当网络请求的仲裁者角色。
网页中的脚本可以创建专用工作者线程来执行在页面线程之外的其他任务。这样的线程可以与父页面交换消息发送网络请求执行文件输入/输出进行密集计算处理大量数据，以及实现其他不适合在页面执行线程里做的任务（否则会导致页面响应迟钝）
Worker（）构造函数返回的Worker对象是与刚创建的专用工作者线程通信的连接点。它可以用于在工作者线程和父上下文间传输信息，以及捕获专用工作者线程发出的事件。
服务工作者线程是一种类似浏览器中代理服务器的线程，可以拦截外出请求和缓存响应。这可以让网页在没有网络连接的情况下正常使用，因为部分或全部页面可以从服务工作者线程缓存中提供服务。
对于大多数开发者而言，服务工作者线程在两个主要任务上最有用：充当网络请求的缓存层和启用推送通知。在这个意义上，服务工作者线程就是用于把网页变成像原生应用程序一样的工具。

最佳实践

什么是可维护的代码容易理解符合常识容易适配容易扩展容易调试。
匈牙利表示法指的是在变量名前面前缀一个或多个字符表示数据类型。
解耦应用程序逻辑和事件处理程序
引用类型，使用instanceof 操作符
原始类型，使用typeof 操作符
任何使用超过一次的值都应该提取到常量中，这样可以消除一个值改变了而另一个值没改造成的错误。包括CSS类名。