Skip to main content

BOM

浏览器提供了各种接口，让 JavaScript 脚本可以控制浏览器的各种功能

  • window。浏览器环境的全局对象（this 默认指向），包含当前窗口的信息、顶层方法以及下面部分属性
  • 系统
    • navigator。包含浏览器和系统信息
    • screen。表示当前窗口所在的屏幕，提供显示设备的信息
  • cookie
  • XMLHttpRequest。AJAX 的主要接口，用于浏览器与服务器之间的通信
  • history。表示当前窗口的浏览历史
  • url 相关
    • location。提供 URL 相关的信息和操作方法
    • URL。构造、解析和编码 URL
    • URLSearchParams。用来构造、解析和处理 URL 的查询字符串
  • 二进制
    • ArrayBuffer
    • Blob
  • 文件
    • File
    • FileList
    • FileReader
  • 表单
    • FormData 对象
  • 数据传输
    • postMessage
    • MessageChannel
  • web worker
  • Mutation Observer API。监听 DOM 改动
  • 本地存储
    • sessionStorage
    • localStorage
    • indexDB API

web worker​

参考 https://www.freecodecamp.org/chinese/news/general-introduction-to-web-worker/

实际项目中如何引入，可以参考 https://blog.zhouweibin.top/js/worker/react%E9%A1%B9%E7%9B%AE%E4%BD%BF%E7%94%A8web%20worker/

用途​

  • 并行处理复杂运算，避免主线程阻塞（或者编译成 wasm），比如视频解码、复杂文件解析等
  • 预渲染，比如 canvas 离屏渲染
  • 预取数据（ajax/fetch），比如图片资源，但是要考虑 worker 启动和数据传输效率

局限性​

  • 数据传输有拷贝通信（postMessage）、转移内存（数据格式限制）、共享内存（兼容性差）
  • 同源限制
  • 不能进行 DOM 操作
  • 文件限制
  • 脚本限制 worker 线程不能操作 window 对象的方法，比如 webStorage、alert，但可以使用 XMLHttpRequest 对象发出 ajax 请求，也可以操作 IndexDB