preface

Let me introduce myself first

Graduated from a university in Hohhot, Inner Mongolia, junior college, computer multimedia major graduated in 16 years to work, work experience for four years, before the main plane related, I like to fool around, from 17 years began to study the front end, and then transferred to the company’s internal development department work, calculate down the front end experience is nearly three years.

At the end of the year, I wanted to change a job for various reasons, but I was too busy to seriously prepare my resume and review the basic knowledge, so I didn’t dare to write on my resume. Then wrote a brief version of the resume to hang in Boss direct hire, ready to year after serious preparation of this matter. To my surprise, I received many interview invitations from many companies in the past month.

So here’s a list of the latest interview questions for 2020. The answers behind are sorted by themselves, if there are omissions, welcome to correct!

The second wave test summary | 2020 front-end interview

The interview summary

  • Focus on fundamentals and principles

  • Focus on fundamentals and principles

  • Focus on fundamentals and principles

The following interviews are telephone interviews

One side

  • The prototype
A constructor is a special method used to initialize an object when it is created. Each constructor has a prototype property (the arrow Function and function.prototype.bind () do not). The prototype property is a pointer to an object whose purpose is to contain properties and methods shared by all instances of a particular type. That is, the stereotype object is used to share properties and methods with the instance object. Each instance object's __proto__ refers to the constructor/class's Prototype property. 1. The new operator executes a function that generates an object by default. 2. 3. New The object generated by the function, which is the default return value of the function ES5 example:functionPerson(obj) {this.name = obj.name this.age= obj.age} // Prototype method person.prototype.say =function() {
  console.log('hello,', this.name)} // p is the instantiated object, and the operation new Person() is called the instantiation of the constructorlet p = new Person({name: 'tomato', age: '27'}) console.log(p.name, p.age) p.say() ES6 example: Class Person{constructor(obj) {this.name = obj.name this.age= obj.age}say() {
  	console.log(this.name)
  }
}

let p = new Person({name: 'ES6 - tomato', age: '27'})
console.log(p.name, p.age)
p.say()
Copy the code

We use parasitic combinatorial inheritance for archetypal inheritance 

function Person(obj) {
    this.name = obj.name
    this.age = obj.age
}
Person.prototype.add = function(value){
    console.log(value)
}
var p1 = new Person({name:"Tomato", age: 18})

