I interviewed more than 100 front-ends for the company, and my mentality almost fell apart.

The company has recently expanded its recruitment. From last year to now, it has interviewed the company with about 100~200 front-end interviewers. I cried.

Do not bring your resume, ask some basic questions, ask three questions,

Asked about the horizontal and vertical centering layout, hesitated for a long time and couldn't tell.

Another younger brother said that I don’t know how to answer your question like this, and I’m tired.

I just want to say, does this really have three years of experience?

Let me summarize the knowledge points of the front-end interview, hoping to be helpful to the younger brothers who are about to interview and future interviews! skr~~skr

Front-end basic knowledge:

(1) CSS box model (old cliché), understanding of BFC, selectors, hierarchical context, multiple implementations of three-column layout (position, flex, float, etc.), adaptive layout rem principle (how to be compatible with different mobile phone dpi), font Basic issues such as how to implement size10px, one pixel on the mobile terminal, and media queries are all knowledge points.

(2) There are very few questions about html, which is of little importance, that is, some semantic understanding of tags, and the new h5 feature, storage/cookie

(3) js is the key point and will be investigated from the basics. From the browser returning html to rendering the page, and then to the optimization points involved in the middle.

Interview questions sharing

HTML

What are the three layers of the browser page, what are they, and what are their functions?
The advantages and disadvantages of HTML5?
What does Doctype do? How to distinguish between strict mode and promiscuous mode? What do they mean?
What are the new features and elements of HTML5?
In which browsers have the webpages you made tested, and what are the cores of these browsers?
There is a very important thing at the beginning of every HTML file, Doctype. Do you know what this is for?
Tell me about your knowledge of HTML5? (What is it, why)
Understanding and knowledge of WEB standards and W3C?
…

CSS

Explain the CSS box model?
Could you please talk about the types of CSS selectors, and give some examples to illustrate their usage?
Could you please tell me what is special about CSS? (Priority, calculation of special values)
Common browser compatibility problems and solutions?
List the values of the display and explain what they do?
How to center a div, how to center a floating element?
Please list several methods (at least two) to clear floats?
Comparison of block, inline and inlinke-block details?
What is graceful degradation and progressive enhancement?
Talk about the problems caused by floating elements and your solutions
What are your performance optimization methods?
…

JavaScript

The various positions of js, such as clientHeight, scrollHeight, offsetHeight, and the difference between scrollTop, offsetTop, clientTop?
Implementation of js drag and drop function
Asynchronously load js method
js anti-shake and throttling
Talk about closures
Talk about your understanding of scope chain
JavaScript prototype, prototype chain? What are the characteristics?
Please explain what is event delegation/event delegation
How does Javascript implement inheritance?
Function execution changes this
Babel compilation principle
Function Currying
Talk about the creation and inheritance of classes
Talk about the event flow in the front end
How to make the event bubble first and then capture
Talk about lazy loading and preloading of pictures
What does the new operator of js do
Change the pointer to the function of this pointer inside the function (the difference between bind, apply, call)
Ajax solves the browser cache problem
…

Due to the limited space of the article, only part of the interview questions can be displayed. If necessary, click here to receive the questions for free + resolve the PDF .

View

The role of the key value in Vue
Why must data in a Vue component be a function?
What is the State characteristic of vuex?
Introduce Vue's responsive system
The difference between computed and watch
Introduce the life cycle of Vue
Why component data must be a function
How do the components communicate
How to use custom components in Vue.cli? Have you encountered any problems?
How does Vue implement on-demand loading and webpack settings
Briefly describe which scenarios each cycle is suitable for
What is scss? What are the installation and use steps in Vue.cli? What are the major features?
Talk about your understanding of Vue.js template compilation?
Several ways of Vue routing jump
How does Vue implement on-demand loading and webpack settings?
Vue's routing implementation: hash mode and history mode
What is the difference between Vue, Angular and React?
Hook function for Vue routing
What are the calculated properties of Vue?
…

React

Introduce react
React single data flow
React life cycle functions and the life cycle of react components
Principles, differences, highlights, and functions of react and Vue
ReactJs component communication
Have you learned about React's virtual DOM? How does it compare?
React is used in the project, why should we choose react, and what are the benefits of react?
How to get the real dom
Reasons for choosing react
React's life cycle function
Process after setState
Do you know the react high-end components?
React jsx, functional programming
What do react components use to determine whether to refresh?
How to configure React-Router
Dynamically loaded modules for routing
What is Redux middleware? It accepts several parameters
How redux request middleware handles concurrency

Browser

Cross-tab communication
Browser architecture
Event Loop under the browser
The process from input url to display
Redraw and reflow
storage
Web Worker
V8 garbage collection mechanism
Memory leak
Reflow and repaint optimization
How to reduce redraw and reflow?
A page is entered from the URL to the page is loaded and displayed, what happened in the process?
Summary of the difference between localStorage and sessionStorage and cookie
…

Algorithm and data structure

Binary tree sequence traversal
The characteristics of B tree, the difference between B tree and B+ tree
Tail recursion
How to write a factorial of a large number? What's wrong with the recursive method?
How to turn a multi-dimensional array into a one-dimensional array
Talk about the principle of bubbling quick discharge
The principle of Heap sorting method? the complexity?
Several common sorting algorithms, handwritten
Array de-duplication, write as many methods as possible
If there is a large array, all of them are integers, how to find the largest top 10 numbers

Due to the limited space of the article, only part of the interview questions can be displayed. If necessary, click here to receive the questions for free + resolve the PDF .

Mastering the above can basically be rampant, how to be overbearing, that is the knowledge of the use and principles of the framework and packaging tools~~~Follow-up detailed explanation

Reveal a few interview tips

(1) The thief who writes resumes**, I can use various frameworks on resumes, and what webpack/vue family bucket, react family bucket, rollup/node have, and the basics will be cold when asked. ~~~~ The bottom layer of the framework is still the js foundation, the foundation is not solid, and the interview is two lines of tears.

(2) The technical points of the resume should be written about what you are good at, interviewing a girl, 2 years of work experience, writing a deep understanding of the principle of vue, a question how can nextTick get the updated DOM, very simple, I don’t know~ of ~~course Points will be deducted. I don’t know a lot about the basics, cool~~ ~

(3) Be honest in the interview, don't be impetuous, don't know some knowledge and no problem. A spiritual guy, I asked about the principle of rem responsive layout, how js judged it, I don’t know~~~_~ ~~, I asked me if I can skip this question, but I haven’t seen it much recently. Me: What are you looking at recently? jsxh: Front-end engineering stuff? Me: I think it's very impetuous~~ ~, what is the difference between common.js/es6 modularization scheme? How do multiple project files share a nodeModules working range? How to monitor git commits? What problems does ts solve? Cool~~~~ Engineering is a big problem, there are many points from development, compilation, deployment, and online

(4) The project said it is in place, handwriting a throttle ~~emmm, handwriting a deep copy~~ emmm, handwriting a promise.all, ~~emmmm

(5) I met a few good candidates. Although some knowledge points and handwriting ability are poor, the people are very reliable and nice. I have seen me who was a junior development engineer before, and I will give the opportunity to pass, not the technology will bring people through. It's stuck.

To sum up, the basics and the ability to write code are very important, _{very important,} very important~, no matter how good the framework is, the bottom layer is also based on the basics, including various knowledge points and design patterns. As for what questions the framework asks and how to prepare, we will break it down next time.