Share a Baidu interview, part of the questions will be with the interview answer, Baidu two and three sides have handwritten code link, for the practical ability of weak partners will be some difficult.

One side

1. Why use Flex layout, align items and justify content

Traditional layouts are based on the box model and rely heavily on the display, position, and float properties. The Flex layout is more flexible, allowing easy, complete, and responsive implementation of various page layouts, such as horizontal and vertical centers.

Align-items: Define alignment in the side (vertical) direction;

Autocrate-content: defines the alignment in the main axis (horizontal axis) direction.

2. How is Webpack packaged and what is Babel?

Taking the project as a whole, with a given master file (e.g., index.js), Webpack will start with this file to find all of the project’s dependency files, process them using loaders, and finally package them into one (or more) browser-recognized JavaScript files.

Babel converts ES6, ES7, ES8, and so on into es5 or ES3 syntax that the browser recognizes.

3. How saas and less differ from normal CSS

  • Define variables. You can define repeated CSS property values as variables and refer to them by variable name without having to write the property value again.
  • Nested writing method, parent-child relationship at a glance;
  • Using operators, you can calculate styles;
  • Built-in color processing functions to handle the color value, such as highlight, darken, color gradient, etc.
  • Inheritance: Consider using inheritance when defining the same style for multiple elements.
  • Mixins: Sort of like functions or macros, when a piece of CSS is often used in multiple elements, you can define a Mixin for the shared CSS and then just call it wherever you want to refer to the CSS.

4. Differences between ES 6 module and other modules

Compare the ES6 and CommonJS modules:

5. Have you used some asynchronous processing functions of ES6

Promise, generator, async await

6. How does Redux handle asynchronous operations

Middleware such as Redux-Thunk or Redux-Promise can be introduced to delay the dispatch of events.

How it works: They use Applymiddleware () to wrap the Store’s Dispatch method, giving them the ability to handle asynchrony.

Why reducer should be a pure function? What is a pure function?

Pure function: Always get the same output for the same input, without any observable side effects, and without dependence on the state of the external environment.

Cause: Redux only compares whether the old and new objects are the same by comparing their storage locations (shallow comparison). If you modify the attributes of the old state object directly inside the Reducer, then the new state and the old state will both point to the same object. So Redux assumes that nothing has changed and that the returned state will be the old state. If the two states are the same, the page will not be rerendered.

Because the only way to compare whether all the properties of two Javascript objects are the same is to do a deep comparison between them. However, deep comparisons are expensive in real applications because js objects are often large and require many comparisons. So an effective solution is to make it a rule that whenever a change occurs, the developer will create a new object and then pass it on. Also, when no changes have occurred, the developer sends back the old object. That is, the new object represents the new state.

8. What is a higher-order function, and how do you write a higher-order function

Higher-order function: Parameter values are functions or return values are functions. For example, map, Reduce, filter, and sort are higher-order functions.

When you write higher-order functions, you write them so that their arguments can accept other functions.

9. What’s the difference between vue and react

10. What problems does NodeJS address

It can handle high concurrency I/O, and can also work with WebSocket to develop long-connected real-time interactive applications.

11. Responsive layout, how to do mobile terminal adaptation

A responsive layout can be achieved using media queries.

Mobile terminal adaptation scheme:

<meta name="viewport" content="width=device-width, user-Scalable =no, initial scale=1.0, maximum-scale=1.0, Minimum - scale = 1.0 ">

Width =device-width: Set current viewport width to equal device-width user-Scalable =no: Don’t allow user scaling initial scale=1.0: Set page initial scale to not scale maximum-scale=1.0: Minimum scale=1.0: The minimum scale allowed for the user is 1.0 (2) Media queries (responsive)

(3) Dynamic REM scheme

Second interview

1. How to make a real-time chat system

Using WebSocket and NodeJS, this project is described in detail in the book NodeJS In Action.

2. How to ensure the correct order of messages when there is a delay

