前端性能优化 前端预加载 提前下载资源文件 图片 提升页面打开速度

项目使用vue3+ts
const progressNum = ref(0);  // 下载进度

// 提前下载文件资源

const requestFun = (url: string, name: string) => {

  let xhr = new XMLHttpRequest();

  xhr.open('GET', url, true);

  xhr.setRequestHeader('Content-Type', 'application/json');

  xhr.send(null);

    xhr.addEventListener(

      'progress',

      function (evt) {

        let number = Number((evt.loaded / 1870373).toFixed(2)) * 100;

        progressNum.value = Math.ceil(number);

      },

      false,

    );

  xhr.onreadystatechange = function () {

    if (xhr.readyState === 4) {

      if (xhr.status === 200) {

        let result = xhr.response;

      }

    }

  };

};

 

//预加载图片

const downloadResource = () => {

  // 需要预加载的图片路径存放在数组里

  var imgsrc = [img1, img2, img3, img4, img5, img6, img7, img8, img9];    // 图片地址

  //初始化image对象

  //遍历数组的路径，预加载到客户端

  for (var i = 0; i < imgsrc.length; i++) {

    var img = new Image();

    img.src = imgsrc[i];

  }

};