前端系统学习 3. 浏览器相关

1. 浏览器事件模型

• 事件的捕获和冒泡
• addEventListener & removeEventListener
• 兼容IE7 8 attachEvent
• 事件代理/事件委托

事件代理/事件委托

将孩子的事件监听委托给父亲，优化同类型监听绑定带来的大量内存消耗

// 每一个子节点单独绑定
const liList = document.querySelectorAll('li')
for (let i = 0; i < liList.length; i++) {
  liList[i].addEventListener('click', (e) => {
    alert(i + '' + liList[i].innerHtml)
  })
}

// 委托父亲节点来绑定事件
const ul = document.querySelector('ul')
ul.addEventListener('click', (e) => {
  const liList = document.querySelectorAll('li')
  const index = Array.prototype.indexOf.call(liList, e.target)
  if (index >= 0) {
    alert(`${index}, ${e.target.innerHTML}`)
  }
})

2. 浏览器请求相关

2.1 XML 请求

const xhr = new XMLHttpRequest()
xhr.open('GET', 'https://baidu.com')

xhr.onreadystatechange = () => {
  if (xhr.readyState !== 4) {
    return
  }
  if (xhr.state === 200) {
    console.log(xhr.responseText)
  } else {
    console.log('HTTP error', xhr.status, xhr.statusText)
  }
}
// xhr.timeout = 1000

// xhr.ontimeout = () => {
//   console.log(xhr.responseURL)
// }

// xhr.upload.onprogress = p => {
//   console.log (Math.round((p.loaded / p.total) * 100) + '%')
// }

xhr.send()

2.2 fetch

使用 promise 来实现 timeout，统一的状态管理十分好用

fetch('https://domain/service', {
  method: 'GET',
  credentials: 'same-origin'
}).then(response => {
  if (response.ok) {
    return response.json()
  }
  throw new Error('http error')
}).then(json => {
  console.log(json)
}).catch(e => {
  console.log(e)
})

function fetchTimeout (url, opts, timeout) {
  return new Promise((resolve, reject) => {
    fetch(url, opts).then(resolve).catch(reject)
    // 时间到了执行 resolve， 后面 fetch 就算执行到 resolve 也不会扭转状态了
    setTimeout(reject, timeout)
  })
}

中止 fetch，AbortController 与 fetch 搭配使用

AbortController 接口表示一个控制器对象，允许你根据需要中止一个或多个 Web 请求

const controller = new AbortController()

fetch('http://domain/service', {
  method: 'GET',
  signal: controller.signal
})
.then(res => res.json)
.then(json => console.log(json))
.catch(error => console.log(error))

controller.abort()

2.3 ajax

手写 ajax

interface IOptions {
  url: string;
  method: 'GET' | 'POST';
  timeout?: number;
  data?: any;
}

function objToQuery (obj: Record<string, any>) {
  const arr = []
  for (let key in obj) {
    arr.push(`${key}=${encodeURIComponent(obj[key])}`)
  }
  return arr.join('&')
}


function ajax (options: IOptions = {
  url: '',
  method: 'GET'
}) {
  return new Promise((resolve, reject) => {
    let xhr
    let timer
    if ((window as any).XMLHttpRequest) {
      xhr = new XMLHttpRequest()
    } else {
      xhr = new ActiveXObject('Microsoft.XMLHTTP')
    }
    xhr.onreadystatechange = () => {
      if (xhr.readState === 4) {
        if (xhr.state >= 200 && xhr.state < 300 || xhr.state === 304) {
          resolve(xhr.responseText)
        } else {
          reject(xhr.state + ' ' + xhr.stateText)
        }
        clearTimeout(timer)
      }
    }
    if (options.method.toUpperCase() === 'GET') {
      xhr.open('GET', options.url + '?' + objToQuery(options.data), true)
      xhr.send()
    } else if (options.method.toUpperCase() === 'POST') {
      xhr.open('POST', options.url, true)
      xhr.setRequestHeader('ContentType', 'application/x-www-form-urlencoded')
      xhr.send(options.data)
    }

    if (options.timeout) {
      timer = setTimeout(() => {
        reject('http timeout')
        xhr.abort()
      }, options.timeout);
    }
  })
}

2.4 请求头

2.4.1 cookie

为什么常见的 CDN 域名和业务域名不一样？

// www.baidu.com 业务域名
// cdn.aa-baidu.com cdn 域名

为了不携带 cookie

1. 安全问题。公司不想把携带用户信息的 cookie 给到三方厂商
2. cdn 本意为了加速静态文件的加载，与用户态无关，本不需要 cookie，所以不携带 cookie 可以减少请求头的体积。
3. 避免静态资源加载阻塞了服务端请求。HTTP 1.1 / 1.0 同源请求并发限制 chrome、IE、Safari 为 6

2.4.2 referer 来源

2.4.3 user-agent 判断 webview

User-Agent 首部包含了一个特征字符串，用来让网络协议的对端来识别发起请求的用户代理软件的应用类型、操作系统、软件开发商以及版本号。

2.5 响应头

access-control-allow-origin: *

content-encoding: gzip

set-cookie

2.6 status

200 success
201 created 用于 POST 请求成功
301 永久重定向
302 临时重定向
304 协商缓存，服务器文件未修改
last-modified: 文件最后一次修改时间
etag: 计算 hash 来判断文件是否修改

强缓存
Cache-Control: max-age=1000 秒
expires 过期时间 (客户端时间和服务端时间可能有偏差)

优先级

Cache-Control > expires > Etag > Last-Modified