DayFR Italian

in che modo i browser eseguono il codice JS?

-

Qualche settimana fa abbiamo parlato di compilatori e in particolare di compilatori per linguaggi dinamici. JavaScript è un linguaggio interpretato. Hai bisogno di un interprete e di un compilatore per poter eseguire il codice. Nei browser, questo è un motore JavaScript. I più conosciuti sono:

Google V8 per Chrome e Node

SpiderMonkey per Firefox

JavaScriptCore per Safari/WebKit

Il codice JS attraversa 3 fasi principali:

1 / le analisi

2/la compilazione

3/l’esecuzione stessa

L’analisi si basa su un parser che ha il pesante compito di leggere il codice JS e convertirlo in un albero sintattico astratto o AST (Abstract Syntax Tree). Parleremo anche di un albero sintattico astratto. Questo è essenziale perché senza questo codice intermedio il compilatore non può agire. È dopo la compilazione che il motore di rendering JS esegue il codice. Oltre alle 3 fasi, sono importanti diversi elementi: il compilatore JIT che migliora le prestazioni del codice, il caching inline e la garbage collection per la gestione della memoria e il buon utilizzo delle risorse.

Naturalmente per l’utente tutto questo è trasparente, lo stesso per lo sviluppatore che non deve preoccuparsi di questi problemi. Normalmente il browser fa il lavoro.

Tuttavia, diverse ottimizzazioni possono migliorare significativamente le prestazioni e la stabilità del codice, ad esempio:

– ottimizzare le manipolazioni e l’elaborazione del DOM e utilizzare framework per ottimizzare il DOM

– Circuiti e condizioni ben strutturati

– utilizzare una sintassi moderna seguendo gli ultimi sviluppi di JS: questo punto è importante perché il vecchio codice può rallentare il motore JS e quindi le prestazioni dei siti

– evitare di creare inutilmente variabili globali che consumano memoria e sovraccaricano il codice e la sua elaborazione

– caricare le risorse (immagini, file, dati, ecc.) solo quando sono necessarie

– non bloccare il thread principale: eventuali blocchi o tempi di elaborazione lunghi possono bloccare l’interfaccia e quindi danneggiare la reattività della sua app. Una buona pratica: i Web Workers.

– strumenta il tuo codice, esegui l’ottimizzazione del runtime con il browser DevTools

Related News :