Each message is given a globally unique monotonically increasing SerialNumber (SN) when it is created. You can do this with a global counter. Determine the order of the two messages by comparing their SN.

3. How to make a login window and what is the compatibility of input

Use form.

4. How to verify the Input button

Use regular expressions.

5. How to achieve horizontal and vertical center, relative, absolute, fixed

6. Write a function that outputs 1,2,3,4,5 after 1s

Let and timer are directly used.

for(let i = 1 ; i < 6; i++){
    setTimeout(() => {
        conosle.log(i)
    }, 1000)
}

7. Event queue (macro task, micro task)

8. How to add a comma every third number and consider the decimal point

function transform(number){ var num = number.toString() var numArr = num.split('.') var [num, dotNum] = numArr var operateNum = num.split('').reverse() var result = [], len = operateNum.length for(var i = 0; i< len; i++){ result.push(operateNum[i]) if(((i+1) % 3 === 0) && (i ! = = len - 1)) {result. Push (', ')}} if {(dotNum) result. Reverse (.) push ('. ',... dotNum) return result.join('') }else{ return result.reverse().join('') } }

9. Is WebPack configured? You know how it works?

10. How do parent and child components communicate, and how do child components communicate with parent components?

The parent component communicates with the child component by passing state as props.

The parent component writes state and the function that handles the state, and passes the function name to the child component in the form of the props property value. The child component calls the function of the parent component, causing the state to change.

11. A quick word about PWA

On three sides

1. The handwritten indexOf

function indexOf(str, val){
    var strLen = str.length, valLen = val.length
    for(var i = 0; i < strLen; i++){
        var matchLen = i + valLen
        var matchStr = str.slice(i, matchLen)
        if(matchLen > strLen){
            return -1
        }
        if(matchStr === val){
            return i
        }
    }
    return -1
}

2. Implement JS inheritance

