Talking about the operating principle of the browser
I recently learned some knowledge about the operating principle of the browser through my own study. I want to write down what I know and understand, so that it can not only facilitate my future review of knowledge, but also communicate and learn with you.
1. Introduction to the browser
Browsing is now widely used, but by the most users: Internet Explorer, Firefox, Safari, Chrome, and Opera.
The documents that browsers can identify include HTML, PDF, pictures and other types. Users use URI (Uniform Resource Identifier) to specify the location of the requested resource.
2. The main components of the browser
1. User interface - including the address bar, forward/back buttons, bookmarks, menus, and these are some of the most basic things, and now also add home, share, favorites, and even the address bar you often visit Added to the address bar for people's convenience.
2. The browser engine - the interface between the user interface and the rendering engine.
3. Rendering engine - parsing the request content. If the content is HTML, then it parses HTML and CSS. (Of course, some books refer to HTML parser, CSS parser, layout layout and JS engine as rendering engine, and I think JS engine should not be considered part of rendering engine, because CSS is attached to HTML, if CSS Without HTML, it would be nothing, but JS is not the same, JS can exist without HTML).
4. Network - for network calls, such as HTTP requests. Its interface is platform-independent and provides the underlying implementation for all platforms.
5. UI backend - for drawing basic widgets like combo boxes and windows. It exposes a platform-independent generic interface, while using the operating system's user interface methods under the hood. (At present, there are several UIs in use: EasyUI, DWZ JUI, HUI, BUI, H+ UI, etc. If you are interested in these, you can go to https://www.cnblogs.com/niejunchan/p/7694097. html, have a general understanding of the interface backend.)
6.JS interpreter - used to interpret and execute JS code.
7. Data storage - belongs to the persistence layer. The browser needs to save various data similar to cookies in the hard disk. HTML5 defines the web database technology, which is a lightweight and complete client-side storage technology.
3. Rendering engine
The browser kernel is divided into two parts: the rendering engine and the js engine. Since the js engine is becoming more and more independent, the kernel tends to only refer to the rendering engine, so the rendering engine is also called the browser kernel.
Parse html to build dom tree -> build render tree -> layout render tree -> draw render tree
The rendering engine starts parsing the html and converts the tags into dom nodes in the content tree. Next, it parses the external CSS file and style information in the style tag. This style information along with the visibility directives in the html will be used to build another tree - the render tree.
parser
1. The process of the parser can be divided into two sub-processes: syntax parsing and lexical parsing
Lexical parsing is the process of dividing content into a large number of tokens.
The parsing parser asks the lexer for a new token and tries to match it against a grammar rule. If a matching rule is found, the parser adds a node corresponding to that token to the parse tree, and proceeds to request the next token. If there are no rules to match, the parser stores the tokens internally and continues to request tokens until it finds a rule that matches all internally stored tokens. If no matching rules are found, the parser throws an exception. This means that the document is invalid and contains syntax errors.
2.HTML parsing Parse
HTML into a tree.
3. CSS parsing
CSS is a context-free grammar and can be parsed with the parser described above. The CSS specification defines the lexical and syntactic grammar of CSS. Each symbol has a lexical (vocabulary) defined by a regular expression, and the grammar is described by BNF (a set of symbols first introduced by John Backus and Peter Naur to describe the grammar of computer languages).
4. JS parsing The
JS engine is a virtual machine specially designed to process JS scripts, specially designed to interpret and execute JavaScript code. The JS engine will load your source code, break it down into strings, convert those strings into bytecodes that the compiler can understand, and then execute those bytecodes. Different browsers have different JS engines, and the JS engines of different browsers are shown in the table.
The above is just my simple understanding of the operating principle of the browser, for your reference only.
[1]: https://www.cnblogs.com/wjlog/p/5744753.html#chapter3
[2]: https://blog.csdn.net/u014744118/article/details/80698602
[3]: https: //www.cnblogs.com/niejunchan/p/7694097.htm