javascript-DOM&BOM
DOM
该接口用于使用JavaScript语言来操作网页。全称为"文档对象模型"（Document Object Model）。其主要功能在于将网页内容转换为JavaScript能够操作的对象，并允许通过脚本语言对这些对象进行交互操作。
通过遵循 DOM 模型对结构化的文档进行分解和识别出一系列具体的节点元素，并将其进一步构建起一个层次分明、易于导航的树形架构（DOM Tree）。
节点类型
DOM的基本单元是节点（Node），文档的结构体系（DOM Tree）是由多种不同类型的节点构成的。每个节点都继承自Node对象
Document：整个文档树的顶层节点DocumentType：doctype标签（比如<!DOCTYPE html>）Element：对应网页的元素Attr：属性节点Text：标签之间或标签包含的文本Comment：注释DocumentFragment：文档片段
节点树
浏览器原生提供 document 节点，代表整个文档
在文档的第一层位置有两个节点：一个是主要为标记化语言处理服务提供的文档类型节点（<!doctype html>），另一个则是构成HTML网页核心组件的基础层次（root node）。其余HTML标记化的标签单元则位于其下一层。
除了根节点，其他节点都有三种层级关系
- 父节点关系（
parentNode） - 子节点关系（
childNodes） - 同级节点关系（
sibling）
节点操作
BOM
浏览器提供了各种接口，让 JavaScript 脚本可以控制浏览器的各种功能
- 当前窗口。浏览器环境的全局对象（this默认指向）包含当前窗口的信息、顶层方法以及下面部分属性
- 系统
- 浏览器管理程序。包含了浏览器和系统信息
- 屏幕。表示当前窗口所在的屏幕提供了显示设备的相关信息
- 系统
AJAX的核心接口是XMLHttpRequest类。它实现了浏览器与服务器之间的通信交互。
cookie存储当前窗口的浏览历史记录。
url相关：
location提供处理 URL 的功能和相关信息。
XMLHttpRequest负责构建、解析以及对 URL 进行编码处理。
URLSearchParams类负责解析和管理 URL 查询参数
-
二进制
ArrayBufferBlob
-
文件
FileFileListFileReader
-
表单
FormData对象
-
数据传输
postMessageMessageChannel
-
Web Worker
- DOM 改动监听器
- 本地存储方案
- 会话存储机制
- 浏览器缓存 localStorage
- 索引数据库接口（IndexDB API）
web worker
参考 网址：https://www.freecodecamp.org/chinese/news/general-introduction-to-web-worker/
在实际项目中如何引入组件时域微分方程求解器的具体实现方法可参考https://blog.zhouweibin.top/js/worker/react项目使用web worker/
用途
- 并行处理复杂运算以避免主线程阻塞（或编译为wasm），例如视频解码及复杂文件解析。
- 预渲染操作包括canvas离屏渲染。
- 预取数据采用Ajax/Fetch方式进行图片资源获取时需注意worker启动与数据传输效率。
局限性
- 数据传输包含以下几种形式：包括postMessage用于消息传递、受限于数据格式转换的transfer memory以及受兼容性因素影响的shared memory。
- 存储资源存在以下局限性：涉及的数据类型需满足特定条件。
- 不支持DOM操作相关功能。
- 存储类型有限制：worker线程无法直接操作window对象所固有的方法如webStorage和alert函数等。
- 但可以通过RequestAnimationFrame发出异步请求来实现类似功能，并且能够操作IndexDB。