记录–原生 canvas 如何实现大屏?

import { proxy } from "valtio"; import { NodeConfig } from "@ant-design/graphs";  type IState = {   sliderWidth: number;   sliderHeight: number;   selected: NodeConfig | null; };  export const state: IState = proxy({   sliderWidth: 0,   sliderHeight: 0,   selected: null, })；

interface CacheNode {   /**    * 节点状态    *  - 0：未执行    *  - 1：已执行    *  - 2：出错    */   s: 0 | 1 | 2;   // 缓存值   v: unknown;   // 特殊类型（object,fn），使用 weakMap 存储，避免内存泄露   o: WeakMap<Function | object, CacheNode> | null;   // 基本类型   p: Map<Function | object, CacheNode> | null; }  const cacheContainer = new WeakMap<Function, CacheNode>();  export const cache = (fn: Function): Function => {   const UNTERMINATED = 0;   const TERMINATED = 1;   const ERRORED = 2;    const createCacheNode = (): CacheNode => {     return {       s: UNTERMINATED,       v: undefined,       o: null,       p: null,     };   };    return function () {     let cacheNode = cacheContainer.get(fn);     if (!cacheNode) {       cacheNode = createCacheNode();       cacheContainer.set(fn, cacheNode);     }     for (let i = 0; i < arguments.length; i++) {       const arg = arguments[i];       // 使用 weakMap 存储，避免内存泄露       if (         typeof arg === "function" ||         (typeof arg === "object" && arg !== null)       ) {         let objectCache: CacheNode["o"] = cacheNode.o;         if (objectCache === null) {           objectCache = cacheNode.o = new WeakMap();         }         let objectNode = objectCache.get(arg);         if (objectNode === undefined) {           cacheNode = createCacheNode();           objectCache.set(arg, cacheNode);         } else {           cacheNode = objectNode;         }       } else {         let primitiveCache: CacheNode["p"] = cacheNode.p;         if (primitiveCache === null) {           primitiveCache = cacheNode.p = new Map();         }         let primitiveNode = primitiveCache.get(arg);         if (primitiveNode === undefined) {           cacheNode = createCacheNode();           primitiveCache.set(arg, cacheNode);         } else {           cacheNode = primitiveNode;         }       }     }     if (cacheNode.s === TERMINATED) return cacheNode.v;     if (cacheNode.s === ERRORED) {       throw cacheNode.v;     }     try {       const res = fn.apply(null, arguments as any);       cacheNode.v = res;       cacheNode.s = TERMINATED;       return res;     } catch (err) {       cacheNode.v = err;       cacheNode.s = ERRORED;       throw err;     }   }; };

  const cacheGetPoint = cache(getPoint);   let p = 0;   const animate = () => {     if (p >= 1) p = 0;     const { x, y } = cacheGetPoint(p);     ctx.clearRect(0, 0, 2 * clearR, 2 * clearR);     createCircle(aCtx, x, y, circleR, "#fff", 6);     p += 0.001;     requestAnimationFrame(animate);   };   animate();

  const schduler = (tasks: Function[]) => {     const DEFAULT_RUNTIME = 16;     const { port1, port2 } = new MessageChannel();     let isAbort = false;      const promise: Promise<any> = new Promise((resolve, reject) => {       const runner = () => {         const preTime = performance.now();         if (isAbort) {           return reject();         }         do {           if (tasks.length === 0) {             return resolve([]);           }           const task = tasks.shift();           task?.();         } while (performance.now() - preTime < DEFAULT_RUNTIME);         port2.postMessage("");       };       port1.onmessage = () => {         runner();       };     });     // @ts-ignore     promise.abort = () => {       isAbort = true;     };     port2.postMessage("");     return promise;   };

分片渲染可以不阻碍用户操作，但延迟了任务的整体时长，是否开启还是取决于数据量。如果每个分片实际执行时间大于 16ms 也会造成阻塞，并且会堆积，并且任务执行的时候没有等，最终渲染状态和预期不一致，所以 task 的拆分也很重要。

单测

这里不想多说，大家可以运行 pnpm test看看效果，环境已经搭建好；由于项目里面用到了 canvas 所以需要 mock 一些环境，这里的 mock 可以理解为“我们前端代码跑在浏览器里运行，依赖了浏览器环境以及对应的 API，但由于单测没有跑在浏览器里面，所以需要 mock 浏览器环境”，例如项目里面设置的 jsdom、jest-canvas-mock 以及 worker 等，更多推荐直接访问 jest 官网。

// jest-dom adds custom jest matchers for asserting on DOM nodes. import "@testing-library/jest-dom";  Object.defineProperty(URL, "createObjectURL", {   writable: true,   value: jest.fn(), });  class Worker {   onmessage: () => void;   url: string;   constructor(stringUrl) {     this.url = stringUrl;     this.onmessage = () => {};   }    postMessage() {     this.onmessage();   }   terminate() {}   onmessageerror() {}   addEventListener() {}   removeEventListener() {}   dispatchEvent(): boolean {     return true;   }   onerror() {} } window.Worker = Worker; 

name: github pages  on:   push:     branches:       - master # default branch        env:   CI: false   PUBLIC_URL: '/large-screen-visualization'  jobs:   deploy:     runs-on: ubuntu-latest     steps:       - uses: actions/checkout@v3       - run: yarn       - run: yarn build       - name: Deploy         uses: peaceiris/actions-gh-pages@v3         with:           github_token: ${{ secrets.GITHUB_TOKEN }}           publish_dir: ./build