functionPerson1(obj) { Person.call(this, Person1.prototype = object.create (person.prototype) person1.prototype. play = person1.prototypefunction(value){
    console.log(value)
}
var p2 = new Person1({name:"Eggs", age: 118, sex: "Male"})
Copy the code
  • closure
First explains what is a closure, closure is simply function nested function, internal function reference to outer function's variables, resulting in not dropped the current variable recycling garbage collection mechanism, such operations to bring the influence of a memory leak, when the memory leak to a certain extent will affect your project running becomes caton and so on. So we try to avoid memory leaks in our projects.Copy the code
  • Prototype chain
The prototype chain is actually involved in the prototype problem above, in the inheritance of the prototype, we inherit multiple prototypes, and here is a solution to achieve perfect inheritance, by using parasitic combinatorial inheritance, Personb.prototype = object.create (PersonA. Prototype) this is the PersonA method that gets the instantiated Object when we instantiate PersonB and access the attributes of the instantiated Object. Will go to __proto__ search, layer by layer up until find the top Object Object, this search process is the prototype chain.Copy the code
  • vuex
Vuex is a state manager developed specifically for vuue.js applications. It manages the state of all the components of the application with centralized storage, and the associated rules ensure that the state changes in a predictable way. The only way to change the state of a state in VUex is to submit a mutation action: An action commits mutation rather than a direct change state, and an action can contain getters for any asynchronous operation: the equivalent of a computed property in VUECopy the code
  • vue-router
Vue-router is the official routing manager for vuex.js. It is deeply integrated with vue.js's core, making it easy to build page-friendly applications. The <router-view> component is a functional component that renders the view component to which the path matches. Route. beforeEach route. afterEach to: Route: the target routing object to be entered from: Route: the current navigation Route to be left next: Function: Be sure to call this method to resolve the hook. The execution depends on the call parameters of the next method. Introduces the route guard and its usage, the role of route guard in the project and so onCopy the code
  • Deep copy Shallow copy
Shallow copy: Shallow copy can be assigned () using the new ES6 feature Object.assign() or by extension operations... The shallow copy modifies the copy and does not affect the original data. However, the shallow copy can only copy the data of the first layer and all the data are of value type. If there is reference data, modifying the copy will affect the original data. Parse (json.stringify ()) is used for deep copying purposes, but there are drawbacks to using JSON copying when the data to be copied contains undefined/functionThe /symbol type cannot be copied, of course, we think that the data that needs deep copy in the project development generally does not contain the above three types, if necessary, you can encapsulate a function to achieve it.Copy the code
  • Vue communication
1. The props and$emitVuex (official recommended status manager) 4.$parentand$childrenThere are other methods, but they are rarely used or too complicated to use. To introduce the way of communication, but also can expand to say the use scenario, how to use, matters needing attention and so on.Copy the code
  • What are the solutions to those problems that you finally find at work
The common problem is CannotreadSolution Through the browser error prompt code to locate the problem, solve the problem Vue project encountered view does not update, method does not execute, buried point does not trigger and other problems general solution check the browser error, check the code to run to that stage did not end the line, Read the source code, documentation, etc., and point to two of the biggest problems encountered in recent projects.Copy the code
  • Webpack configuration entry exit
Module.exports ={// export file entry:{}, // export file entry:{}, // module: Plugins :[], // Configure webPack development services. DevServer :{}} is a simple description of what these attributes are. Describe what files NPM run dev/NPM run build implements by configuring proxyTable to achieve cross-domain problems in the development environment, then extend it and talk to him about cross-domain generation, how to cross-domain and finally talk about optimization of Webpack, For example babel-loader optimization, gzip compression and so onCopy the code
  • Webpack3 is different from webpack4
1. The mode webpack added a mode configuration, there are only two values development | production. He enables different configurations for different environments. 2.CommonsChunkPlugin CommonChunksPlugin has been removed from WebPack4. Module partitioning (extracting common code) can be done using optimization.splitchunks. But need to pay attention to a problem, the default configuration will only to extraction separation of module of the asynchronous request, if you want to split the entry You need to set up optimization. SplitChunks. Chunks ='all'. 3. Webpack4 uses MiniCssExtractPlugin to replace ExtractTextWebpackPlugin. 4. Code segmentation. Use dynamic import instead of System. import or require.ensure 5.vue-loader. UglifyJsPlugin doesn't need to use this plugin anymore, but optimizes.minimizetrueProduction mode is automatically set belowtrueOptimization. minimizer can configure your own compression programCopy the code

Second interview

  • State the process after entering the URL enter
1. Read cache: Searches its OWN DNS cache. (If an IP address is found in the DNS cache, skip the next step of looking up the IP address and directly access the IP address.) TCP connection: TCP three-way handshake client: Server Are you there? Server: CLIENT I am here, do you want to connect me? Client: Yes server, I want the link. The server processes the request and returns HTTP packet 6. 7. Disconnect: TCP wave four times and we can talk a little bit about the sixth step of the browser parsing the rendered page if you return an HTML page and you parse the DOM tree from the HTML and you parse the CSS and you generate the CSS rule tree and you combine the DOM tree with the CSS rule tree, Generate rendering tree according to the rendering tree to calculate the information of each node according to the calculated information to draw the pageCopy the code
  • Statement of HTTP
Basic concept: HTTP, short for HyperText Transfer Protocol. It is the most widely used network protocol on the Internet and all WWW files must comply with this standard. HTTP features: HTTP is connectionless and stateless. HTTP is built on top of TCP/IP and the default port number is 80. HTTP is divided into two parts: request and response. HTTP request: HTTP defines different ways to interact with the server. The most common methods are GET, POST, PUT, and DELETE. The full name of URL is resource descriptor, which can be considered as follows: A URL address corresponds to a resource on the network, and GET, POST, PUT and DELETE in HTTP correspond to the query, modify, add and DELETE of this resource. An HTTP Request consists of three parts: a status line, a Request Header, and a Request body. The HTTP Response consists of three parts: the status line, Response Header, and Response body. The HTTP response contains a status code that represents the result of the server's response to the client. The status code consists of three bits: 1xx: The request is accepted and processed. 2xx: Indicates that the request has been processed. 3xx: redirection. 4xx: An error occurs on the client and the request cannot be implemented. 5xx: Usually a server error. For example, the common status code is 200 OK. 301 Moved Permanently Requested Permanently redirection. 302 Moved Temporarily Requesting a temporary redirection. The 304 Not Modified file is Not Modified. You can use the cached file directly. 400 Bad Request The client Request has a syntax error and cannot be understood by the server. 401 Unauthorized The request is Unauthorized and cannot be accessed. 403 Forbidden The server receives the request but refuses to provide the service. The server usually gives the reason for not providing the service in the response body. 404 Not Found The requested resource does Not exist, for example, an incorrect URL was entered. 500 Internal Server Error An unexpected Error occurs on the Server. As a result, the client request cannot be completed. 503 Service Unavailable The server cannot process client requests. The server may recover after a period of time. Presumably there is also some introduction to HTTP request and response headers.Copy the code
  • Talk about the Vue principle
Vue uses data hijacking and publiser-subscriber mode, using Object.defineProperty () to hijack getters and setters for properties when data changes, publish messages to the dependent collector, notify the observer, and make corresponding callbacks to update the view. Specifically: MVVM as the binding entry, integrate Observe,Compil and Watcher, listen to model changes through Observe, parse and compile template instructions through Compil, Finally, Watcher is used to build the communication bridge between Observe and Compil so as to achieve the bidirectional binding effect of data change => update view and view interactive change (input) => data model change.Copy the code
  • What does Vue route guard have, how to set up, use scenario and so on
Two common routing guards are router.beforeEach and router.afterEach guard method receives three parameters: to: Route: the target routing object to be entered from: Route: the Route that the current navigation is leaving next: Function: Be sure to call this method to resolve the hook. In a project, the beforeEach hook function is used to determine some information about the route jump. Judge whether to log in, whether to get the corresponding route permission and so on.Copy the code
  • Array to heavy
Var arr = [1, 2, 3, 1, 2]; var newArr= [...new Set(arr)]Copy the code

Second: encapsulating functions using {} and []function uniqueEasy(arr) {
    if(! arr instanceof Array) { throw Error('The current pass is not an array')}let list = []
    let obj = {}
    arr.forEach(item => {
        if(! obj[item]) { list.push(item) obj[item] =true}})return list
}
Copy the code

Of course, there are other methods, but I generally use the above two basic satisfaction projects

  • The Set, the Map
ES6 provides a new data structure, Set. It is similar to an array, but the values of the members are unique and there are no duplicate values. The Set itself is a constructor used to generate the Set data structure. ES6 provides Map data structures. It is a collection of key-value pairs similar to objects, but the range of "keys" is not limited to strings. Values of all types (including objects) can be used as keys.Copy the code
  • Sort an array
The first method uses sort and the second uses bubble sortCopy the code
  • What language is JS
JavaScript is a literal scripting language, a dynamically typed, weakly typed, prototype-based language with built-in support for types. Its interpreter is called JavaScript engine, as part of the browser, widely used in client-side scripting language, was first used in HTML (standard Common Markup Language, an application) web pages, used to add dynamic features to HTML pages. Js language is a weak language type, so when we randomly change the data type of a variable in the project development, it may lead to errors in other methods that reference this variable and so on.Copy the code
  • The prototype
Objects in JavaScript have a special built-in Prototype property, which is essentially a reference to other objects. Almost all objects are created with a non-null prototype property, We can use this property as an alternate repository when we try to refer to an object's property, and the first step is to check if the object itself has the property, use it if it does, and look it up in the prototype if it doesn't. Prototype level up to Object. Prototype level up describe the prototype chain based on prototype extension, what is prototype chain, prototype inheritance, ES5 and ES6 inheritance and differences.Copy the code
  • ES6 new features
1.ES6 introduced strict mode variables must be declared after the use of function parameters can not have the same attribute, otherwise the error can not use the with statement (to tell the truth, I have almost never used) can not assign values to read-only attributes, Delete global[prop] delete global[prop] delete global[prop]evalNo variables are introduced in its outer scopeevalArguments can't automatically reflect function arguments. Can't use arguments. Caller (I've never used arguments) I can't use fn.caller and fn.arguments to get the stack of function calls (which, to be honest, I barely use). I've added reserved words (such as protected, static, and interface) 2. aboutlet3. Destruct assignment of variables 4. Extension of strings includes() : Returns a Boolean value indicating whether the parameter string was found. StartsWith () : Returns a Boolean value indicating whether the argument string is at the head of the original string. EndsWith () : Returns a Boolean value indicating whether the argument string is at the end of the original string. Number.isfinite () is used to check whether a Number isFinite. Number.isnan () is used to check whether a value isNaN. The extension function parameter of the function specifies the default value 7. The extension of the array extends the operator 8. Object extension object deconstruction 9. New symbol data types 10.Set and Map data structures ES6 provides new data structures Set. It is similar to an array, but the values of the members are unique and there are no duplicate values. The Set itself is a constructor used to generate the Set data structure. Map is a collection of key-value pairs similar to objects, but the range of "keys" is not limited to strings. Values of all types (including objects) can be used as keys. Proxy Proxy can be understood as a layer of interception before the target object. All external access to the object must pass this layer of interception. Therefore, Proxy provides a mechanism for filtering and rewriting external access. The word Proxy is used to mean that it acts as a Proxy for certain operations. Vue3.0 uses Proxy 12.Promise Promise is a solution for asynchronous programming that is more reasonable and powerful than traditional solutions -- callback functions and events. The object status is not affected by the external environment. Once the state changes, it never changes again, and you can get this result at any time. The differences between async functions and Generator functions are as follows: (1) Built-in actuators. Generator functions must be executed by an executor, whereas async functions come with an executor. In other words, async functions are executed exactly like normal functions, with only one line. (2) Better semantics. Async and await are semantic clearer than asterisks and yield. Async means that there is an asynchronous operation in a function, and await means that the following expression needs to wait for the result. (3) Normally, an await command is followed by a Promise object. If not, it is cast into an immediately resolve Promise object. (4) Return the Promise. Async functions return a Promise object, which is much more convenient than Generator functions returning an Iterator. You can usethenMethod specifies what to do next. 14. The Class Class withlet, const: there is no variable promotion, no repeated declaration... ES6 classes can be seen as a syntactic candy that does most of what ES5 does. The new class writing method simply makes object prototype writing clearer and more like object-oriented programming syntax. ES6 modules automatically adopt strict mode, whether or not you add it to the Module header"use strict"; . The import andexportCommand andexportandexportThe difference between the defaultCopy the code
  • Range of new features
1. Transition 2. Transform transform 4. Box shadow 5. Color RGBA 7. Grid layout GIRd 8. Flexible layouts, Flex, and more...Copy the code
  • Tell me about a UI framework you’ve used
Element-UI Vant Antd
Copy the code
  • What is cross-domain and how to solve it
Because browsers have the same origin policy for security reasons. That is, if a protocol, domain name, or port difference is cross-domain, the Ajax request will fail. JSONP the principle of JSONP is very simple, is to use the <script> tag has no cross-domain limitation vulnerability. The <script> tag points to an address that needs to be accessed and provides a callback function to receive data when it needs to communicate. <script src="http://domain/api? param1=a&param2=b&callback=jsonp"></script>
    <script>
        functionJsonp (data) {console.log(data)} </script> Jsonp is simple to use and compatible, but is limited to GET requests. 2.CORS CORS must be supported by both the browser and the backend. Internet Explorer 8 and 9 need to be implemented through XDomainRequest. Document. domain This mode can be used only when the secondary domain names are the same. For example, a.test.com and b.test.com are used. Just add document.domain = to the page'test.com'Webpack configures proxyTable configures development environment cross-domain 5. Nginx proxy cross-domain 6. Iframe cross-domain 7. One page sends the message, and the other determines the source and receives the messageCopy the code
  • Talk about front-end performance optimizations
Three aspects to illustrate front-end performance optimization I: 1. Babel-loader uses include and exclude to help avoid unnecessary translation of js files in node_moudules.'babel-loader? cacheDirectory=true'Accept-encoding :gzip 4 (encoding: accept-encoding:gzip 4) 5. Browser cache mechanism, which is divided into strong cache and negotiated cache 2: local Storage -- from cookies to Web Storage, IndexedDB, SessionStorage andlocalStorage and cookie differences and advantages and disadvantages of three: code optimization 1. Event broker 2. Event throttling and stabilization 3. Page backflow and redrawing 4. Code optimization and so onCopy the code
  • Let’s talk about SessionStorage and localStorage and cookies
1. Cookie data is always carried in HTTP requests of the same origin (even if it is not needed), that is, cookies are passed back and forth between the browser and the server. Cookie data also has the concept of path, which can restrict cookies to a path of sessionStorage andlocalStorage does not automatically send data to the server and stores data locally. 2. Storage size limits are also different, cookie data can not exceed 4K, sessionStorage andlocal3. SessionStorage: valid only before the current browser window is closed.localStorage: always valid, saved even when the window or browser is closed, stored locally and therefore used as persistent data; Cookie: only valid until the set cookie expiration time, even if the window is closed or the browser is closed 4. Different scoped SessionStorages: not shared in different browser Windows, even on the same page; Localstorage: shared in all origin Windows; That is, as long as the browser is not closed, the data remains cookie: also shared across all the same origin Windows. This means that as long as the browser is not closed, the data still existsCopy the code
  • Tell me about a CSS layout you’ve used
Gird Layout, Layout layout, Flex layout, Twin Wings, Grail layout, etcCopy the code
  • What is Promise, what does it solve, and how was it implemented before
Promise is a solution to asynchronous programming that makes more sense and is more powerful than traditional solutions -- callback functions and events. Resolving the callback hell that was created by calling back requests in the request makes the code more reasonable and elegant, and makes it easier to locate problems.Copy the code
  • Talk about browser caching
Caching reduces network I/O consumption and improves access speed. Browser caching is a simple and effective way to optimize front-end performance. Many people tend to think of browser caching simply as "HTTP caching." In fact, there are four aspects to the browser Cache mechanism, which are listed in order of priority in obtaining resources: Memory Cache Service Worker Cache HTTP Cache Push Cache It is divided into strong Cache and negotiated Cache. The high priority is strong caching, and negotiation caching is only done if a strong cache fails to hit. In the past, we've been using Expires. When the server returns a Response, write the expires field in Response Headers. Cache-control is now used for both. Cache-control negotiates caching, last-Modified is a timestamp, If we enable the negotiated cache, it returns with Response Headers on the first request: each request determines whether the timestamp has changed. To determine whether 304 reads the cache or returns the latest data to youCopy the code

On three sides

HR talks about salary, ask some company aspects of treatment, why to leave and so on. Well, it depends on how you say it. The point is not to badmouth your previous employer, but to talk about where you want to go. Be prepared to specialize in a particular area, such as data visualization

At the end

The interview questions are still being summarized, the above are part of the summarized interview questions, if there is any mistake in the answer, please point out to facilitate correction.

❤️ do me a favor

If you find this article inspiring, I’d like to ask you to do me a small favor:

  1. Like, so that more people can see this content (collection does not like, is a rogue -_-)

  2. Pay attention to the public account “Tomatology front-end”, I will regularly update and release front-end related information and project case experience for your reference.

  3. Adding a friend may not help you a lot, but there are some business issues that can be discussed and exchanged.