在开发 vue2 老项目时，前端渲染后端返回的 base64 图片，出现浏览器卡死，查看资料后发现，解析大量 base64 会出现大量占用cpu和内存，设备差点就会时不时发生。

vue2使用 workerjs 出现接受不到消息，没研究了，之前 vue3 没问题。

解决方案：

1.延时加载

如下vue2 hook 实现，vue3优雅多了这里不做演示
function useDefer(ref = {value: 0}, max = 60) {
    let frameCount = ref
    let frameId = null
    function updateFrame() {
        frameId = requestAnimationFrame(() => {
            frameCount.value++
            if (frameCount.value >= max) return
            updateFrame()
        })
    }
 
    function start(c) {
        return frameCount.value >= c
    }
 
    function remove() {
        cancelAnimationFrame(frameId)
    }
   
    updateFrame()
 
    return {
        start,
        remove
    }
}
// vue2 组件内使用 ,示例是每帧加载一个组件
frameObj = {
  value: 0
}
myDefer = useDefer(frameObj ,1000)
<template v-for="i(tem,i) in dataList">
   <MyComp  v-if="myDefer .start(i * 60)" :key="item.id"></MyComp>
</templat>
 
// vue3 hook 实现
import { onBeforeUnmount, ref } from "vue";
export const useDefer = (max = 60) => {
    const frameCount = ref(0);
    let frameId;
    function updateFrame() {
        frameId = requestAnimationFrame(() => {
            frameCount.value++;
            if (frameCount.value >= max) return;
            updateFrame();
        });
    }
    updateFrame();
    onBeforeUnmount(() => {
        cancelAnimationFrame(frameId);
    });
    return function defer(count: number) {
        return frameCount.value >= count
    };
};
// vue3 组件内使用 ,示例是每帧加载一个组件
const defer = useDefer(1000)
<template v-for="i(tem,i) in dataList">
   <MyComp  v-if="defer(i * 60)" :key="item.id"></MyComp>
</templat>

2.worker多线程

开线程，分段分任务处理base64

3.图片懒加载

大屏页面优先加载 echarts 或 antv g6 图表，用户往下滚动，图片进入可视区域再加载图片（IntersectionObserver）

4.最正统的方案

后端返回图片地址，压力给到服务器