“This is the 20th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

preface

I wish you all a happy year of the Tiger ~!

Now, the real questions and interviews of baidu, Alibaba, Tencent, Bytedance and other big companies can be seen everywhere. There are even a number of educational institutions designed courses specifically for this part, but the experience of small and medium-sized factories is scarce.

But in fact, the needs of small and medium-sized factories are still some, many developers may be due to geography, ability, interest, ambition, short or long term and not into the big factory, even if you can obtain the so-called “question sea” through a variety of online channels. Then frantically brush the interview questions, questions sea tactics, but still feel confused about the interview.

I am because of such and such reason (or power), of course, in the short term has no plan to enter the company, combined with recent ready to jump ship, so personally chose nearly 10 mses in dalian for the interview, takes the form of recording, record the interview questions, this paper also presents the coordinates, the small and medium-sized factory in dalian surface.

In order to avoid unnecessary trouble, the company name is A, B and C.

The purpose of this article is the interview, rather than the integration of interview questions. Some interview questions will be explained in this article, and links to many articles that I think are excellent, as well as some of my experience in the interview and how I answered the question at that time will be provided as an idea, but not a standard answer.

A company

The overall summary

Company A will ask several basic questions, and there is no logic between the questions. Then I will ask questions according to the content of the resume and the answers. My resume is basically about VUE technology stack. Since Company A is promoted internally by A friend, it may be that their company does not use VUE, so they do not care about it, so they did not ask any questions about VUE technology stack, nor did they ask questions about project experience.

Interview Questions

  • To talk aboutcssThe box model
  • Multiple ways to implement the above100pxAdaptive layout below
  • displayWhat are the properties
  • The difference between block elements and inline elements, inline block elements
  • jsPrototype and prototype chain
  • Person.prototype.constructorWhat is the
  • Student: Does the function__ proto __attribute
  • To talk aboutjsThe data type
  • How to judge the various ways of data type, what are the differences, applicable scenarios
  • PromiseHow do I make multiple asynchronous requests at once
  • Promise.allWhat is the return mechanism of
  • What if you want one of the requests to fail and not return a result
  • webpackHow much packaging optimization knows
  • Big front end understand
  • koaHow do I start a server
  • new koaWhat did you do
  • koaPrinciple of onion ring model
  • koaOnion rings andexpressWhat is the difference between middleware
  • Long list optimization, 10,000 data without pagination and lazy loading, how to improve performance
  • What happens between the time a data request is initiated and the time the data is received
  • Do you understand front-end security
  • csrf 和 xssWhat is it, and how can it be avoided
  • How does the front end encrypt the user’s data
  • Based on themd5Improved security

To talk aboutcssThe box model

👉👉 CSS box model and margin negative value

Multiple ways to implement the above100pxAdaptive layout below

  • flexlayout
  • girdlayout
  • margin-top + calc
  • + calc

displayWhat are the properties

value describe
none This element will not be displayed.
block This element is displayed as a block-level element, preceded by a newline character.
inline The default. This element is displayed as an inline element, with no newlines around it.
inline-block Inline block elements.
table This element is displayed as a block-level table preceded by a newline character.
inherit Specifies that the value of the display attribute should be inherited from the parent element.
flex Elastic box model.
grid Grid layout.

The difference between block elements and inline elements, inline block elements

Block level elements

(1) What are the common block elements?

Common block elements include < H1 >~

, < P >,

,

    , < OL >,

  • , etc., among which the
    tag is the most typical block element.

(2) What are the characteristics of block-level elements?

  • Own a line
  • Height, width, margins and margins can be controlled.
  • The width defaults to the container (parent width)100%
  • Is a container and box that can release internal or block-level elements

(3) Attention:

Only text can form paragraphs, so you can’t put block-level elements inside p tags, especially div tags. The same goes for the h1, H2, H3, H4, H5, H6, DT tags, which are literal block-level tags and cannot contain other block-level elements.

2. Inline elements

(1) What are the common inline elements?

Common inline elements include < A >, , , , < I >, , < S >, , , < SPAN > etc., among which the < SPAN > tag is the most typical inline element, also known as the inline element.

(2) What are the characteristics of inline elements?

  • Elements in adjacent rows are on a single line. Multiple elements can be displayed on a single line
  • Height and width Settings are invalid
  • Only horizontal inside and outside margins can be set
  • The default width is the width of its own content
  • Inline elements can only hold text or other inline elements

(3) Attention:

You can’t put a link inside a link.

Special case A can have block-level elements, but it is safest to switch block-level mode for A.

3. Inline block elements

(1) What are the common in-line block elements?

There are several special tags , , < TD > that you can set width, height, and alignment on inline elements, and some sources might call them inline block elements.

(2) What are the characteristics of inline block elements?

  • And adjacent inline elements (inline blocks) on a single line, but with gaps between them. Multiple lines can be displayed on a single line.
  • The default width is the width of its own content.
  • Height, line height, margins, and margins can be controlled.

4. Differences between block-level elements, inline elements and inline block elements

Element model Elements are arranged Set the style The default width contains
Block-level elements Only one block element can be placed in a row You can set the width height 100% of the container The container level can contain any tag
Inline elements A row can contain multiple inline elements The width height cannot be set directly The width of its own content Holds text or other inline elements
Inline block elements Put multiple inline block elements in a row You can set the width and height The width of its own content

Block level elements, inline elements, and inline block elements rotate with each other

  • Block transfer:display:inline;
  • In-line rotary block:display:block;
  • Block, inline element conversion to inline block:display: inline-block;

jsPrototype and prototype chain

👉👉 In-depth JavaScript series six: Prototypes and prototype chains

Person.prototype.constructorWhat is the

Person.prototype.constructor === Person // true
Copy the code

Student: Does the function__ proto __attribute

let fn = function() {} 
// The prototype object for functions (including native constructors) is function.prototype
fn.__proto__ === Function.prototype // true
Copy the code

