Menu
How does a browser go about parsing JavaScript it loads from files or inline? I am trying to get at the core of what a browser does. What happens when a page loads and it has <script> references to external files, and actual JavaScript on the page too. Any good articles out there?
455
The HTML and CSS are put together by the DOM to create the web page first. Then, the browsers' JavaScript engine loads JavaScript files and inline code but does not run the code immediately. It waits for the HTML and CSS to finish loading. Once this is done, the JavaScript is executed in the order the code is written.
Today, JavaScript can execute not only in the browser, but also on the server, or actually on any device that has a special program called the JavaScript engine. The browser has an embedded engine sometimes called a “JavaScript virtual machine”.
From previous explanations, the browser reads raw bytes of the HTML file from the disk (or network) and transforms that into characters. The characters are further parsed into tokens. As soon as the parser reaches the line with <link rel="stylesheet" href="style. css"> , a request is made to fetch the CSS file, style.
Parser – It reads the JavaScript Code and parses it into a Data Structure called AST (Abstract Syntax Tree). AST is built by breaking down code into tokens and checks for the semantic and syntactic errors in the code. This tree is later used to generate machine code.
This is defined in the ECMAScript standard.
First the source text (the stuff between the <script> tags) is converted into a series of tokens (according to the Lexical Grammar of the language):
The source text of an ECMAScript program is first converted into a sequence of input elements, which are tokens, line terminators, comments, or white space. The source text is scanned from left to right, repeatedly taking the longest possible sequence of characters as the next input element.
Read here: http://es5.github.com/#x7
That series of tokens is treated as a Program, which is then evaluated according to the Syntactic Grammar of the language which is defined in chapters 11 to 14 of the ECMAScript standard.
The syntactic grammar for ECMAScript is given in clauses 11, 12, 13 and 14. This grammar has ECMAScript tokens defined by the lexical grammar as its terminal symbols (5.1.2). It defines a set of productions, starting from the goal symbol Program, that describe how sequences of tokens can form syntactically correct ECMAScript programs.
Read here: http://es5.github.com/#x5.1.4
It starts in chapter 14: http://es5.github.com/#x14
Note that each <script> element represents a separate JavaScript program.
Read here: How many JavaScript programs are executed for a single web-page in the browser?
92
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
