Guide du moteur JavaScript pour les compétences débutants_javascript

Concernant le titre de cet article, je ne pense pas que les personnes qui ont écrit ou lu cet article soient des idiots. Mais parfois, un sujet vous fait passer pour un idiot, et les moteurs JavaScript font partie de ces sujets, du moins pour moi.

Parfois, écrire du code pour une application Web semble magique, car nous écrivons simplement une série de caractères et voyons l'effet dans le navigateur. Mais comprendre la technologie derrière la magie peut vous aider à mieux améliorer vos compétences en programmation. Au moins, vous vous sentirez moins idiot en essayant d'expliquer ce qui se passe dans les coulisses d'une application Web ou mobile basée sur JavaScript.

Il y a de nombreuses années, alors que j'étais maître de conférences, je me plaignais à un professeur que je ne maîtrisais pas encore ces points de grammaire française particulièrement difficiles que je pouvais enseigner à mes étudiants de premier cycle. Je me souviens de ce qu'elle disait à l'époque : "Parfois, la seule façon d'apprendre quelque chose est de l'enseigner

.

Essayez d'expliquer aux ingénieurs comment NativeScript fonctionne en coulisse via un moteur JavaScript, en connectant et en appelant des API natives au moment de l'exécution - il est facile de se perdre dans les mauvaises herbes face à une tâche aussi complexe. En fait, tout développeur JavaScript devrait être curieux de connaître le moteur qui sous-tend la technologie que nous utilisons quotidiennement. Examinons maintenant de plus près ce que font réellement les moteurs JavaScript, pourquoi différentes plates-formes utilisent des moteurs différents, comment ils ont évolué au fil des ans et pourquoi, en tant que développeurs, nous devrions nous en soucier.

Tout d'abord, quelques termes professionnels

Un « moteur JavaScript » est souvent appelé machine virtuelle. Une « machine virtuelle » fait référence à un émulateur logiciel d'un système informatique donné. Il existe de nombreux types de machines virtuelles, classées en fonction de la précision avec laquelle elles simulent ou remplacent une machine physique réelle.

Par exemple, la « Machine virtuelle système » fournit une plate-forme d'émulation complète pouvant exécuter un système d'exploitation. Parallels, que les utilisateurs Mac connaissent bien, est une machine virtuelle qui vous permet d'exécuter des systèmes Windows sur votre Mac.

En revanche, la « machine virtuelle de processus » n'a pas toutes les fonctions et peut exécuter un programme ou un processus. Wine est une machine virtuelle de processus qui vous permet d'exécuter des applications Windows sur une machine Linux, mais ne fournit pas de système d'exploitation Windows complet sous Linux.

La machine virtuelle JavaScript est une machine virtuelle de processus spécialement conçue pour interpréter et exécuter du code JavaScript.

Remarque : Il est important de faire la distinction entre le moteur de mise en page, qui présente la mise en page dans le navigateur, et le moteur JavaScript sous-jacent, qui interprète et exécute le code. Une bonne explication peut être trouvée ici.

Alors, exactement, qu'est-ce qu'un moteur JavaScript et que fait-il ?

Le travail de base d'un moteur JavaScript est de convertir le code JavaScript écrit par les développeurs en code efficace et optimisé qui peut être interprété par le navigateur ou même intégré dans des applications. En fait, JavaScriptCore se définit comme une « machine virtuelle optimisée ».

Pour être plus précis, chaque moteur JavaScript implémente une version d'ECMAScript, dont JavaScript est un fork. À mesure qu'ECMAScript continue d'évoluer, le moteur JavaScript continue de s'améliorer. La raison pour laquelle il existe tant de moteurs différents est que chacun d'eux est conçu pour fonctionner dans un navigateur Web différent, un navigateur sans tête ou un environnement d'exécution tel que Node.js.

