Topic: Interview related to the working principle of the browser

Topic: Interview related to the working principle of the browser

1. A complete http service process

When we enter in the address bar of the web browser:

www.baidu.com
, What exactly happened?

  1. DNS domain name resolution, associating a web address with an IP address.
  2. Send a TCP connection, find the corresponding server according to the ip, and establish a connection between the browser and the server.
  3. Send http request.
  4. The server responds to the HTTP request, and the browser gets the html code
  5. The browser parses the html code and requests the resources in the html code (such as js, css, pictures, etc.) (the html code is first obtained before these resources can be found).
  6. The browser renders the page to the user.
  7. The server closes the TCP connection.

Just understand:

1. How does DNS find domain names?

DNS domain name resolution uses a recursive query method. The process is to find the DNS cache -> the root domain name server if the cache is not found -> the root domain name will go to the next level, so that after the recursive search, it is found , Return ip to our web browser.

2. Why should the HTTP protocol be implemented based on TCP?

TCP is an end-to-end and reliable connection-facing protocol. It is a relatively low-level protocol; HTTP is based on the transport layer TCP protocol. There is no need to worry about various data transmission problems (when an error occurs, it will be retransmitted)

3. In the last step, how does the browser render the page?

a) Parsing html files to form a DOM tree
b) Parsing CSS files to form a rendering tree
c) Parsing while rendering
d) JS runs in a single thread, JS may modify the DOM structure, which means that all subsequent downloads of resources are No need, so JS is single-threaded and will block subsequent resource downloads

2. How does the browser render the page?

  • Step 1: After sending a request to the web server, the source code in the index.html page will be returned
  • Step 2: The browser allocates a main thread to automatically parse and execute the code sequentially from top to bottom and from left to right
  • third step:
    • When the browser encounters a link request, it will open up a new thread to load these resource files (will not block the main thread for parsing);
    • If you encounter the style style, parse it normally, and then parse the dom structure after the analysis is complete.
    • If @import is encountered, the main thread will be asked to get the resource. After the import and the parsing is complete, the dom will continue to be rendered, which will block the main thread.
  • Step 4: If the script tag style is encountered, the main thread will obtain resources from the server and parse them, and then continue to render the dom structure. Put js at the end to prevent js operation dom from being worthless.
    • You can set the async or defer attribute to the label to become asynchronous, or put it at the bottom, which will not block the dom rendering
  • Step 5: Generate dom tree and css rendering tree
  • Step 6: Generate html rendering tree, and display the page through reconstruction and redrawing

There are two functions:

DOMContentLoaded

MDN's explanation: When the initial HTML document is fully loaded and parsing is complete, the DOMContentLoaded event is triggered without waiting for the stylesheet, image, and subframe to be loaded.

(That is, the dom tree is there, and the js execution is loaded, and this event will be triggered)
.

Triggering of load event:

The load event will only be triggered when the js, css, and pictures in the page DOM structure, as well as the js, css, and pictures that are asynchronously loaded by js, have been loaded.
There are two concepts :

Reconstruction (reflow): When the size or position of an element changes, it will cause a re-layout. The process of recalculating the position and size of the element is called reconstruction.

  • Trigger refactoring:
  • When the page is first rendered
  • Element size position changes
  • Adding will delete the visible dom
  • Browser size changes

Redraw: Element style changes (non-layout changes such as color, background, etc.)

Redraw not necessarily lead to reconstruction (reflux), but some reconstruction redraw optimization :

  • 1. In real project development, if there are not many css codes (or mobile projects), you can use inline styles to reduce http requests and improve page rendering speed.
  • The link is placed at the top for faster loading back to css
  • The script is placed at the bottom to get the dom element or not to hinder the dom rendering
  • 2. Reduce backflow:
    • Abandon the traditional dom operation and drive the view based on vue data. At this time, pay attention to the style and animation changes.
    • The style is changed centrally, multiple styles are written in one class, and the style is changed through the class, and the operation style can be written at the end of the dom tree.
    • The value obtained by the cache is directly obtained from the cache when it needs to be changed, which can separate the read and write and put them in the rendering queue for one rendering
    • Batch modification of elements, if you need to add multiple dom elements, you can use document fragments or template strings
