mobx deep observer 2000 block snapshot, Proxy vs defineProperty

Benchmark created on

Description

mobx 使 2000 个 block 的 snapshot 深度变为可观测对象，使用 Proxy vs 使用 defineProperty 的性能对比

Preparation HTML

    <script src="https://unpkg.com/mobx/dist/mobx.umd.production.min.js"></script>
    <script>
      const makeObservable = window.mobx.makeObservable;
      const observable = window.mobx.observable; 
   </script>

Test runner

Ready to run.

Testing in
TestOps/sec
mobx deep observer 2000 block snapshot, Proxy
      window.mobx.configure({ useProxies: 'always' });
      class Block {
        snapshot = {
          locked: false,
          hidden: false,
          author: '6961207304020574210',
          element: {
            size: { height: 120, keep_aspect_ratio: false, width: 120 },
            transform: {
              translateY: 242.49157761975147,
              inherit_mode: 1,
              scaleX: 1,
              scaleY: 1,
              shearX: 0,
              shearY: 0,
              translateX: 269.7261618831443
            },
            background: {
              inherit_mode: 0,
              fill: {
                color: { rgb_color: '#DEE0E3', theme_color: 0, gradient_color: { type: '', data: null } }
              },
              alpha: 1
            },
            border: {
              color: { rgb_color: '#8F959E', theme_color: 0, gradient_color: { type: '', data: null } },
              inherit_mode: 0,
              width: 2,
              style: 0
            },
            alpha: 1,
            flip: { is_horizontal: false, is_vertical: false },
            inherit_mode_map: { alpha: 1 }
          },
          shape: {
            type: 1,
            text: {
              space_below: 0,
              content: {
                apool: {
                  nextNum: 2,
                  numToAttrib: { 0: ['author', '6961207304020574210'], 1: ['fontcolor', '#1F2329'] }
                },
                initialAttributedTexts: { attribs: { 0: '*0+2*0*1+4' }, text: { 0: '文字文字文字' } }
              },
              inherit_mode_map: {
                letter_spacing: 0,
                line_height: 0,
                text_type: 0,
                font_color: 0,
                text_font_size: 0,
                font_family: 0,
                italic: 0,
                bold: 0,
                underline: 0,
                strikethrough: 0,
                h_align: 0,
                background_color: 0
              },
              v_align: '',
              h_align: '',
              direction: '',
              line_spacing: 0,
              space_above: 0
            }
          },
          type: 'shape',
          parent_id: 'IOGSsmYOAlGGSOdOATobQeV2cvd',
          comments: []
        };
        constructor() {
makeObservable(this, { snapshot: observable.deep });
        }
      }

      for (let index = 0; index < 2000; index++) 
      {
        new Block();
      }
ready
mobx deep observer 2000 block snapshot, defineProperty
      window.mobx.configure({ useProxies: 'never' });
      class Block {
        snapshot = {
          locked: false,
          hidden: false,
          author: '6961207304020574210',
          element: {
            size: { height: 120, keep_aspect_ratio: false, width: 120 },
            transform: {
              translateY: 242.49157761975147,
              inherit_mode: 1,
              scaleX: 1,
              scaleY: 1,
              shearX: 0,
              shearY: 0,
              translateX: 269.7261618831443
            },
            background: {
              inherit_mode: 0,
              fill: {
                color: { rgb_color: '#DEE0E3', theme_color: 0, gradient_color: { type: '', data: null } }
              },
              alpha: 1
            },
            border: {
              color: { rgb_color: '#8F959E', theme_color: 0, gradient_color: { type: '', data: null } },
              inherit_mode: 0,
              width: 2,
              style: 0
            },
            alpha: 1,
            flip: { is_horizontal: false, is_vertical: false },
            inherit_mode_map: { alpha: 1 }
          },
          shape: {
            type: 1,
            text: {
              space_below: 0,
              content: {
                apool: {
                  nextNum: 2,
                  numToAttrib: { 0: ['author', '6961207304020574210'], 1: ['fontcolor', '#1F2329'] }
                },
                initialAttributedTexts: { attribs: { 0: '*0+2*0*1+4' }, text: { 0: '文字文字文字' } }
              },
              inherit_mode_map: {
                letter_spacing: 0,
                line_height: 0,
                text_type: 0,
                font_color: 0,
                text_font_size: 0,
                font_family: 0,
                italic: 0,
                bold: 0,
                underline: 0,
                strikethrough: 0,
                h_align: 0,
                background_color: 0
              },
              v_align: '',
              h_align: '',
              direction: '',
              line_spacing: 0,
              space_above: 0
            }
          },
          type: 'shape',
          parent_id: 'IOGSsmYOAlGGSOdOATobQeV2cvd',
          comments: []
        };
        constructor() {
makeObservable(this, { snapshot: observable.deep });
        }
      }

      for (let index = 0; index < 2000; index++) 
      {
        new Block();
      }
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.