常⻅浏览器JS对象、常⻅API及⽤法

常⻅浏览器JS对象、常⻅API及⽤法

什么是浏览器对象模型

BOM ：Browser Object Model（浏览器对象模型）,浏览器模型提供了独⽴于内容的、可以与浏览器窗⼝进⾏滑动的对象结构，就是浏览器提供的 API
其主要对象有：

1. window 对象——BOM 的核⼼，是 js 访问浏览器的接⼝，也是 ES 规定的 Global 对象
2. location 对象：提供当前窗⼝中的加载的⽂档有关的信息和⼀些导航功能。既是 window 对象属 性，也是 document 的对象属性
3. navigation 对象：获取浏览器的系统信息
4. screen 对象：⽤来表⽰浏览器窗⼝外部的显⽰器的信息等
5. history 对象：保存⽤⼾上⽹的历史信息

Window 对象

windows 对象是整个浏览器对象模型的核⼼，其扮演着既是接⼝⼜是全局对象的⻆⾊
alert()
confirm()
prompt()
open()
onerror()
setTimeout()
setInterval()
窗⼝位置
screenLeft
screenTop
screenX
screenY
moveBy(x,y)
moveTo(x,y)
窗⼝⼤⼩
innerWidth
innerHeight
outerWidth
outerHeight
resizeTo(width, height)
resizeBy(width, height)
定时器
setTimeout
setInterval
Location 对象
提供当前窗⼝中的加载的⽂档有关的信息和⼀些导航功能。既是 window 对象属性，也是 document 的对象属性 location 对象的主要属性：
hash
host
hostname
href
pathname
port
protocol
search
Navigation 对象
navigation 接⼝表⽰⽤⼾代理的状态和标识，允许脚本查询它和注册⾃⼰进⾏⼀些活动
History 对象
history 对象保存着⽤⼾上⽹的历史记录，从窗⼝被打开的那⼀刻算起，history 对象是⽤窗⼝的浏览 历史⽤⽂档和⽂档状态列表的形式表⽰。
go()
back()
forword()
length

详解浏览器事件捕获，冒泡

浏览器事件模型中的过程主要分为三个阶段：捕获阶段、⽬标阶段、冒泡阶段。

第三个参数

这⾥要注意 addEventListener 的第三个参数, 如果为 true，就是代表在捕获阶段执⾏。如果为 false，就是在冒泡阶段进⾏

阻⽌事件传播

e.stopPropagation()
⼤家经常听到的可能是阻⽌冒泡，实际上这个⽅法不只能阻⽌冒泡，还能阻⽌捕获阶段的传播。 stopImmediatePropagation()
如果有多个相同类型事件的事件监听函数绑定到同⼀个元素，当该类型的事件触发时，它们会按照被添加的顺序执⾏。如果其中某个监听函数执⾏了 event.stopImmediatePropagation() ⽅法， 则当前元素剩下的监听函数将不会被执⾏。

阻⽌默认⾏为

e.preventDefault()
e.preventDefault()可以阻⽌事件的默认⾏为发⽣，默认⾏为是指：点击 a 标签就转跳到其他⻚⾯、拖拽⼀个图⽚到浏览器会⾃动打开、点击表单的提交按钮会提交表单等等，因为有的时候我们并不希 望发⽣这些事情，所以需要阻⽌默认⾏为

兼容性

attachEvent——兼容：IE7、IE8； 不⽀持第三个参数来控制在哪个阶段发⽣，默认是绑定在冒泡阶段 addEventListener——兼容：firefox、chrome、IE、safari、opera；

绑定事件的运⽤，以及封装⼀个多浏览器兼容的绑定

事件函数
⼤家常⻅的⼀个⾯试题可能是 ul + li，点击每个 li alert 对应的索引，这⾥就给⼤家来写⼀下看看 先来给每个 li 绑定事件 再来写⼀个事件委托的⽅式
封装⼀个多浏览器兼容的绑定事件函数

ajax 及 fetch API 详解

1. XMLHTTPRequest
2. fetch
   默认不带 cookie
   错误不会 reject
   不⽀持超时设置
   需要借⽤ AbortController 中⽌ fetch

常⻅的浏览器请求/响应头/错误码解析

request header
method:
path:
scheme:
accept:
accept-encoding:
cache-control:
cookie:
origin:
referer:
user-agent:
response header
access-control-allow-credentials:
access-control-allow-origin:
content-encoding:
content-type:
date:
set-cookie:
set-cookie:
status:

status

200 get 成功
201 post 成功
301 永久重定向
302 临时重定向
304 协商缓存 服务器⽂件未修改
400 客⼾端请求有语法错误，不能被服务器识别
403 服务器受到请求，但是拒绝提供服务，可能是跨域
404 请求的资源不存在
405 请求的 method 不允许
500 服务器发⽣不可预期的错误

请求超时处理逻辑

function fetchTimeout(url, init, timeout = 3000){
    return new Promise((resolve, reject) => {
        fetch(url, init).then(resolve).catch(reject)
        setTimeout(reject, timeout)
    })
}

cdn 域名为什么和 业务域名不一样

1.安全问题 cookie信息不希望暴露给cdn厂商
2.cdn request header 会携带cookie，获取静态资源时消耗更多带宽
3.并发请求数 （限制同源请求数，请求静态资源后影响正常请求，导致阻塞）