Browsers and new technologies

Interview questions from my project “Front-end Interview and Progression Guide”

This chapter on the browser principle part of the content mainly comes from the browser working principle, this is a very long article, can be counted as a small book, there is energy is very recommended reading.

What are the common browser kernels?

Browser/RunTime	Kernel (rendering engine)	JavaScript engine
Chrome	Blink (28 ~) Webkit (Chrome 27)	V8
FireFox	Gecko	SpiderMonkey
Safari	Webkit	JavaScriptCore
Edge	EdgeHTML	Chakra(for JavaScript)
IE	Trident	Chakra(for JScript)
PhantomJS	Webkit	JavaScriptCore
Node.js	–	V8

What are the main components of a browser?

1. User interface – includes address bar, forward/back buttons, bookmark menu, etc. All parts of the display belong to the user interface, except for the page you requested displayed in the browser’s main window.
2. Browser engine – passes instructions between the user interface and the rendering engine.
3. Rendering engine – Responsible for displaying the requested content. If the requested content is HTML, it is responsible for parsing the HTML and CSS content and displaying the parsed content on the screen.
4. Network – Used for network calls, such as HTTP requests. Its interfaces are platform independent and provide an underlying implementation for all platforms.
5. User interface back end – Used to draw basic widgets, such as combo boxes and Windows. It exposes a common interface that is platform-independent, while underneath it uses the operating system’s user interface approach.
6. JavaScript interpreter. Used to parse and execute JavaScript code.
7. Data storage. This is the persistence layer. Browsers need to keep all kinds of data, such as cookies, on their hard drives. The new HTML specification (HTML5) defines a “web database,” which is a complete (but lightweight) in-browser database.

Figure: Main components of a browser.

It’s worth noting that unlike most browsers, Chrome has a separate rendering engine instance for each TAB page. Each TAB is a separate process.

How does the browser render the UI?

1. The browser takes the HTML file and parses it to form a DOM Tree
2. At the same time, perform CSS parsing to generate Style Rules
3. Then combine DOM Tree and Style Rules into Render Tree
4. Next comes the Layout phase, which assigns each node an exact coordinate that should appear on the screen
5. The GPU is then called to Paint, traverse the nodes of the Render Tree, and Render the elements

How do browsers parse CSS selectors?

Browsers parse CSS selectors “from right to left.”

As we know, DOM Tree and Style Rules are synthesized into Render Tree. In fact, Style Rules need to be attached to the DOM Tree. Therefore, the DOM Tree needs to be traversed according to the information provided by the selector to attach the Style to the corresponding DOM element.

The following CSS is an example

.mod-nav h3 span {font-size: 16px; }Copy the code

Our corresponding DOM Tree is as follows

If the match is from left to right, the process is:

1. Starting with.mod-nav, traverse the header and div child nodes
2. Then each traverses the child node. In the div branch on the right
3. When the leaf node A was finally traversed, it was found to be inconsistent with the rules, so we need to go back to ul node and traverse the next Li-a again. The nodes of a DOM tree are often thousands, which is very inefficient.

If matches from right to left:

1. First find all the right-most nodes span, and for each span, look up for node H3
2. Look up from h3 to class=mod-nav
3. Finally finding the root HTML completes the branch.

The latter has better matching performance because the right-to-left matching filters out a large number of ineligible right-most nodes (leaf nodes) in the first step. The performance of left-to-right matching rules is wasted on failed lookups.

How is the DOM Tree built?

1. Transcoding: The browser converts the received binary data into AN HTML string in the specified encoding format
2. Generate Tokens: Then start parser. The browser parses HTML strings into Tokens
3. Build Nodes: Add specific attributes to Node, using Pointers to determine Node’s parent, child, sibling, and treeScope
4. Generating a DOM Tree: The DOM Tree is constructed from the relationship determined by the Pointers contained in the node

What is the difference between browser redraw and rearrangement?

• Rearrangement: Parts of the render tree (or the entire render tree) need to be re-analyzed and the node sizes recalculated, in the form of regenerating the layout and rearranging elements
• Redraw: Parts of the screen need to be updated when the geometry of the node is changed or due to style changes, such as changing the background color of the element, showing that the appearance of some elements is changed

Changing the appearance of the elements alone will certainly not cause the layout of the page to be redrawn, but when the browser completes the rearrangement, it will redraw the parts affected by the rearrangement

Rearrange and redraw are expensive, they can ruin the user experience and make the UI display very slow, while rearrange has a greater performance impact, and when both are unavoidable, we generally prefer the cheaper redraw.

“Redraw” does not necessarily lead to “rearrange”, “rearrange” necessarily leads to “redraw”.

How to trigger rearrangement and redraw?

Any changes to the information used to build the render tree will result in a rearrangement or redraw:

