Untuk siswa masa depan pada kursus "JavaScript Developer. Basic" menyiapkan terjemahan materi yang bermanfaat.
Kami juga mengundang Anda ke webinar terbuka dengan topik "Tugas apa yang menguji pengetahuan Anda tentang JavaScript" : ikuti pertanyaan tes dari sistem yang berbeda dan lihat tentang apa pertanyaan ini, apa yang mereka uji dan apa yang perlu Anda ketahui untuk menjawabnya dengan benar .
Pada artikel ini, saya ingin menjelaskan bahwa pengembang perangkat lunak yang menggunakan JavaScript untuk menulis aplikasi harus memahami mesin agar kode yang ditulis berfungsi dengan benar.
Di bawah ini Anda akan melihat fungsi satu baris yang mengembalikan properti dari lastName
argumen yang diteruskan. Dengan hanya menambahkan satu properti ke setiap objek, kami mendapatkan lebih dari 700% penurunan kinerja!
. 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 .