浏览器引擎（Browser engine/ layout engine + rendering engine）
https://en.wikipedia.org/wiki/Browser_engine
浏览器引擎：https://taligarsiel.com/Projects/howbrowserswork1.htm
The browser List:
Internet Explorer, Firefox, Safari, Chrome.
Browser Functionality:
The browser main functionality is to present the web resource you choose, by requesting it from the server and displaying it on the browser window. The resource format is usually HTML but also PDF, image and more. The location of the resource is specified by the user using a URI (Uniform resource Identifier).
Browsers’ user interface have a lot in common with each other. Among the common user interface elements are:
- Address bar for inserting a URI
- Back and forward buttons
- Bookmarking options
- Refresh and stop buttons for refreshing or stopping the loading of current documents
- Home button that gets you to your home page
The main components of a browser:
- The user interface: this includes the address bar, back/forward button, bookmarking menu etc.
- The browser engine: the interface for querying and manipulating the rendering engine.
- The rendering engine: responsible for displaying the requested content. For example if the requested content is HTML, it is responsible for parsing the HTML and CSS and displaying the parsed content on the screen.
- Networking: for network calls such as HTTP requests, using different implementations for different platform behind a platform-independent interface.
- UI backend: used for drawing basic widgets like combo boxes and windows. It exposes a generic interface that is not platform specific. Underneath it uses the operating system user interface methods.
- JavaScript interpreter: Used to parse and execute the JavaScript code.
- Data storage: This is a persistence layer. The browser needs to save all sorts of data on the hard disk, such as cookies. Browsers also support storage mechanisms such as localStorage, IndexedDB, WebSQL and FileSystem.
The Rendering Engine:
Both chrome and safari use the WebKit rendering engine. Firefox uses Gecko. Internet Explorer uses Trident.
Webkit is an open source rendering engine which started as an engine for the Linux platform and was modified by Apple to support Mac and Windows. See http://webkit.org/ for more details.
The main flow
The rendering engine will start getting the contents of the requested document from the networking layer. This will usually be done in 8kB chunks.
The basic flow of the rendering engine is as follows:
The render tree contains rectangles with visual attributes like color and dimensions. The rectangles are in the right order to be displayed on the screen.
After the construction of the render tree it goes through a “layout” process. This means giving each node the exact coordinates where it should appear on the screen. The next stage is painting – the render tree will be traversed and each node will be painted using the UI backend layer.
It’s important to understand that this is a gradual process. For better user experience, the rendering engine will try to display contents on the screen as soon as possible. It will not wait until all HTML is parsed before starting to build and layout the render tree. Parts of the content will be parsed and displayed, while the process continues with the rest of the contents that keeps coming from the network.
Parsing - general
Parsing a document means translating it to some structure that makes sense - something the code can understand and use. The output of the parsing is usually a tree which will be used to render the page on the screen.
Grammars
Parsing is based on the syntax rules the document obeys.
Parser - Lexer combination
Parser can be separated into two sub processes - Lexical analysis and Syntactic analysis.
Lexical analysis is the process of breaking the input into tokens. Tokens are the language vocabulary - the collection of valid building blocks. In human language it will consist of all the words that appear in the dictionary for that language.
Syntactic analysis is the application of the language syntax rules. It is the process of analyzing the token sequence to determine the grammatical structure of the language.
Translation
Parsing is often used in translation - transforming the input document to another format.The compiler that compiles a source code into machine code first parses it into a parse tree and then translates the parse tree into machine code.
Parsing example
Example - parsing the expression “2 + 3 - 1”
Vocabulary: Our language can include integers, plus signs and minus signs.
Syntax:
- The language syntax building blocks are expressions, terms and operations.
- Our language can include any number of expressions.
- A expression is defined as a “term” followed by an “operation” followed by another “term”.
- An operation is a plus token or a minus token.
- A term is an integer token or an expression.
https://github.com/mengjian-github/copilot-analysis