Merge branch 'opti' into main

docs/OPTIMIZATION.md

@@ -0,0 +1,33 @@
+# 优化记录
+
+环境：
+Macbook Pro 2021
+
+项目：
+- For循环10000次 (Node 16)
+- React初始化 (Node 16)
+- React Demo页渲染 (Chrome 121)
+- React Demo页点击事件处理 (Chrome 121)
+
+原生：
+- 0.2ms
+- 1.8ms
+- 1.3ms
+- 1ms
+
+原始效果：
+- 23.4ms
+- 11.1ms
+- 10.6ms
+- 6.2ms
+
+## 第一次优化
+
+优化项：
+- 原来每一行都yield出来再判断是否断点，改成先判断断点再yield出来，减少generator保存状态的性能消耗
+
+优化效果：
+- 17.2ms (-26.5%)
+- 10ms (-9.9%)
+- 6ms (-43.4%)
+- 5ms (-19.4%)

index.html

@@ -26,14 +26,17 @@
         "  const [color, setColor] = React.useState(false);\n" +
         "  const boxStyle = { height: '100px', border: '1px solid red', background: color ? 'blue' : 'white' };\n" +
         "  const onClick = () => {\n" +
+        "    console.time('click');\n" +
         "    setColor(c => !c);\n" +
-        "    alert(!color);\n" +
         "  };\n" +
+        "  React.useLayoutEffect(() => { console.timeEnd('click') })\n" +
         "  return React.createElement('div', null, React.createElement('div', {\n" +
         "    id: 'box', className: 'box', style: boxStyle, onClick\n" +
         "  }));\n" +
         "}\n" +
-        "ReactDOM.createRoot(document.getElementById('app')).render(React.createElement(App));", window.debugFile
+        "console.time('render');\n" +
+        "ReactDOM.createRoot(document.getElementById('app')).render(React.createElement(App));\n" +
+        "console.timeEnd('render');", window.debugFile
       )();
     })();
   </script>

tests/benchmark.js

@@ -1,15 +1,30 @@
 const vDebugger = require('../dist/vdebugger');
 const axios = require('axios');
 
+const code = `
+for (let i = 0; i < 10000; i++) {
+  i = i;
+}
+`;
+
+console.time('evalTime-for');
+eval(code);
+console.timeEnd('evalTime-for');
+
+const run = vDebugger.debug(code, 'for');
+console.time('debugTime-for');
+run();
+console.timeEnd('debugTime-for');
+
 (async () => {
   const res = await axios('https://cdn.jsdelivr.net/npm/[email protected]/umd/react.development.js');
 
-  console.time('evalTime');
+  console.time('evalTime-react');
   eval(res.data);
-  console.timeEnd('evalTime');
+  console.timeEnd('evalTime-react');
 
-  const run = vDebugger.debug(res.data, 'https://react.test/react.js');
-  console.time('debugTime');
+  const run = vDebugger.debug(res.data, 'react');
+  console.time('debugTime-react');
   run();
-  console.timeEnd('debugTime');
+  console.timeEnd('debugTime-react');
 })();