时间分片 - 翁先森的博客

海量数据优化-时间分片#

时间分片的概念，就是一次性渲染大量数据，初始化的时候会出现卡顿等现象。我们必须要明白的一个道理，js执行永远要比dom渲染快的多。 ，所以对于大量的数据，一次性渲染，容易造成卡顿，卡死的情况。我们先来看一下例子

./Content.tsx

1
import { Button } from 'choerodon-ui';
2
import Icon from 'choerodon-ui/lib/icon/Icon';
3
import { map } from 'lodash';
4
import { observer } from 'mobx-react-lite';
5
import React, { useEffect, useRef, useState } from 'react';
6

7
import './index.less';
8
import { useDemos } from './stores';
9

10
const Demos = () => {
11
  const {
12
    mainStore,
13
  } = useDemos();
14

15
  const {
16
    lists,
17
    setLists,
18
  } = mainStore;
19

20
  useEffect(() => {
21
  }, []);
22

23
  function add() {
24
    setLists(new Array(40000).fill(0));
25
  }
26
  function reset() {
27
    setLists([]);
28
  }
29

30
  return (
31
    <div className="demos">
32
      <div>
33
        <Button funcType="raised" type="primary" onClick={add}>add +</Button>
34
        <Button funcType="raised" type="primary" onClick={reset}>reset</Button>
35

36
        {
37
        map(lists, (item:number, i:number) => (
38
          <div className="demos-item" key={i}>
39
            {`item-${i}`}
40
            <Icon type="close" />
41
          </div>
42
        ))
43
      }
44
      </div>
45
    </div>
46
  );
47
};
48

49
export default observer(Demos);

./stores/index.tsx

1
/* eslint-disable max-len */
2
import React, {
3
  createContext, useCallback, useContext, useMemo,
4
} from 'react';
5
import { DataSet } from 'choerodon-ui/pro';
6
import { injectIntl } from 'react-intl';
7
import { inject } from 'mobx-react';
8
import useStore from './useStore';
9

10
interface ContextProps {
11

12
}
13

14
const Store = createContext({} as ContextProps);
15

16
export function useDemos() {
17
  return useContext(Store);
18
}
19

20
export const StoreProvider = injectIntl(inject('AppState')((props: any) => {
21
  const {
22
    children,
23
    intl: { formatMessage },
24
    AppState: { currentMenuType: { projectId } },
25
  } = props;
26

27
  const mainStore = useStore();
28

29
  const value = {
30
    ...props,
31
    formatMessage,
32
    projectId,
33
    mainStore,
34
  };
35
  return (
36
    <Store.Provider value={value}>
37
      {children}
38
    </Store.Provider>
39
  );
40
}));

./stores/useStore.tsx

1
import { useLocalStore } from 'mobx-react-lite';
2

3
export default function useStore() {
4
  return useLocalStore(() => ({
5
    lists: [],
6
    setLists(value:any) {
7
      this.lists = value;
8
    },
9
  }));
10
}
11

12
export type StoreProps = ReturnType<typeof useStore>;

./index.tsx

1
import React from 'react';
2
import { StoreProvider } from './stores';
3
import Content from './Content';
4

5
const Index = (props: any) => (
6
  <StoreProvider {...props}>
7
    <Content />
8
  </StoreProvider>
9
);
10

11
export default Index;

./index.less

1
.demos {
2
  &-item {
3
    border: 1px solid #0fc2e2;
4
    background-color: #4adcf0;
5
    color: #fff;
6
    border-radius: 4px;
7
    height: 50px;
8
    width: 400px;
9
    text-align: center;
10
    font-size: 20px;
11
    line-height: 50px;
12
    & + & {
13
      margin-top: 10px;
14
    }
15
  }
16
}

最主要的代码就是Content.tsx

演示如下

gif1

我们看到 40000 个简单列表渲染了，将近5秒的时间。为了解决一次性加载大量数据的问题。我们引出了时间分片的概念，就是用setTimeout把任务分割，分成若干次来渲染。一共40000个数据，我们可以每次渲染100个，分次400渲染。(这里用的是window.requestAnimationFrame())

1
import { Button } from 'choerodon-ui';
2
import Icon from 'choerodon-ui/lib/icon/Icon';
3
import { map } from 'lodash';
4
import { observer } from 'mobx-react-lite';
5
import React, { useEffect, useRef, useState } from 'react';
6

7
import './index.less';
8
import { useDemos } from './stores';
9

10
const Demos = () => {
11
  const {
12
    mainStore,
13
  } = useDemos();
14

15
  const {
16
    lists,
17
    setLists,
18
  } = mainStore;
19

20
  useEffect(() => {
21
  }, []);
22

23
  function handleSlice(list:number[], times:number) {
24
    if (times === 400) return;
25
    window.requestAnimationFrame(() => {
26
      const newLists = list.slice(times, (times + 1) * 10);
27
      setLists(lists.concat(newLists));
28
      handleSlice(list, times + 1);
29
    });
30
  }
31

32
  function add() {
33
    handleSlice(new Array(4000).fill(0), 0);
34
  }
35
  function reset() {
36
    setLists([]);
37
  }
38

39
  return (
40
    <div className="demos">
41
      <div>
42
        <Button funcType="raised" type="primary" onClick={add}>add +</Button>
43
        <Button funcType="raised" type="primary" onClick={reset}>reset</Button>
44

45
        {
46
        map(lists, (item:number, i:number) => (
47
          <div className="demos-item" key={i}>
48
            {`item-${i}`}
49
            <Icon type="close" />
50
          </div>
51
        ))
52
      }
53
      </div>
54
    </div>
55
  );
56
};
57

58
export default observer(Demos);

演示:

gif2