Functions are created by the Function native constructor, so the Function’s __proto__ attribute points to the Function’s Prototype attribute.

To talk aboutjsThe data type

👉👉 6 interview questions related to JavaScript data types

How to judge the various ways of data type, what are the differences, applicable scenarios

👉👉 Talk about JavaScript data type judgment

PromiseHow do I make multiple asynchronous requests at once

Answer: Use promise.all.

Promise.allWhat is the return mechanism of

In addition to promise.all, there are several other prototype methods to be aware of.

👉👉 read will, handwritten Promise principle, the most accessible version!!

What if you want one of the requests to fail and not return a result

Answer: Use promise.allselect.

webpackHow much packaging optimization knows

👉👉 Play with Webpack and increase your packing speed by 90%

koaHow do I start a server

const Koa = require('koa');
const app = new Koa();

app.use(async ctx => {
  ctx.body = 'Hello World';
});

app.listen(3000);
Copy the code

new koaWhat did you do

  • Build contextctx
  • Build the onion ring model.

koaPrinciple of onion ring model

👉👉 Brief analysis of KOA’s Onion model implementation

koaOnion rings andexpressWhat is the difference between middleware

👉👉 Koa2 vs. Express middleware

Long list optimization, 10,000 data without pagination and lazy loading, how to improve performance

👉👉 backend gives you 100,000 pieces of data at a time, how to gracefully display, in the end to investigate me what?

What happens between the time a data request is initiated and the time the data is received

This I can’t, also did not find what effective data, the hope has big guy to be able to give directions.

csrf 和 xssWhat is it, and how can it be avoided

👉👉 briefly XSS and CSRF

How does the front end encrypt the user’s data

A: MD5, I don’t know much about it, I just used MD5 to encrypt the password for login and registration, and I don’t know anything else.

Based on themd5Improved security

A: MD5 (MD5), I’m just kidding, there is no big guy can give advice.

Company B

The overall summary

Up company B is a kaka, cut a q, no logic, after asking a replaced one, like a machine without feelings questions, not asked project experience related problem, painted with basic interview questions can deal with, as a whole is very simple, this is basically a coder, they can work, pay not to too high.

Interview Questions

  • let,const,varWhat’s the difference?
  • Iterating over the number groupnmethods
  • The wayvueWhat are the advantages and characteristics
  • What is virtualdom
  • vueValues are passed between componentsnKind of way
  • vueWhat are the built-in instructions
  • v-show 和 v-ifWhat’s the difference?
  • How to makeCSSOnly in the current component
  • How to solvevueInitialization page flash problem
  • What is theSPAWhat are the advantages and disadvantages
  • vueWhat are the first screen rendering optimizations
  • vueWhat are the life cycle functions
  • Which hooks are triggered the first time the page loads
  • In which lifecycle the data request is made
  • vue-routerThere are several models
  • hash 和 historyWhat’s the difference?
  • vuexWhat are the properties
  • gitCommon commands to know
  • What issues need to be considered when building a framework for a new project
  • How to do permission authentication
  • How to domockdata

let,const,varWhat’s the difference?

(1) Block-level scope: block scope is included by {}, let and const have block-level scope, var does not have block-level scope. Block-level scopes solve two problems in ES5:

  • Inner variables may override outer variables
  • Loop variables used to count are leaked as global variables

(2) Variable promotion: var has variable promotion, let and const have no variable promotion, that is, variables can only be used after the declaration, otherwise an error will be reported.

(3) Add global attribute: browser global object is window, Node global object is global. Var declares a global variable and adds it as a property of the global object, but let and const do not.

(4) Repeated declaration: when var declares a variable, it can repeat the declaration of the variable, and the variable with the same name declared after will overwrite the traversal declared before. Const and let do not allow variables to be declared twice.

(5) Temporary dead zone: a variable is not available until it is declared with let, const. This is grammatically called a temporary dead zone. Variables declared using VAR do not have temporary dead zones.

(6) Initial value setting: When declaring variables, var and let do not need to set initial values. A const declaration variable must have an initial value.

(7) Pointer to: let and const are new syntax for creating variables in ES6. Let creates variables that can be pointer pointed to (can be reassigned). But const variables are not allowed to change the pointer.

The difference between var let const
Whether there are block-level scopes x ✔ ️ ✔ ️
Whether there is variable promotion ✔ ️ x x
Whether to add global attributes ✔ ️ x x
Whether variables can be declared repeatedly ✔ ️ x x
Is there a temporary dead zone x ✔ ️ ✔ ️
Whether the initial value must be set x x ✔ ️
Can you change the pointer ✔ ️ ✔ ️ x

Iterating over the number groupnmethods

👉👉 Do you know the ten higher-order functions commonly used in JavaScript?

The wayvueWhat are the advantages and characteristics

  • Progressive frameworks: can be easily introduced in any project;

  • Lightweight framework: Focused only on the view layer, is a collection of views that build data, only tens of KB in size;

  • Easy to learn: Chinese developed, Chinese documents, there is no language barrier, easy to understand and learn;

  • Two-way data binding: Easier data manipulation;

  • Componentization: encapsulation and reuse of logic is realized to a large extent, which has unique advantages in building single page applications.

  • Separation of view, data and structure: it makes it easier to change the data, without the need to modify the logical code, and only need to operate the data to complete the relevant operations;

What is virtualdom

Virtual DOM is an abstract data structure of DOM nodes in JavaScript. The reason why Virtual DOM is needed is that it is expensive to operate DOM in the browser and frequent DOM operation will cause performance problems.

The function of the virtual DOM is to compare the virtual DOM before and after the update and find as few real DOM that need to be updated as possible when the page is re-rendered due to the change of responsive data, so as to achieve the purpose of improving performance.

The realization principle of virtual DOM mainly includes the following three parts:

  • withJavaScriptObject simulation realityDOMTrees, to the realDOMTo abstract;
  • diffAlgorithm – Compare two virtual treesDOMTree differences;
  • pachAlgorithm – Virtual twoDOMObject differences apply to realDOMThe tree.