function A () { this.name = 'a'; } A.prototype.getName = function () { return this.name; } function B () {

3. What steps are required to enter the URL and display the page? (1) The DNS server parses the domain name and finds the IP address of the corresponding server.

(2) Establish a TCP three-way handshake connection with the server;

(3) Send THE HTTP request, the server will fetch the corresponding resources from the data server according to the HTTP request, and return them to the browser;

(4) The browser processes the response

  • Load: The browser loads an HTML page from the top down. When external CSS files and images are loaded, the browser makes another HTTP request to obtain external resources. When loaded into a JS file, the HTML document will suspend the rendering thread (load parsing synchronization) until the JS file is loaded and parsed before resuming the HTML document’s rendering thread.
  • Parse: Parse the DOM tree and CSSDOM tree.
  • Render: Build the render tree, visually represent the DOM tree, and present the page to the user.

4. What are the methods? The difference between POST and PUT

Post: uploads resources

Put: Modifies resources

5. HTTPS has several handshakes

6. What is better about HTTP2 than Http1

7. The page cannot be refreshed. What are the problems that can be analyzed from each step of the third question?

  • The domain name does not exist or the IP address is incorrect
  • The network is faulty and the TCP connection cannot be established
  • The server could not find the correct resource

8. When and how did you last learn systematically

9. What are you most proud of in the project

10. What’s bad about your last company

Suffocate again also want good answer come out! Xiaxiaentire a 2022 front end test elaborate includes the personnel interview questions, describe the project, compatibility, small program, development encountered bugs, HTML5\CSS3, JS, HTTP, ES6, VUE, React interview questions, want to see the full version of 2021 front end test elaborate small partner
Click on this to make it OK.

Personnel Interview Questions

  • Would you please introduce yourself?
  • What do you think is your greatest strength?
  • What is your greatest weakness?
  • How do you feel about working overtime?
  • What are your salary requirements?
  • In five years’ time, what is your career plan?
  • Do you have any questions to ask?
  • How do you feel about job-hopping?
  • How much do you know about our company?
  • What are the three words that best describe you?

How would you describe a project you have worked on

  • The opening
  • Prepare a project description before the interview, and don’t be afraid because the interviewer doesn’t know anything
  • Prepare all the details of the project. If you get asked, you don’t do it
  • Tell the interviewer what he or she wants to hear without being subtle
  • Be proactive. The interviewer is under no obligation to dig for your highlights
  • You can lead, but you can’t talk

Small procedure interview question arrangement

  • How are data requests encapsulated
  • Method of passing values for parameters
  • Methods to improve the application speed of small programs
  • The advantages of small programs
  • Disadvantages of small programs
  • Describe the principle of small program
  • How to solve the asynchronous request problem
  • The difference between small program and Vue
  • Small program two-way binding and vUE where different
  • Life cycle function
  • Several jump, small program page jump
  • How do I customize components

Bugs encountered during development

  • Vue project using v-for loop local image, image is not displayed, solution: require dynamic import image,
  • Merge multiple objects and de-duplicate them (ES6)
  • How to pass parameters in the vue calculation attribute: the requirement is that the value needs to be converted to three digits, such as 1 needs to be converted to 001,10 needs to be converted to 010, etc.
  • JS listens for events that occur in other Windows, primarily using window.addeventListener (s)
  • When using Ajax to send data to the back end, it is common to bind js events to a button
  • The data type problem when Ajax transfers backend data to NodeJS
  • Use isNaN to determine whether the data is a non-numeric value. If it is true, false if it is not

HTML5\CSS3 Interview questions collated

  • Doctype? Strict vs. Promiscuous – How are these two modes triggered and what’s the point of distinguishing them?
  • What are the inline elements? What are the block-level elements? What are the void elements?
  • How many box models are there in CSS? What are the characteristics of each?
  • What’s the difference between link and @import?
  • What are the CSS selectors? Which attributes can be inherited? How is the priority algorithm calculated? CSS3 new pseudo-classes have those?
  • How do I center a div, how do I center a floating element?
  • What is the kernel of the browser? What are some common browser compatibilities? Why? What’s the solution? What’s the common hack
  • Which CSS properties have inheritance? Which ones don’t?
  • If the boxes are floating, the parent class will have no height. How to solve this problem
  • What’s the difference between visibility and display hiding?
  • The order in which pseudo-classes are written?
  • The difference between border and outline

JSvascript Interview question sorting

  • Prototype/prototype chain/constructor/instance/inheritance
  • How do I implement the new operator
  • There are several ways to implement inheritance
  • arguments
  • Data type determination
  • Scope chain, closure, scope
  • Native writing of Ajax
  • Object deep copy and shallow copy
  • Images are loaded lazily or preloaded
  • Realize the page loading progress bar
  • This keyword
  • Functional programming
  • Implement parseInt manually

VUE interview question sorting

  • What is MVVM?
  • MVVM vs. MVC? What distinguishes it from other frameworks (jquery)? Which scenarios are suitable?
  • What are the advantages of Vue?
  • Pass values between components?
  • Hop between routes
  • How to use custom components in vue.cli? Have you encountered any problems?
  • How does Vue implement on demand loading with WebPack Settings
  • Vuex interview related
  • Similarities and differences between the V-show and V-IF commands
  • How do I make CSS work only for the current component
  • What steps to introduce components into Vue?

I don’t have much space to list,Need a complete version of the 2021 front end test refined friends directly click this to getI wish you all the best!

Summary baidu interview comprehension

1. Be logical: You must be logical, otherwise even if you know the answer to this question, the interviewer will not be satisfied, if you are logical, even if the answer is not, the interviewer will give you points.

2. Unique understanding: Now the interview questions are very similar, so how to show your strengths is very important. Combine the business and your own knowledge base.

3. In-depth thinking: For each question must have in-depth thinking, or it will be difficult to enter a large company, depth to have a high in order to get good results in the interview

4. Fluency: The interview is a process of expression, some questions in mind is clear, but also fluent expression, basically if the interviewer thinks you are very fluent, when you talk about half will not let you go on, proved that has passed