Vous connaissez peut-être les navigateurs Web, mais qu'est-ce qu'un navigateur sans tête ? Il s'agit d'un navigateur Web sans interface utilisateur graphique. Ils sont utiles lors de l’automatisation des tests de produits Web. Un bon exemple est PhantomJS. Alors, qu’est-ce que Node.js a à voir avec le moteur JavaScript ? Node.js est un framework asynchrone basé sur les événements qui vous permet d'utiliser JavaScript côté serveur. Puisqu'il s'agit d'outils qui alimentent JavaScript, ils sont également alimentés par des moteurs JavaScript.

Selon la définition ci-dessus de la machine virtuelle, il est facile de comprendre que le moteur JavaScript est appelé une machine virtuelle de processus, car son seul objectif est de lire et de compiler du code JavaScript. Cela ne veut pas dire qu’il s’agit simplement d’un simple moteur. Par exemple, JavaScriptCore dispose de six « blocs de construction » qui peuvent analyser, interpréter, optimiser et récupérer le code JavaScript.

Comment ça marche ?

Bien sûr, cela dépend du moteur. Les deux principaux moteurs qui ont retenu notre attention sont JavaScriptCore de WebKit et le moteur V8 de Google, qui exploitent tous deux NativeScript. Les deux moteurs traitent le code de différentes manières.

JavaScriptCore effectue une série d'étapes pour interpréter et optimiser les scripts :

Il effectue une analyse lexicale, qui consiste à décomposer le code source en une série de symboles ou de chaînes ayant une signification claire.
Ces symboles sont ensuite analysés à l'aide d'un analyseur de syntaxe pour construire un arbre syntaxique.
Ensuite, quatre processus JIT (Just-In-Time) commencent à participer, analysant et exécutant le bytecode généré par l'analyseur.
Quoi? En termes simples, le moteur JavaScript charge votre code source, le divise en chaînes (également appelées tokenisation), convertit ces chaînes en bytecodes que le compilateur peut comprendre, puis exécute ces bytecodes.

Le moteur V8 de Google est écrit en C et peut également compiler et exécuter du code source JavaScript, gérer l'allocation de mémoire et le garbage collection. Il est conçu pour être composé de deux compilateurs, capables de compiler directement le code source en code machine :

Full-codegen : un compilateur rapide qui génère du code non optimisé
Vilebrequin : un compilateur lent qui génère un code efficace et optimisé
Si Crankshaft détermine que le code qui doit être optimisé est du code non optimisé généré par Full-codegen, il remplacera Full-codegen, un processus appelé « crankshafting ».

Une fois le code machine généré lors du processus de compilation, le moteur exposera au navigateur tous les types de données, opérateurs, objets, fonctions spécifiés dans la norme ECMA, ou tout ce qui doit être utilisé au moment de l'exécution, comme c'est le cas avec NativeScript.

Quels sont les moteurs JavaScript ?

Il existe une gamme vertigineuse de moteurs JavaScript qui peuvent être utilisés pour interpréter, analyser et exécuter votre code côté client. À mesure que chaque version du navigateur est publiée, son moteur JavaScript peut être modifié ou optimisé pour suivre les évolutions de la technologie d'exécution de code JavaScript.

Avant de vous laisser complètement dérouter par les noms de ces moteurs de navigateur, rappelez-vous qu'une grande partie du marketing est consacrée à ces moteurs et aux navigateurs qui sont basés sur eux. Dans cette analyse très utile de la compilation JavaScript, l'auteur souligne sarcastiquement : « Ce que vous ne savez pas, c'est que les compilateurs sont à environ 37 % du marketing, et renommer un compilateur est l'une des rares choses que vous puissiez faire. , marketing intelligent, d'où le nom : SquirrelFish, Nitro, SFX..."

Tout en gardant à l’esprit l’influence du marketing sur la dénomination et le renommage de ces moteurs, il est utile de noter quelques événements marquants dans l’histoire des moteurs JavaScript. J'ai réalisé pour vous un tableau facile à comprendre :

