The front face questions of the browser

And browser-related interview questions

1. reflow (reflux) and repaint (redraw) optimization

• Browser rendering process: DOM tree, CSS tree -> Render tree -> Paint
• DOM tree root as html
• Rendering the top left corner to the lower right corner from the browser
• The first time you open the page and return redraw triggered at least once, when the width and height of structures such as position changes, trigger reflow reflow; Unstructured such as when the background color changes, both of which can trigger the repaint redraw cause poor experience
• How to reduce redraw and return?
• • Classname or by modifying the style disposable cssText, rather than a one modifying
• • Offline Mode: cloning junction to be operated, the operation after the exchange of the original node, similar to a virtual DOM
• • Avoid direct style after frequent access to computing, but saved first information
• • Absolute layout DOM, will not cause a large number of reflow
• • p Do not nested too deeply, not to exceed six

2. Enter a page URL to the page from loading display is completed, what the process have taken place?

• Browser based on the URL request to a DNS name resolution to find the real IP, initiates a request to a server;
• The server returns the data to the background processing is completed, the browser receives files (HTML, JS, CSS, images, etc.);
• Loaded into the browser a resource (HTML, JS, CSS, etc.) for parsing, to establish the appropriate internal data structure (e.g. the HTML DOM Tree);
• Resolve to load the resource file, rendering the page to complete.

3.localStorage and sessionStorage and cookie difference summary

• Thing in common: all stored in the browser, and homologous
• localStorage and sessionStorage collectively webStorage, saved in the browser, does not participate in the communication server, the size of 5M
• Lifecycle different: localStorage permanent preservation, sessionStorage the current session, can be manually cleared
• Scope different: different browsers do not share local and session, different sessions do not share session
• Cookie: before expiration time has been effective, there are number of 4K size restrictions, each of the different browsers, typically carried in the HTTP header 20, the excess may be performance problems own package, it may also be native...

4. How to prevent browser event propagation to prevent the default behavior

• Stop event propagation (bubble): e.stopPropagation ()
• Prevent the default behavior: e.preventDefault ()

5. Virtual DOM native DOM manipulation scheme relative What are the advantages to achieve on what principle?

• Virtual DOM can improve performance without having to re-render the whole, but partial refresh.
  JS objects, diff algorithms

6. browser event trigger mechanism in the event three stages

Event Capture Stage: find the target node from the dom tree node down, the function will not trigger
an event handler goal: to reach the target node
event bubbling: the last top-level element from the target node to transmit, normally function to perform at this stage.
The addEventListener third The default parameters false (bubbling phase execution), true (to perform the capture phase).
prevent bubbling see above method

7. What is the cross-domain? Why use the browser to the same origin policy? There are several ways you can solve cross-domain problems? Learn preflight request Well?

• Cross-domain refers to a document or script in a field trying to ask for another - resources in the domain
• Prevent XSS, CSFR attacks, different protocol + domain name + port
• jsonp; Cross-Origin Resource Sharing (CORS) (Access control); forward proxy server, etc.

function jsonp({ url, params, callback }) { //接收参数配置
    return new Promise((resolve, reject) => { // es6 promise
        Let script = document.createElement('script');//创建script标签
        window[callback] = function (data) {
            resolve(data);
            document.body.removeChild(script); //移除script标签
        }
        document.body.removeChild(script); //移除script标签
        params = { ...params, callback };
        Let arr = [];
        for (let key in params) {
            arr.push(`${key} = !${params[key]}`);
        }
        script.src = ` ${url}?${arr.jion('&')}` //拼接ur1地址
        document.body.appendChild(script); // 将创建好的sCr ipt标签添加到body下面
    })
}

• Preflight request: for an preflight must first request requires a preflight OPTIONS method to initiate a request to the server, the server is allowed to know the actual request. Use "preflight request", to avoid cross-domain requests user data to the server unexpected impact

8. Learn browser cache mechanism it?

• A browser cache is to have requested a copy of the resource stored, the next time the resource is needed, the browser will decide cache resources directly or send a request to the server again according caching mechanism.
• from memory cache ; from disk cache
• Effects: reduce the loss of network transmission and reduce pressure on the server.
• Priority: Forced Cache> Cache consultation; cache-control> Expires> Etag> Last-modified

9. Why DOM operations slow?

• DOM itself is a js object manipulate the object itself is not slow, but the action triggers the browser's behavior, such as repaint and reflow browser such behavior, it slows down

10. What would clog rendering?

