lumixraku · January 27, 2024 13:58
diff --git a/gistfile1.txt b/gistfile1.txt
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <img hidden id="img" src="" />
    <div id="container">
      <canvas id="canvas" width="300" height="300"></canvas>
    </div>
    <canvas id="foo" width="300" height="300"></canvas>
    <script type="text/javascript" src="/bin/canvaskit.js"></script>

    <script>
      const imgElem = document.querySelector("#img");

      const main = async () => {
        const ckLoaded = CanvasKitInit({
          // locateFile: (file) => "https://unpkg.com/[email protected]/bin/" + file,
          locateFile: (file) => "/bin/" + file,
        });
        let CanvasKit = await ckLoaded;

        let canvas = document.getElementById("canvas");
        const surface = CanvasKit.MakeWebGLCanvasSurface(canvas.id);
        if (!surface) {
          throw "Could not make surface";
        }

        const len = 10;
        function imgonload(url) {
          // 使用图像纹理源创建图像
          let img = new Image();
          img.src = url;

          let st0 = performance.now();
          console.time("imgonload");

          return new Promise(function (resolve, rej) {
            img.onload = () => {
              console.log("img.onload :load", performance.now() - st0);
              let st = performance.now();
              console.time("img.onload.make");
              const image = surface.makeImageFromTextureSource(img);
              console.timeEnd("img.onload.make");
              console.log("img.onload after resp", performance.now() - st);
              console.log("img.onload from req", performance.now() - st0);
              console.timeEnd("imgonload");

              resolve();
            };
          });
        }

        async function imgAndBitmap(url) {
          let img = new Image();
          // let url = `/misc/random_image_0.jpg`;
          img.src = url;

          let st0 = performance.now();

          return new Promise(function (resolve, rej) {
            img.onload = () => {
              console.time("imgAndBitmap");
              console.log("img.loadbitmap :load", performance.now() - st0);
              let st = performance.now();

              console.time("img.loadbitmap.create");
              createImageBitmap(img).then((data) => {
                console.timeEnd("img.loadbitmap.create");
                console.time("img.loadbitmap.make");
                const image = surface.makeImageFromTextureSource(data);
                console.timeEnd("img.loadbitmap.make");
                // console.timeEnd('onload.bitmap' + url);
                console.log(
                  "img.loadbitmap after resp",
                  performance.now() - st
                );
                console.log("img.loadbitmap from req", performance.now() - st0);
                console.timeEnd("imgAndBitmap");
                surface.getCanvas().drawImage(image, 0, 0);
                resolve();
              });
            };
          });
        }

        async function fetchAndBitmap() {
          let img = new Image();
          let url = `/misc/random_image_0.jpg`;
          img.src = url;

          let st0 = performance.now();
          let createTag = 0;
          await fetch(url)
            .then((resp) => {
              console.time("fetch.bitmap");
              // console.group('fetchAndBitmap');
              console.log("fetch.bitmap :load", performance.now() - st0);
              st = performance.now();
              return resp;
            })
            .then((response) => {
              console.time("fetch.bitmap.blob");
              const b = response.blob();
              console.timeEnd("fetch.bitmap.blob");
              return b;
            })
            // .then(blob=> {
            //   st = performance.now();
            //   return blob;
            // })
            .then((blob) => {
              // console.time('fetch.bitmap.create');
              createTag = performance.now();
              createImageBitmap(blob).then((bitmap) => {
                console.log(
                  "fetch.bitmap.create",
                  performance.now() - createTag
                );
                // console.timeEnd('fetch.bitmap.create');
                console.time("fetch.bitmap.make");
                surface.makeImageFromTextureSource(bitmap);
                console.timeEnd("fetch.bitmap.make");
                console.log("fetch bitmap after resp", performance.now() - st);
                console.log("fetch bitmap from req", performance.now() - st0);

                console.timeEnd("fetch.bitmap");
                console.groupEnd("fetchAndBitmap");
              });
            });
        }

        function imgLoadTest() {
          const arr = [];
          for (let i = 0; i < len; i++) {
            arr.push(imgonload(`/misc/random_image_${i}.jpg`));
          }
          let st = performance.now();
          return Promise.all(arr).then(() => {
            console.log('imgLoadTest', performance.now() - st);
          });
        }


        function imgbitmapTest() {
          const arr = [];
          for (let i = 0; i < len; i++) {
            arr.push(imgAndBitmap(`/misc/random_image_${i}.jpg`));
          }
          let st = performance.now();
          return Promise.all(arr).then( () => {
            console.log('imgbitmapTest', performance.now() - st);
          });
        }

        function fetchtest() {
          const arr = [];
          for (let i = 0; i < len; i++) {
            arr.push(fetchAndBitmap(`/misc/random_image_${i}.jpg`));
          }
          let st = performance.now();
          return Promise.all(arr).then(() => {
            console.log('fetchtest', performance.now() - st);
          });
        }

        await imgLoadTest();
        await imgbitmapTest();
        await fetchtest();
      };
      main();
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>

	<body>
	<img hidden id="img" src="" />
	<div id="container">
	<canvas id="canvas" width="300" height="300"></canvas>
	</div>
	<canvas id="foo" width="300" height="300"></canvas>
	<script type="text/javascript" src="/bin/canvaskit.js"></script>

	<script>
	const imgElem = document.querySelector("#img");

	const main = async () => {
	const ckLoaded = CanvasKitInit({
	// locateFile: (file) => "https://unpkg.com/[email protected]/bin/" + file,
	locateFile: (file) => "/bin/" + file,
	});
	let CanvasKit = await ckLoaded;

	let canvas = document.getElementById("canvas");
	const surface = CanvasKit.MakeWebGLCanvasSurface(canvas.id);
	if (!surface) {
	throw "Could not make surface";
	}

	const len = 10;
	function imgonload(url) {
	// 使用图像纹理源创建图像
	let img = new Image();
	img.src = url;

	let st0 = performance.now();
	console.time("imgonload");

	return new Promise(function (resolve, rej) {
	img.onload = () => {
	console.log("img.onload :load", performance.now() - st0);
	let st = performance.now();
	console.time("img.onload.make");
	const image = surface.makeImageFromTextureSource(img);
	console.timeEnd("img.onload.make");
	console.log("img.onload after resp", performance.now() - st);
	console.log("img.onload from req", performance.now() - st0);
	console.timeEnd("imgonload");

	resolve();
	};
	});
	}

	async function imgAndBitmap(url) {
	let img = new Image();
	// let url = `/misc/random_image_0.jpg`;
	img.src = url;

	let st0 = performance.now();

	return new Promise(function (resolve, rej) {
	img.onload = () => {
	console.time("imgAndBitmap");
	console.log("img.loadbitmap :load", performance.now() - st0);
	let st = performance.now();

	console.time("img.loadbitmap.create");
	createImageBitmap(img).then((data) => {
	console.timeEnd("img.loadbitmap.create");
	console.time("img.loadbitmap.make");
	const image = surface.makeImageFromTextureSource(data);
	console.timeEnd("img.loadbitmap.make");
	// console.timeEnd('onload.bitmap' + url);
	console.log(
	"img.loadbitmap after resp",
	performance.now() - st
	);
	console.log("img.loadbitmap from req", performance.now() - st0);
	console.timeEnd("imgAndBitmap");
	surface.getCanvas().drawImage(image, 0, 0);
	resolve();
	});
	};
	});
	}

	async function fetchAndBitmap() {
	let img = new Image();
	let url = `/misc/random_image_0.jpg`;
	img.src = url;

	let st0 = performance.now();
	let createTag = 0;
	await fetch(url)
	.then((resp) => {
	console.time("fetch.bitmap");
	// console.group('fetchAndBitmap');
	console.log("fetch.bitmap :load", performance.now() - st0);
	st = performance.now();
	return resp;
	})
	.then((response) => {
	console.time("fetch.bitmap.blob");
	const b = response.blob();
	console.timeEnd("fetch.bitmap.blob");
	return b;
	})
	// .then(blob=> {
	// st = performance.now();
	// return blob;
	// })
	.then((blob) => {
	// console.time('fetch.bitmap.create');
	createTag = performance.now();
	createImageBitmap(blob).then((bitmap) => {
	console.log(
	"fetch.bitmap.create",
	performance.now() - createTag
	);
	// console.timeEnd('fetch.bitmap.create');
	console.time("fetch.bitmap.make");
	surface.makeImageFromTextureSource(bitmap);
	console.timeEnd("fetch.bitmap.make");
	console.log("fetch bitmap after resp", performance.now() - st);
	console.log("fetch bitmap from req", performance.now() - st0);

	console.timeEnd("fetch.bitmap");
	console.groupEnd("fetchAndBitmap");
	});
	});
	}

	function imgLoadTest() {
	const arr = [];
	for (let i = 0; i < len; i++) {
	arr.push(imgonload(`/misc/random_image_${i}.jpg`));
	}
	let st = performance.now();
	return Promise.all(arr).then(() => {
	console.log('imgLoadTest', performance.now() - st);
	});
	}


	function imgbitmapTest() {
	const arr = [];
	for (let i = 0; i < len; i++) {
	arr.push(imgAndBitmap(`/misc/random_image_${i}.jpg`));
	}
	let st = performance.now();
	return Promise.all(arr).then( () => {
	console.log('imgbitmapTest', performance.now() - st);
	});
	}

	function fetchtest() {
	const arr = [];
	for (let i = 0; i < len; i++) {
	arr.push(fetchAndBitmap(`/misc/random_image_${i}.jpg`));
	}
	let st = performance.now();
	return Promise.all(arr).then(() => {
	console.log('fetchtest', performance.now() - st);
	});
	}

	await imgLoadTest();
	await imgbitmapTest();
	await fetchtest();
	};
	main();
	</script>
	</body>
	</html>