Update: Thank you for your support. Recently, a blog official website came out to facilitate your system reading. There will be more content and more optimization in the future

—— The following is the text ——

I began to prepare for the interview from July to August, and finally got netease, deeply feeling the routine of advanced front-end interview. Below is a list of interview questions that I compiled and contributed to.

The companies to be interviewed are: Ali, netease, Didi, Toutiao, Youzan, Wacai, Hujiang, Ele. me, Ctrip, Ximalaya, Duiba, Wedoctor, Sitku, Baby Tree, HiKwatch, Mogujie, Kukale, Percentage Point and Sea Breeze Education.

The following is a summary of the interview questions, and the advanced series will continue to update the interview questions in depth.

Ali.

  • Used KOA2 middleware

  • Koa – body principle

  • Introduce the middleware you have written

  • Is there a Cluster involved

  • Introduce pm2

  • What happens to pm2 when the master dies

  • How to communicate with MySQL

  • React declares the cycle and its own understanding

  • How do I configure the React-router

  • Dynamic load module for routing

  • Server rendering SSR

  • This section describes the history of routes

  • This section describes the flow of Redux data flow

  • How does Redux enable communication between multiple components and manage multiple components using the same state

  • How to split state between multiple components? Each small component has its own state, and there are some common states between them that need to be maintained. How to think about this

  • Used Redux middleware

  • How to solve cross-domain problems

  • Common Http request headers

  • Mobile adaption 1px problem

  • Introduction to Flex Layout

  • In other CSS modes, set the vertical center

  • Why use transform (why not marginLeft/Top)

  • What plugin and loader have you used in Webpack

  • How are plugins in WebPack implemented

  • How does dev-server run

  • Project optimization

  • How is extraction of public files configured

  • How are security issues handled in the project

  • How to implement deep copy of this object

netease

  • What problems does Redux solve
  • How to upload a file to a breakpoint
  • Can forms cross domains
  • What is the difference between Promise and Async
  • How to handle search requests (anti-shake)
  • Search request Chinese how to request
  • Introducing the Observer mode
  • Introduces the mediator pattern
  • Where does the distinction between observer and subscription-publish apply
  • React Optimization
  • Introduce http2.0
  • How do concurrent requests work
  • How to reuse TCP connections with HTTP1.1
  • Introduce the service worker
  • This section describes position:sticky in CSS3
  • How does redux request middleware handle concurrency
  • Introduction to Promise, exception catching
  • This section describes the new position property CSS3
  • Browser event flow
  • Describes the event broker and its advantages and disadvantages
  • How to do event proxy in React component
  • The React component event broker mechanism
  • Introduce this situation
  • How does the front end manage routes
  • How can I solve the problem when ROUTING is used
  • React How to check and change data

drops

  • How to switch routes between react and router
  • The react – in the router<Link>The labels and<a>What’s the difference in labels
  • <a>What does it take to jump after the tag default event is disabled
  • React layer performance optimization
  • Overall front-end performance improvements fall into several categories
  • import { Button } from 'antd'Pack only when you packbutton, loading in modules, how to do it
  • useimportWhen,webpackrightnode_modulesWhat does a dependency do in
  • JS asynchronous solution development history and advantages and disadvantages
  • A request for an Http packet has several parts
  • cookieWhere,cookieThe things that can be done and the value of being
  • cookieandtokenAre stored inheaderInside, why kidnap only the former
  • cookieandsessionWhat are the differences
  • ReactIn theDomWhat changes have taken place inside the structure
  • ReactTextComponent, composeComponent, domComponent, difference and relationship, how to distinguish data changes when Dom structure changes, how to update, update schedule, if there are other tasks during update
  • Key is mainly used to solve what kind of problem? Why not use index index (redraw)?
  • How are asynchronous requests handled in Redux
  • Redux middleware is something that takes several arguments (Coriolization functions at both ends)
  • What exactly are the parameters at both ends of a Currie function
  • How does middleware get store and action, and what does it do with it
  • How is state injected into components and what is the process from reducer to component
  • What happens to response.send, Response. rounded, response.json in KOA? Why does the browser recognize that it is a JSON structure or HTML
  • How does koA-BodyParser parse request
  • What is the difference between loader and plugin throughout the webpack life cycle
  • This section describes the AST (Abstract Syntax Tree) Abstract Syntax Tree
  • How is data passed between Android activities
  • Android 4.0 to 6.0 WebView js compatibility changes
  • How do WebViews and native communicate
  • How to solve cross-domain, have you used Apache and other solutions

