美文网首页
前端系统学习 3. 浏览器相关

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

作者: stanf1l | 来源:发表于2022-01-05 23:46 被阅读0次

    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

    相关文章

      网友评论

          本文标题:前端系统学习 3. 浏览器相关

          本文链接:https://www.haomeiwen.com/subject/pohlcrtx.html