Take a look at these browser interview questions. How many can you answer correctly?

This article will share with you some interview questions about browsers. See how many you can answer? Analyze the correct answers and see how many you can get right!

#1. What are the common browser kernels?

The core of the browser can be divided into two parts:

Rendering engine and JS engine (Note: The browser kernel we often refer to refers to the rendering engine)

As the JS engine becomes more and more independent, the kernel refers only to the rendering engine, which is mainly used to request The network page resources are parsed and typed and presented to the user

2. What are the main components of a browser?

• User interface: including address bar, forward/back/refresh/bookmark and other buttons

• Browser engine: in the user interface and rendering engine Transfer instructions between

• Rendering engine: used to draw the requested content

• Network: used to complete network calls, such as http requests, it Has a platform-independent interface and can work on different platforms

• JavaScript interpreter: used to parse and execute JavaScript code

• User interface backend : Used to draw basic widgets, such as combo boxes and windows. The bottom layer uses the user interface of the operating system

• Data storage: It belongs to the persistence layer, and the browser saves similar cookies on the hard disk. For various data, HTML5 defines web database technology, which is a lightweight and complete client-side storage technology

Note : Unlike most browsers, each tab in Google Chrome corresponds to a rendering engine instance. Each tab is an independent process

3. Let’s talk about what happens from inputting the URL to page rendering What?

This question can be said to be the most common question in interviews and can be infinitely difficult. Generally, interviewers ask this question to test the depth of your front-end knowledge.

1. The browser accepts the URL and opens the network request thread (involving: browser mechanism, thread and process, etc.)

2. Open the network thread to issue a complete http request (Involving: DNS query, TCP/IP request, 5-layer network protocol, etc.)

3. Receive the request from the server to the corresponding backend (involving: load balancing, security interception, backend internal processing etc.)

4. HTTP interaction between the backend and the frontend (involving: http headers, response codes, message structures, cookies, etc.)

5. Caching issues (involving: http strong cache Negotiate cache, cache header, etag, expired, cache-control, etc.)

6. The parsing process after the browser receives the http packet (involving html lexical analysis, parsing into a DOM tree, and parsing CSS generation CSSOM trees are merged to generate render rendering trees. Then layout layout, painting rendering, composite layer synthesis, GPU drawing, external link processing, etc.)

7. CSS visual model (involving: element rendering rules, such as: Contains blocks, control boxes, BFC, IFC, etc.)

8. JS engine parsing process (involving: JS parsing phase, preprocessing phase, execution phase to generate execution context, VO (global object), scope chain , recycling mechanism, etc.)

You will find that so many processes will occur between a simple input URL and the rendering of the page. Do you feel that it crashes instantly? (Don’t worry, we won’t do this in this chapter. Let me teach you how to answer this question first. This section will be discussed in a separate article)

• The browser obtains the IP address of the domain name through the DNS server and requests it from this IP address. HTML text
• The browser rendering process parses the HTML text and builds the DOM tree
• While parsing the HTML, if it encounters an inline style or style file, it downloads and builds the style rules. If it encounters JavaScript script, the execution script will be downloaded
• After the DOM tree and CSSOM are constructed, the rendering process will merge the two into a render tree (render tree)
• The rendering process begins to lay out the rendering tree. Generate layout tree
• Rendering tree draws the layout tree and generates drawing records

4. How does the browser parse the code of?

Parsing HTML

HTML is parsed line by line, and the browser's rendering engine will parse and convert the HTML document into DOM nodes.

• Parse HTML into many Tokens
• Parse Tokens into objects
• Combine objects into a DOM tree

Parse CSS

The browser will parse the CSS selector from right to left

We know that the DOM tree and the CSSOM tree are merged into The render tree actually attaches the CSSOM to the DOM tree, so the DOM tree needs to be traversed based on the information provided by the selector.

Let’s look at an example:

<style>
.nav .title span {color:blue}
</style>

<div class=&#39;nav&#39;>
  <div class=&#39;title&#39;>
    <span>南玖</span>
  </div>
  <div class="sub_title">前端</header>
</div>

Right-to-left matching:

• ##First find all the rightmost node spans, for each span , look up for the node div.title

