The coordinate is Hangzhou. In the first half of this year, I successively found some front-end internships, and recorded the interviews (only the technical ones, not the HR ones) here for everyone to share. I only remember some of the problems, sorry for that. Now we are preparing autumn recruit, we come on together!

Graffiti smart

A phone interview

  • PromiseHow do you implement chain calls
    • Promise.then
  • implementationPromise2 在 Promise1After the call
    • async await
    • Promise.all
  • for... in 和 for... ofThe difference between
    • for... inIterate over the Key name and convert it to a string,for... ofIterating over key values
    • for... inStatement iterates through an object’s own, inherited, enumerable, non-symbol properties in any order
    • for... inBetter for traversing objects,for... ofMore suitable for traversing groups of numbers.
    •    for (let i in [1.2.3]) {
    console.log(typeof i); // string The array subscript is converted to a string
    console.log(i); / / '1', '2', '3'
  }
  
  var triangle = { a: 1.b: 2.c: 3 };
  
  function ColoredTriangle() {
    this.color = 'red';
  }
  
  ColoredTriangle.prototype = triangle;
  
  var obj = new ColoredTriangle();
  
  for (var prop in obj) {
    if (obj.hasOwnProperty(prop)) { // What happens if you go to hasOwnProperty()?
      console.log(`obj.${prop} = ${obj[prop]}`); // obj.color = red}}Copy the code
  • The paperSet 和 Map
    • Map objects hold key-value pairs. Any value (object or raw value) can be a key or a value.
    • The Set object allows you to store a unique value of any type
  • SetWhat are the traversal methods 
    •   Set.prototype.values()
  Set.prototype.keys() / / is equal to the Set. The prototype. Values ()
  Set.prototype.entries() // [value, value] array
  Set.prototype.[Symbol.iterator]()
  // All of these return a new iterator object
  Set.prototype.forEach()
  for. ofCopy the code
  • Deconstruct the case of assignment failure 
     let [x = 1] = [undefined];
 x / / 1
 let [x = 1] = [null]; 
 x // null
 // Note that ES6 internally uses the strict equality operator (===) to determine whether a position has a value. Therefore, the default value is valid only if an array member is strictly equal to undefined.
Copy the code

One side

  • Please use respectivelyCSS, JS, ReactAnimate: Blocks move from the bottom left corner of the screen to the top right corner
    • CSS:translate + animation position + top/left + transition
      • There’s a performance optimization aspect to it, and first I need to knowCSSThe final performance is divided into the following four steps:Recalculate Style -> Layout -> Paint Setup and Paint -> Composite LayersThat is, find and calculate the style -> Layout -> draw -> composition layers.
      • Due to thetransformIs located in theComposite LayersLayer, andwidth,left,marginAnd so on are located atLayoutLayer,LayoutA change in the layer must resultPaint Setup and Paint -> Composite LayersSo relatively speaking usetransformThe animation effect achieved is certainly better thanleftThese are more fluid.
      • Browsers also targettransformEtc. GPU acceleration is enabled.
    • JS:requestAnimationFrame / setTimeout
    • React: Need to obtainRef
  • Performance optimization for infinite scrolling lists
    • Set a viewable area, beyond the viewable area, delete directlyDom
  • Typescript
    • Interface (interface)andType (type alias)The difference between
      • Can inherit from each other (&, extnds)
      • interfaceAbility to declare merge
      • typeYou can declare basic type aliases, union types, tuples, and so on
        • type DiffName = string;
        • type Pet = Dog | Cat
    • TS classRelative to theES6 classThe development of
      • readOnlyRead-only property
      • abstractAbstract classes contain abstract methods that must be implemented in subclasses and used by subclassesextends
      • private protected
  • closure
    • Basic definitions and applications
      • Closures are functions that have access to variables in the scope of another function
      • Can ensure that some variables are not recycled, continuous reference
      • Privatize variables, method encapsulation
      • Simulate block-level scopes
    • Describes the application scenarios of anti-shake and throttling
  • Node

    • Talk about common modules

      • path fs stream http util

    • Implement EventEmitter, and application scenarios

      • Basic methods:emit on
      • NodeJSIs an asynchronous event-driven architecture that requires an event scheduling center
      • stream fs net httpinheritEventEmitter

    • The difference between publish-subscribe and observer

      • Publish-subscribePattern, publishers and subscribers do not need to know each other, there are message queues
      • The observerPatterns are mainly implemented synchronously,Publish-subscribePatterns are primarily implemented asynchronously
      • SubjectretainedObserversThe record of

    • How to Implement scaffolding

      • Idea: Throughprocess.argvObtain parameters and download GithubThe template, modifyContent of the template
      • Release:npm login npm publish
  • React
    • introduceReduxPrinciples and processes of
    • introduceMobxHow to realize data monitoring
      • proxy
    • ReduxWhy replace the data source directly instead of modifying it
      • reduxDetermine if an object is the same object by comparing its references, and if so, continue using the old onestateSo there won’t be any change
    • Read aboutimmutable.js 吗
    • AntdThe principle of loading on demand 
      import { Button } from 'antd';
ReactDOM.render(<Button>xxxx</Button>); ↓ ↓ ↓ ↓ ↓var _button = require('antd/lib/button');
require('antd/lib/button/style');
ReactDOM.render(<_button>xxxx</_button>);
Copy the code

Second interview

  • The usual way to learn the front end
    • Books (JS elevation, JS series you don’t know, simple NodeJS…) Medium, Daniel blog, Nuggets
  • Why the front end
  • How do you solve bugs in a project
  • Talk aboutHTTP
    • OSISeven layers
    • Three handshakes and four waves
    • HTTP 和 HTTPS
    • HTTP2
    • websocket
    • message
      • Start row, head, entity
    • The cache
    • Request method
      • GET POST DELETE PUT OPTIONS HEAD CONNECT TRACE PATCH
    • Status code
    • Cross domain
    • Simple and complex requests
    • HTTP is stateless: HTTP is a stateless protocol. Stateless means that the protocol has no memory for transaction processing. The lack of state means that if the previous information is needed for subsequent processing, it must be retransmitted, which can result in an increase in the amount of data transferred per connection. On the other hand, the server responds faster when it doesn’t need the previous information.
      • cookie token
    • HTTP is media independent: this means that any type of data can be sent over HTTP as long as clients and servers know what to do with the data content. The client and server specify the appropriate MIME-type content type to use.
    • HTTP is connectionless: Connectionless means to limit processing to one request per connection. The server disconnects from the customer after processing the request and receiving the reply from the customer. In this way, transmission time can be saved.

51 credit card

Telephone interview + one interview

  • webapck
    • writtenloader 和 plugin 吗
    • tree shaking
    • splitChunks
  • ReactHow is on-demand loading implemented
    • throughwebpackDynamic imports
    • React.lazy React.suspense
  • React 的 HOC
    • The property broker
    • Rendering hijacked 
      •   const HOC = (WrappedComponent) = >
    class extends WrappedComponent {
      render() {
        if (this.props.isRender) {
          return super.render();
        } else {
          return null; }}Copy the code
  • ReactHow andReduxIn combination with
    • throughreact-redux 的 connectHigher-order functions
  • Redux 的 stroeStored in theReactwhere
    • Context
  • What about the first screen load time
    • DomContentedLoaded
    • DomContentedLoadedWhether andRaectLife cyclerendersynchronous
      • Out of sync
  • Routing authentication
    • Open the twotabPage, one of themtabPage changed permissions, how do I keep anothertabPage permission synchronization
  • Caching mechanisms
    • Brief introduction to strong and negotiated caches
      • Strong cache
        • ExpiresRepresents an absolute time before which the client is not allowed to check.
        • Cache-Control
          • publicThe client andCDNProxy servers can cache
          • privateThe client can cache
          • max-age=60Cached content will expire after 60 seconds
          • no-cacheEach request needs to go through the server’s negotiation cache
          • no-storeDisable caching
        • The return value
          • 200(from disk/memory cache)
        • Characteristics of the
          • Don’t sendHTTPrequest
      • Negotiate the cache
        • If-Modified-Since/Last-modifiedWhen the resource was last modified
          • The granularity is second, and if you change the content within milliseconds, it will not take effect
        • If-None-Match/EtagA hash string generated from the entity content
      • The return value
        • 304 Not Modified
      • Characteristics of the
        • Access the server
    • Is it up to the server to negotiate the cache
      • is
    • Does the negotiated cache return resources by the server
      • No, read from the client cache
    • How to make304Carried inresponse
      • Placed inresponse headers
    • SPAThe app was packagedindex.htmlIs there a cache
  • CDN
    • What is theCDN
    • CDNWhat resources are deployed
    • CDNHow to Update resources
  • The mobile terminal
    • Model adaptation
      • JS + REM
      • VW + VH
    • How to determineDRP
      • Browser:window.devicePixelRatio
      • CSS:@media -webkit-min-device-pixel-ratio

The science and technology should be

A phone interview

  • ReactLife cycle of
    • V16.3 before
    • After v16.3, introduceFiberarchitecture
  • The paperReduxWorkflow of
  • ReduxHow do you implement asynchronous operations
    • Redux-thunkIs a function that allows you to write a function that returns one instead of oneaction 的 actions creatorsMiddleware. If one of the conditions is met,thunkCan be used to delayactionTo distribute (dispatch), which can handle asynchronyactionTo distribute (dispatch).
  • MobxHow do I convert an observable to a native array
    • slice()

One side

  • Tell me about youKoaUnderstanding the Onion model
  • How to speed up thewebpackConstruction speed of
    • DllPlugin, HappyPack
  • What is a type declaration file (.d.ts)
  • You are inTSWhich syntax is used in
    • A decoratorDecorators
      • Constructor that points to a class
      • Applies to methods, taking instance objects, method names, and property descriptors
    • The generic
    • Type constraint (type)
    • Type Assertion (AS)
    • keyof typeofThe operator
    • interface
    • The enumeration
    • Mapping types (ReadOnly, Partial)
    • The index sign
    • Classes and their inheritance

Second interview

  • What are your personal strengths
  • Enter aURLWhat happened
  • You know anything about dynamic programming
  • Talk about time complexity and space complexity
  • What are IPv4 and IPv6 and how many IP addresses are there in the world
  • The paperOSISeven layer model
  • The paperHTTPSWhat is symmetric encryption and asymmetric encryption

Kiss the baby

The written test

First did a set of pen test questions, limited time half an hour, relatively simple, mainly investigate the basis, still remember the topic

  • listCSSThe priority of the selector
    • ! Important > id > class, pseudo-class, attribute > element, pseudo-element
    • Inline Style > Inline Style > Inline Style
  • introducepositionAttributes of
    • Don’t forget tostatic sticky
  • Write out thedisplay:none 和 visibility:hiddenThe difference between
  • new Boolean(false) && trueReturn what, and explain
  • Find the character in a string that occurs the most times by hand
  •   <script>
      alert(typeof a);
  </script>
  <script>
      function a(a) {
          a = 3;
      }
  </script>// What will happen?Copy the code

One side

  • The paperReact Hooks
  • What is theVirturl DOM
    • ReactIt was officially brought to us in version 16.8Hooks API. What is theHooks? In short, yesFunctional componentSo we don’t have to writeclassForm components can also be usedstateAnd a few othersReactFeatures.
  • The paperDiffAlgorithm implementation process
  • ES6 class 的 staticIs the property on the constructor prototype
    • No, on the constructor itself
  • Three handshakes, four waves
    • ACK: Confirm that the serial number is valid
    • SYN: Initiates a new connection
    • FIN: Releases a connection
    • The triple handshake, the main purpose of which is to ensure that the connection is duplex, is more reliable through the retransmission mechanism
    • Wave four times. When the Client sends a FIN, the Client does not send data anymore, and the Server may send data again. Therefore, ACK and FIN must be sent separately
  • How do you tell if an object is an array
    • instanceOf
    • Array.isArray()
    • Object.prototype.toString.call()

Second interview

  • Talk to you aboutPV / UVAnd how to achieve it

PV (Page View), the number of page views a visitor sees on your site in 24 hours, don’t double count UV (Unique Visitor), the number of unique visitors to your site from different IP addresses in 24 hours

  • Determine page Source

    • Through the request headerreferrerfield

  • The paper JWT

    • Header

      {
"alg": "HS256"."typ": "JWT"
}
Copy the code

    • Payload

      {
"sub": "1234567890"."name": "John Doe"."admin": true
}
Copy the code

    • Signature

      HMACSHA256(
base64UrlEncode(header) + "." +
base64UrlEncode(payload),
secret)
Copy the code

    The algorithm for stringing Header and Payload is Base64URL

    JWT as a token may be placed in a URL in some cases (such as api.example.com/?token=xxx). Base64 has three characters +, /, and =, which have special meanings in URLS and are therefore replaced: = is omitted, + is replaced with -, and/is replaced with _. This is the Base64URL algorithm.

  • Lazy loading of images, how to ensure that not loaded images occupy space

  • Career planning for the future