realfish/laerhsif-essay

GTP4 优化建议,感觉可以,斗胆发个issues

xiamuguizhi opened this issue · 1 comments

  1. 在代码中频繁地使用getImageData方法来读取上下文的像素数据,设置willReadFrequently属性为true可以提高性能。这是因为当你告诉浏览器你会频繁地读取像素数据时,浏览器可以采取一些优化措施。

  2. 在 a 函数中将 canvas 元素添加到了 DOM 中,然后在 c 函数中将其移除。这些操作可能会导致强制回流,因为它们修改了 DOM 的结构。你可以尝试将这些操作放在一个 requestAnimationFramesetTimeout 调用中,以减少回流次数。

    function a(e, t) {
        var n = $.create("canvas"),
          r;
      
        requestAnimationFrame(function() {
          (n.width = "50"),
          (n.height = "20"),
          (n.style.display = "none"),
          P.appendChild(n),
          ((r = n.getContext("2d", { willReadFrequently: true })).textBaseline =
            "top"),
          (r.font = "15px " + t + ", sans-serif"),
          (r.fillStyle = "black"),
          (r.strokeStyle = "black"),
          r.fillText(e, 0, 0);
        });
      
        return {
          node: n,
          context: r,
          remove: function () {
            requestAnimationFrame(function() {
              $.remove(n, P);
            });
          },
        };
      }
      

如果你指的是以下相关代码,可以前往 ethantw/Han 进行反馈:

a.getImageData(i, j, 1, 1).data[3] !== b.getImageData(i, j, 1, 1).data[3]