• From h3 and then look up for the node div.nav

• Finally find the root element html, then end this branch traversal.

Parsing JS

Take the function out into a function block and store it in the warehouse. After this is done, the code begins to be parsed line by line (from top to bottom, left to right), and then matched with the warehouse.

5.What is the difference between DOMContentLoaded and load?

• DOMContentLoaded: Triggered only after DOM parsing is completed, excluding style sheets, pictures and other resources.
• Load: Triggered when all DOM, style sheets, scripts, images and other resources on the page have been loaded.

6. What is the difference between browser redrawing and domain rearrangement?

• Rearrangement: Part of the rendering tree or the entire rendering tree needs to be reanalyzed and the node size needs to be recalculated, which means regenerating the layout and rearranging elements
• Redrawing: Due to changes in the geometric properties of nodes or changes in style, such as element background elements, the appearance of some elements is changed

Redrawing is not necessarily Causes reflow, but reflow must lead to redraw

How to trigger redraw and reflow?

Any change to the information used to build the render tree will cause a reflow or redraw:

• Add, delete, update DOM nodes
• Hide a DOM node through display: none - trigger reflow and redraw
• Hide a DOM node through visibility: hidden - only trigger redraw, because there is no geometric change
• Move or give Add animation to DOM nodes in the page
• Add a style sheet and adjust style attributes
• User behavior, such as adjusting window size, changing font size, or scrolling.

How to avoid redrawing or reflowing?

• Change the style centrally: For example, use class to collectively change the style

• Use document.createDocumentFragment (): We can create a node outside the DOM tree through createDocumentFragment, then perform batch operations on this node, and finally insert it into the DOM tree, so only one rearrangement is triggered

• Promote to composition layer

  Promoting elements to composition layer has the following advantages:

  • The bitmap of the composition layer will be handed over to GPU Synthesis, faster than CPU processing

  • When repaint is needed, only repaint itself is required, not Affects other layers

  • For transform and opacity effects, layout and paint will not be triggered

    The best way to enhance a composition layer is to use the CSS will-change property

For example: If JS is multi-threaded, one thread wants to modify a DOM element, and another thread wants to delete the DOM element, then the browser does not know what to do Who do you listen to? So in order to avoid complexity, JavaScript has been designed to be single-threaded since its birth.

In order to take advantage of the computing power of multi-core CPUs, HTML5 proposes the Web Worker standard, which allows JavaScript scripts to create multiple threads, but the child threads are completely controlled by the main thread and must not operate the DOM. Therefore, this new standard does not change the single-threaded nature of JavaScript

First the conclusion

##CSS
• will not blockDOM parsing, but will block the rendering of DOM
CSS
• will block JS execution, but will not block JS Downloading files

The role of CSSOM

The first one is provided for JavaScript operations The ability of the style sheet
The second is to provide basic style information for the synthesis of the layout tree
This CSSOM is reflected in the DOM
• document.styleSheets

We can see from the browser rendering process mentioned before:

DOM and CSSOM usually is built in parallel, so
• CSS loading will not block DOM parsing

The render tree is dependent on the DOM tree and CSSOM tree, so it must wait until both Rendering cannot be started until loading is complete, so
• CSS loading will block the rendering of DOM

Since JavaScript can operate DOM and CSS, if you modify the attributes of these elements at the same time If the interface is rendered (that is, the JavaScript thread and the UI thread are performed at the same time), the elements obtained before and after the rendering thread may be inconsistent. Therefore, in order to prevent unpredictable rendering results, the browser sets the
• GUI rendering thread and the JavaScript thread to be mutually exclusive

JS requires Waiting for CSS to be downloaded, why is this? (CSS blocks DOM execution)

If the content of the JS script is to obtain the style of the element, then it must rely on CSS. Because the browser cannot sense what JS is trying to do internally, in order to avoid style acquisition, it has to wait until all previous styles are downloaded before executing JS. However, JS files and CSS files are downloaded in parallel. The CSS file will be loaded and executed before the subsequent JS file is executed, so CSS will block the execution of the subsequent JS

Avoid white screen and improve CSS loading speed