vueValues are passed between componentsnKind of way

(1)props / $emitApplicable to parent-child component communication

(2)refApplicable to parent-child component communication

  • ref: If in ordinaryDOMElement, the reference points toDOMElements; If used on a child component, the reference refers to the component instance

(3)$parent / $children / $root: Accesses the parent/child/root instance

(4)EventBus ($emit / $ON)It is suitable for communication between father-child, intergenerational, and sibling components

This approach uses an empty Vue instance as the central event bus (event hub), which triggers events and listens for events to communicate between any component, including parent, generational, and sibling components.

(5)$attrs/$listenersIt is suitable for intergenerational component communication

  • $attrs: contains the parent scopepropThe property bindings identified (and obtained)class 和 styleExcept). When a component does not declare anypropThis contains all the bindings of the parent scope (class 和 styleExcept), and can passv-bind="$attrs"Pass in internal components. Usually cooperateinheritAttrsOption used together.
  • $listeners: contains objects in the parent scope.nativeModifier of)v-onEvent listeners. It can go throughv-on="$listeners"Passing in internal components

(6)provide / injectIt is suitable for intergenerational component communication

Ancestor components provide variables through provide, and descendant components inject variables through inject. Provide/Inject API mainly solves the communication problem between cross-level components, but its usage scenario is mainly that sub-components obtain the state of the upper level components, and a relationship between active provision and dependency injection is established between cross-level components.

(7)VuexIt is suitable for communication between father-child, intergenerational, and sibling components

Vuex is a state management mode developed specifically for vue.js applications. At the heart of every Vuex application is the Store. A Store is basically a container that contains most of the states in your app.

  • VuexState storage is reactive. whenVueComponents fromstoreWhen the state is read, ifstoreWhen the state changes, the corresponding components are updated efficiently.
  • changestoreThe only way to commit state in is explicitly(commit) mutation. This allows us to easily track each state change.

(8) Slots

Vue3 can obtain slot data through usesolt.

(9)mitt.jsApplicable to any component communication

Vue3 removes $on, $off and other methods, so EventBus is no longer used. The corresponding replacement scheme is mitt.js

vueWhat are the built-in instructions

v-show 和 v-ifWhat’s the difference?

  • Means: V-if is a dynamic way to add or remove DOM elements to the DOM tree; V-show controls explicit and implicit by setting the DOM element’s display style attribute.

  • Compilation process: The V-IF switch has a partial compile/uninstall process in which internal event listeners and subcomponents are destroyed and rebuilt as appropriate; V-show is simply a CSS-BASED switch;

  • Compile conditions: V-if is lazy, and if the initial condition is false, nothing is done; Partial compilation starts only when the condition is true for the first time; V-show is compiled under any condition, whether the first condition is true or not, and then cached, with DOM elements preserved;

  • Performance cost: V-IF has higher switching cost; V-show has a higher initial render cost;

  • Usage scenario: V-IF suitable for operating conditions is unlikely to change; V-show is suitable for frequent switching.

How to makeCSSOnly in the current component

Add scoped to the style tag in the component

How to solvevueInitialization page flash problem

When using VUE development, before vUE initialization, div is not owned by VUE, so the code we write will be prone to screen failure before parsing, and we will see words like {{message}}, although this time is usually very short. But we still need to solve this problem.

First: cloak the CSS with [v-cloak] {display: none; }. If the problem is not completely resolved, add style=”display: none;” to the root element. :style=”{display: block }”

What is theSPAWhat are the advantages and disadvantages

SPA loads the corresponding HTML, JavaScript, and CSS only when the Web page is initialized. Once the page is loaded, SPA will not reload or jump the page because of the user’s operation. Instead, routing mechanisms are used to transform HTML content, interact with the user and avoid page reloading.

Advantages:

  • User experience is good, fast, content change does not need to reload the whole page, avoid unnecessary jump and repeated rendering;
  • It is conducive to the separation of responsibilities at the front and back ends, with clear architecture. The front end carries out interactive logic, and the back end is responsible for data processing.

Disadvantages:

  • Time-consuming initial loading: to achieve a single pageWebApplication functions and display effects need to be changed when the page is loadedJavaScript,CSSUnified loading, part of the page on demand loading;
  • Is not conducive toSEO: Because all content is displayed in a dynamic replacement page, so inSEOIt has a natural weakness.

vueWhat are the first screen rendering optimizations

  • Image compression/lazy loading
  • To disable.mapfile
  • Route lazy loading
  • cdnIntroducing a common library
  • openGZIPThe compression

vueWhat are the life cycle functions

Vue’s lifecycle hook core implementation uses the publish-subscribe model to subscribe to the lifecycle hooks passed in by the user (stored in an array internally) and then executes the corresponding hook method (published) once during the creation of the component instance.

  • beforeCreateIs:new Vue()Then the first hook is triggered in the current phasedata,methods,computedAs well aswatchThe data and methods on the.
  • created: occurs after the instance has been created, the current phase has completed the data observation, i.e. the data can be used, the data can be changed, the change data is not triggered hereupdatedFunction. You can do some initial data acquisition, which is not available at this stageDomAnd interact, if you want to, throughvm.$nextTickTo access theDom.
  • beforeMount: occurs before mount, before thistemplateThe template has been imported into the rendering function for compilation. The current phase is virtualDomIt has been created and is about to start rendering. Changes can also be made to the data at this point without triggeringupdated.
  • mounted: occurs after the mount is complete, in the current phase, trueDomAfter the mount is complete, the data is bidirectional bound and can be accessedDomNode, using$refsProperties ofDomPerform operations.
  • beforeUpdate: occurs before an update, that is, reactive data is updated, virtualdomBefore rerendering is triggered, you can make changes to the data in the current phase without causing rerendering.
  • updated: Occurs after the update is complete for the current phase componentDomThe update is complete. It is important to avoid changing the data during this period, as this may result in an infinite loop of updates.
  • beforeDestroy: occurs before the instance is destroyed, and the instance is fully usable in the current phase, at which point we can clean up the mess, such as clearing timers.
  • destroyed: occurred after the instance was destroyeddomEmpty shell. Components have been disassembled, data bindings removed, listeners removed, and subinstances destroyed.

