Front end interview questions – Comprehensive

Time:2020-1-14

Preface

This article summarizes some of the most common front-end interviewsHTTP, browserSEOFor other questions, if you need to know about other interview questions, please click here to checkHTML+CSS+JavaScriptAnd so on. Summarize the problems and share them with the partners in need. Welcomestarfollow

If there is any mistake or mistake in the article, please see the message of the little friend for correction. Thank you first

Below

HTTP correlation

1. What are the characteristics of HTTP

  • Simple and fast: when customers request services from the server, they only need to send the request method and path
  • Flexible: http allows the transfer of any type of data object. The type being transferred is byContent-TypeMarking
  • No connection: no connection means that only one request can be processed per connection. After the server finishes processing the customer’s request and receives the customer’s response, it disconnects (in-depth persistent connection, management)
  • Stateless: http protocol is stateless protocol(CookieAppearance)

2. What’s the difference between HTTP and HTTPS

Http: is the most widely used network protocol on the Internet. It is a standard for client and server requests and responses(TCP), for fromWWWThe server transmits hypertext to the local browser, which can make the browser more efficient and reduce the network transmission

HTTPS: it is an HTTP channel with security as its goal. In short, it isHTTPSecurity version of, namelyHTTPLower joinSSLLayer,HTTPSThe safety basis ofSSL, so the details of encryption need to beSSL

  • httpIt is hypertext transmission protocol, and information is plaintext transmission,httpsIt’s safesslEncrypted transmission protocol
  • httpandhttpsThe connection mode is totally different, and the port is also different80The latter is443
  • httpThe connection is simple and stateless;HTTPSThe agreement is made bySSL+HTTPThe network protocol constructed by the protocol can be used for encrypted transmission and identity authenticationhttpProtocol security

Refer to the difference between HTTP and HTTPS

3. What are the HTTP status codes? What do they mean

Commonly usedhttpStatus code:

  • 200 OKThe server successfully processed the request
  • 301/302 Moved Permanently(redirect) requested URL removed
  • 404 Not Found(page missing) resource not found
  • 403Server rejects request
  • 408(request timeout) server timed out waiting for request
  • 501 Internal Server ErrorThe server encountered an error that prevented it from servicing the request
  • 502(bad gateway) server as gateway or proxy, received invalid response from upstream server
  • 504(Gateway timeout) the server acts as a gateway or proxy, but does not receive the request from the upstream server in time

See more here

4. What is HTTP persistence and pipeline

Background:HTTPIn the original version, every timeHTTPCommunication is about to be disconnected onceTCPConnection (no connection)

To solve the above problems,HTTP/1.1The method of HTTP persistent connections is added, which is characterized by,As long as one party does not explicitly request disconnection, the other party maintainsTCPConnection state

Pipeline refers to multipleHTTPRequest to send in whole batch without waiting for the response of the other party

Pipelining is implemented on the basis of persistent connection. It can send multiple requests in parallel at the same time without waiting for response one by one

5. HTTP message

HTTPThe message is text-oriented, and each field in the message is someASCIICode string, the length of each field is uncertain.HTTPThere are two types of messages:Request message and response message

These two kinds of HTTP messages are composed of three parts: start line, first line and entity body

Refer here

6. The whole process from URL input to page loading

Refer here

7. Why is it more effective to use multiple domain names to store website resources

  • CDNCache is more convenient
  • Breaking the browser concurrency limit
  • savecookiebandwidth
  • Save the number of primary domain name connections and optimize page response speed
  • Prevent unnecessary safety issues

Browser related

1. What constitutes a browser

The principle is divided into seven modules, namelyUser interfaceBrowser engineRendering engineNetworking (Network)JavaScript interpreter (JS interpreter)UI backendDate persistence

Front end interview questions - Comprehensive

Among them, the most important are the rendering engine (kernel) andJavaScriptInterpreter (JavaScriptEngine)

Browser kernel is mainly responsible forHTMLCSSPage layout, rendering and composite layer composition;JavaScriptEngine responsibleJavaScriptCode interpretation and execution

2. Browser caching mechanism

The caching mechanism of browser is what we callHTTPThe caching mechanism is based onHTTPThe cache identification of the message

Refer here

3. Browser rendering mechanism

Refer here

4. Several very practical BOM attribute object methods

Location object: mainly stores URL related information

Front end interview questions - Comprehensive

History object: browsing history information related

History. Go() // forward or backward the specified number of pages history. Go (Num);
History. Back() // back one page
History. Forward() // previous page

Navigator object: browser information related

Navigator. Useragent // returns the string representation of the user agent header (that is, the string including the browser version information, etc.)
Navigator. Cookie enabled // returns whether the browser supports (enables) cookies

Other

1. Talk about your understanding of SEO

SEO: search engine optimization, the purpose of which is to make the website better captured by the search engine, improve the natural ranking within the search engine, so as to bring more free traffic and gain revenue

There are two main SEO methods: in station optimization and out of station optimization

Front end SEO optimization

2. How does the front end control and manage routes

The route is in the browser address barurlCorrespondence with the web page you see

The implementation of front-end Routing:

Be based onhashocation.hash+hashchangeEvent)

Display level is switching#The following content is presented to different pages of users. Now more and more single page applications are based onhashRealization

Characteristic:

  • urlinhashChanges in values do not reload the page
  • hashThe change of value will add a record in the browser’s access history, that is, it can be controlled by the browser’s back and forward buttonshashHandoff
  • We can go throughhashchangeEvents, listening tohashValue changes in response to logical processing of different paths

Be based onistorynewAPIhistory.pushState()+popStateEvent)


window.history.pushState(null, null, "http://www.google.com");

These two items.APIThe same thing is that it will operate the browser’s history without refreshing the page. The difference is,pushStateA new history will be added, andreplaceStateThe current history is replaced

See history api-mdn for details

3. Difference between anti shake and throttling

Anti shake: when the task is triggered frequently, the task will be executed only when the interval between tasks is more than the specified interval

Throttling: only one task will be executed in a specified time interval

Recommended here

4. How to operate page refactoring

Page reconstruction is based on the content and structure of the original pagediv+cssWrite in line withwebStandard page structure.

The specific implementation should achieve the following three points:

  • Reconstruction of the page with incomplete function: the page function conforms to the user experience, the user interaction structure is complete, and can pass the standard verification,
  • Code refactoring: code qualitySEOOptimization, page performance, better semantics, browser compatibilityCSSoptimization
  • Fully consider the “role and importance” of the page in the site, and optimize it accordingly

Epilogue

Although there are not many questions collected in this article, each part can be read by itself, so it needs patience

During this period, I collected a lot of questions about the front-end interview, and found that some things still need deep understanding, and sometimes it’s not enough to just stay at the “will use” stage. So, I will talk about what I tried, what I found, and what my friends are interested in exploring together

Looking forward to the full interview questions of GitHub

Above