How can I be an interviewer at Ali

preface

Due to the epidemic, I was very touched to see the work situation of many students in Nuggets recently (salary reduction, disguised layoff, dismissal, etc.). Maybe this is not a common phenomenon at the moment, but still make me feel the front of this bowl of youth rice is not easy to mix. At the same time, many of the students who contacted me were unemployed, so I could feel their inner confusion and anxiety. So the inner voice has been urging me to write something about the interview, even if it is only a little help to everyone. Of course, THIS time I will start from the perspective of an interviewer (maybe not an excellent interviewer), so that we can have a better understanding of ali’s interview process, interview data and interview scenarios. Next, I will explain from the following modules:

Recruitment process
Push the data
The interview data
What to Look for in an Interview
Analysis of interview Questions

Warm tip: Before the entry, I wrote an interview related article “Interview Share: Two years of work experience successful Interview Ali P6 Summary”, received a lot of classmates thank me, especially happy that they can find their ideal jobs, which also gave me great motivation to write the article. I hope that the students who are looking for a job can have a look, maybe it can produce some help to you.

recruitment

Hi, everyone. We are the newly established BU Government Affairs Department of Alibaba (the health code used by students in Hangzhou is a project jointly designed by MY BU and other BU). There are still a large number of vacancies in the Web front end. In addition, we have opened the campus recruitment channel and are looking for outstanding interns (the channel is closed for students graduating in June this year). If you want to find me or know more about the recruitment information, you can add me on wechat: 18768107826

Recruitment process

Alibaba’s recruitment process can be relatively long, and in general, if you go through the “push in” channel, you may go through the following steps:

CV screening
The resume assessment
Round technical surface
Second wheel technical surface
Three-wheel technical surface
Round of HR side
Two rounds of HR

If you’re lucky, you’ll probably only need about four (no three technical rounds, no two HR rounds). If you’re unlucky, there are five or six possibilities.

Tips: After consulting some friends, the general interview (Xiaomi, Didi, Sina and Tencent, etc.) may need to go through more than 4 interviews, of course, some friends have gone through netease 3 interviews (second round of technical and one round of HR). If you have information about other companies’ hiring, you can also let them know in the comments to better prepare for the interview.

Push the data

Since I entered the company half a year ago, I have received resumes from my friends intermittently. Here is a summary of the extrapolated data for you to have a sense of individuality:

It is important to note that a resume is not sent immediately after receiving an in-tweet, there is a pure resume screening process first, so there will be a difference in the number of resumes uploaded and reviewed. In addition, I have not encountered any rejection from HR. Of course, from the extrapolated data, the key interviews are the resume review and a round of technical interviews (usually one and two interviews for candidates).

Tips: The uploaded resume will be entered into ali talent pool, if the resume is not included in the interview process (or the resume is released after the interview in one department), then other interested departments will initiate a new recruitment invitation.

The interview data

Since I have not been in the company for a long time, I usually serve as an interviewer for resume evaluation, and occasionally as an interviewer for a round of technical aspects. Here, my data as an interviewer are summarized as follows:

I feel like I’m a little more cautious when reviewing resumes than I am with the pass rate in the extrapolated data……

What to Look for in an Interview

In the process of the interview, I must tell you the most impressive feelings:

1, answer the question don’t be too anxious, be sure to wait patiently for the interviewer to finish the question
Answer questions logically and succinct
3. If the interviewer interrupts you, be careful what you say at this point, as there’s a good chance you’re going on too long and he’s not happy with your immediate response
A question don’t tangle for a long time…..
No interview questions must be crisp to say no
6, the interview time is best controlled in 30 ~ 40 minutes, so that the experience between each other will not be bad
The interview is a process to excavate the interviewer’s ability and potential
The interviewer is not omnipotent, the interview must be a process of learning from each other
Be sure to prepare the questions you want to ask in advance. The most deadly thing is that others put you in plain view. You know nothing about others…..

As for the second point, many interviewees answer questions without logic. Before answering, you can think about it and tell the interviewer that you will explain it from n aspects. First, the first aspect is… The second aspect is…

Warm tip: when the interview found that most of the interviewees generally exist 1 and 2 two problems. If your answers are illogical, verbose and don’t hit the point, the interviewer will generally have a very bad impression of you. On the other hand, if your answer is too succinct, the interviewer will often think that you didn’t Get the point (and will doubt your own presentation), and will often add more detail.

Analysis of interview Questions

In general, before the interview begins, I will prepare about 8 interview questions based on the applicant’s resume (which may be adjusted during the interview), and the final analysis of the test data is as follows:

Tips: This data does not include additional interview questions. It is the data prepared for the interview questions in advance. In a real interview, the questions may be adjusted and added to based on strategy and the situation of the interview.

As I am not familiar with React, I will suffer some losses if I meet applicants with React technology stack. Next I will focus on some interview questions, some simple interview questions will not answer the train of thought (some interview questions can be found from “interview share: two years of work experience successful interview Ali P6 summary”), do not give the answer to the interview questions hope you give in the comments, for others to refer to.

HTML report

How to do SEO optimization in HTML?

In the construction of…

How to calculate the first screen and white screen time?

Refer to the link

w3c / web-performance
Navigation Timing Level 2
w3c / navigation-timing

CSS article

Do you know Flex layouts? Do you normally use Flex for layout?

Their thinking