Which hooks are triggered the first time the page loads

BeforeCreate, created, beforeMount, Mounted

In which lifecycle the data request is made

You can call hook functions created, beforeMount, and Mounted because in these three hook functions, data is already created and can be assigned to the data returned by the server.

It is recommended that asynchronous requests be called in the created hook function, which has the following advantages:

  • Faster access to server data and fewer pagesloadingTime;
  • ssrDoes not supportbeforeMount 、mountedHook function, so putcreatedChinese contributes to consistency;

vue-routerThere are several models

Vue-router has three routing modes: hash, history, and Abstract.

  • hashUse:URL hashValue for routing. Supported by all browsers, including not supportedHTML5 History ApiBrowser;
  • history: rely onHTML5 History APIAnd server configuration.
  • abstract: Support allJavaScriptOperating environment, such asNode.jsServer side. If you find no browserAPIRoutes are automatically forced into this mode.

hash 和 historyWhat’s the difference?

(1) Implementation principle of hash mode

Early implementations of front-end routing were based on location.hash. The principle is simple: the value of location.hash is what comes after the # in the URL. For example, here’s a website whose location.hash value is #search:

https://www.word.com#search
Copy the code

The hash routing mode is implemented based on the following features:

  • URL 中 hashValue is just a state on the client side, which means that when a request is made to the server side,hashParts will not be sent;
  • hashAny change in value adds a record to the browser’s access history. So we can control it through the browser’s back and forward buttonshashThe switch;
  • Can be achieved byaTag and sethrefProperty, when the user clicks on this TAB,URL 的 hashThe value will change; Or useJavaScriptCome to the rightloaction.hashAssign, changeURL 的 hashValue;
  • We can usehashchangeEvent to listenhashValue to jump to (render) the page.

(2) The realization principle of history mode

HTML5 provides the History API to implement URL changes. The two main apis are history.pushstate () and history.repalcestate (). Both apis allow you to manipulate the browser’s history without refreshing it. The only difference is that the former is to add a history, while the latter is to replace the current history directly, as shown below:

window.history.pushState(null.null, path);
window.history.replaceState(null.null, path);
Copy the code

The history routing pattern is implemented based on the following features:

  • pushState 和 repalceStatetwoAPITo operate the implementationURLThe change of the;
  • We can usepopstateEvent to listenurlTo jump to the page (rendering);
  • history.pushState() 或 history.replaceState()Not triggerpopstateEvent, at which point we need to manually trigger the page jump (render).

vuexWhat are the properties

There are five kinds, respectively

  • State: Data structure that defines the State of the application, where the default initial State can be set.
  • Getter: Allows components fromStoreTo obtain data from,mapGettersThe auxiliary function is just going to bestoreIn thegetterMap to local computed properties.
  • Mutation: is the only changestoreAnd must be a synchronization function.
  • Action: for submissionmutation, rather than changing state directly, can include any asynchronous operation.
  • Module: allows to be singleStoreSplit into multiplestoreAnd simultaneously stored in a single state tree.

gitCommon commands to know

👉👉 Git command quick reference table

What issues need to be considered when building a framework for a new project

👉👉 combine code practice, learn front-end engineering comprehensively

How to do permission authentication

A: Permission authentication based on url address and token is performed in the route guard.

How to domockdata

A: You can use mock.js

C company

The overall summary

C company should first apply for an interview online, and then fill in a very long and long application form, and then fill in a very long and long questionnaire, the content of the questionnaire is like the public psychological assessment, has nothing to do with technology. Then I was asked to go to the company for an interview. The interview was conducted on the computer, and the questions had been sorted out below. Generally speaking, it was not difficult. Then the written test finished, and gave me a set of primary school Olympians, can not use the equation solution, this is true a little pit, this should have an interview link, but I was killed in the written test link, also don’t know what is behind.

Interview Questions

  • ajaxWhat is? What are the advantages and disadvantages?
  • The difference between synchronous and asynchronous
  • How to solve cross-domain problems
  • WEBThe application actively pushes from the serverDataHow to get to the client
  • What are some common browser compatibility issues? What’s the reason? How to solve
  • What are the common oneshackskills
  • What’s your experience with front-end development performance optimization
  • Talk to you aboutwebpackView of the
  • What are the advantages and disadvantages of mainstream front-end frameworks
  • Which framework do you like best and why
  • How to eliminate duplicate elements in an array
  • cssHow to achieve a slide effect
  • Handwritten form

ajaxWhat is? What are the advantages and disadvantages?

Ajax is a technology for creating interactive web applications.

Advantages:

  • Implement local update (without refresh state),
  • Reduces the server-side stress

Disadvantages:

  • Broke the browser forward and backward mechanism (becauseajaxAutomatic update mechanism)
  • ajaxIf you have too many requests, the page will load slowly.
  • Search engine support is low.
  • ajaxThe security problem is not very good (can be solved with data encryption).

The difference between synchronous and asynchronous

Synchronization: The idea of synchronization is that all operations are completed before being returned to the user. In this way, the user waits too long online, giving the user a feeling of being stuck (that is, in the system migration, click the migration, the interface will not move, but the program is still executing, the feeling of being stuck). In this case, the user cannot close the interface; if so, the migration process is interrupted.

Async: Put the user request into a message queue and report back to the user that the migration process has started and you can close the browser. Then the program slowly writes to the database. That’s asynchrony. But the user doesn’t feel stuck and will tell you that your request has been answered. You can close the screen.

How to solve cross-domain problems

👉👉 Nine Cross-domain implementations (full version)

WEBThe application actively pushes from the serverDataHow to get to the client

  • polling
  • WebSocket

What are some common browser compatibility issues? What’s the reason? How to solve