//Create document fragments, add them to them, and then add them to the dom we want to add let frag = document .createDocumentFragment(); for ( let i = 0 ;i< 10 ,i++){ let span = document .createElement( 'span' ) frag.appendChild(span) } navBox.appendChild(frag) Copy code
    • Operate the DOM offline: remove the element from the document flow, and then modify the element, which will only cause redrawing, but will not cause reflow.
    • Apply animation effects to elements whose position attribute is absolute or fixed to avoid affecting the layout of other elements. This is just a redraw instead of reflow;
    • CSS hardware acceleration: the use of transform, opacity, and filters will trigger the hardware accelerator, and will not trigger reflow and reconstruction

3.http caching mechanism

  • When the browser sends the first http request, it can negotiate the cache when responding ; it can get the data from the cache in the subsequent sending request.

3.1 Browser cache classification

Browser caching is divided into strong caching and negotiation caching. The simple process for the browser to load a page is as follows:

    1. The browser first judges whether it hits the strong cache based on the http header information of this resource. If it hits the resource directly added to the cache, the request will not be sent to the server. (Strong cache)
    1. If the strong cache is missed, the browser will send a resource loading request to the server. The server determines whether the browser s local cache is invalid. If it can be used, the server does not return resource information, and the browser continues to load resources from the cache. (Negotiation cache)
    1. If the negotiation cache is missed, the server will return the complete resource to the browser, the browser loads the new resource, and updates the cache. (New request)

Strong cache

  • When a strong cache is hit, the browser does not send the request to the server. In Chrome's developer tools, I see that the return code of http is 200, but it will be displayed as (from cache) in the Size column.
  • Strong caching is controlled by using the Expires or Cache-Control fields in the http return header to indicate the caching time of the resource.
    • Expires:
      The cache expiration time, used to specify the time when the resource expires, is the specific time point on the server side, such as: Expires:Thu,31 Dec 2037 23:59:59 GMT
    • Cache-Control
      Is an
      Relative Time
      , Such as Cache-Control: 3600, which means that the validity period of the resource is 3600 seconds. Since it is a relative time and is compared with the client time, the time deviation between the server and the client will not cause problems. Cache-Control:max-age=31536000

Negotiation cache

What is the negotiation?
Send a request to ask the server whether the content in my cache has been updated. If it is not updated, use the cached resource and return 304; if it is updated, return a new resource with a status code of 200

If the strong cache is missed, the browser will send the request to the server. The server judges whether to hit the negotiation cache according to Last-Modify/If-Modify-Since or Etag/If-None-Match in the http header information. If it hits, the http return code is 304, and the browser loads the resource from the cache.

  • Etag/If-None-Match returns a check code (ETag: entity tag). ETag can ensure that each resource is unique, and resource changes will cause ETag changes. The change of the ETag value indicates that the resource status has been modified. The server judges whether the cache is hit according to the If-None-Match value sent on the browser.

An etag will be sent in the first response, and an etag will be requested when we request the second time. If the two etags are equal, the negotiation cache will be executed.

Answer ideas

  • The http cache technology is mainly used to improve the concurrency efficiency of the server. Some resources can be cached directly without resending the request.
  • When the browser sends the first http request, it can negotiate the cache when responding ; it can get the data from the cache in the subsequent sending request.
  • Strong caching is the use of
    Cache-Control:max-age=31536000
    The field is set; the negotiation buffer is set with Etag/If-None-Match.
    1. The browser first judges whether it hits the strong cache based on the http header information of this resource. If it hits the resource directly added to the cache, the request will not be sent to the server. (Strong cache)
    1. If the strong cache is missed, the browser will send a resource loading request to the server. The server determines whether the browser s local cache is invalid. If it can be used, the server does not return resource information, and the browser continues to load resources from the cache. (Negotiation cache)
    1. If the negotiation cache is missed, the server will return the complete resource to the browser, the browser loads the new resource, and updates the cache. (New request)