• Add, delete, and update DOM nodes
• Hide a DOM node with display: None – triggering rearrangement and redrawing
• Hide a DOM node by visibility: Hidden – only triggers redraw because there are no geometric changes
• Move or animate the DOM nodes in the page
• Add a style sheet and adjust the style properties
• User actions, such as resizing a window, changing font size, or scrolling.

How to avoid redrawing or rearranging?

Focus on changing styles

We tend to change styles centrally by changing classes

// Check if it is black
const theme = isDark ? 'dark' : 'light'

// Set different classes according to judgment
ele.setAttribute('className', theme)
Copy the code

Using DocumentFragment

You can create a node that is outside of the DOM tree with createDocumentFragment, batch operations on that node, and finally inserts into the DOM tree, thus triggering only one rearrangement

var fragment = document.createDocumentFragment();

for (let i = 0; i<10; i++){let node = document.createElement("p");
  node.innerHTML = i;
  fragment.appendChild(node);
}

document.body.appendChild(fragment);
Copy the code

Ascend to the synthesis layer

Promoting elements to the composition layer has the following advantages:

• The bitmap of the composite layer will be synthesized by the GPU faster than the CPU
• When repaint is required, only repaint itself is required and no other layers are affected
• Layout and Paint are not triggered for Transform and opacity effects

The best way to improve the composition layer is to use the will-change property of CSS:

#target {
  will-change: transform;
}
Copy the code

For details on the Composite layer, go to wireless performance optimization: Composite

How does the front end implement instant messaging?

Short polling

The principle of short polling is simple: every once in a while, the client sends a request to get the latest data from the server, which simulates instant communication to some extent.

• Advantages: strong compatibility, very simple implementation
• Disadvantages: High latency, consuming request resources and affecting performance

comet

Comet has two main implementation methods, one is based on AJAX long-polling method, and the other is based on Iframe and HTMLfile streaming method, commonly known as long connection.

The specific operation method of the two means please move to Comet technology details: based on HTTP long connection Web end real-time communication technology

Advantages and disadvantages of long polling:

• Advantages: Good compatibility, less resource waste
• Disadvantages: server hold connection will consume resources, return data sequence is not guaranteed, difficult to manage and maintain

Advantages and disadvantages of long connection:

• Advantages: Good compatibility, instant message arrival, no useless requests
• Disadvantages: The server maintains long connections and consumes resources

SSE

See the Server-Sent Events tutorial for instructions

SSE (Server-sent Event) is an HTML5 technology that allows the Server to push new data to the client.

• Advantages: Based on HTTP, it does not require much modification and is easy to use, while WebSocket is very complex and must rely on mature libraries or frameworks
• Disadvantages: The text-based transmission efficiency is not as high as that of Websocket, and it is not strict two-way communication. The client cannot reuse the previous connection when sending a request to the server, and needs to re-issue an independent request

Websocket

For instructions, see the WebSocket tutorial

Websocket is a new, independent protocol, based on TCP protocol, compatible with HTTP protocol, but does not integrate into HTTP protocol, just as a part of HTML5, its role is to establish real-time two-way communication between the server and the client.

• Advantages: real – time bidirectional communication, good performance, low latency
• Disadvantages: independent of HTTP protocol, therefore requires additional project modification, high use complexity, must introduce mature libraries, incompatible with older browsers

Web Worker

This will be used later in the performance optimization section

The function of Web Worker is to create a multithreaded environment for JavaScript, allowing the main thread to create Worker threads and assign some tasks to the latter to run

Web Worker tutorial

Service workers

This will be used later in the performance optimization section

Service Workers essentially act as a proxy server between the Web application and the browser, and can also act as a proxy between the browser and the network when the network is available, creating an effective offline experience.

Service workers tutorial

What is the Browser same-origin policy?

The same origin policy restricts how documents or scripts loaded from the same source can interact with resources from another source. This is an important security mechanism for isolating potentially malicious files.

Same-origin indicates that protocol, domain name, and port are the same. Even if two different domain names point to the same IP address, they are not same-origin.

The following table shows the relative homology detection example: http://store.company.com/dir/page.html

Most content in a browser is subject to the same origin policy, but the following three tags are exempt:

• <img src=XXX>
• <link href=XXX>
• <script src=XXX>

How is cross-domain implemented?

Cross-domain is a relatively old proposition, there are many ways to achieve cross-domain in history, we now mainly introduce three more mainstream cross-domain schemes, we will not discuss the rest of the scheme in depth, because there are few use scenarios, there is no need to remember so many strange and clever.

The most classic cross-domain scheme jSONP

Jsonp is essentially a Hack that takes advantage of the fact that < Script > tags are not constrained by the same origin policy to operate across domains.

The json advantages:

• Implement a simple
• Very good compatibility

Disadvantages of JSONP:

• Only GET requests are supported (because<script>Tags can only get)
• Security problems and vulnerable to XSS attacks
• The server side needs to cooperate with JSONP for a certain degree of transformation

Jsonp implementation:

function JSONP({ url, params, callbackKey, callback }) {
  // Specify the name of the callback in the argument
  params = params || {}
  params[callbackKey] = 'jsonpCallback'
    / / reserve the callback
  window.jsonpCallback = callback
    // Concatenate the parameter string
  const paramKeys = Object.keys(params)
  const paramString = paramKeys
    .map(key= > `${key}=${params[key]}`)
    .join('&')
    // Insert a DOM element
  const script = document.createElement('script')
  script.setAttribute('src'.`${url}?${paramString}`)
  document.body.appendChild(script)
}

JSONP({  
  url: 'http://s.weibo.com/ajax/jsonp/suggestion'.params: {
    key: 'test',},callbackKey: '_cb',
  callback(result) {
    console.log(result.data)
  }
})
Copy the code

The most popular cross-domain solution is CORS

Cors is the mainstream cross-domain solution at present. Cross-domain Resource sharing (CORS) is a mechanism that uses additional HTTP headers to tell browsers to allow Web applications running on one Origin (domain) to access specified resources from different source servers. When a resource requests a resource from a different domain, protocol, or port than the server on which the resource itself resides, the resource makes a cross-domain HTTP request.

If you use Express, you can do this on the back end

//CORS middleware
var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin'.'http://example.com');
    res.header('Access-Control-Allow-Methods'.'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers'.'Content-Type');

    next();
}

/ /...
app.configure(function() {
    app.use(express.bodyParser());
    app.use(express.cookieParser());
    app.use(express.session({ secret: 'cool beans' }));
    app.use(express.methodOverride());
    app.use(allowCrossDomain);
    app.use(app.router);
    app.use(express.static(__dirname + '/public'));
});

Copy the code

Mature open source middleware is recommended for problem solving in production environments.

The most convenient cross-domain scheme Nginx

Nginx is an extremely powerful Web server with the advantages of being lightweight, fast to start, and high concurrency.

Nginx is now almost the first choice for new projects, and services we develop in Node or Java often need to go through nginx reverse proxies.

The principle of reverse proxy is very simple, that is, all requests from the client must be processed by Nginx, and then nginx acts as the proxy server to forward the request to Node or Java service, thus circumventing the same origin policy.

Worker_processes 1 can be adjusted for the number of cpus. # worker_connections 1024; } http { include mime.types; default_type application/octet-stream; sendfile on; The server will close the connection after this time. keepalive_timeout 10; # gizp compress gzip on; Add_header access-control-allow-origin * add_header access-control-allow-origin *; add_header Access-Control-Allow-Headers X-Requested-With; add_header Access-Control-Allow-Methods GET,POST,OPTIONS; Srever is a submodule of the HTTP module that defines a virtual access host server {LISTEN 80; server_name localhost; # root path to index.html location / {root HTML; index index.html index.htm; Rewrite ^/b/(.*)$/$1 break; rewrite ^/b/(.*)$/$1 break; 404 proxy_set_header Host $Host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; Proxy_pass http://192.168.0.103:8080; } # redirect error page to /50x.html error_page 500 502 503 504/50x.html; location = /50x.html { root html; }}}Copy the code

Other cross-domain solutions

1. HTML5 XMLHttpRequest has an API, and the postMessage() method allows scripts from different sources to communicate asynchronously in a limited manner, enabling cross-text, multi-window, cross-domain messaging.
2. WebSocket is a two-way communication protocol. After the connection is established, both the WebSocket server and client can actively send or receive data to each other. After the connection is established, the two-way communication between the client and server has nothing to do with HTTP. So you can cross domains.
3. The window.name + iframe: window.name attribute value persists in different pages (even different domain names) and supports very long name values, which can be used across domains.
4. Location. hash + iframe: A.html wants to communicate with C.HTML across domains, via the middle page B.HTML. Three pages, different fields use iframe location.hash to transfer values, the same fields directly js access to communicate.
5. Document. Domain + iframe: This method can only be used when the secondary domain names are the same. For example, a.test.com and b.test.com are applicable to this method. We only need to add document.domain =’test.com’ to the page to indicate that the secondary domain names are the same. Both pages are co-domed by js forcing document.domain as the base primary domain.

The remaining solutions are derived from nine cross-domain approaches

---

Reference article:

• Why CSS selectors parse from right to left?

---

The public,

If you want to pay close attention to the latest articles and the latest document updates, please pay attention to the programmer interview officer of the official account. The subsequent articles will be updated in the official account first.

Resume template: follow the public account reply “template” to obtain

“Front-end interview manual” : complete with this guide to the assault manual, concern public number reply “FED” to obtain