Since my company is a company dedicated to building user habits, when it comes to compatibility problems, please download the latest version of Google Browser 😝, so I have no actual experience with this, only know Babel and PostCSS.

What are the common oneshackskills

To tell you the truth, no.

What’s your experience with front-end development performance optimization

👉👉 24 Suggestions for Front-end Performance Optimization (2020)

Talk to you aboutwebpackView of the

👉👉 What does Webpack want to know when the interviewer asks him

What are the advantages and disadvantages of mainstream front-end frameworks

Use vUE only, the advantages mentioned above, the disadvantages, may not support IE8.

Which framework do you like best and why

Same as the previous question.

How to eliminate duplicate elements in an array

  • set
  • reduce
  • The for loop
  • There’s a bunch of ways you can do this, but the idea is to compare two arrays and just put them in.

cssHow to achieve a slide effect

👉👉 use CSS to achieve a simple slide show effect

D company

The overall summary

This interview process is very easy, the interviewer is an architect, in high level, do not ask eight-part essays, he give me a few real-life scenarios, and then into the logic of the code, to make me realize, he asked a few questions in total, does not need to be on the back of the paper, by have been chasing the asked me a question, and then also will continue to guide me, tip me, Until I couldn’t answer anything.

Interview Questions

  • How do you usually request the back end interface?
  • What kind of information does your backend have to give you in order for your request to succeed?
  • What is the format of the request parameters?
  • How to pass a file to the back end?
  • How do you understand front-end engineering?
  • To buy a computer, lookA 借 1kTo findB 借 2KTo findC 借 3K, take 6000 yuan to buy a computer, abstract into the front end of the logic is to request different interfaces to obtain data, get all the data after display, this how to achieve?
  • Do not usepromise.all , async/awaitHow do you do that?
  • promise.all 和 async/awaitWhat’s the difference?
  • promise.allWhat problem is it to solve?
  • If you have an indefinite number of people, the first person goes to the supermarket to buy something, the second person goes to buy something when the first person comes back, and the third person goes to buy something when the second person comes back. (What he wanted to hear was recursion, so I explained the onion ring principle.)
  • How do you remove event listeners? An element is bound to multiple events. How do you determine which one to remove?
  • How do you debug code? (This is when you open up the Google console and talk about what each feature can do.)
  • What features do you use in Google Debugger?
  • How to debug breakpoints?
  • What does the console do?
  • How do I find the code where the interface resides in an unfamiliar project?
  • What if the interface address is dynamic, returned by the other interface?
  • LocalStorage, session, cookieWhat is the difference between?
  • Then I asked about some of my own open source projects
  • Because I brought my computer, I looked at my code

How do you usually request the back end interface?

I don’t know what the interviewer is trying to ask you. I just refer to the interface documentation to make a request.

What kind of information does your backend have to give you in order for your request to succeed?

  • Request way
  • Request parameters

What is the format of the request parameters?

👉👉 Three formats of HTTP request parameters

  • Query String Parameters
  • Form Data
  • Request Payload

How to pass a file to the back end?

👉👉 Process and method of uploading front-end and back-end files

How do you understand front-end engineering?

👉👉 combine code practice, learn front-end engineering comprehensively

How to realize the example of buying a computer mentioned above?

Answer: Use promise.all or async/await.

Do not usepromise.all , async/awaitHow do you do that?

I don’t know 😭😭.

promise.all 和 async/awaitWhat’s the difference?

A: Async Await is based on a Promise implementation, which is a modified promise that makes code look more concise and asynchronous code behaves like synchronous code.

promise.allWhat problem is it to solve?

Answer: Summarize the results of a large number of asynchronous operations.

How do you remove event listeners? An element is bound to multiple events. How do you determine which one to remove?

Element. The removeEventListener (type, the handler,false/true)
Copy the code
  • Type: indicates the event type
  • Handler: Function triggered by event execution
  • false/true:falseAs the bubble,trueTo capture, the parameter istrue, indicating that the event handler is invoked during the capture phase;If it is falseTo invoke the event handler during the bubbling phase.

It is important to note that listening events cannot be eliminated by anonymous functions, only by real-name functions.

How do I find the code where the interface resides in an unfamiliar project?

A: You can search for the address of the interface.

LocalStorage, session, cookieWhat is the difference between?

👉👉 Understand the differences between cookie, session, localStorage, and sessionStorage

E company

The overall summary

This completely don’t need to go, just as lightning protection, first of all, he floor is broken in this company, the company’s internal very broken, like a pyramid sales dens, and then he interviewer is not a technical, don’t know what is a head, ask questions and technology do not have what relation, because see the office environment don’t want to continue, so no sound recording, also didn’t ask any questions, will soon be over.

In fact, E company is not what experience, just remind everyone before looking for a job must first look at the target company’s environment, scale, etc., from the root to avoid stepping on thunder like me.

F

The overall summary

The two interviewers of F company took turns to ask questions, and basically they did not ask questions in eight-part essay. Most of them asked about project experience, so long as it was real work experience, they could basically deal with it. Then they asked some questions about my own open source project, which was based on my resume and would not have been asked if it had not been written. The first interviewer felt that he was talking to himself all the time, while I was talking to myself all the time. The second interviewer would ask for some basic knowledge based on my answers when asking about the project, which was sorted out below.

Interview Questions

Interviewer 1:

  • I saw you dig for gold. Give me a quick descriptioncall.apply.bindWhat are the differences and application scenarios? (As if he wouldn’t ask if I didn’t write)
  • What about the box model?
  • What functions are the company’s projects responsible for?
  • Have forms and tables been encapsulated?
  • How is a form wrapped?
  • How to deal with big data forms,selectWhen there are too many options? (Optimization problem)
  • By the endvue3Any ideas?nuxtWhat do you think?
  • Have you ever built your own scaffolding?
  • Then it’s about the project