• Use CDN (CDN will select the nearest node with cached content to provide you with resources based on your network conditions , so the loading time can be reduced)
• Compress CSS
• Use cache reasonably
• Reduce the number of http requests and merge CSS files

9 Will .JS block the page?

First the conclusion

JS will block the parsing of the DOM, so it will also block the loading of the page

This is why we often say that we should put the JS file at the bottom

Since JavaScript can manipulate the DOM, if you modify the attributes of these elements and render the interface at the same time ( That is, the JavaScript thread and the UI thread run at the same time), then the element data obtained before and after the rendering thread may be inconsistent.

Therefore, in order to prevent unexpected rendering results, the browser sets a **"GUI rendering thread and JavaScript engine are mutually exclusive"** relationship.

When the JavaScript engine is executing, the GUI thread will be suspended, and GUI updates will be saved in a queue and executed immediately when the engine thread is idle.

When the browser is executing a JavaScript program, the GUI rendering thread will be saved in a queue and will not be executed until the JS program is completed.

Therefore, if the execution time of JS is too long, it will cause the rendering of the page to be inconsistent, resulting in the feeling that the page rendering and loading are blocked.

10.What is the difference between defer and async?

• Both load external JS files asynchronously and will not block DOM parsing
• Async is executed after the external JS loading is completed, when the browser is idle, and before the Load event is triggered. , scripts marked as async are not guaranteed to be executed in the order in which they are specified. This attribute has no effect on inline scripts (that is, scripts without the "src" attribute).
• defer is executed after the JS is loaded, after the entire document is parsed, and before the DOMContentLoaded event is triggered. If the src attribute (i.e., embedded script) is missing, the The attribute should not be used because it has no effect in this case

11. Browser garbage collection mechanism

Garbage collection is an automatic memory management mechanism. Dynamic memory on your computer should be released when it is no longer needed.

It should be noted that automatic means that the browser can automatically help us recycle memory garbage, but it does not mean that we do not need to care about memory management. If it is not operated properly, memory overflow will still occur in JavaScript, causing system breakdown.

Since strings, arrays, objects, etc. do not have fixed sizes, they need to be dynamically allocated when their sizes are known. Every time a JavaScript program creates a string, array, or object, the interpreter must allocate memory to store that entity.

The JavaScript interpreter can detect when the program is no longer using an object. When it determines that the object is useless, it knows that the object is no longer needed and can release the memory it occupies. .

There are two methods of garbage collection that browsers usually use: Mark clearing, Reference counting.

Mark clearing

This is the most commonly used garbage collection method in JavaScript

Since 2012 Since 2000, all modern browsers have used the mark-and-sweep garbage collection method, except for lower versions of IE, which still use the reference counting method.

So what is mark removal?

There is a global object in JavaScript. Periodically, the garbage collector will start from this global object, find all the objects referenced from this global object, and then find the objects referenced by these objects. Objects... mark these active objects, this is the marking phase. The clearing stage is to clear those objects that are not marked.

One problem with mark clearing is that after clearing, the memory space is discontinuous, that is, memory fragmentation occurs. If a relatively large continuous memory space is needed later, it will not meet the requirements. The marking and sorting method can effectively solve this problem.

In the process of marking, the concept of three-color marking is introduced. The three colors are:

• White: unmarked objects, that is, unreachable objects (not scanned object), can be recycled
• Gray: The object has been marked (reachable object), but the object has not been scanned yet and cannot be recycled
• Black: It has been scanned (reachable) Object), non-recyclable

Tag sorting:

The marking phase is no different from the mark and clear method, except that after the marking is completed, the mark and clear method will move the surviving objects to one side of the memory, and finally clean up the boundary memory.

Reference counting

The meaning of reference counting is to track the number of times each value is referenced. When a variable A is assigned a value, the number of references to this value is 1. When variable A is reassigned, the number of references to the previous value is reduced by 1. When the number of references becomes 0, it means that there is no way to access this value anymore, so the memory occupied by this value can be cleared.

Most browsers have abandoned this recycling method

Memory leak

To avoid memory leaks, once the data is no longer used, it is best to release its reference by setting its value to null. This method is called Contact reference

