Upgrade to Pro — share decks privately, control downloads, hide ads and more …

V8 internals for JavaScript developers

Mathias Bynens
September 04, 2017

V8 internals for JavaScript developers

Google Experts Summit 2017

Mathias Bynens

September 04, 2017
Tweet

More Decks by Mathias Bynens

Other Decks in Technology

Transcript

  1. const array = [1, 2, 3]; // elements kind: PACKED_SMI_ELEMENTS

    array.push(4.56); // elements kind: PACKED_DOUBLE_ELEMENTS
  2. const array = [1, 2, 3]; // elements kind: PACKED_SMI_ELEMENTS

    array.push(4.56); // elements kind: PACKED_DOUBLE_ELEMENTS array.push('x');
  3. const array = [1, 2, 3]; // elements kind: PACKED_SMI_ELEMENTS

    array.push(4.56); // elements kind: PACKED_DOUBLE_ELEMENTS array.push('x'); // elements kind: PACKED_ELEMENTS
  4. const array = [1, 2, 3]; // elements kind: PACKED_SMI_ELEMENTS

    array.push(4.56); // elements kind: PACKED_DOUBLE_ELEMENTS array.push('x'); // elements kind: PACKED_ELEMENTS
  5. array.length; // 5 array[9] = 1; // array[5] until array[8]

    are now holes index 0 1 2 3 4 5 6 7 8 9 value 1 2 3 4.56 'x' 1
  6. array.length; // 5 array[9] = 1; // array[5] until array[8]

    are now holes // elements kind: HOLEY_ELEMENTS index 0 1 2 3 4 5 6 7 8 9 value 1 2 3 4.56 'x' 1
  7. array[8]; // → ??? index 0 1 2 3 4

    5 6 7 8 9 value 1 2 3 4.56 'x' 1
  8. array[8]; // → ??? ❌ index 0 1 2 3

    4 5 6 7 8 9 value 1 2 3 4.56 'x' 1
  9. array[8]; // → ??? ❌ 8 >= 0 && 8

    < array.length; // bounds check // → true index 0 1 2 3 4 5 6 7 8 9 value 1 2 3 4.56 'x' 1
  10. array[8]; // → ??? ❌ 8 >= 0 && 8

    < array.length; // bounds check // → true ❌ index 0 1 2 3 4 5 6 7 8 9 value 1 2 3 4.56 'x' 1
  11. array[8]; // → ??? ❌ 8 >= 0 && 8

    < array.length; // bounds check // → true ❌ hasOwnProperty(array, '8'); // → false index 0 1 2 3 4 5 6 7 8 9 value 1 2 3 4.56 'x' 1
  12. index 0 1 2 3 4 5 6 7 8

    9 value 1 2 3 4.56 'x' 1 array[8]; // → ??? ❌ 8 >= 0 && 8 < array.length; // bounds check // → true ❌ hasOwnProperty(array, '8'); // → false ❌
  13. array[8]; // → ??? ❌ 8 >= 0 && 8

    < array.length; // bounds check // → true ❌ hasOwnProperty(array, '8'); // → false ❌ hasOwnProperty(Array.prototype, '8'); // → false
  14. array[8]; // → ??? ❌ 8 >= 0 && 8

    < array.length; // bounds check // → true ❌ hasOwnProperty(array, '8'); // → false ❌ hasOwnProperty(Array.prototype, '8'); // → false ❌
  15. array[8]; // → ??? ❌ 8 >= 0 && 8

    < array.length; // bounds check // → true ❌ hasOwnProperty(array, '8'); // → false ❌ hasOwnProperty(Array.prototype, '8'); // → false ❌ hasOwnProperty(Object.prototype, '8'); // → false
  16. array[8]; // → ??? ❌ 8 >= 0 && 8

    < array.length; // bounds check // → true ❌ hasOwnProperty(array, '8'); // → false ❌ hasOwnProperty(Array.prototype, '8'); // → false ❌ hasOwnProperty(Object.prototype, '8'); // → false ✅
  17. array[8]; // → undefined ✅ 8 >= 0 && 8

    < array.length; // bounds check // → true hasOwnProperty(array, '8'); // → false hasOwnProperty(Array.prototype, '8'); // → false hasOwnProperty(Object.prototype, '8'); // → false ✅
  18. packedArray[8]; // → undefined ✅ 8 >= 0 && 8

    < packedArray.length; // bounds check // → true ✅ hasOwnProperty(packedArray, '8'); // → true ✅ hasOwnProperty(Array.prototype, '8'); // → false ✅ hasOwnProperty(Object.prototype, '8'); // → false ✅
  19. packedArray[8]; // → undefined ✅ 8 >= 0 && 8

    < packedArray.length; // bounds check // → true ✅ hasOwnProperty(packedArray, '8'); // → true ✅ hasOwnProperty(Array.prototype, '8'); // → false ✅ hasOwnProperty(Object.prototype, '8'); // → false ✅
  20. array[0]; // → ??? ❌ 0 >= 0 && 0

    < array.length; // bounds check // → true
  21. array[0]; // → ??? ❌ 0 >= 0 && 0

    < array.length; // bounds check // → true ❌
  22. array[0]; // → ??? ❌ 0 >= 0 && 0

    < array.length; // bounds check // → true ❌ hasOwnProperty(array, '0'); // → true
  23. array[0]; // → ??? ❌ 0 >= 0 && 0

    < array.length; // bounds check // → true ❌ hasOwnProperty(array, '0'); // → true ✅
  24. array[0]; // → 1 ✅ 0 >= 0 && 0

    < array.length; // bounds check // → true hasOwnProperty(array, '0'); // → true ✅
  25. const array = new Array(3); // HOLEY_SMI_ELEMENTS array[0] = 'a';

    // HOLEY_ELEMENTS array[1] = 'b'; index 0 1 2 value 'a' 'b'
  26. const array = new Array(3); // HOLEY_SMI_ELEMENTS array[0] = 'a';

    // HOLEY_ELEMENTS array[1] = 'b'; array[2] = 'c'; index 0 1 2 value 'a' 'b' 'c' now packed!
  27. const array = new Array(3); // HOLEY_SMI_ELEMENTS array[0] = 'a';

    // HOLEY_ELEMENTS array[1] = 'b'; array[2] = 'c'; // HOLEY_ELEMENTS (still!) now packed! but it’s too late index 0 1 2 value 'a' 'b' 'c'
  28. const array = ['a', 'b', 'c']; // elements kind: PACKED_ELEMENTS

    // … array.push(someValue); array.push(someOtherValue);
  29. for (let i = 0, item; (item = items[i]) !=

    null; i++) { doSomething(item); }
  30. for (let i = 0, item; (item = items[i]) !=

    null; i++) { doSomething(item); }
  31. for (let i = 0, item; (item = items[i]) !=

    null; i++) { doSomething(item); } for (let index = 0; index < items.length; index++) { doSomething(item); }
  32. [3, 2, 1, +0]; // PACKED_SMI_ELEMENTS [3, 2, 1, -0];

    // PACKED_DOUBLE_ELEMENTS [3, 2, 1, NaN, Infinity]; // PACKED_DOUBLE_ELEMENTS
  33. const arrayLike = {}; arrayLike[0] = 'a'; arrayLike[1] = 'b';

    arrayLike[2] = 'c'; arrayLike.length = 3;
  34. Array.prototype.forEach.call(arrayLike, (value, index) => { console.log(`${ index }: ${ value

    }`); }); // This logs '0: a', then '1: b', and finally '2: c'.
  35. const actualArray = Array.prototype.slice.call(arrayLike, 0); actualArray.forEach((value, index) => { console.log(`${

    index }: ${ value }`); }); // This logs '0: a', then '1: b', and finally '2: c'.
  36. const logArgs = function() { Array.prototype.forEach.call(arguments, (value, index) => {

    console.log(`${ index }: ${ value }`); }); }; logArgs('a', 'b', 'c'); // This logs '0: a', then '1: b', and finally '2: c'.
  37. const logArgs = (...args) => { args.forEach((value, index) => {

    console.log(`${ index }: ${ value }`); }); }; logArgs('a', 'b', 'c'); // This logs '0: a', then '1: b', and finally '2: c'.
  38. $

  39. $ rlwrap ~/projects/v8/out.gn/x64.debug/d8 --allow-natives-syntax V8 version 6.2.0 (candidate) d8> const

    array = [1, 2, 3]; %DebugPrint(array); DebugPrint: 0x313389e0e551: [JSArray] - map = 0x3133e0582889 [FastProperties] - prototype = 0x313360387f81 - elements = 0x313389e0e4c9 <FixedArray[3]> [PACKED_SMI_ELEMENTS (COW)] - length = 3 - properties = 0x3133dae02241 <FixedArray[0]> { #length: 0x31336c242839 <AccessorInfo> (const accessor descriptor) } …
  40. $ rlwrap ~/projects/v8/out.gn/x64.debug/d8 --allow-natives-syntax V8 version 6.2.0 (candidate) d8> const

    array = [1, 2, 3]; %DebugPrint(array); DebugPrint: 0x313389e0e551: [JSArray] - map = 0x3133e0582889 [FastProperties] - prototype = 0x313360387f81 - elements = 0x313389e0e4c9 <FixedArray[3]> [PACKED_SMI_ELEMENTS (COW)] - length = 3 - properties = 0x3133dae02241 <FixedArray[0]> { #length: 0x31336c242839 <AccessorInfo> (const accessor descriptor) } …
  41. Avoid holes. Avoid out-of-bounds reads. Avoid elements kind transitions. Prefer

    arrays over array-like objects. — Albert Einstein
  42. Avoid holes. Avoid out-of-bounds reads. Avoid elements kind transitions. Prefer

    arrays over array-like objects. Eat your vegetables. — this slide, just now