What happens when you open a browser and type a url into the address bar, and then enter?
1. The keywords
DNS resolution (none)
304 Cache (none)
TCP three-wave four-handshake (none)
HTTP packets (none)
Redraw, reflux
Synchronous programming (none)
Event loop (None)
Macro task, micro task (none)
Process, thread
Stack memory (none)
Heap memory (none)
Lazy loading of images (none)
Compression (none)
Performance optimization
Browser storage (none)
Caching mechanism (none)
2. Show
Yang Xiaoyang students web front-end high frequency interview questions constantly improve and update
Some materials refer to online resources with links at the end of the article
A series of problems caused by a browser rendering
Incorrect corrections are welcome
Processes and threads
Process of 1.
An execution of a program that occupies a unique piece of memory. Is the basic unit of operating system execution.
A process has at least one running thread: the main thread, which is created automatically after the process starts
It is also possible to run multiple threads in a process at the same time, and we would say that a program is multithreaded
Data within a process can be directly shared by multiple threads, but data between multiple processes cannot be directly shared
(1). Browser process
Browser process: the main process of the Browser, responsible for the display of the Browser interface, and the management of each page, the ancestor of all other types of processes in the Browser, responsible for the creation and destruction of other processes it has only one!!!!!
Renderer: a web page rendering process that is responsible for rendering a page. You can have multiple renderers. Of course, the number of renderers is not necessarily equal to the number of pages you open
Various plug-in processes
Browsers on mobile devices may be different: Android does not support plug-ins, so there is no plug-in process. The GPU evolved into a thread of the Browser process, and the Renderer evolved into a service process of the operating system, which remains independent
Thread 2.
An independent execution unit within a process and the smallest unit of CPU scheduling. The basic unit of program running thread pool (Thread pool): store multiple thread objects container, realize the reuse of thread objects
Since jS is single threaded, it involves event loops, event polling, and event loops.
HTTP request
1. The DNS
2.TCP three-way handshake four-way wave
3. HTTPS and HTTP
HTTP response
Five, browser rendering principle
1. Browser function
network
Browsers use web modules to download various resources, such as HTML text; Javascript code. The style sheet; Image; Audio and video files, etc.
The network part is important by nature because it takes a long time and requires secure access to resources on the Internet.
Resource management
Resources downloaded from the Internet or obtained locally need an efficient mechanism to manage them.
For example, how to avoid repeated downloads, how to cache resources and so on
Browse the web
Resource visualization
And so on…
2. Browser kernel
Refer to Baidu Encyclopedia
The most important and core part of the browser is the Rendering Engine, which is generally referred to as the “browser core”.
Different browser kernels interpret the syntax of the web page differently, so the same page may render differently in different browsers with different kernels, which is why web writers need to test the page display in different browsers.
The kernel classification
Browsers that use the kernel
Trident (IE)
Internet Explorer, Superior game, Windows of the World Browser, Avant, Tencent TT, Sleipnir, GOSURF, GreenBrowser and KKman, etc.
Gecko(firefox)
[Mozilla Firefox](Baike.baidu.com/item/Mozill…Firefox), Mozilla SeaMonkey, Waterfox (64-bit open source version of Firefox), Iceweasel, Epiphany (earlier version), Flock (earlier version), K-Meleon.
Its (Google)
Google Chrome,360 ultra speed browserAs well asSogou high-speed browserHigh-speed mode also uses Webkit as the kernel
Blink
Presto
3. Browser rendering mechanism
Browsers use a streaming layout model (Flow Based Layout)
The browser will putHTMLParsed intoDOM,CSSParsed intoCSSOM.DOMandCSSOMThe merge results in a render tree (Render Tree).
There are theRenderTree, we know the style of all the nodes, calculate their size and position on the page, and finally draw the nodes on the page.
Since browsers use streaming layouts, yesRender TreeIs usually done only once,buttableWith the exception of their internal elements, they may require multiple computations, usually taking three times as long as their equivalent elements. Why avoid themtableOne of the reasons for layout
4. Browser rendering engine
(1). Main modules
HTML parser
A parser that interprets HTML documents
Function: Interprets HTML text into a DOM tree
CSS parser
It is used to calculate style information for individual element objects in the DOM
Provide infrastructure for the layout
JavaScript engine
Using Javascript code, you can modify the content of a web page, as well as the CSS information
The javascript engine is able to interpret javascript code and modify the web content and style information through DOM interfaces and CSS tree interfaces to change the rendered results
Layout reflux
After the DOM is created, Webkit needs to combine its element objects with style information
Calculate their size, location and other layout information
Form an internal representation model that expresses all this information
Drawing module
Use graphics library to draw the nodes of each web page into image results after layout calculation
(2). Rendering process
Rendering tree construction, layout, and rendering Chinese
When you encounter HTML tokens, call the HTML parser to parse them into tokens (a token is a serialization of tag text) and build a DOM tree (a memory that holds tokens and establishes relationships between them)
Encountering a style/link tag calls the parser to process the CSS tag and build a CSS style tree, known as CSSOM
When script tags are encountered, javascript parsers are called to handle script tags, bind events, modify DOM /CSS trees, etc
Merge the DOM and CSS trees into a render tree
Render from the render tree to calculate geometric information for each node (this process depends on the graphics library)
Draw the individual nodes to the screen.
5. Browser rendering is blocked
(1).css style rendering blocks
Only external CSS introduced by link can cause blocking
(2). JS blocked
Sixth, performance optimization
1. Reduce HTTP requests
2. Reduce DOM redrawing and backflow
(1). Redrawn
Redraw a node whose geometry or style changes without affecting the layout, such as outline, visibility, color, background-color, etc. Redraw is expensive because the browser must verify the visibility of other node elements in the DOM tree.
(2). Return
Backflow is when layout or geometry properties need to be changed. Backflow is a key factor affecting browser performance because it involves updating the layout of part of the page (or the entire page). The backflow of an element can result in subsequent backflow of all its child elements, as well as subsequent nodes in the DOM and ancestor node elements. Some bosses are also used to calling it a rearrangement
When does a browser backflow occur
Add or remove visible DOM elements
The position of the element changes
The size of the element changes (including margins, inner borders, border size, height, width, etc.)
Content changes, such as text changes or an image being replaced by another image of a different size.
When the page is first rendered (which is inevitable)
Browser window size changes (because backflow calculates element position and size based on viewport size)
(3). Browser optimization
Most modern browsers are batch update layout through the queue mechanism, the browser will put the modification operations in the queue, at least one browser refresh (16.6 ms) will empty the queue, but when you get the layout information, the queue may affect the properties or methods return value of the operation, if not, the browser will be forced to empty the queue, Trigger backflow and redraw to ensure the correct value is returned.
These include the following attributes or methods:
offsetTop,offsetLeft,offsetWidth,offsetHeight
scrollTop,scrollLeft,scrollWidth,scrollHeight
clientTop,clientLeft,clientWidth,clientHeight
width,height
getComputedStyle()
getBoundingClientRect()
(4). Summary
Redraw does occur, redraw does not necessarily cause redraw how to minimize redraw rearrangement?
CSS
usetransformalternativetop
Use visibility instead of display: None, because the former will only cause redraw and the latter will cause backflow (changing the layout)
Avoid using a table layout because a small change can cause the entire table to be rearranged.
If possible, change the class at the very end of the DOM tree. Backflow is inevitable, but its impact can be reduced. Changing the class as far down the DOM tree as possible limits the scope of backflow, affecting as few nodes as possible.
Avoid multiple inline styles and CSS selectors match from right to left to avoid too many nodes.
<div>
<a> <span></span> </a>
</div>
<style>
span {
color: red;
}
div > a > span {
color: red;
}
</style>
Copy the code
For the first style, the browser just needs to find all the SPAN tags on the page and set the color, but for the second style, the browser needs to find all the SPAN tags, then find the A tag on the SPAN tag, and finally find the div tag. Then color span tags that match this condition, and the recursive process becomes complicated. So we should avoid writing too specific CSS selectors as much as possible, and add as few meaningless tags to THE HTML as possible to keep the hierarchy flat.
Apply the animation effect to elements with position set to Absolute or fixed to avoid affecting the layout of other elements. This is just a redraw, not a backflow. Also, control the animation speed by using requestAnimationFrame. See requestAnimationFrame for details.
Avoid using CSS expressions, which may cause backflow.
If a node that is frequently redrawn or reflow is set as a layer, the layer can prevent the rendering behavior of this node from affecting other nodes, such as will-change, video, iframe, etc., and the browser will automatically turn this node into a layer.
CSS3 hardware acceleration (GPU acceleration) : CSS3 hardware acceleration enables transform, opacity, and filters to be redrawn without causing backflow. Other properties of animations, such as background-color, will still cause backflow redraw, but it can still improve the performance of those animations.
JavaScript
Avoid frequent manipulation of styles, it is better to rewrite it oncestyleProperty, or define the style list asclassAnd change it onceclassProperties.
Avoid frequent operationsDOM, create adocumentFragmentApply all of them to itDOM manipulation, and finally add it to the document.
Avoid frequently reading properties that cause backflow/redraw, and if you do need to use them more than once, cache them in a variable.
Use absolute positioning on elements with complex animations to keep them out of the document stream, which would otherwise cause frequent backflow of parent elements and subsequent elements.
Seven, think
Question 1: Why three handshakes in the request phase and four waves when disconnecting?
Question 2: Are front-end frameworks so popular just because they are easy to use and efficient to develop? What was the era of jQuery like? Why it’s rarely used these days
Q3: what is the difference between HTTP and HTTPS? What is the underlying principle of HTTPS?