What situations can cause memory leaks? How to avoid it?

Taking Vue as an example, there are usually the following situations:

• Listening events such as window/body are not unbound
• The event tied to EventBus is not untied from
• Vuex's $store, and there is no after watch is removed. unwatch
• Created using a third-party library and not calling the correct destruction function

Solution: Destroy in time in beforeDestroy

• Binded events addEventListener and removeEventListener in the DOM/BOM object.
• Observer mode $on, $off processing.
• If a timer is used in the component, it should be destroyed.
• If a third-party library initialization is used in the mounted/created hook, it will be destroyed accordingly.
• Use weak references weakMap, weakSet.

When are the memories of different types of variables in the browser released?

• Reference type

  • It is automatically recycled by V8 after there is no reference.

• Basic type

  • If it is in a closure, it will not be recycled by V8 until there is no reference to the closure.
  • In the case of non-closure, wait for recycling when V8's new generation switches.

12. Talk about the browser’s caching mechanism?

Understand browser cache

When the browser requests a website, it will load various resources. For some resources that do not change frequently, The browser will save them in local memory and load these resources directly the next time you visit to improve access speed.

How to know whether the resource is the requested server or the cache read?

Look at the picture above, the size value of some resources is the size, some are from disk cache, and some are from memory cache, the size shown is the requested server resource, and the latter two are the read cache.

• disk cache: is to store resources in the disk. There is no need to download them again when waiting for the next access. It can be read directly from the disk. Its direct operation object is CurlCacheManager. (The efficiency is slower than the memory cache, but the storage capacity is large and the storage time is long)
• memory cache: It means caching the resources into the memory. There is no need to download them again when waiting for the next access. Read from memory. (In terms of efficiency, it is the fastest and in terms of survival time, it is the shortest.)

Browser cache classification

• Strong cache
• Negotiation cache

When the browser requests resources from the server, it first determines whether it hits the strong cache. If it fails, it then determines whether it hits the negotiated cache

Strong cache

<img  src="..." / alt="Take a look at these browser interview questions. How many can you answer correctly?" >
<link href="..." />
<script src="..."></script>

// front
function jsonp({ url, params, callback }) {
  return new Promise((resolve, reject) => {
    let script = document.createElement('script')
    window[callback] = function(data) {
      resolve(data)
      document.body.removeChild(script)
    }
    params = { ...params, callback } // wd=b&callback=show
    let arrs = []
    for (let key in params) {
      arrs.push(`${key}=${params[key]}`)
    }
    script.src = `${url}?${arrs.join('&')}`
    document.body.appendChild(script)
  })
}
jsonp({
  url: 'http://localhost:3000/say',
  params: { wd: 'wxgongzhonghao' },
  callback: 'show'
}).then(data => {
  console.log(data)
})

// server 借助express框架
let express = require('express')
let app = express()
app.get('/say', function(req, res) {
  let { wd, callback } = req.query
  console.log(wd) // Iloveyou
  console.log(callback) // show
  res.end(`${callback}('关注前端南玖')`)
})
app.listen(3000)

set-cookie: NID=189=M8l6-z41asXtm2uEwcOC5oh9djkffOMhWqQrlnCtOI; expires=Sat, 18-Apr-2020 06:52:22 GMT; path=/; domain=.google.com; HttpOnly

 <img  src="http://bank.example/withdraw?amount=10000&for=hacker"  alt="Take a look at these browser interview questions. How many can you answer correctly?" >

 <form action="http://bank.example/withdraw" method=POST>
    <input type="hidden" name="account" value="xiaoming" />
    <input type="hidden" name="amount" value="10000" />
    <input type="hidden" name="for" value="hacker" />
</form>
<script> document.forms[0].submit(); </script>

  <a href="http://test.com/csrf/withdraw.php?amount=1000&for=hacker" taget="_blank">
  重磅消息！！
  <a/>

 <img  src="http://bank.example/withdraw?amount=10000&for=hacker" referrerpolicy="no-referrer" alt="Take a look at these browser interview questions. How many can you answer correctly?" >

Accept: text/html
Method: GET

GET https://example.com/addComment?comment=XXX&dest=orderId