4.fetch and axios

Fetch is also a way of front-end and back-end communication. It is an alternative to the XMLHttpRequest object, it is based on Promise, and the browser provides this object natively.

Axios is a promise-based HTTP library that can be used in browsers and node.js. It is essentially an encapsulation of xhr.

Advantages and disadvantages of fetch:

advantage:

  • The native API provided by the browser has better performance.
  • fetch() adopts modular design, API is scattered on multiple objects (Response object, Request object, Headers object), which is more reasonable;
  • fetch() processes data through a data stream (Stream object), which can be read in blocks, which is conducive to improving website performance and reducing memory usage. It is very useful for scenarios where large files are requested or the network speed is slow.

Disadvantages:

  • After fetch() sends a request, fetch() will report an error only when there is a network error or cannot connect. In other cases, no error will be reported, but the request is considered to be successful.
  • Fetch does not support timeout control and cannot prevent the request process
  • There is no way for fetch to monitor the progress of the request natively, and we want to see the progress bar when uploading large files. And xhr can check progress.

The advantages and disadvantages of axios:

advantage:

Create XMLHttpRequests from the browser to communicate on the web side; you can also create HTTP requests from node.js for server-side communication.

  • There are request interceptors and response interceptors, which can do some data processing and condition checking in real time.
  • You can set the timeout period and cancel the request at any time.
  • Automatically convert JSON data
  • The client supports defense against XSRF
  • It also provides some concurrent request interfaces

5. Communication between multiple tabs in the browser (multiple pages)

  • The browser data storage method is mainly solved by the local storage method. That is, local storage methods such as localStorage and Cookie are called to realize data communication of multiple pages under the same source.

5.1 Local Storage

  • Local Storage is used to store data, but because of the storage event, it can also monitor the storage state to achieve the goal of communication between pages. The storage event under browsers such as Chrome and Edge must be triggered by other same-origin pages.
//A page window .onstorage = function ( e ) { console .log(e.newValue); //previous value at e.oldValue }; //B page localStorage .setItem( 'key' , 'value' ); copy the code

5.2 WebSocket

WebSocket is a new protocol of HTML5. Its purpose is to establish an unrestricted two-way communication channel between the browser and the server. For example, the server can send messages to the browser at any time. Realize instant messaging with multiple tabs.

A few key steps

Need to cooperate with the front and back ends, these steps must be written on the front and back