• js script synchronous execution
• although css and pictures are loaded asynchronously, but need to rely on css js file execution, it will be blocked render css

11. How to determine js run in a browser or node in?

• Determine whether the global object and global window

12. With regard to web browser and thinking process which is preloaded with?

• Pictures and other static resources before using advance request
• Resources to use when loaded from the cache, enhance the user experience
• Page shows the dependence of maintenance

13.http multiplexed

• Keep-Alive: Keep-Alive address the core problem: within a certain period of time, the same domain name multiple requests data to create HTTP requests only once, other requests can be re-established connections with every channel, in order to achieve problem request improve efficiency. It said there is a certain time that can be configured, whether you are using Apache or nginx.
• Solve two problems: serial file transfer (binary data frames); Too many connections (using flow parallel transmission)

14. http和https：

• http: broadest network protocols, BS model, efficient browser.
• https: Security through SSL encryption, encrypted transmission, authentication, key
  1 https ssl relative to http joined layer, transmission encryption, authentication;
  2 ca need to apply for a certificate fees;
  3 security but time-consuming, cache not good;
  4 Note compatible with http and HTTPS;
  different connection 5, the port number is different, http is 80, https 443

15. CSRF and XSS difference and defense

16. cookie which properties can be set? httponly?

Under application chrome console to view:

• name field is the name of a cookie.
• value field is the value of a cookie.
• domain field can access this cookie domain name.
• path field can access the page path to this cookie. For example, domain is abc.com, path is / test, then only pages under / test paths can read this cookie.
• expires / Max-Age field is set for this cookie timeout. If a value of a set time, then when this time is reached, this cookie failure. If not set the default value of Session, which means failure with the cookie and session. When the browser is closed (not the browser tab, but the entire browser), the failure of this cookie.
• Size field this cookie size.
• httponly property field http cookie. If this property is true, then only will the http request header with information about this cookie, but not by document.cookie to access this cookie.
• Whether the field to secure the entry cookie can only be delivered by https

17. After login, the front end of what had been done, and how that has logged

• Deposit issued by the front-end server cookie, it simply is to write a field indicates logged in a cookie, and set the expiration date
• Or use the token returned by the backend, each time the ajax request means to carry one token in the request header, which is the prevention of csrf

18. http status codes

• 1 **: server receives the request, the requester needs to further manipulation
• 2 **: Request successful
• 3 **: redirect resources to be transferred to a different URL
• 4 **: client error, syntax error or request did not find the appropriate resources
• 5 **: server error, server error
• 301: resources (web pages, etc.) is permanently transferred to another URL, the return value contains the new URL, the browser will automatically be directed to the new URL
• 302: temporary transfer client should access the original URL.
• 304: Not Modified unmodified after the appointed day, does not return the resources.
• 403: server execution request denied
• 404: resource (web pages, etc.) requested does not exist
• 500: Internal Server Error

19. # Http request header cache method setting

• Cache-control, expire, last-modify

20. achieve rollback refresh the page

• 旧: window.history.back() + window.location.href=document.referrer;
• New: HTML5's new API extends the window.history, the history points more open. History can store the current point, replacing the current history points, listening history points onpopstate, replaceState

21. Forward Proxy and Reverse Proxy

• Forward proxy:
  

(1) Resource Access originally inaccessible, such as Google
(2) can do caching, to accelerate access to resources
(3) access authorization to the client, Internet authentication
(4) proxy can record user access records (access management), external Hide user information

• Reverse Proxy:
  

(1) ensure the security of the network, you can use a reverse proxy WAF provides functionality to prevent web attacks large sites, usually as a reverse proxy to access the public network address, Web servers within the network.
(2) load balancing to optimize load site through reverse proxy server

22. About preflight request

• In a simple request and the non-cross-domain case, the browser will automatically launch options preflight request.

23. The three-way handshake fourth wave

• Open connection handshake with three times to close with four wave

24. TCP and UDP protocols

• TCP (Transmission Control Protocol: transport control protocol; connection-oriented, reliable transport
• UDP (User Datagram Protocol): User Datagram Protocol; connectionless and unreliable transport

25. The difference between processes and threads

• Process: concurrent execution of the program is the basic unit of allocation and management of resources in the implementation process, it is a dynamic concept, the basic unit of competition in the computer system resources.
• Thread: is a process of execution units, medical scheduling is the process entity. Smaller than the process of the basic unit independently. Thread is also known as lightweight processes.
• A program of at least one process, a process at least one thread.