The main function of a Web browser is to display webpage resources, that is, to request the server and display the results in the window. The procedure is as follows:
Enter URL in the address barThe browser searches for the IP address of the domain name based on the entered URL. The DNS search process is as follows:
The browser establishes a TCP connection with the corresponding web server and sends an HTTP request. After receiving the request, the web server performs a series of analysis and processing (analyze the HTTP Request Response Process later) and return the HTML file.
Browser parsing HTMLThe browser receives the HTML file returned by the server and parses the
Then, the browser begins to parse the content in <body>:
When the HTML Parser encounters a <SCRIPT> tag, the script must be executed by default before parsing and rendering the document. Script Execution is only synchronized and blocked by default. <SCRIPT> the defer and async attributes can be used to change the script execution mode. The defer and async attributes allow the browser to continue parsing and rendering documents when downloading the script. The defer attribute causes the browser to delay script execution until the file is loaded and parsed. The async attribute allows the browser to execute the script as soon as possible without blocking document parsing when downloading the script. If the <SCRIPT> tag has both attributes, browsers that support both attributes will execute the async attribute and ignore the defer attribute. Delayed scripts are executed in the order they appear in the document, while asynchronous Scripts may be unordered after they are loaded.
Browser rendering principlesAbout the rendering principles of browsers, there is a widely spread article-How browsers work (English version, Chinese translation version. Brief Analysis:
1. User Interface-including the address bar, the back/forward button, and the bookmarked directory, that is, what you see is not only used to display the main window of the page you requested.
2. browser engine-interfaces used to query and operate rendering engines.
3. Rendering Engine-used to display the request content. For example, if the request content is HTML, it is responsible for parsing HTML and CSS and displaying the parsed results.
4. Network-used to complete network calls, such as HTTP requests. It has platform-independent interfaces and can work on different platforms.
5. UI backend: used to draw basic components such as a combination selection box and a dialog box. It has a common interface not specific to a platform and uses the user interface of the operating system at the underlying layer.
6. js interpreter-used to explain and execute JS Code.
7. Data Storage-a persistent layer. Browsers need to store Cookie-like data on hard disks. HTML5 defines the WEB database technology, which is a lightweight and complete client storage technology.
Figure 1: main browser Components
Chrome assigns a rendering engine instance for each tab. Each tab is an independent process.
Reflow and repaint are often used in browser rendering. If you only change the background color and text color of an element without affecting Dom layout attributes, the browser will repaint, if you change the attributes that affect the DOM layout, it will cause the browser to reflow. The reflow overhead is much higher than the repaint, so we should avoid it as much as possible.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