Interviewer 2:

  • What do you do in the company? What is the project about?
  • Then it’s about the project
  • vue2 和 vue3What’s the difference?
  • Did you encounter performance tuning issues?
  • From the inputurlWhat happens between the time the page is rendered?
  • Do you know how browsers work?
  • httpWhat are the status codes?
  • How does the front end handle these status codes?
  • localStorage.session.cookieWhat is the difference between?
  • Front-end security issues,CSRF.XSS
  • How to solve cross-domain problems?
  • The cross-domain problem actually changeshttpWhat parameter is in it?

call.apply.bindWhat are the differences and application scenarios

👉👉 do you know how to call, apply, and bind? Well, can you write one by hand?

Talk about the box model

👉👉 CSS box model and margin negative value

By the endvue3Any ideas?nuxtWhat feeling

A: VuE3 can better complete the reuse of structure and logic at the code writing level. Nuxt is a framework of convention more than configuration, many things have been encapsulated, according to the convention to write can be conducive to team collaboration.

vue2 和 vue3What’s the difference?

  • Response principle
  • Lifecycle hook name
  • Custom instruction hook name
  • New built-in components
  • diffalgorithm
  • Composition API

Have you encountered performance optimization problems

👉👉 24 Suggestions for Front-end Performance Optimization (2020)

From the inputurlWhat happens between the time the page is rendered

👉👉 The most detailed classic interview question ever what happens from entering the URL to seeing the page?

You know how browsers work

👉👉 Have an in-depth understanding of how browsers work

httpWhat are the status codes

The first digit of the status code determines the different response states, as follows:

  • 1: message
  • 2 indicates success.
  • 3 indicates redirection
  • 4 indicates that the request is incorrect
  • 5 indicates a server error

1xx

Represents that the request has been accepted and needs to continue processing. This type of response is a temporary response that contains only the status line and some optional response information and ends on an empty line

Common ones are:

  • 100(The client continues to send the request, which is a temporary response.) This temporary response is used to inform the client that some of its requests have been received by the server and have not yet been rejected. The client sends the rest of the request on demand, or ignores the response if the request is completed, and the server must send a final response to the client when the request is complete
  • 101The server switches protocols based on client requestswebsocket 或 HTTP2upgrade

2xx

Indicates that the request has been successfully received, processed, and accepted by the server

  • 200(Success) The request is successful, and the desired response header or data body is returned with the response
  • 201The request succeeded and the server created a new resource
  • 202The (created) server has accepted the request but has not yet processed it
  • 203(Unauthorized information) The server successfully processed the request, but the information returned may have come from another source
  • 204(No content) The server successfully processed the request, but did not return any content
  • 205(Reset content) The server successfully processed the request, but did not return any content
  • 206The server successfully processed part of the request

3xx

Indicates that further action is required to complete the request, and typically these status codes are used for redirection

  • 300(Multiple options) The server can perform multiple operations on a request.
  • 301(Permanent move) The requested page has been permanently moved to the new location.
  • 302The (temporarily mobile) server is currently responding to requests from web pages in different locations, but the requester should continue to use the original location for future requests
  • 303Requesters should use separate for different locationsGETThe server returns this code when requested to retrieve the response
  • 305(Using a proxy) The requester can only access the requested web page using a proxy.
  • 307(Temporary redirection) The server currently responds to requests from web pages in different locations, but the requester should continue to use the original location for future requests

4xx

Represents that the client appears to have made an error that interferes with the server’s processing

  • 400The server does not understand the syntax of the request
  • 401The (unauthorized) request requires authentication.
  • 403The server rejects the request
  • 404The server could not find the requested page
  • 405(method disable) Disables the method specified in the request
  • 406(not accepted) A web page that cannot respond to a request using the requested content feature
  • 407Proxy authorization is required401(unauthorized) similar, but the designated requester should authorize the use of the proxy
  • 408(Request timeout) The server timed out while waiting for a request

5xx

Indicates that the server is unable to complete an obviously valid request. This type of status code indicates that an error or exception has occurred while the server is processing the request

  • 500(Server internal error) The server encountered an error and could not complete the request
  • 501(Not implemented) Server The server does not have the function to complete requests
  • 502(Error Gateway) The server acting as a gateway or proxy received an invalid response from the upstream server
  • 503The server is currently unavailable, (due to overloading or downtime for maintenance)
  • 504(Gateway timeout) The server acted as a gateway or proxy, but did not receive the request from the upstream server in time
  • 505 （ HTTPVersion not supported) the server does not support the version used in the requestHTTPProtocol version

How does the front end handle these status codes

A: In AXIos request interception, different operations are performed based on different status codes.

localStorage.session.cookieWhat is the difference between

👉👉 Understand the differences between cookie, session, localStorage, and sessionStorage

Front-end security issues,CSRF.XSS

👉👉 briefly XSS and CSRF

How to solve cross-domain problems

👉👉 Nine Cross-domain implementations (full version)

The cross-domain problem actually changeshttpWhich parameter is inside

A: the Access – Control – Allow – Origin? This is not sure, there is a big man can give advice.

G company

The overall summary

At the beginning, COMPANY G showed me a design drawing and asked me to conduct the layout on site. It was very simple, including one header and one SIDER, as well as a content area. The content area had a two-column layout, which was quite simple. Then according to the project written on my resume, I will ask several companies, ask several of my own open source, during which I will intersperse some relevant knowledge points, which have been sorted out below.

Interview Questions

  • Showed the blueprints, let the site layout
  • localStorage.session.cookieWhat is the difference between
  • vuex 的 mutation 和 action
  • vuexmodular
  • Array deep copy
  • cssThe box model
  • cssAchieve zebra crossing effect
  • Cross-domain problem

localStorage.session.cookieWhat is the difference between

👉👉 Understand the differences between cookie, session, localStorage, and sessionStorage

vuex 的 mutation 和 action

👉👉 [Beginner’s Notes] Learn to use Vuex

vuexmodular

👉👉 [Beginner’s Notes] Learn to use Vuex

Array deep copy

👉👉 deep and shallow copy of JavaScript, how to write deep copy?