Navigateur, navigateur sans tête ou runtime	Moteur JavaScript
Mozilla	Singe-araignée
Chrome	V8
Safari	JavaScriptCore
IE et Edge	Chakra
PhantomJS	JavaScriptCore
HTMLUnit	Rhinocéros
TrifleJS	V8
Node.js	V8
Io.js*	V8

*JavaScriptCore는 SquirrelFish로 재작성되었으며, 업그레이드된 버전은 Nitro라고도 불리는 QuirrelFish Extreme입니다. 그러나 Webkit 구현의 기초를 형성하는 JavaScript 엔진은 Safari와 같은 JavaScriptCore입니다.

**iOS 개발자는 모바일 장치의 Safari가 Nitro를 사용하지만 UIWebView에는 JIT 컴파일이 포함되어 있지 않으므로 환경이 느려진다는 점을 알아야 합니다. 그러나 개발자는 iOS8에서 Nitro를 포함한 WKWebView를 사용할 수 있으며 경험이 훨씬 빨라집니다. 하이브리드 모바일 앱 개발자들은 안도의 한숨을 쉴 수 있을 것이다.

*io.js가 결국 Node.js에서 분리된 이유 중 하나는 V8 버전의 엔진을 지원하기 위해서였습니다. 여기에 설명된 것처럼 이는 여전히 어려운 과제로 남아 있습니다.

왜 주목해야 할까요?

JavaScript 엔진의 코드 분석 및 실행 프로세스의 목표는 최단 시간에 가장 최적화된 코드를 컴파일하는 것입니다.

가장 중요한 점은 이러한 엔진의 진화가 웹 및 모바일 플랫폼을 최대한 성능을 높이기 위해 진화하는 웹 및 모바일 플랫폼에 대한 지속적인 탐색과 밀접하게 연관되어 있다는 것입니다. 이러한 발전을 추적하기 위해 arewefastyet.com에서 요약한 벤치마크 그래프에서 다양한 엔진의 성능을 확인할 수 있습니다. 예를 들어 V8 엔진과 크랭크샤프트 엔진이 아닌 엔진의 Chrome 성능을 비교하는 것은 흥미로울 것입니다.

모든 웹 개발자는 작성, 디버그 및 유지 관리하기 위해 열심히 노력한 코드가 필연적으로 브라우저에 따라 다르게 작동한다는 점을 깨달아야 합니다. 특정 코드 조각이 한 브라우저에서는 느리게 작동하지만 다른 브라우저에서는 훨씬 빠르게 작동하는 이유는 무엇입니까?

마찬가지로 모바일 개발자, 특히 웹뷰를 사용하여 페이지 콘텐츠를 표시하는 하이브리드 모바일 앱 개발자나 NativeScript와 같은 런타임 환경을 사용하는 개발자는 어떤 엔진이 JavaScript 코드를 해석하고 실행하는지 알고 싶어합니다. 모바일 웹 개발자는 소형 장치에서 브라우저의 한계와 가능성을 알고 있어야 합니다. 지속적인 성장을 원하는 웹, 모바일 또는 애플리케이션 개발자로서 JavaScript 엔진의 변화를 주시하면 큰 성과를 거둘 수 있습니다.

요약:

js 정의되지 않은 null 부울 숫자 문자열의 기본 데이터 유형
object는 js의 복잡한 데이터 유형이며 모든 객체의 기본 유형입니다
Node.js에는 다른 언어와 마찬가지로 9개의 기본 제어문이 있습니다
js의 함수는 반환값을 지정할 필요가 없습니다. 실제로 반환값을 지정하지 않는 함수는 undefine
을 반환합니다. js의 매개변수는 마음대로 전달될 수 있습니다. 이는 당신에게 도움이 될 수 있습니다
. js의 함수는 오버로드될 수 없지만 모방할 수는 있습니다.