First of all, you have to say the Flex layout concept, the structure of Flex (Flex Container, Flex Item), which is not answered by any of the interviewees
Next, I can talk about the Flex properties that I use most often
Finally, you can talk about your usual layout (left and right columns, top and bottom rows, etc.).

Refer to the link

Flex Layout tutorial: Syntax section

What are the solutions to floating collapse in the CSS?

Their thinking

Two types of height collapse problems can be summarized first:clearProperties and the BFC method
Two types of specific scenarios can then be introduced:
- Append the element and set the clear property
- Use CSS styles to insert pseudo-elements
- Bootstrap Solution for Height Collapse (BFC)

Possible additional interview questions (see reference links)

What causes height collapse?
clearHow does the property clear float?
BFC is used to solve the height collapse andclearWhat are the advantages of the property clear floating comparison?

Refer to the link

Clear and remove floats

Flex how to achieve two lines up and down, uplink height adaptive, downlink height 200px?

Their thinking

flex-direction: column
flex: 1

How to design a 4-column uniform width layout with 10px margins between columns (for browser compatibility)?

Their thinking

Float and clear float
marginThe role of negative values (see Bootstrap 3 for raster containers).containerThe style)

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>

    <style>
      * {
        margin: 0px;
        padding: 0px;
      }
      
      .container {
        margin-right: -10px;
      }
      
      .row {
        box-sizing: border-box;
        padding-right: 10px;
        width: 25%;
        height: 100px;
        float: left;
      }

      .container::before {
        display: table;
        content: ' ';
      }

      .container::after {
        display: table;
        content: ' ';
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">The first column</div>
      <div class="row">The second column</div>
      <div class="row">The third column</div>
      <div class="row">The fourth column</div>
    </div>
  </body>
</html>
Copy the code

Additional interview questions may be asked

What’s the difference between a Table and a Div?

How to achieve a three-column CSS layout, left and right fixed width, adaptive width in the middle?

How does the CSS clear float?

Their thinking

With clear, you can set an element to prohibit floating elements from appearing to the left, right, or even both sides of it.

<style>
	div {
		display: inline-block;
		width: 40%;
		height: 100px;
		background: #d3cff7;
		margin-right: 10px;
		margin-bottom : 0;
		padding: 0;
	}
	
	.float {
		float: left;
	}
	
	.box {
		height: 50px;
	}
	p {
		border: 1px solid black;
		margin:0;
		padding:0;
		width: 80%;
	}
</style>

<div class="float"></div>
<div class="box"></div>
<p>3333333333333333333333333333333333333333333</p>
Copy the code

3333333333333333333333333333333333333333333

What are the functions of BFF?

Refer to the link

Interview Sharing: Two years of Work Experience and Successful Interview Ali P6 Summary

The CSSvertical-alignWhat are the values? Under what circumstances can it be effective?

Their thinking

Vertical-align:

Class:baseline,top,middle,bottom
Text:text-top,text-bottom
Superscript subscript class:sub,super
Numeric percentage classes: 20px, 2EM, 20%, etc. (for shifts up or down from baseline)

In fact, vertical-align:base-line is the same as vertical-align:0. This negative value is really CSS artifact!

Vertical-align takes effect before:

Inline elementspan,strong,em,img,button,inputEtc.
displayA value ofinline,inline-block,inline-tableortable-cellThe elements of the
Note that floating and absolute positioning make the element blocky, so this element will never take effect

What are the selectors in CSS? How do CSS selector priorities match?

In the construction of…

What’s the difference between a pseudo-element and a pseudo-class?

Refer to the link

Interview Sharing: Two years of Work Experience and Successful Interview Ali P6 Summary

The CSSbackground 的 background-imageProperties can be combined withbackground-colorDoes the attribute work together?

Additional interview questions may be asked

background-colorProperties can overridebackground-imageAttributes?

What about hardware acceleration for CSS 3 animations? What is the point of redrawing and restreaming?

Refer to the link

Interview Sharing: Two years of Work Experience and Successful Interview Ali P6 Summary

What can be done to optimize the CSS?

In the construction of…

What are the differences between floating elements and absolute positioning elements?

In the construction of…

Which properties can be inherited in CSS?

JavaScript/TypeScript

How are arrays stored in JavaScript?

Their thinking

Arrays of the same type of data are allocated contiguous memory space
Arrays with data of a different type allocate memory using a hash map

Tip: You can imagine continuous memory space by simply calculating the storage location based on the index (pointer). In the case of a hash map, you first need to calculate the index value, and then you need to do a second lookup if the index value conflicts (you need to know how the hash is stored).

Additional interview questions may be asked

How can arrays in JavaScript be allocated without a fixed memory space?
What’s the difference between storing arrays in JavaScript and storing arrays in C/C++ / Java?
Can arrays be understood as special objects in JavaScript?
What is the performance difference between arrays in JavaScript and array storage in C/C++ / Java?
What is the difference between an Array in JavaScript and a Buffer in Node.js?
When are arrays stored contiguously in JavaScript and when are they stored in a hash?
What are the possible solutions (open chain, linear detection, red-black trees, etc.) to hash stored key collisions (hash collisions)?

Refer to the link

ziyi2/data-structure-algorithm-procedure

Talk about inheritance and the difference between ES5 and ES6 inheritance?

Their thinking

The use of inheritance in ES5 is realized with the help of constructors, which is essentially to create the instance object of the subclass firstthisAnd then add the superclass method tothisThe above. In ES6, the inheritance mechanism is completely different, essentially creating the instance object of the parent class firstthis(So it must be called firstsuperMethod) and then modify it using the constructor of a subclassthis.
ES6 inherits not only the prototype object of the class, but also the static properties and static methods of the class
.

Refer to the link

Classes and inheritance in JavaScript

What is your understanding of native JavaScript?

Their thinking

A JavaScript implementation consists of several parts
Language type features of JavaScript
Interpreted scripting language (benchmarked compiled scripting language)
Object-oriented (process-oriented)
Event-driven/asynchronous IO
Missing key functions, etc. (block-level scope, modules, subtypes, etc.)
Freedom…

What do you know about TypeScript?

Their thinking

Type annotation and compile-time type checking
class
interface
The module
A decorator
Declaration file (similar to the header file in C)
Support for ES 6
Grammar tip
ESLint (TSLint not recommended)
.

How do iterative syntax in JavaScript perform in modern browsers like Chrome?

Source of interview questions

Familiarity with high performance JavaScript development is listed on the candidate’s resume

Their thinking

inspectionfor,for... of,for... in,forEach,while,do... whileEtc.
You can useconsole.time 和 console.timeEndtest
Note the performance optimizations that modern browsers perform multiple times
++ 和 --Does it make a difference
Is there a process to find the prototype chain while traversing

Additional interview questions may be asked

Is there any difference in literal/array/object storage performance?
When there are more conditionsif-else 和 switchWhich performance is high?
What syntactic aspects of high-performance JavaScript development do you think will improve performance?
How can I reduce the number of iterations in my code?
How to implement a Duff device?

How can I improve the performance of JavaScript variables?

Their thinking

Accessing literals and local variables is the fastest, while accessing array elements and object members is relatively slow
Since local variables exist at the beginning of the scope chain, accessing local variables is faster than accessing cross-scope variables, and global variables are the slowest
Avoid the use ofwithandcatchUnless it is necessary
Nested object members can significantly affect performance and should be used sparingly, for examplewindow.location.href
The deeper a property or method is in the prototype chain, the slower it is to access it
In general, object members, array elements, and cross-scope variables that need to be accessed multiple times can be stored in local variables to improve JavaScript execution efficiency

What’s the difference between event loops in browsers and Node.js?

Refer to the link

Interview Sharing: Two years of Work Experience and Successful Interview Ali P6 Summary

Compare TypeScript to JavaScript. When do you think you need TypeScript?

How to implement private properties of objects in JavaScript?

What is the difference between async/await and Promise?

答案 :

awaitWill wait for asynchronous code to execute, will block code (use with performance in mind)
async / awaitIt will be more convenient for debugging

What are the different ways to implement inheritance in JavaScript, and what are the advantages and disadvantages of each?

Their thinking

type	The advantages and disadvantages
Constructor pattern	You can create copies of different instance properties, including instance properties that refer to types, but you cannot share methods
The prototype pattern	Properties of reference types share the same physical space for instance objects, and therefore methods can be shared
Prototype chain	During the inheritance of the methods and properties of the parent class, the reference type properties of the instance object of the parent class share the same physical space in the instance of the child class, because the instance object of the parent class points to the prototype object of the child class
Borrowing constructor	Solves the problem of inheritance with reference value types sharing physical space, but not method sharing
Combination of inheritance	The inheritance of attributes uses the borrowing constructor method, and the inheritance of methods uses the prototype chain technology, which not only solves the problem of sharing of reference value types, but also realizes the sharing of methods. However, there are instance attributes of the parent class instance objects in the prototype objects of subclasses
Parasitic combination inheritance	Combinative inheritance has solved most of the problems, but it has the disadvantage that it calls the constructor of the parent class twice. Once, it calls the constructor of the parent class when the prototype of the child class is equal to the instance object of the parent class (and there are instance properties of the instance object in the prototype object of the child class). The superclass constructor is called once when the subclass constructor is used. Parasitic combinatorial inheritance can solve the problem that the instance attribute of the parent class instance object still exists in the prototype object of the subclass during inheritance.

Refer to the link

Classes and inheritance in JavaScript

The React article

The React ofsetStateWhy do you need asynchronous operations?

Their thinking

Maintain internal consistency:propsUpdates to are asynchronous becausere-renderWhen the parent component is passed to the child componentpropsTo change; To keep the data consistent,stateIt’s not directly updated. It’s all influshUpdate when
willstateIt is of great benefit to optimize the performance of the application to postpone the update until the final batch merge and then render. If the real DONM is re-rendered every time the state changes, it will bring huge performance consumption
Immediately update back visual incompatibility, for example, when the page is open, multiple requests are issued, causing frequent changes in Loading state, causing the Loading icon to blink

Additional interview questions may be asked

What timesetStateWill it synchronize?
React official tosetStateWhat is the best way to perform synchronization in a particular situation?
In the ReactsetStateAfter want to get the updatestateWhat should I do with the value?

Refer to the link

Does React keep the order for state updates?
why is setState asynchronous?
unstable_batchedUpdates

How does the React app retain data when the page is reloaded?

Their thinking

LocalStorage combining Redux
url query(Note the length limit)

Why do YOU need high-level components when using React Hooks?

Source of interview questions

The resume says that you use Hooks to do business development with high-level components

Their thinking

Reverse into the pit problem, if it is a business migration can be explained by part of the transformation migration
Note that higher-order components are not required in Reat Hooks, such as the Redux example
Customize the Hook

Additional interview questions may be asked

Is it possible to discard higher-order components by writing exclusively in Hooks?
How do I use Hooks to replace higher-order components?

Refer to the link

Customize the Hook

Ajax requests are placed incomponentDidMountIn or incomponentWillMountRight?

Their thinking

Server-side rendering
Event Loop

Gaearon: If it’s an async request, it won’t be fulfilled by the time the component mounts anyway, regardless of where you fire it. This is because JS is single threaded, and the network request can’t “come back” and be handled while we are still rendering. So the difference between firing it earlier and later is often negligible.

You’re right that it matters in some rare cases though and for those cases it might make sense to break the recommendation. But you should be extra cautious as state can update before mounting, and if your data depends on state, you might have to refetch in that case. In other words: when in doubt, do it in componentDidMount.

The specific recommendation to avoid side effects in the constructor and Will* lifecycles is related to the changes we are making to allow rendering to be asynchronous and interruptible (in part to support use cases like this better). We are still figuring out the exact semantics of how it should work, so at the moment our recommendations are more conservative. As we use async rendering more in production we will provide a more specific guidance as to where to fire the requests without sacrificing either efficiency or correctness. But for now providing a clear migration path to async rendering (and thus being more conservative in our recommendations) is more important.

JS is single-threaded, Ajax requests do not “return” and trigger when we are rendering (Ajax execution results are placed in the task queue, and when the main thread finishes executing, the task is read from the task queue), because in theory the result is the same wherever you put it. Will execute Render twice.

This way, there is no need to call Ajax in componentWillMount to avoid misunderstanding and anticipating the results of state. The execution of componentDidMount is straightforward and does not cause ambiguity, so it makes the most sense in componentDidMount.

Additional interview questions may be asked

Talk about the React official recommendation for Ajax requests incomponentDidMountInstead of putting it incomponentWillMountIn the process?
If the Ajax request is placed incomponentWillMountIf Ajax returns the result before render, how many times will render be executed?

Refer to the link

Explain why componentDidMount is a better place to make an Ajax Request (Open)

What performance optimizations can React make in terms of syntax?

Their thinking

PureComponent + Redux + immutable-js / immutability-helper
Redux -> Redux Toolkit
Component libraries are loaded on demand
Dynamic Ployfill
Tree Shaking
The route was loaded lazily. Procedure
Hooks useCallback
React Fragments
The event bind is handled in the constructor
Avoid using inline style properties
Control the range of condition render in JSX (avoid unnecessary repeat render)
key
Keep the data response mandatory feature in state

Additional interview questions may be asked

What is the difference between deep comparison and light comparison?
What should be paid attention to in Render?

What’s the difference between React and Vue?

The framework	React	Vue 2.x
type	MVVM	MVVM
responsive	Square root	Square root
componentization	Square root	Square root
The scaffold	Create React App	Vue CLI
routing	react-router	vue-router
State management	react-redux / React Hooks / MobX	vuex
The overall train of thought	Functional, unidirectional data flow	Declarative, form bidirectional binding
Component optimization	PureComponent / shouldComponentUpdate	Automatic shouldComponentUpdate
HTML	JSX (Structure & Expression & Behavior fusion,Full JavaScript/TypeScript syntax support,Advanced development tool Lint/editor AutoEtc.)	Template (structure & presentation & behavior separation,HTML is more friendly,Improvement of development efficiency, document learning cost)/JSX
CSS	CSS scope requires additional implementations, such as some CSS-in-JS schemes (styled-components,styled-jsx), which generally requires additional plugins to support syntax highlighting and prompting	Single-file component Style tag
Chrome Development Tools	react-devtools	vue-devtools
advantage	Robustness of large-scale applications (flexible architecture and extensibility)Native App, rich ecosystem, rich tool chain	One-stop solution, faster rendering speed and smaller size

In addition, at the grammatical level:

At the reuse level React can be implemented with high order functions, custom Hooks. Vue uses mixins for the most part.
Vue component instances have custom events implemented, allowing for more decoupling of communication between parent and child components. React is anything Props or implements a similar custom event itself.
Vue can use Slot to distribute content, React everything Props.
Vue is rich in instructions (really good, but also support flexible custom instructions), React everything JSX.
Vue for calculating and listening properties syntax sugar, React can be processed in a specific periodic function.
Vue framework support for transition animations, not found in React.
Vue is a one-stop shop, and React is often designed with ecological applications in mind.
The Vue global configuration and global API are still very useful. For example, Vue. Use can inject objects into an instance globally.
Global components in Vue are very handy and don’t need to be introduced over and over again like React does.
Vue’s Template uses variable data (such as constants) that must be mounted inthisOn React JSX everything can be JavaScript.
React Hooks novel concepts and syntax design.
The React Fragments are great, but Vue hasn’t found similar functionality yet (which causes more element nesting issues).
.

Tip: Let us know in the comments if you have a better comparison.

Additional interview questions may be asked

What are the three obvious differences between React and Vue?
What are the advantages of React over Vue?
What are the advantages of Vue compared with React?
In what situations do you think you should use Vue or React?

Vue article

What are the features of Vue CLI 3?

Source of interview questions

Vue CLI technology stack is on the resume

Their thinking

Graphical Interface (VUE UI)
Plug-in system
CLI service
Vue CLI for Webpack configuration without Eject (for Create React App)
Configurable polyfills
Modern mode
Prefetch / Preload
webpack-merge / webpack-chain
Browser Compatibility
CSS preprocessor
The environment variable
Build application/library/Web Components
Deployment (CORS/PWA)
.

Additional interview questions may be asked

Have you designed a universal Vuc CLI plug-in?
Have you ever designed a universal Vue scaffold?
Have you studied the source code of Vue CLI?

Can you compare Create React App and Vue CLI 3?

Source of interview questions

My resume says I’m familiar with React and Vue technology stacks

Their thinking

type	Create React App	Vue CLI 3.x
SPA applications can be built with one key	Square root	Square root
Script	React-scripts (customizable)	@vue/cli-service
ESLint plug-in set	react-app	eslint-plugin-vue(plug-in)
CSS Modules	Square root	Square root
CSS preprocessor	Custom Sass	Natural support Sass & Less & Stylus (configurable)
PostCSS Post processor	Square root	Square root
HTML and static resources	HTML interpolation & Svg componentization	HTML plugins & Preload & Prefetch & Multi-page applications & URL rules
The code segment	Square root	Square root
The environment variable	Square root	Square root
PWA	Square root	pluggable
Unit testing	Jest	Pluginize (Ject & Mock &…)
Proxy	√ (flexible, but often requires customization)	√ (this becomes a configuration item)
TypeScript	The template	pluggable
Custom scaffold templates	The Custom Templates (`template.json`)	Preset & Plug-in system (nice, remote)
Webpack configuration	Eject & Webpack files	Inspect & vue.config.js & Default configuration comprehensive & Webpack-merge & WebPack-chain (with learning cost)
Webpack analysis	Source map explorer	Vue UI (GUI interactive)
Rapid prototyping	x	@vue/cli-service-global
Interactive development	x	vue ui
Browser Compatibility	Modern browsers(Custom Polyfill & Browserslist)	Browserslist & Polyfill & Modern models
build	application	Applications & Libraries & Web Components (asynchronous)

Tips: this refers to the default function comparison, not to say that the function can not be customized extensions!

The Creat React App is less out of the box than Vue CLI 3.x in terms of engineering architecture. In addition, the plug-in architecture in Vue CLI 3.x is a great feature that makes custom scaffold templates very flexible (ideal for enterprise custom scaffolding). Of course, the Create React App has its own design philosophy, which is an advantage for simple applications (non-configurable prior engagement).

How does vue. js work?

Source of interview questions

If you are familiar with the vue. js source code in your resume, or if you only write the vue. js technology stack in your resume, or if you don’t find highlights in the interview process

Their thinking

Here is a brief description of how Vue 2.x works (note that the Runtime + Compiler is vue.js).

Initialization process:

Create a Vue instance object
initThe process initializes the lifecycle, initializes the event center, initializes rendering, and executesbeforeCreatePeriodic function, initializationdata,props,computed,watcher, performcreatedPeriodic functions, etc.
After initialization, call$mountMethod is used to mount the Vue instanceTemplate compilation,Apply colours to a drawingAs well asupdateThree processes).
If not defined on the Vue instancerenderThe method is definedtemplate, you need to go through the compile phase. Need to willtemplateString compilation torender function.templateString compilation steps are as follows:
- parseCanonical parsetemplateString forming AST (Abstract syntax tree, a tree-like representation of the abstract syntax structure of the source code)
- optimizeMarking static nodes skips DIFF algorithm (DIFF algorithm is to compare layer by layer, only nodes of the same level are compared, so the time complexity is only O(n). If the time complexity is not clear, check out my articleZiyi2 /algorithms-javascript/ progressive notation)
- generateConvert the AST intorender functionstring
Compiled intorender functionAfter the call$mountthemountComponentMethod, execute firstbeforeMountThe hook function, then the core is instantiating a renderWatcherIs called in its callback function (when initialized, and when data changes are detected in the component instance)updateComponentMethod (this method callrenderMethod to generate a virtual Node, which is finally calledupdateMethod to update the DOM.
callrenderMethod will berender functionRender as a virtual Node (the real DOM element is very large, because the browser’s standard DOM design is very complex. If you update the DOM frequently, you will have certain performance problems. Virtual DOM uses a native JavaScript object to describe a DOM node, so it is much cheaper than creating a DOM, and it is easy to modify properties, and it can be cross-platform compatible).renderThe first argument to the method iscreateElement(Or ratherhFunction), this is also explained in the official documentation.
After the virtual DOM tree is generated, you need to convert the virtual DOM tree into real DOM nodes. In this case, you need to callupdateMethod,updateMethod is called againpacthMethod to transform the virtual DOM into a real DOM node. Note that the new real DOM is ignored in the diagram (if you don’t have an old virtual Node, you can just go through itcreateElmCreate a real DOM Node), which will pass in the case of an existing virtual NodesameVnodeDetermine if the current Node to be updated is the same as the old Node (e.gkeyIf the nodes are different, then replace the old node with the new node. If the old node is the same and there are child nodes, it needs to callpatchVNode Method to perform DIFF algorithm to update the DOM to improve the performance of DOM operations.

Note that during the initialization phase, there is no responsive process that details the data. This is explained in the responsive process.

Responsive process:

ininitI will use itObject.definePropertyMethod (not compatible with IE8) to listen for changes in reactive data on a Vue instance to enable data hijacking (which takes advantage of the accessor properties of JavaScript objectsgetandset– ES6 will be used in future Vue3ProxyTo optimize the response principle). During the compilation phase of the initialization process, whenrender functionTriggers when reactive data related to the Vue instance and view is read while being renderedgetterfunctionDepend on the collection(Will the observerWatcherObject to the subscriber of the current closureDepthesubsIn), the data hijacking function and the observer pattern are implemented in an MVVM patternBinderAnd then the normal render and update process.
Data hijacking is triggered when the data changes or the view causes the data to changesetterThe function,setterInitialization is notifiedDepend on the collectionIn theDepAnd viewWatcherTells you to rerender the view,WatherIt will pass againupdateMethod to update the view.

You can see that you can achieve bidirectional binding between the data and the view by adding a listener event to the view and automatically changing the corresponding data change.

Additional interview questions may be asked

Vue. Js source code entry mainly do what to deal with?
How is data hijacking implemented in vue.js? What about browser compatibility?
How is dependency collection handled in vue.js? Is there any connection to closures?
What are the stages of template parsing in vue.js?
What are the advantages of virtual nodes in vue.js?
How is the DIFF algorithm in vue.js handled?
What is the time complexity of the DIFF algorithm in vue.js? Why is that?
Vue. Jscomputed / watchHow does this work?
What periodic functions are in vue.js? When are these periodic functions executed?
Vue. In js$nextTickHow does it work? What major changes has it undergone? Why is that?
What tag optimization does vue. js do to the DOM update?
What syntactic optimization can vue. js do?
What does the Proxy in vue.js 2.x mainly do?
How do YOU support TypeScript in vue.js 2.x?
What are the main changes in Vue 3.x source code compared to Vue 2.x?
What is M/V/VM in vue.js?
What are the main features of Vue-Loader?
How does Vue.js do ESLint validation?
How does vue.js do unit testing?
Know vue-Router/Vuex source code? (Perceptual questions, not in-depth)
What is the difference between publish/subscribe and observer?
Hand-write a publish/subscribe model?
What’s the difference between MVC/MVP/MVVM?
If you are familiar with Nuxt, etc., you may ask how SSR is implemented?
Do you have the habit of tracing the error stack in depth when you see an error/warning in vue. js?
Can data hijacking in Vue 2.x be implemented using a publish/subscribe model? What are the advantages and disadvantages of adopting the observer model?
The implementation principle of Vue framework can be roughly divided into several parts?

Refer to the link

Implement a simple MVVM based on Vue

What are the options for communication between components in vue. js?

Their thinking

Vuex
Event Bus
Pub / Sub
Emit / On
provide / inject
Element UI dispatch / broadcast
props
Parent/Children instance object

Additional interview questions may be asked

Element in the UIdispatch 和 broadcastHow does it work?
What are the plans for communication between ancestors and descendants?
What are the options for communication between any component?

How does Vue customize scaffolding? What factors need to be considered?

In the construction of…

$nextTickWhat is the relationship between the timing of execution and DOM rendering?

Additional interview questions may be asked

What is an Event Loop?
What’s the difference between a macro task and a microtask?
What are macro tasks and what are microtasks?
$nextTickWhat changes have been made over several iterations?
Will a new Network process be created when opening a new browser window?

Refer to the link

Do you really understand $nextTick

What version does Vue use, how does it work with TypeScript, and what features does TypeScript have?

In the construction of…

In the Vuekeep-aliveHow does it work?

In the construction of…

Source of interview questions

The keep-alive information appears in the resume

Additional interview questions may be asked

Set upkeep-aliveWhat is the subsequent impact on the component rendering lifecycle?
keep-aliveWhat are the features?

How is data hijacking in Vue handled in different versions?

In the construction of…

What performance optimizations can Vue do?

Their thinking

keep-alive
The route was loaded lazily. Procedure
Preload / Prefetch
key
Reactive dependency flattening
Reduce unnecessary responsive dependencies
Object.freeze
DOM scrolling loading
v-if / v-show
computed / watch
Event destruction (to prevent memory leaks)
Components are introduced as needed
pre-rendered
On-demand Polyfill
Template precompile
Rendering function
Official Style Guide + official ESLint plugin
.

Additional interview questions may be asked

How is lazy route loading implemented?
What Webpack configuration does Coding Split relate to?
What is a Polyfill? What configurable information does Vue support?
Can I use JSX in Vue? (Anyone who doesn’t know what JSX is)

Component article

What’s the difference between controlled and uncontrolled components in React?

Source of interview questions

The resume says extract common business components

Their thinking

Data is managed by the React component/DOM node

Additional interview questions may be asked

In what scenarios should you use uncontrolled components?

Refer to the link

Controlled and uncontrolled form inputs in React don’t have to be complicated

How to implement an Input component development in React?

In the construction of…

Build, design, and maintain your company’s component library?

Source of interview questions

Design and maintain the company’s component library

Their thinking

Full import/on-demand import
Build process design
Unit testing
Output mode (UMD/CommonJs2 / ES6)
Style building
Internationalization/Tools
ESLint / Prettier / Stylint
TypeScript (declaration)/JavaScript
Webpack configuration/Webpack analysis
Babel processing
Polyfill attention
Markdown Demo & CI
Three-party library processing
Browser Compatibility
Autoprefixer
Lerna / Single Npm / Multiple Npm
Single Npm & Template
Git hook handling & Git specification
Semantically versioning specifications
Team/scope/development specification/code Review

Additional interview questions may be asked

Webpack build speed/performance optimization?
Webpack analytics?
Framework design for component libraries?
Build Bundle optimizations?
What are the implementations of the load on demand function?
What components are I responsible for?
Proactive business component encapsulation case?
Have you seen the source code design of XXX component library?
Will TypeScript support be considered when designing components?
What does unit testing of a business component typically test?

Refer to the link

Vue CLI 3 combined with Lerna to design UI framework

Do you know the framework design of the Element UI component?

Source of interview questions

My resume says I used the Element UI for business development and designed my own components

Refer to the link

Vue CLI 3 combined with Lerna to design UI framework

What do you think should be done to load component libraries on demand?

Source of interview questions

The resume says use on-demand loading to improve page performance

Their thinking

Single Npm
Lerna
Multi Entry Syntax

How do I automatically block Input’s automatic password filling?

Design Patterns

What are the differences between the observer and publish/subscribe design patterns?

Source of interview questions

Resume written familiar with design patterns, Redis, Vue source code, etc

Additional interview questions may be asked

Where are the observer or publish/subscribe patterns commonly used?

Refer to the link

Implement a simple MVVM based on Vue

Know the difference between MVC/MVP/MVVM?

Refer to the link

Implement a simple MVVM based on Vue

Engineering article

What are Webpack build speed optimization solutions?

Source of interview questions

The project is written to use Webpack for build rate optimization

Their thinking

speed-measure-webpack-plugin
Exclude three-party libraries to prevent secondary packaging
thread-loader
cache-loader
HappyPack
parallel-webpack
.

Additional interview questions may be asked

How much time does the pre-optimized build take, and how much time does the optimized build take?
Did you analyze what was causing the build rate to slow down?

What do you know about CZ ecology?

Source of interview questions

Git commit using cZ specification is written in the project

Refer to the link

Introduction to the Cz toolset – Specification of Git commit instructions

What features does Webpack have for performance optimization?

In the construction of…

Performance Optimization

Know about lazy loading at SPA?

In the construction of…

How does Vue work with Echarts/OpenLayers to optimize performance?

In the construction of…

Service report

Have you done the technology selection of application framework based on Express?

In the construction of…

History of anterior and posterior separation? What are the benefits and disadvantages of the split pattern?

In the construction of…

What’s the difference between the event loop in Node and the browser event loop?

In the construction of…

How to make a server framework out of pure Node.js? How to understand Node.js server MVC?

In the construction of…

If you are familiar with Node, what is the evolution history of server-side MVC?

In the construction of…

What are the cross-domain solutions? How does CORS deal with cross-domain?

In the construction of…

The framework paper

What is H5?

In the construction of…

What are the differences between AMD, CMD and CommonJS?

In the construction of…

Additional interview questions may be asked

What are the differences between common.js and ES 6 modules introduced?

How to design a burst large-scale concurrency architecture?

In the construction of…

How does a typical company deploy front-end code?

In the construction of…

HTTP post

What’s the difference between GET and POST?

Additional interview questions may be asked

What is the difference in security between GET and POST?
In what cases can GET be a security issue?

Talk about Ajax, talk about Axios?

In the construction of…

What capabilities does the Axios library have? Can the Axios library intercept requests before they are made?

In the construction of…

Additional interview questions may be asked

Can the Axios library intercept requests before they are made?
Can the Axios library cancel the request when it makes it?

How does the hardware layer communicate with the front end?

Additional interview questions may be asked

What about WebSocket browser compatibility?

Talk about your understanding of caching and give an example of the use of caching that is most relevant to you.

In the construction of…

What technologies are used in server-side push?

In the construction of…

How is HTTP 2 different from HTTP 1?

In the construction of…

What protocol does WebSokect essentially communicate over (TCP/UDP)?

Additional interview questions may be asked

How to degrade the compatibility of WebSockect compatibility?

A quick introduction to Graphql, why should you use Graphql in your projects?

In the construction of…

Do you know about cross-domain? What are the general circumstances that lead to cross-domain?

In the construction of…

What’s the difference between cookies and sessions?

In the construction of…

The test piece

Are there unit tests or E2E tests written during normal development?

In the construction of…

What does automated testing basically do?

In the construction of…

Optimize the article

What are the optimization plans for SEO?

In the construction of…

Additional interview questions may be asked

What is the principle of pre-rendering?

What about any front-end optimization?

In the construction of…

The business report

What is the scope of canonical code writing?

Copyright information gadget is what, can specific introduction?

Describe the DTD component. How is the component maintained and versioning controlled?

Are there any pain points in the development of your business that you have identified and improved?

Have you ever had a case where you thought the interaction design was inappropriate and then came up with a plan to change the interaction?

How about front-end advertising? How Is Chrome hijacking advertising?

Are there complexity cases that simplify business design?

Do you have any tools to simplify business development?

Did you push Moxtra? Tell me about RxJS?

Have you taken the initiative to own the business, and effectively eliminate the business risk case?

How do you measure the experience of improving your product?

Tips: Some business questions are mainly for the projects in the resume, and are not suitable for display here. However, it should be noted that interviewers may be very interested in the data of business, so it is better to prepare the data of comparative NB in business in advance. Points that business may consider: business data/business difficulties/business achievements/business contributions/business initiatives/business own capabilities/technology stack selection considerations/business scope of impact/business versatility/business thinking……

Noun Analysis

What are progressive enhancement and graceful degradation?

In the construction of…

The written report

0, 1, 1, 2, 3, 5, 8, let’s say the 0th number is 0, and the first number is 1, what’s the NTH number?

Simply implement a publish-subscribe mechanism?

Simple implementation of the damping function with immediate execution parameters:Function debounceImmediate (fn: function, wait: number, Boolean))?

To implement a poker type insert sort (we always like to insert a card into the sorted cards), type:,6,1,8,7,2,4,3 [5]And the output:,2,3,4,5,6,7 [1]And provides ideas for unit testing (how to test that your code is stable and correct)?

Implement a simple template engine

Let template = '{{name}} hello, it's {day}'; Let data = {name: 'name ', day:' name '} render(template, data); // Hi, Zhang SAN. Today is WednesdayCopy the code

Chaos article

What do you think you are best at?

Suppose there are 10 w nodes hanging in an organization, how to optimize?

Have you ever had problems with Vue?

What is the biggest performance optimization in your business?

Describe an unsolved problem in your business?

What is the most difficult problem you have encountered in your business?

Gossip article

Efficient self-study ability, can you give an example to reflect the efficiency?

Besides business development, do you have any learning plan?

Do you have any hobbies or interests?

preface

recruitment

Recruitment process

Push the data

The interview data

What to Look for in an Interview

Analysis of interview Questions

HTML report

How to do SEO optimization in HTML?

How to calculate the first screen and white screen time?

CSS article

Do you know Flex layouts? Do you normally use Flex for layout?

What are the solutions to floating collapse in the CSS?

Flex how to achieve two lines up and down, uplink height adaptive, downlink height 200px?

How to design a 4-column uniform width layout with 10px margins between columns (for browser compatibility)?

How to achieve a three-column CSS layout, left and right fixed width, adaptive width in the middle?

How does the CSS clear float?

What are the functions of BFF?

The CSSvertical-alignWhat are the values? Under what circumstances can it be effective?

What are the selectors in CSS? How do CSS selector priorities match?

What’s the difference between a pseudo-element and a pseudo-class?

The CSSbackground 的 background-imageProperties can be combined withbackground-colorDoes the attribute work together?

What about hardware acceleration for CSS 3 animations? What is the point of redrawing and restreaming?

What can be done to optimize the CSS?

What are the differences between floating elements and absolute positioning elements?

Which properties can be inherited in CSS?

JavaScript/TypeScript

How are arrays stored in JavaScript?

Talk about inheritance and the difference between ES5 and ES6 inheritance?

What is your understanding of native JavaScript?

What do you know about TypeScript?

How do iterative syntax in JavaScript perform in modern browsers like Chrome?

How can I improve the performance of JavaScript variables?

What’s the difference between event loops in browsers and Node.js?

Compare TypeScript to JavaScript. When do you think you need TypeScript?

How to implement private properties of objects in JavaScript?

What is the difference between async/await and Promise?

What are the different ways to implement inheritance in JavaScript, and what are the advantages and disadvantages of each?

The React article

The React ofsetStateWhy do you need asynchronous operations?

How does the React app retain data when the page is reloaded?

Why do YOU need high-level components when using React Hooks?

Ajax requests are placed incomponentDidMountIn or incomponentWillMountRight?

What performance optimizations can React make in terms of syntax?

What’s the difference between React and Vue?

Vue article

What are the features of Vue CLI 3?

Can you compare Create React App and Vue CLI 3?

How does vue. js work?

What are the options for communication between components in vue. js?

How does Vue customize scaffolding? What factors need to be considered?

$nextTickWhat is the relationship between the timing of execution and DOM rendering?

What version does Vue use, how does it work with TypeScript, and what features does TypeScript have?

In the Vuekeep-aliveHow does it work?

How is data hijacking in Vue handled in different versions?

What performance optimizations can Vue do?

Component article

What’s the difference between controlled and uncontrolled components in React?

How to implement an Input component development in React?

Build, design, and maintain your company’s component library?

Do you know the framework design of the Element UI component?

What do you think should be done to load component libraries on demand?

How do I automatically block Input’s automatic password filling?

Design Patterns

What are the differences between the observer and publish/subscribe design patterns?

Know the difference between MVC/MVP/MVVM?

Engineering article

What are Webpack build speed optimization solutions?

What do you know about CZ ecology?

What features does Webpack have for performance optimization?

Performance Optimization

Know about lazy loading at SPA?

How does Vue work with Echarts/OpenLayers to optimize performance?

Service report

Have you done the technology selection of application framework based on Express?

History of anterior and posterior separation? What are the benefits and disadvantages of the split pattern?

What’s the difference between the event loop in Node and the browser event loop?

How to make a server framework out of pure Node.js? How to understand Node.js server MVC?

If you are familiar with Node, what is the evolution history of server-side MVC?

The CSS`vertical-align`What are the values? Under what circumstances can it be effective?

The CSS`background` 的 `background-image`Properties can be combined with`background-color`Does the attribute work together?

The React of`setState`Why do you need asynchronous operations?

Ajax requests are placed in`componentDidMount`In or in`componentWillMount`Right?

`$nextTick`What is the relationship between the timing of execution and DOM rendering?

In the Vue`keep-alive`How does it work?

Simple implementation of the damping function with immediate execution parameters:`Function debounceImmediate (fn: function, wait: number, Boolean))`?

To implement a poker type insert sort (we always like to insert a card into the sorted cards), type:`,6,1,8,7,2,4,3 [5]`And the output:`,2,3,4,5,6,7 [1]`And provides ideas for unit testing (how to test that your code is stable and correct)?