Advertisement
Guest User

Untitled

a guest
Aug 19th, 2019
184
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.51 KB | None | 0 0
  1. run following code with
  2.  
  3. ```bash
  4. d8 --trace-ic --allow-natives-syntax --trace-maps index.js
  5. ```
  6.  
  7. ```javascript
  8. const N = 100000;
  9.  
  10. class Component {
  11. constructor() {
  12. this.name = 'Component';
  13. }
  14.  
  15. render () {}
  16. }
  17.  
  18. class MyComponent1 extends Component {
  19. constructor() {
  20. super();
  21. this.name = 'My Component1';
  22. }
  23.  
  24. render () {
  25. return '<span>Test 1</span>'
  26. }
  27. }
  28.  
  29. class MyComponent2 extends Component {
  30. constructor() {
  31. super();
  32. this.name = 'My Component2';
  33. }
  34.  
  35. render () {
  36. return '<span>Test 2</span>'
  37. }
  38. }
  39.  
  40. class MyComponent3 extends Component {
  41. constructor() {
  42. super();
  43. this.name = 'My Component3';
  44. }
  45.  
  46. render () {
  47. return '<span>Test 3</span>'
  48. }
  49. }
  50.  
  51. function createElement(element, ...rest) {
  52. return {
  53. type: element
  54. }
  55. }
  56.  
  57. const ReactWorkTags = {
  58. ClassComponent: 1,
  59. HostComponent: 5,
  60. }
  61.  
  62. class FiberNode {
  63. constructor(tag, ...rest) {
  64. this.tag = tag;
  65. this.name = 'Fiber';
  66. // Other important staff...
  67. }
  68. }
  69.  
  70. const createFiberFromElement = function(element, ...rest) {
  71. // another simplification, there are different WorkTags
  72. const fiberTag = typeof element.type === 'string' ? ReactWorkTags.HostComponent : ReactWorkTags.ClassComponent;
  73. const fiber = new FiberNode(fiberTag, ...rest);
  74. fiber.type = element.type;
  75.  
  76. return fiber;
  77. }
  78.  
  79. const comp1 = createElement(MyComponent1);
  80. const comp2 = createElement(MyComponent2);
  81. const comp3 = createElement(MyComponent3);
  82. const comp4 = createElement('div');
  83. const comp5 = createElement('span');
  84.  
  85. const fiber1 = createFiberFromElement(comp1);
  86. const fiber2 = createFiberFromElement(comp2);
  87. const fiber3 = createFiberFromElement(comp3);
  88. const fiber4 = createFiberFromElement(comp4);
  89. const fiber5 = createFiberFromElement(comp5);
  90.  
  91. console.log(%HaveSameMap(fiber1, fiber2)); // true
  92. console.log(%HaveSameMap(fiber1, fiber3)); // true
  93. console.log(%HaveSameMap(fiber1, fiber4)); // true
  94. console.log(%HaveSameMap(fiber1, fiber5)); // true
  95. console.log(%HaveSameMap(fiber2, fiber3)); // true
  96. console.log(%HaveSameMap(fiber2, fiber4)); // true
  97. console.log(%HaveSameMap(fiber3, fiber4)); // true
  98.  
  99.  
  100. const unOptComp1 = new MyComponent1();
  101. const unOptComp2 = new MyComponent2();
  102. const unOptComp3 = new MyComponent3();
  103. const unOptComp4 = {
  104. type: 'div',
  105. name: 'DIV Component',
  106. };
  107. const unOptComp5 = {
  108. type: 'span',
  109. name: 'Span Component',
  110. customProp: true,
  111. };
  112.  
  113. console.log(%HaveSameMap(unOptComp1, unOptComp2)); // true
  114. console.log(%HaveSameMap(unOptComp1, unOptComp3)); // true
  115. console.log(%HaveSameMap(unOptComp1, unOptComp4)); // true
  116. console.log(%HaveSameMap(unOptComp1, unOptComp5)); // true
  117. console.log(%HaveSameMap(unOptComp2, unOptComp3)); // true
  118. console.log(%HaveSameMap(unOptComp2, unOptComp4)); // true
  119. console.log(%HaveSameMap(unOptComp3, unOptComp4)); // true
  120.  
  121. function doSomeWork(unitOfWork) {
  122. let result = '';
  123. for(let i=0; i<1000; i += 1) {
  124. // work that takes a while
  125. result += unitOfWork.name;
  126. }
  127. return unitOfWork;
  128. }
  129. function doSomeWork2(unitOfWork) {
  130. let result = '';
  131. for(let i=0; i<1000; i += 1) {
  132. // work that takes a while
  133. result += unitOfWork.name;
  134. }
  135. return unitOfWork;
  136. }
  137.  
  138. const startComp = Date.now();
  139. for(let i=0; i<N; i += 1) {
  140. doSomeWork(unOptComp1);
  141. doSomeWork(unOptComp2);
  142. doSomeWork(unOptComp3);
  143. doSomeWork(unOptComp4);
  144. doSomeWork(unOptComp5);
  145. }
  146. console.log("test with components:", Date.now() - startComp, "ms.");
  147.  
  148. const startFiber = Date.now();
  149. for(let i=0; i<N; i += 1) {
  150. doSomeWork2(fiber1);
  151. doSomeWork2(fiber2);
  152. doSomeWork2(fiber3);
  153. doSomeWork2(fiber4);
  154. doSomeWork2(fiber5);
  155. }
  156. console.log("test with fibers:", Date.now() - startFiber, "ms.");
  157. ```
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement