浏览器基础面试题（二）

什么是 DOM 对象

DOM（Document Object Model） 对象的全称是文档对象模型，定义了访问HTML文档对象的一套属性、方法和事件。

什么是 BOM 对象

BOM （Browser Object Model）对象的全称是浏览器对象模型，提供了能与浏览器窗口进行交互的对象。一般有

• window 对象，例如 window.open
• document 对象，例如 document.getElementById('app')
• location 对象，例如 location.reload()
• screen 对象，例如 screen.width
• history 对象，例如 history.back()

DOM 事件流三个阶段是什么

捕获阶段 -> 处于目标阶段 -> 冒泡阶段

addEventListener 的第三个参数有什么用

addEventListener 的函数签名如下，第三个参数表示是否使事件捕获，默认是 false，即使用事件冒泡

element.addEventListener(event, function, useCapture)

什么是事件委托

事件委托也叫事件代理，是利用事件冒泡原理，把子元素的事件交给父元素来代理。

简单请求和非简单请求的区别

浏览器将 CORS 请求分成两类：简单请求 和 非简单请求，那么简单请求和非简单请求有什么区别呢？

其实很简单，只要同时满足以下两大条件，就属于简单请求。即不会触发 CORS 预检（OPTIONS）请求。其他情况则为非简单请求

• 请求方法是以下三种方法之一：HEAD、GET、POST
• 除了用户代理自动设置的头部字段，例如 Connection, User-Agent
• HTTP 的头信息不超出以下几种字段：
  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type 的值为以下三种
    • application/x-www-form-urlencoded
    • multipart/form-data
    • text/plain
• 请求中没有使用 ReadableStream 对象

OPTIONS 请求是什么

OPTIONS 请求是预检请求，主要用来检测服务器知否支持访问或可用，当 AJAX 请求跨域问题时，需要向跨域的服务器发送一个 OPTIONS 请求，判断服务器是否接受

如何消除 OPTIONS 请求带来的服务端性能问题

1. 可以缓存 OPTIONS 请求，nodejs 服务的配置方法如下

app.use(
  cors({
    maxAge: 3600 * 24,
  })
);

2. 避免设置上述的非简单请求头