cssThe box model

👉👉 CSS box model and margin negative value

cssAchieve zebra crossing effect

A: You can use pseudo-elements, where the parent element uses absolute positioning, and pseudo-elements use relative positioning, which is the same size as the parent element and overlaps in position. Use nTH-Child selector to select odd lines, only to set the odd line pseudo-elements can be achieved.

Cross-domain problem

👉👉 Nine Cross-domain implementations (full version)

H company

The overall summary

It seems that H company is not sincere in recruiting. The interviewer asked me a few symbolic questions and told me to go home and wait for the news. The questions were very basic and of little reference significance.

We don’t know whether it is the year-end performance brushing, or whether it means that I have hired enough people before I come, but I have already made an interview and I am embarrassed to break the appointment. Have you had similar experience?

Interview Questions

  • es6What are the new features
  • promiseWhat are the methods
  • Iterating over the number groupnmethods
  • vueThe life cycle
  • watch 和 computedDistinguish and use scenarios
  • vue3 和 vue2The difference between
  • virtualdomAnd the realdomThe difference between
  • The component passes a valuenKind of way
  • ts 和 jsThe advantages and disadvantages of

es6What are the new features

👉👉 Nguyen Yifeng ES6 Tutorial

promiseWhat are the methods

👉👉 read will, handwritten Promise principle, the most accessible version!!

Iterating over the number groupnmethods

👉👉 Do you know the ten higher-order functions commonly used in JavaScript?

vueThe life cycle

B company in the interview questions answered.

watch 和 computedDistinguish and use scenarios

The Computed:

  • It supports caching and recalculates only when the dependent data changes
  • Asynchrony is not supported whenComputedCannot listen for data changes when there are asynchronous operations in
  • If an attribute is computed by something else, and the attribute depends on something else, you usually use computed
  • ifcomputedAttribute whose attribute value is a function, is used by defaultgetMethod, the return value of the function is the property value of the property; incomputedIn, the attribute has onegetMethods and asetMethod, which is called when data changessetMethods.

To Watch:

  • It does not support caching, and when a property changes, it triggers the corresponding action
  • Support asynchronous listening
  • The listening function takes two arguments, the first the most recent value and the second the previous value
  • The listening data must bedataDeclared in or passed by the parent componentpropsWhen the data changes, other operations are triggered
  • The function takes two arguments:
    • Immediate: The callback function is triggered immediately after the component is loaded
    • Deep: Detects changes within data, used in complex data types, such as changes to objects in an array.

vue3 和 vue2The difference between

It was answered in the interview question of F company.

virtualdomAnd the realdomThe difference between

  • virtualDOMNo typesetting or redrawing
  • virtualDOMIs to take the truthDOMconvertJavascriptcode
  • virtualDOMMake frequent changes, then compare and change the reality once and for allDOMThe parts that need to be changed, and finally in realityDOMFor typesetting and redrawing, reduce too muchDOMNode typesetting and redraw loss

The component passes a valuenKind of way

B company in the interview questions answered.

ts 和 jsThe advantages and disadvantages of

  • ts 是 jsThe superset that you can set intsUsing native injsSyntax.
  • tsStatically compiled, it provides strong typing and more object-oriented content.
  • tsYou still end up compiling to weakly typed, object-based nativejs, and then run.

I,

The overall summary

Explanation: this quite the rules of the bar, most are also online interview questions, but he will continue to ask in-depth questions according to your answer, rather than brainless question of the kind, did not ask the project. But he and the above wenhua finance and economics similar, to fill in a very long very long information, and then do a set of logical thinking questions unrelated to the code, and then interview, more trouble.

Interview Questions

  • The box model
  • Method of centralizing elements horizontally and vertically
  • flex 和 gridWhat’s the difference?
  • Flex: 1.What does that mean?
  • One parent container, three children, the two sides of the child container width fixed, the middle adaptive, how to achieve?
  • Let’s talk about closures and currization of functions
  • Explain the event loop. What are microtasks and macrotasks?
  • Explain the prototype chain
  • Do all objects have prototypes?
  • vueLife cycle of
  • Cross domain, solution to cross domain problem
  • The waysourcemapWhat are the configurations and how do you choose between development and production environments?
  • Browser input fromurlWhat happens between page rendering?

The box model

👉👉 CSS box model and margin negative value

Method of centralizing elements horizontally and vertically

👉👉 12 types of CSS with fixed width and height and 29 types of CSS with fixed width and height.

flex 和 gridWhat’s the difference?

👉👉 take a look at the beauty of flex layout with 48 mini images “Once and for all”

👉👉 The most powerful CSS layout – Grid layout

Flex: 1.What does that mean?

👉👉 take a look at the beauty of flex layout with 48 mini images “Once and for all”

One parent container, three children, the two sides of the child container width fixed, the middle adaptive, how to achieve?

  • flexlayout
  • gridlayout
  • + calc

Let’s talk about closures and currization of functions

👉👉 learning JavaScript closures for the first time

👉👉 “front-end advancements” thoroughly understand the function currification

Explain the event loop. What are microtasks and macrotasks?

👉👉 Do some GIFs and learn about EventLoop

Explain the prototype chain

👉👉 In-depth JavaScript series six: Prototypes and prototype chains

Do all objects have prototypes?

A: No, objects created with object.create (null) have no prototypes.

vueLife cycle of

B company in the interview questions answered.

Cross domain, solution to cross domain problem

👉👉 Nine Cross-domain implementations (full version)

The waysourcemapWhat are the configurations and how do you choose between development and production environments?

👉👉 What does Webpack want to know when the interviewer asks him

Browser input fromurlWhat happens between page rendering?

👉👉 The most detailed classic interview question ever what happens from entering the URL to seeing the page?

J company

The overall summary

J company has three interviewers, one of whom should be HR to ask some questions unrelated to technology, and the other two to ask technical questions. It seems that the level is very high.

I know a lot about your resume. Scared me into saying I know.

