web 前端优化

1. 通过localStorage缓存大图

优化前

/**
 * @description: LocalStroage 缓存图片
 * @param {*} eleClass 唯一类名
 * @param {*} path 图片路径 需要用 require 包裹
 * @param {*} tag  标记分类 用来删除过期数据
 * @param {*} isImg  是否是 Img标签
 *
 * @return {*}
 */
export function loadImageByLocalStorage(eleClass, path, tag, isImg = false) {
  let ele = document.querySelector(eleClass)
  let key = tag + path
  if (localStorage[key] === undefined) {
    //清理旧的背景图
    for (let i = 0; i < localStorage.length; i++) {
      let lkey = localStorage.key(i)
      if (lkey.includes(tag)) localStorage.removeItem(lkey)
    }
    var xhr = new XMLHttpRequest()
    xhr.responseType = 'blob'
    xhr.open('get', path, true)
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4) {
        let reader = new FileReader()
        reader.readAsDataURL(xhr.response)
        reader.onload = (res) => {
          localStorage[key] = res.target.result
          if (isImg) ele.src = res.target.result
          else ele.style.backgroundImage = 'url(' + res.target.result + ')'
        }
      }
    }
    xhr.send()
  } else {
    if (isImg) ele.src = localStorage[key]
    ele.style.backgroundImage = 'url(' + localStorage[key] + ')'
  }

优化后

/**
 * @description: LocalStroage 缓存图片
 * @param {*} path 图片路径 需要用 require 包裹
 * @param {*} tag  标记分类 用来删除过期数据
 * @return {*} DataURL
 */
export function getImageByLocalStorage(path,tag) {
  let key = tag + path
  if (localStorage[key] === undefined) {
    //清理旧的背景图
    for (let i = 0; i < localStorage.length; i++) {
      let lkey = localStorage.key(i)
      if (lkey.includes(tag)) localStorage.removeItem(lkey)
    }
    var xhr = new XMLHttpRequest()
    xhr.responseType = 'blob'
    xhr.open('get', path, true)
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4) {
        let reader = new FileReader()
        reader.readAsDataURL(xhr.response)
        reader.onload = (res) => {
          localStorage[key] = res.target.result
          return res.target.result
        }
      }
    }
    xhr.send()
  } else {
    return localStorage[key]
  }
}