1. Talking about the understanding of browsers
I think the main function of the browser is to present the web resource selected by the user. It needs to request the resource from the server and display it in the browser window. A browser can be divided into two parts: the shell and the kernel .
There are relatively many types of shells, but relatively few kernels. The shell refers to the shell of the browser, such as menus, toolbars, etc., mainly to provide interface operations for users. It realizes various functions by calling the kernel.
The kernel is the core of the browser, and the kernel is a program and module that displays content based on markup language.
Simply put, the kernel is divided into a rendering engine and a JS engine. The responsibility of the rendering engine is to render and display the requested content in the browser window. By default, html, xml documents and pictures can be rendered, and other types of data can also be displayed with the help of plug-ins. The JS engine is to parse and execute javascript to realize the dynamic effect of the webpage.
At first, the rendering engine and the JS engine were not clearly distinguished. Later, the JS engine became more and more independent, and the kernel tended to refer only to the rendering engine.
2. The rendering principle of the browser
Regarding the principle of browser rendering, I think it is such a process. First parse the received document, and generate a DOM tree according to the document. The DOM tree is composed of DOM elements and their attribute nodes. Then parse the CSS file to generate a CSSOM rule tree, and then build a rendering tree based on the DOM tree and the CSSOM rule tree. The nodes of the rendering tree are called rendering objects, and the rendering objects correspond to DOM element nodes, but not one-to-one. relationship, invisible DOM elements will not be inserted into the render tree. Then make the layout according to the rendering tree, which is to determine the exact position of each node of the rendering tree on the page, and then render, traverse the rendering tree and call the paint method of the rendering object to display the content on the screen, and draw using UI basic components. Another point is that in order to ensure a better user experience, the layout and rendering will not wait until all the html is parsed, but a part of the content will be displayed after parsing a part, and at the same time, the rest of the content may still be downloaded through the network.
3. The role and difference between async and defer in the browser parsing process
1. When the script does not have defer or async, the browser will immediately load and execute the specified script, that is, it will load and execute the specified script without waiting for the document elements to be loaded later.
2. The defer attribute indicates the delayed execution of the imported JavaScript, that is, the HTML does not stop parsing when this JavaScript is loaded, and the two processes are parallel. Execute the script file after the entire document has been parsed, before the DOMContentLoaded event is triggered. Multiple scripts are executed sequentially.
3. The async attribute indicates the asynchronous execution of the imported JavaScript. The difference from defer is that it will start executing if it has been loaded. That is to say, its execution will still block the parsing of the document, but its loading process will not be blocked. The execution order of multiple scripts cannot be guaranteed.
4. Document pre-parsing in the browser parsing process
While the JavaScript script is being executed, another thread parses the rest of the document and loads resources that need to be loaded over the network later. This way resources can be loaded in parallel which makes the overall speed faster. It should be noted that pre-parsing does not change the DOM tree, it leaves this work to the main parsing process, which only parses references to external resources, such as external scripts, style sheets and images.
5. Bad phenomenon of browser rendering
FOUC (flickering of unstyled content): mainly refers to the problem of style flickering. Due to the browser rendering mechanism (such as firefox), HTML is rendered before CSS is loaded, which will cause unstyled content to be displayed, and then the style suddenly appears The phenomenon. The main reason for this problem is that the CSS loading time is too long, because the CSS is placed at the bottom of the document or imported through import.
Solution : Instead, use the LINK tag to place the style sheet in the document HEAD to introduce the css style, and reference CSS in the tag.
White screen : Some browser rendering mechanisms (such as chrome) need to build the DOM tree and CSSOM tree first, and then render after the construction is completed. If the CSS part is placed at the end of the HTML, the browser has not rendered the CSS because the CSS has not been loaded. It may cause a white screen; it may also be that the JS file is placed in the head, and the loading of the script will block the analysis of the content of the subsequent document, so that the page is not rendered for a long time, and a white screen problem occurs.
Solutions :
1. Reduce the rendering time of the DOM tree (the HTML level should not be too deep, and the tags should be semantic...)
2. Reduce the number of HTTP requests and the size of the request
3. Put CSS in the Head and js at the end of the body to avoid Blocking
4. Use ssr rendering and pre-rendering.
Client-side rendering: the user accesses the url, requests the html file, and the front-end dynamically renders the page content according to the route. The key link is long, and there is a certain amount of white screen time;
Server-side rendering (ssr): When the user accesses the url, the server requests the required data according to the access path, concatenates it into an html string, and returns it to the front-end. When the front end receives html, there is already part of the content;
Pre-rendering: The build phase generates html files that match the pre-rendering path (note: each route that requires pre-rendering has a corresponding html). The constructed html file already has some content.
6. Redraw and reflow of browser drawing
Redrawing : When some elements in the rendering tree need to update attributes, and these attributes only affect the appearance and style of the elements, but will not affect the layout operations, such as background
-color, we call such operations redrawing.
Reflow : When a part (or all) of the rendering tree needs to be rebuilt due to changes in the size, layout, and hiding of elements, it will affect the operation of the layout. We call such operations reflow
.
A reflow is bound to cause a redraw, and a redraw does not necessarily cause a reflow. The cost of reflow is much higher than that of repainting, and changing the child nodes in the parent node is likely to cause a series of reflows of the parent node.
How to reduce reflux:
1. Try to use the abbreviation of css attributes: such as: use boder instead of boder-width, boder-style, boder-color
2. Batch modify element style elem.className
3. Try to avoid using table layout (once the table element triggers reflow, it will cause all other elements in the table to reflow)
4. When multiple DOM nodes need to be created, use DocumentFragment to create them.
Because: reflow occurs every time a page is created, so DocumentFragment is used for batch creation
5. Try not to write css expressions. Because the value is recalculated on every call (including loading the page)