Then began to ask questions, there are basic, most are rare, also blame my resume wrote a lot of “familiar”, a few questions later I said, I have a new understanding of “familiar”.

This because the interviewer came in more suddenly, did not have time to record, plus at that time was really asked meng lived, did not remember a few questions, but in fact more than the following these, and most are source code, principle of what… No question item

Interview Questions

  • I see you dovueTell me about itvueTemplate compilation principle
  • vueWhy use ittemplate 啊
  • Something aboutvuexThe mount process of
  • Something aboutvue-routerSeveral modes and guards bar
  • nuxtHow do I configure a route? How do I define a route? Which route has a higher priority
  • promiseWhat methods have you used
  • express 和 koaWhat’s the difference?
  • ts 跟 jsWhat’s the difference? Pros and cons

I see you dovueTell me about itvueTemplate compilation principle

👉👉 Vue template compilation principles

vueWhy use ittemplate 啊

A: I’m talking about writing more like native HTML.

Something aboutvuexThe mount process of

How is 👉👉 Vuex’s store mounted into each component

Something aboutvue-routerSeveral modes and guards bar

Patterns were covered earlier

👉👉 how many hook functions does vue-router have? What is the specific and what is the implementation process?

nuxtHow do I configure a route? How do I define a route? Which route has a higher priority

A: NuXT automatically generates routes based on file paths, not custom routes.

promiseWhat methods have you used

👉👉 read will, handwritten Promise principle, the most accessible version!!

express 和 koaWhat’s the difference?

1. Grammatical differences

  • experssUse callbacks asynchronously
  • koa1Asynchronous usegenerator + yeild
  • koa2Asynchronous useawait/async

2. Middleware differences

  • koaOnion model, sequential execution, reverse execution, supportcontextTo transfer data
  • expressThe onion model is not supported. Plug-ins need to be introducedcontext

3. Integration difference

  • expressBuilt in a lot of middleware, high integration, easy to use
  • koaLightweight and simple, easy to customize

ts 跟 jsWhat’s the difference? Pros and cons

  • ts 是 jsThe superset that you can set intsUsing native injsSyntax.
  • tsStatically compiled, it provides strong typing and more object-oriented content.
  • tsYou still end up compiling to weakly typed, object-based nativejs, and then run.

High frequency problems

High frequency is not actually, because only interviewed ten companies, sample size is too small, but the topic of several appear many times, so the visible is quite hot, combined with the actual interview, sorting out the relatively high frequency of interview questions, you can see, emphatically even look not to understand, is not interested in, also want to force yourself to back up.

  • CSSThe box model
  • Some common page layouts to know
  • es6New feature, traversal number groupsnmethods
  • JSPrototype and prototype chain
  • ts 跟 jsWhat are the differences, features, advantages and disadvantages
  • promiseAnd its prototype method
  • Browser input fromurlWhat happens between page rendering
  • What is a cross-domain problem and how can it be resolved
  • Front-end safety issues
  • If you write about yourselfnode“May askexpress 和 koaRelated issues of
  • webpackTo optimize the

There is own project must understand, although may indeed be yourself, but after a long time will forget, suggest the interview before his project to look again, most companies will take up a certain time to ask you before you is responsible for the project, answer for the big probability will make the interviewer feel you project experience is compiled, or not to write their own, Points are deducted.

Essential question

Finally summarized several non-technical questions often asked by the interviewer, you can prepare in advance, so as not to get stuck on the spot, incoherent words to leave a bad impression on the interviewer.

  • Make a brief introduction about yourself
  • Why did you leave your last company
  • What do you think of what the last company did
  • Why the front end
  • How do you usually study
  • What books have you read?
  • What do you think are your strengths/weaknesses
  • Give an example of someone who is willing to learn
  • What you think about your career
  • Is there anything else you want to ask me

Make a brief introduction about yourself

Mainly introduce their work content, technology stack, a little bit of interest and hobbies can also be.

Why did you leave your last company

The two main reasons I answer are that one is to learn more and the other is the old salary question.

What do you think of what the last company did

Give a general compliment about the company and then talk about the reasons why you don’t want to stay. Don’t hold a teasing meeting and complain about this or that. For example, I think the previous company has done a good job in all aspects, including the corporate environment, management system and team atmosphere. However, the update of technology stack is slow and the salary adjustment system is not ideal.

Why the front end

Think the front end is more interesting, you can see the interface, you can do something fun, show off to parents, children and girlfriends.

How do you usually study

Read paper books, e-books, videos, and blog forums.

What books have you read?

Tell what you see, don’t make it up. I’ve heard interviewers ask you crazy questions like what color the cover of a book is or what the contents of a book are.

What do you think are your strengths/weaknesses

The advantage lies in active learning and willingness to share. Deficiency is not interested in the content of learning, such as database.

Give an example of someone who is willing to learn

Outstanding writer in nuggets community

The company’s annual progress award

What you think about your career

Four words, forced case came up directly, a special many fine.

Is there anything else you want to ask me

I usually ask about the size of the technical team

  • There are a few people on the technical team,
  • A couple of front ends,
  • A couple of back ends,
  • How many are advanced, intermediate and elementary

Then there is the technology stack

  • What technology stack is currently in use
  • What technology stack do you plan to use in the future
  • Whether they can determine the future of the technology stack

Then there’s your role in the team

  • What’s your job?
  • Degree of decision for the project

Recommended practice

I recommend you a few commonly used brush interview questions website.

👉👉 AN interview column from a warbler

👉👉 2021 Latest Front end Questions

👉👉 take a look at the beauty of flex layout with 48 mini images “Once and for all”

👉👉 The most powerful CSS layout – Grid layout

👉👉 set of interview questions

👉👉 2021 my front-end interview preparation

👉👉 front-end interview questions

👉👉 Jsliang Job Search series

👉👉 [my 🐯 year interview preparation] Vue got it right

After the language

Finally, I wish everyone in the New Year, can find satisfactory work, promotion and pay, earn pot full pot full!