function socketConnect ( url ) { //Step 1: Create a WebSocket instance object and connect to the ws protocol let ws = new WebSocket(url); //Step 2: Write the open method, and it will be triggered when the connection is established. Send data inside ws.onopen = e => { console .log( 'Connected successfully' , e) ws.send( 'I send a message to the server' ); //The client communicates with the server } //Step 3: The message method listens to the information returned by the server ws.onmessage = e => { console .log( 'Return from the server:' , e.data) //do something } //The fourth step: You can also negotiate the error method and the close method, monitor the error link or close the return ws; //return the websocket object } the let wsValue = socketConnect ( 'WS://121.40.165.18: 8800' ); //WebSocket objects duplicated code

You can use the packaged socket.io to do

Install in local project

//npm i socket.io -S //1. Import js file <script src= "/socket.io/socket.io.js" ></script> //2. Call io interface const socket = io() ; //3. To send data to the background, the server uses socket.on('message',callback); to accept socket.emit( 'custom event name' , name); //4. To receive data, the server uses socket .emit('message', name); socket.on( 'message' , ( msg ) => { console .log(msg); }); Copy code

The second new feature of html5 browser SharedWorker

Huanxin customer service, Qimo customer service to buy

6. XSS, CSRF and how to prevent

The full name of xss is a script cross-site attack, which can be described as a hacker attacking your browser, tampering with the normal display of the browser, thereby stealing user information.

6.1 is divided into three types:

  • 1. Reflective type-during the browser sending the request, the xss code appears in the url, the purpose is to tamper with the request information, let the server return additional information, such as personal private information.
  • 2. Storage type-the user saves some information and sends it to the server. In this process, hackers inserted some malicious scripts to save user information in the database. When submitting comments, other users would see it, which caused a very big impact.
  • 3. dom type-when the server sends html to the browser, hackers add malicious scripts to maliciously tamper with the style of the website.

6.2 Defense measures: `

(1)

Input filter
: Filter the content entered by the user. Reliable input verification for all user submissions, including URL, query keywords, POST data, etc., only accept content submissions within the specified length, in appropriate format, and expected characters, and filter all others. (Both client and server)

(2) Output escape

For example: when inserting untrusted data between HTML tags, the first thing to do is to encode the untrusted data with HTML Entity HTML character entity

function htmlEncodeByRegExp ( str ) { var s = "" ; if (str.length == 0 ) return "" ; s = str.replace( /&/g , "&" ); s = s.replace( /</g , "<"); s = s.replace(/>/g,"&gt;"); s = s.replace(//g,"&nbsp;"); s = s.replace(/\'/g,"&#39;"); s = s.replace(/\"/g,"&quot;"); return s; } var tmpStr="<p>123</p>"; var html=htmlEncodeByRegExp (tmpStr) console.log(html) //&lt;p&gt;123&lt;/p&gt; document.querySelector(".content").innerHTML=html; //<p>123</p>

3 HttpOnly Cookie

cookie httponly Web cookie js cookie XSS JavaScript document.cookie cookie

web vue.js react.js XSS html XSS

CSRF

CSRF a b ( ) b b CSRF refer token

7.vuex

VueX

7.1

  • vuex
  • Vuex

7.2

  • 1.
  • 2.
  • 3. store
  • 4. store vue

7.3

7.3.1 state

state Store state
mutations
actions mutations

// this.$store.state.xxx /* : 1. dispatch actions 2. actions commit mutations 3. mutations state */ //actions commit mutations

7.3.2 modules

  • store modules store
    • this.$store.state.home.name
    • home/
modules:{ home:{ namespaced true // states { name:' ' }, mutations:{ }, actions:{} }, category:{}, cart:{}, profile:{} }

7.4

vuex

1. mapState

import { mapState } from "vuex"; //computed ...mapState(["count"]), ...mapState('home',["count"]),

2. mapMutations mutations

import {mapMutations} from 'vuex'; methods: { ...mapMutations(['sub']), //sub }

3. mapActions actions

// import { mapActions } from "vuex"; //action export default { methods: { ...mapActions(["subAsync"]), }, };

8.

9.

  • CORS JSONP
    • CORS CORS JSONP

CORS ( IE10)

Access-Control-Allow-Origin: * // Access-Control-Allow-Origin: http://127.0.0.1:5500 // CORS Access-Control-Allow-Origin

Jsonp

  • JSONP script JSONP script
  • get , XSS

JSONP :

  • ( show) ( data)
  • <script>
    API script src, :?callback=show
1. aaaa `https://www.imooc.com/api/http/jsonp?callback=aaaa` 2. , aaaa( { "code": 200, "data": [ { "word": "jsp" }, { "word": "js" }, { "word": "json" }, { "word": "js " }, { "word": "jstl" } ] } ); 3. script callback=aaaa aaaa 4.
JSONP https://www.imooc.com/api/http/jsonp?callback=handleResponse /* JSONP JSONP */ const script = document.createElement('script'); script.src ='https://www.imooc.com/api/http/jsonp?callback=handleResponse'; document.body.appendChild(script); // const handleResponse = data => { console.log(data);// }; //

vue vue.config.js

//vue.config.js devServer proxy module.exports = { devServer: { proxy: { ///api target '/api': { target: '<url>', ws: true, changeOrigin: true // ///api pathRewrite : { '^/api' : '' } } } } }

10.##

  • 1 axios token axios token
  • 2 router.beforeEach token
  • 3.
    • , , , , , , .