前端性能优化篇（一）webp的使用-CSDN博客

本文链接：https://blog.csdn.net/weixin_44386315/article/details/141717280
import logo from './logo.svg';
import './App.css';
import React from 'react'

function App() {
  // 降级处理方式
  // （1） JS 处理
  // const imgElement = React.useRef(null);
  // const compressedImg = 'http://img.alicdn.com/img/i4/2989500106/O1CN01rHuDT91Ceay1GLDlP_!!0-saturn_solar.jpg_360x360q90.jpg_.webp';
  // const originalImg = 'http://img.alicdn.com/img/i4/2989500106/O1CN01rHuDT91Ceay1GLDlP_!!0-saturn_solar.jpg';
  // function isSupportWebp(callback) {
  //   const imgUrl = 'https://img.alicdn.com/imgextra/i2/O1CN01uvFm6B1XMMrTkObKV_!!6000000002909-0-tps-520-280.jpg_q75_.webp';
  //   const image = new Image();
  //   image.src = imgUrl;
  //   image.onload = function () {
  //     // 加载成功，说明支持 webp，在回调函数中
  //     callback(true);
  //   }
  //   image.onerror = function () {
  //     console.log("333333")
  //     // 加载失败，说明不支持 webp
  //     callback(false);
  //   }
  // }
  // /** 
  // * 选择浏览器支持的图片格式
  // */
  // function loadImg(imgElement, compressedImg, originalImg) {
  //   isSupportWebp((isSupport) => {
  //     imgElement.src = isSupport ? compressedImg : originalImg;
  //   })
  // }
  // React.useEffect(() => {
  //   if (imgElement.current) {
  //     loadImg(imgElement.current, compressedImg, originalImg);
  //   }
  // }, []);


  // （2）JS 处理
  //   const imgElement = React.useRef(null);
  //   const compressedImg = 'http://img.alicdn.com/img/i4/2989500106/O1CN01rHuDT91Ceay1GLDlP_!!0-saturn_solar.jpg_360x360q90.jpg_.webp';
  //   const originalImg = 'http://img.alicdn.com/img/i4/2989500106/O1CN01rHuDT91Ceay1GLDlP_!!0-saturn_solar.jpg';
  //   function isSupportWebp() {
  //     const str = document.createElement('canvas').toDataURL('image/webp');
  //     console.log(str)
  //     // 如果支持则会返回传入的类型 image/webp --> data:image/webp;base64,UklGRtgCAABXRUJQVlA4WAoAAAAwAAAAKwEAlQAASUNDUBgCAAAAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z3BhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLW1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANkFMUEgSAAAAAQcQEREQkCT+/x9F9D/tf0MAVlA4IIAAAABwDQCdASosAZYAPm02mUmkIyKhICgAgA2JaW7hdrEbQAnsA99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfasAAD+/9YAAAAAAAAAAA==
  //     // 如果不支持则会返回默认值 image/png --> data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADGSURBVHhe7cExAQAAAMKg9U9tCF8gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAONUAv9QAAcDhjokAAAAASUVORK5CYII
  //     return str.indexOf('image/webp') > -1;
  // }
  // document.createElement('canvas').toDataURL('image/webp');这句话的作用是创建一个新的 <canvas> 元素，并将其内容转换为 data: URL，格式为 image/webp。
  // 以下是详细解释：
  // document.createElement('canvas')：使用 document 对象的 createElement 方法创建一个新的 <canvas> 元素。<canvas> 元素可以用于在网页上进行图形绘制。
  // .toDataURL('image/webp')：对创建的 <canvas> 元素调用 toDataURL 方法，并传入参数 'image/webp'。这个方法将 <canvas> 的内容转换为一个 data: URL，指定的格式为 webp 图像格式。
  // 返回的 data: URL 可以用于在网页上直接显示图像，或者作为图像源传递给其他元素或函数。例如，可以将其设置为另一个 <img> 元素的 src 属性，以显示 <canvas> 绘制的内容作为 webp 图像。
  // 需要注意的是，浏览器对 webp 格式的支持可能不同。如果浏览器不支持 webp，toDataURL 方法可能会返回一个不同格式的 data: URL（通常是 png），或者在某些情况下可能会抛出错误。
  /** 
  * 选择浏览器支持的图片格式
  */
  // function getImg(imgElement,compressedImg, originalImg) {
  //     const isSupport = isSupportWebp();
  //     console.log(isSupport)
  //     imgElement.src = isSupport ? compressedImg : originalImg;
  // }

  //     React.useEffect(() => {
  //     if (imgElement.current) {
  //       getImg(imgElement.current, compressedImg, originalImg);
  //     }
  //   }, []);


  return (
    <div>
      {/* （3）通过picture 降级处理 */}
      {/* <picture>
            <source type="image/webp" srcset="http://img.alicdn.com/img/i4/2989500106/O1CN01rHuDT91Ceay1GLDlP_!!0-saturn_solar.jpg_360x360q90.jpg_.webp"></source>
            <img src="http://img.alicdn.com/img/i4/2989500106/O1CN01rHuDT91Ceay1GLDlP_!!0-saturn_solar.jpg"></img>
        </picture> */}
      <div>
        <img ref={imgElement} />
      </div>
    </div>

  );
}

export default App;