Today’s headline

  • Understanding of async and await, internal principle
  • So Promise, internal implementation
  • Remove the floating
  • Location problem (absolute location, relative location, etc.)
  • From entering the URL to loading the page
  • Tcp3 handshake
  • Which layer does TCP belong to? (1 physical layer > 2 Data link layer > 3 Network layer (IP) > 4 Transport Layer (TCP) > 5 Application layer (HTTP)
  • Redux’s design philosophy
  • The process of accessing Redux
  • The process of binding connect
  • Connect the principle
  • Webpack introduction
  • The difference between == and ===, when do we use equality ==
  • Bind, call, apply
  • Understanding of animation
  • Introduction to prototype chain (does it solve inheritance problems?)
  • Knowledge of cross domains

Have a great

  • Linux 754 introduced
  • Bubble sort, selection sort, how to optimize bubble sort
  • What are the advantages and disadvantages of the Transform animation versus directly using left and top to change positions
  • How to determine if a linked list has a ring
  • This paper introduces the characteristics of binary search tree
  • Introduce temporary dead zones
  • How are maps in ES6 different from native objects
  • The difference between observer and publish-subscribe
  • React Asynchronous rendering concepts and introduction to Time Slicing and Suspense
  • 16.X declares cycle changes
  • 16. In which lifecycle should props be processed after changes in X
  • Introduction to pure functions
  • Front-end performance optimization
  • PureComponent is different from FunctionComponent
  • Introduce JSX
  • How to adapt RN to Android and IOS
  • Why RN can be drawn as a native component in a native (bundle.js)
  • Introducing the virtual DOM
  • How to design a localStorage to ensure the effectiveness of data
  • Promise.all()
  • Introduces advanced components
  • Sum (2, 3) implements the effect of sum(2)(3)
  • React Performance Optimization
  • How do two objects compare

Dig the goods

  • The prototype of the JS
  • Variable scope chain
  • Call, apply, bind
  • The difference between anti-shake and throttling
  • This section describes various asynchronous schemes
  • React lifecycle
  • Introduction of Fiber
  • Front-end performance optimization
  • This section describes DOM tree comparison
  • The function of keys in React
  • How to design a state tree
  • This section describes the CSS and XSRF
  • HTTP cache control
  • How are data structures applied in a project
  • What capabilities does Native provide to RN
  • How to do engineering optimization
  • shouldComponentUpdateWhat problem is it to solve
  • How to solve the problem that the props level is too deep
  • How does the front end do unit testing
  • Webpack life cycle
  • The whole process of webpack packaging
  • The commonly used plugins
  • How do I manage pM2 processes? How do I handle a process failure
  • How to manage processes without PM2

hj

  • This section describes cross-domain browser
  • How to solve cross-domain problems
  • How does the JSONP solution need the server to cooperate
  • What to set up when Ajax occurs across domains (front end)
  • The process from initiation to formal success of the request after adding CORS
  • How to Defend against XSRF cross-domain attacks
  • What do you notice when you use Async
  • Async has multiple await requests. How can we optimize the request?
  • What’s the difference between a Promise and Async when it fails
  • Redux solves a problem in state management that React itself cannot solve
  • Did Redux do any packaging
  • React Life cycle: Common life cycle
  • What does the corresponding life cycle do
  • In which lifecycle should performance problems be solved
  • How to optimize performance (load components asynchronously…)
  • What details can be optimized for writing React
  • React’s event mechanism (binding an event to a component)
  • What are the main problems solved by event broker
  • Which design patterns are used in front-end development
  • Which features in React/Redux use which design patterns
  • There are several types of JS variables. What are the differences
  • JS garbage collection mechanism is what, which is commonly used, how to deal with
  • How to organize CSS (Webpack)

Hungry?

  • Small procedure inside open page how many
  • How do React child and parent components transfer values
  • How to Emit the Emit event and what needs to be introduced
  • React advanced components. What are the differences between React advanced components and regular components
  • React creates an array of objects. Each child object contains an ID and a name. How do you render all names
  • In which life cycle
  • Some of the names do not exist, get through the asynchronous interface, how to do
  • What is the key value for rendering? Can I use index? Id or index
  • How does Webpack match sASS? Which loaders are needed
  • What loaders are required for the CSS
  • How to configure js, CSS, AND HTML to be packaged separately into a file
  • Div vertically and horizontally centered (Flex, absolute positioning)
  • Two blocks of elements, one left and one right, spaced 10 pixels apart
  • Fixed up and down, middle scroll layout how to achieve
  • [1, 2, 3, 4, 5] becomes [1, 2, 3, a, b, 5]
  • Take the maximum value of the array (ES5, ES6)
  • Difference between Apply and call
  • What is the difference between ES5 and ES6
  • What is the difference between some, every, find, filter, map, and forEach
  • The array above is randomly evaluated, returning a different value each time
  • How do I find random numbers from 0 to 5, 95 to 99
  • How to bind events with 10,000 buttons on a page
  • How to tell if it is button
  • Generate 10,000 buttons on the page, and bind events, how to do (JS native manipulation DOM)
  • What is the index of the loop binding? Why? How to solve it
  • The page has an input tag and a P tag. If you change the input tag, the P tag will change
  • Which event to listen for input and when to fire

ctrip

  • Write two algorithmic problems by hand
  • React, do not encounter some pits
  • What you think about closures, why closures
  • Hand-written array deduplication function
  • Handwriting array flattening function
  • Introduce the purpose and nature of promises
  • What’s the difference between Promise and Callback
  • React lifecycle

The Himalayan

  • New ES6 features
  • Introduction to Promise
  • Promise has several states
  • A little bit about closures
  • React lifecycle
  • What is the trigger condition componentWillReceiveProps
  • Act 16.3 Changes to the life cycle
  • This section describes the React Filber architecture
  • Draw the Filber render tree
  • This section describes React advanced components
  • How do parent and child components communicate with each other
  • How does Redux implement attribute passing
  • The React – the Router version number
  • Website SEO how to deal with
  • This section describes the HTTP status code
  • What are 403, 301, 302
  • Cache-relevant HTTP request headers
  • Introduce the HTTPS
  • How can HTTPS establish a secure channel
  • Front-end performance Optimization (JS native and React)
  • What improvements have been made to the user experience
  • What do you know about PWA
  • What do you know about safety
  • This section describes the principles of digital signatures
  • What schemes are used for communication between the front and back ends
  • RESTful Method
  • Cross domain
  • Where is access-Control-allow-Origin configured on the server
  • How to solve CSRF cross-site attack
  • How to combine front-end and back-end

Against the!

  • What’s the difference between localStorage and cookie
  • What are the CSS selectors
  • The box model, and the difference between the standard case and IE
  • How to achieve high adaptive
  • The prototype and- the proto -The difference between
  • _constructWhat is the
  • newHow is that done
  • The essence of promise, its strengths and weaknesses
  • How to adapt H5 mobile phones
  • rem,flexDifference (root EM)
  • emandpxThe difference between
  • React declaration cycle
  • How to remove # from URL
  • What is the difference between a Redux state manager and a variable mounted in a Window
  • Advantages and disadvantages of Webpack and gulp
  • How to implement asynchronous loading
  • How to implement modular packaging (Multi-entry)
  • Front-end performance optimization (1JS CSS; 2 pictures; 3 Cache preloading; 4 SSR; 5 Loading multiple domain names; 6 Load Balancing)
  • Maximum number of concurrent requests (6)
  • Why base64 can improve performance, disadvantages
  • Webp is an image file format
  • Introduce koa2
  • How does a Promise come true
  • Asynchronous request, low version Fetch How low version adaptation
  • How does Ajax handle cross-domains
  • How to set CORS
  • Why does JSONP not support the POST method
  • Introduction to the Same Origin Policy
  • Some components used by React
  • Introduce Immuable
  • Introduce the principle of redux process
  • Introducing the prototype chain
  • How to inherit

Micro medical

  • Introduces JS data types, the difference between basic data types and reference data types
  • Is Array type Object
  • Where do data types exist
  • Var a = {name: "front-end development "}; var b = a; a = nullSo what does B output
  • var a = {b: 1}Where to store it
  • var a = {b: {c: 1}}Where to store it
  • The difference between stack and heap
  • Difference between stack and heap when garbage collection
  • There are 100,000 elements in the array, and how long it takes to fetch the first element and the 100,000th element
  • How are stacks and heaps stored
  • Closures and why aren’t they cleared
  • Closure usage scenarios
  • How to implement asynchronous JS
  • Asynchronize the entire execution cycle
  • Three states of Promise
  • How to implement Async/Await
  • The difference between a Promise and a setTimeout
  • Why does JS distinguish between microtasks and macro tasks
  • Whether the Promise constructor executes synchronously or asynchronously, then
  • The difference between publish-subscribe and observer patterns
  • JS execution process is divided into what stages
  • Difference between lexical scope and this
  • How do you normally do inheritance
  • Deep copy and shallow copy
  • Implementation principle of loadsh deep copy
  • In the ES6letHow is block scope implemented
  • In the ReactsetStateWhat happened
  • setStateWhy is the default asynchronous
  • setStateWhen is it synchronized
  • Why there are so many Native (RN) frameworks (virtual DOM) after the emergence of the three major frameworks
  • What does the virtual DOM mainly do
  • What is the virtual DOM itself (JS object)
  • What is 304
  • How is the Hash code generated during packaging
  • How can I avoid the same situation with random values
  • Do any customization when building with Webpack
  • What does Webpack do
  • A, B two buttons, click ABA, return order may be BAA, how to ensure aba (promise.then)
  • nodeIs interface forwarding optimized
  • nodeHow to ensure stability, smooth degradation, restart, etc.
  • RN is hot loaded
  • RN encountered compatibility issues
  • How does AN RN implement a native component
  • What’s the difference between RN mixing native and native mixing RN
  • What is a one-page project
  • Complex business scenarios encountered
  • Promise.all implementation principle

Temple library

  • Introduce the features, advantages and disadvantages of Promise
  • Introduce Redux
  • How does RN work on both Android and IOS
  • How does RN call native functions
  • Introduce the disadvantages of RN
  • This section describes the sorting algorithm and the principle of fast sorting
  • The difference between heap and stack
  • Introduce the closure
  • What is the core of closures
  • The five-tier model of the network
  • Difference between HTTP and HTTPS
  • HTTPS encryption process
  • This section describes SSL and TLS
  • Introducing DNS Resolution
  • JS inheritance method
  • Introduction to Garbage Collection
  • What problem does a cookie reference solve
  • Difference between cookie and localStorage
  • How to solve cross-domain problems
  • Front-end performance optimization

The baby tree

  • How to organize common components when drawing using Canvas
  • What’s the difference between formData and native Ajax
  • So form submission, how does it relate to formData
  • This section describes the redux access process
  • What’s the difference between RudUX and global management (data control, data response)
  • RN and native communication
  • How is the MVP presentation organized
  • Introducing asynchronous solutions
  • How does promise implement then processing
  • Koa2 Middleware principles
  • Common Middleware
  • How does the server do unified state handling
  • How do you optimize relative path references
  • Node file lookup priority
  • What is the difference between NPM2 and NPM3 +

hikvision

  • Knex Connects to the database in response to a callback
  • Introducing asynchronous solutions
  • How do I handle exception catching
  • How does the project manage modules
  • Front-end performance optimization
  • JS inheritance scheme
  • How do I determine if a variable is an array
  • How do I swap variables A and B
  • Event delegation
  • multiple
  • The Dom structure generated by the tag is an array of classes
  • Class array and array difference
  • How does an array of dom classes turn into an array
  • This section describes single-page applications and multi-page applications
  • Redux state tree management
  • This section describes the apis of LocalStorage

Mushroom street

  • Semantic understanding of HTML
  • <b>and<strong>The difference between
  • Understanding closures
  • Closure usage scenarios in engineering
  • Introduce this and the prototype
  • The biggest benefit of using prototypes
  • React Design
  • Why does the virtual DOM perform better than the real DOM
  • React Common communication mode
  • Redux’s overall workflow
  • The difference between redux and global objects
  • Redux data backtracking design idea
  • Actual scenarios in singleton, factory, observer projects
  • The use of trees in the project and understanding
  • Work to harvest

Cool knorr

  • React lifecycle
  • React Performance Optimization
  • Why does adding native events leak memory without removing them
  • Where else can memory leak
  • SetInterval points to pay attention to
  • Why are timers inaccurate
  • Difference between setTimeout(1) and setTimeout(2)
  • Introduces macro and micro tasks
  • What’s the difference between implementing a promise and then
  • Introduce pureComponet
  • Introduce the Function Component
  • The React data flow
  • Props and state
  • Introduce the react context
  • This section describes the differences between class and ES5 classes
  • Introduces the difference between arrow functions and ordinary functions
  • Introduce the defineProperty method. When do you need it
  • for.. In and object.keys
  • Describes closures and their usage scenarios
  • Use scenarios using closure privilege functions
  • What’s the difference between get and Post

Percentage points

  • The difference between React15/16. X
  • What does rerendering render do
  • Which methods trigger React rerender
  • What is the difference between the lifecycle of the updates triggered by state and props
  • SetState is synchronous or asynchronous
  • Understanding stateless components
  • Describes the Redux workflow
  • This section describes ES6 functions
  • Let, const, and var
  • Difference between shallow copy and deep copy
  • Introduces the arrow function this
  • Introduce Promise and then
  • Introduction to Quicksort
  • Algorithm: the first K largest elements

Sea breeze education

  • React, its pros and cons

  • How to solve the problems encountered in the process of using

  • What is the philosophy of React (functional programming for page rendering)

  • What paradigm language is JS (Object-oriented or functional programming)

  • Koa principle, why koA (Express vs. KOA)

  • Koa middleware used

  • Syntax used in ES6

  • Promise and async/await and callback

  • Does Promise address asynchrony (where the Promise chain is really powerful)

  • The difference between a Promise and a setTimeout (Event Loop)

  • The difference between a process and a thread (a node instance is a process, a node is a single thread, asynchronous through an event loop

    )

  • This section describes DFS depth-first

  • Introduce the observer mode

  • The data structure used in observer mode (no order, a list)

communication

My Github link is as follows. Welcome to Star

Github.com/yygmind/blo…

My name is Mu Yiyang, a senior front-end engineer of netease. I will focus on one front-end interview every week. Next, let me take you into the world of advanced front-end, on the way to progress, mutual encouragement!