Para los futuros alumnos del curso "JavaScript Developer. Básico" se preparó una traducción de material útil.
También lo invitamos a un seminario web abierto sobre el tema "Qué tareas prueban su conocimiento de JavaScript" : tome preguntas de prueba de diferentes sistemas y vea de qué tratan estas preguntas, qué prueban y qué necesita saber para responderlas correctamente .
En este artículo, quiero explicar que un desarrollador de software que usa JavaScript para escribir aplicaciones debe comprender los motores para que el código escrito funcione correctamente.
A continuación, verá una función de una línea que devuelve una propiedad del lastName
argumento pasado. ¡Simplemente agregando una propiedad a cada objeto, obtenemos una caída de rendimiento de más del 700%!
. JavaScript . , C# Java, "Faustian bargain" (" ". ; . ).
, . , , .
!
. , ?
, , Star Wars ( ). getName . :
(() => { const han = {firstname: "Han", lastname: "Solo"}; const luke = {firstname: "Luke", lastname: "Skywalker"}; const leia = {firstname: "Leia", lastname: "Organa"}; const obi = {firstname: "Obi", lastname: "Wan"}; const yoda = {firstname: "", lastname: "Yoda"}; const people = [ han, luke, leia, obi, yoda, luke, leia, obi ]; const getName = (person) => person.lastname;
console.time("engine"); for(var i = 0; i < 1000 * 1000 * 1000; i++) { getName(people[i & 7]); } console.timeEnd("engine"); })();
Intel i7 4510U 1.2 . . .
(() => { const han = { firstname: "Han", lastname: "Solo", spacecraft: "Falcon"}; const luke = { firstname: "Luke", lastname: "Skywalker", job: "Jedi"}; const leia = { firstname: "Leia", lastname: "Organa", gender: "female"}; const obi = { firstname: "Obi", lastname: "Wan", retired: true}; const yoda = {lastname: "Yoda"};
const people = [ han, luke, leia, obi, yoda, luke, leia, obi];
const getName = (person) => person.lastname;
console.time("engine"); for(var i = 0; i < 1000 * 1000 * 1000; i++) { getName(people[i & 7]); } console.timeEnd("engine");})();
8.5 , 7 , . . ?
.
:
— () , . . Mozilla Firefox Spidermonkey, Microsoft Edge — Chakra/ChakraCore, Apple Safari JavaScriptCore. Google Chrome V8, Node. js. V8 2008 . V8 JavaScript.
, , . .
. , .
, . , , .
— :
.
.
. "Hot Path" (" ") , . .
"Just in Time" JIT (Just-in-time compilation, « »).
, JavaScript C++. , “contextual optimisation” (" ").
Static Types ( ) Runtime ( ): Inline Caching ( )
Inline-, IC, JavaScript. , . , (getter method
) -. .
“” ("type"), . V8 "" ("types"), ECMAScript, . , . , {firstname: "Han", lastname: "Solo"}
, {lastname: "Solo", firstname: "Han"}
.
, . (hard-codes) , .
Inline Caching, . , .
: , firstname
lastname
, . , — p1
. IC, , p1 lastname
.
5 . , yoda
firstname
. , ?
Ducks (Intervening Ducks or Multiple Types)
“duck typing” ( " "), (good code) , . , "lastname", .
. , . IC.
, IC. , "" . , . .
, . IC. . , -. , .
Inline Cache 2 .
IC 5- :
JavaScript
, 5 IC. ?
, 5 . , . (object literals), JavaScript- .
, , null
. , :
(() => { class Person { constructor({ firstname = '', lastname = '', spaceship = '', job = '', gender = '', retired = false } = {}) { Object.assign(this, { firstname, lastname, spaceship, job, gender, retired }); } }
const han = new Person({ firstname: 'Han', lastname: 'Solo', spaceship: 'Falcon' }); const luke = new Person({ firstname: 'Luke', lastname: 'Skywalker', job: 'Jedi' }); const leia = new Person({ firstname: 'Leia', lastname: 'Organa', gender: 'female' }); const obi = new Person({ firstname: 'Obi', lastname: 'Wan', retired: true }); const yoda = new Person({ lastname: 'Yoda' }); const people = [ han, luke, leia, obi, yoda, luke, leia, obi ]; const getName = person => person.lastname; console.time('engine'); for (var i = 0; i < 1000 * 1000 * 1000; i++) { getName(people[i & 7]); } console.timeEnd('engine');})();
, , 1.2 . !
JavaScript- : .
Inline Caching — . , .
Inline .
JavaScript . (Static typed transpilers), TypeScript, IC .