A few weeks ago, we talked about compilers and in particular compilers for dynamic languages. JavaScript is an interpreted language. You need an interpreter and a compiler to be able to run the code. In browsers, this is a JavaScript engine. The best known are:
Google V8 for Chrome and Node
SpiderMonkey pour Firefox
JavaScriptCore pour Safari / WebKit
JS code goes through 3 main phases:
1 / le parsing
2 / la compilation
3 / the execution itself
Parsing relies on a parser which has the heavy task of reading the JS code and converting it into an abstract syntactic tree or AST (Abstract Syntax Tree). We will also speak of an abstract syntax tree. This is essential because without this intermediate code, the compiler cannot act. It is after compilation that the JS rendering engine executes the code. In addition to 3 phases, several elements are important: the JIT compiler which improves code performance, inline caching and garbage collection for memory management and good use of resources.
Of course, for the user, all this is transparent, the same for the developer who does not have to worry about these problems. Normally the browser does the job.
However, several optimizations can significantly improve code performance and stability, for example:
– optimize DOM manipulations and processing and use frameworks to optimize the DOM
– well-structured loops and conditions
– use modern syntax following the latest developments in JS: this point is important because old code can slow down the JS engine and therefore the performance of the sites
– avoid unnecessarily creating global variables which consume memory and overload the code and its processing
– load resources (images, files, data, etc.) only when they are needed
– do not block the main thread: any blocking or long processing times can block the interface and therefore harm the responsiveness of its app. A good practice: Web Workers.
– instrument your code, perform runtime tuning with browser DevTools
