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
Promise
How do you implement chain callsPromise.then
- implementation
Promise2
在Promise1
After the callasync await
Promise.all
for... in
和for... of
The difference betweenfor... in
Iterate over the Key name and convert it to a string,for... of
Iterating over key valuesfor... in
Statement iterates through an object’s own, inherited, enumerable, non-symbol properties in any orderfor... in
Better for traversing objects,for... of
More 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 paper
Set
和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
Set
What 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 respectively
CSS, JS, React
Animate: 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 know
CSS
The final performance is divided into the following four steps:Recalculate Style
->Layout
->Paint Setup and Paint
->Composite Layers
That is, find and calculate the style -> Layout -> draw -> composition layers. - Due to the
transform
Is located in theComposite Layers
Layer, andwidth
,left
,margin
And so on are located atLayout
Layer,Layout
A change in the layer must resultPaint Setup and Paint
->Composite Layers
So relatively speaking usetransform
The animation effect achieved is certainly better thanleft
These are more fluid. - Browsers also target
transform
Etc. GPU acceleration is enabled.
- There’s a performance optimization aspect to it, and first I need to know
- JS:
requestAnimationFrame / setTimeout
- React: Need to obtain
Ref
- CSS:
- Performance optimization for infinite scrolling lists
- Set a viewable area, beyond the viewable area, delete directly
Dom
- Set a viewable area, beyond the viewable area, delete directly
- Typescript
Interface (interface)
andType (type alias)
The difference between- Can inherit from each other (
&, extnds
) interface
Ability to declare mergetype
You can declare basic type aliases, union types, tuples, and so ontype DiffName = string;
type Pet = Dog | Cat
- Can inherit from each other (
TS class
Relative to theES6 class
The development ofreadOnly
Read-only propertyabstract
Abstract 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
- Basic definitions and applications
- Node
-
Talk about common modules
path
fs
stream
http
util
-
Implement EventEmitter, and application scenarios
- Basic methods:
emit
on
NodeJS
Is an asynchronous event-driven architecture that requires an event scheduling centerstream
fs
net
http
inheritEventEmitter
- Basic methods:
-
The difference between publish-subscribe and observer
Publish-subscribe
Pattern, publishers and subscribers do not need to know each other, there are message queuesThe observer
Patterns are mainly implemented synchronously,Publish-subscribe
Patterns are primarily implemented asynchronouslySubject
retainedObservers
The record of
-
How to Implement scaffolding
- Idea: Through
process.argv
Obtain parameters and download GithubThe template
, modifyContent of the template
- Release:
npm login
npm publish
- Idea: Through
-
- React
- introduce
Redux
Principles and processes of - introduce
Mobx
How to realize data monitoringproxy
Redux
Why replace the data source directly instead of modifying itredux
Determine if an object is the same object by comparing its references, and if so, continue using the old onestate
So there won’t be any change
- Read about
immutable.js
吗 Antd
The principle of loading on demandimport { 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
- introduce
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 about
HTTP
OSI
Seven 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
- written
loader
和plugin
吗 tree shaking
splitChunks
- written
React
How is on-demand loading implemented- through
webpack
Dynamic imports React.lazy React.suspense
- through
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
-
React
How andRedux
In combination with- through
react-redux
的connect
Higher-order functions
- through
Redux
的stroe
Stored in theReact
whereContext
- What about the first screen load time
DomContentedLoaded
DomContentedLoaded
Whether andRaect
Life cyclerender
synchronous- Out of sync
- Routing authentication
- Open the two
tab
Page, one of themtab
Page changed permissions, how do I keep anothertab
Page permission synchronization
- Open the two
- Caching mechanisms
- Brief introduction to strong and negotiated caches
- Strong cache
Expires
Represents an absolute time before which the client is not allowed to check.Cache-Control
public
The client andCDN
Proxy servers can cacheprivate
The client can cachemax-age=60
Cached content will expire after 60 secondsno-cache
Each request needs to go through the server’s negotiation cacheno-store
Disable caching
- The return value
200(from disk/memory cache)
- Characteristics of the
- Don’t send
HTTP
request
- Don’t send
- Negotiate the cache
If-Modified-Since/Last-modified
When 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/Etag
A hash string generated from the entity content
- The return value
304 Not Modified
- Characteristics of the
- Access the server
- Strong cache
- 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 make
304
Carried inresponse
- Placed in
response headers
- Placed in
SPA
The app was packagedindex.html
Is there a cache
- Brief introduction to strong and negotiated caches
- CDN
- What is the
CDN
CDN
What resources are deployedCDN
How to Update resources
- What is the
- The mobile terminal
- Model adaptation
JS + REM
VW + VH
- How to determine
DRP
- Browser:
window.devicePixelRatio
- CSS:
@media -webkit-min-device-pixel-ratio
- Browser:
- Model adaptation
The science and technology should be
A phone interview
React
Life cycle of- V16.3 before
- After v16.3, introduce
Fiber
architecture
- The paper
Redux
Workflow of Redux
How do you implement asynchronous operationsRedux-thunk
Is a function that allows you to write a function that returns one instead of oneaction
的actions creators
Middleware. If one of the conditions is met,thunk
Can be used to delayaction
To distribute (dispatch
), which can handle asynchronyaction
To distribute (dispatch
).
Mobx
How do I convert an observable to a native arrayslice()
One side
- Tell me about you
Koa
Understanding the Onion model - How to speed up the
webpack
Construction speed of- DllPlugin, HappyPack
- What is a type declaration file (.d.ts)
- You are in
TS
Which syntax is used in- A decorator
Decorators
- 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
typeof
The operator- interface
- The enumeration
- Mapping types (ReadOnly, Partial)
- The index sign
- Classes and their inheritance
- A decorator
Second interview
- What are your personal strengths
- Enter a
URL
What 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 paper
OSI
Seven layer model - The paper
HTTPS
What 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
- list
CSS
The priority of the selector- ! Important > id > class, pseudo-class, attribute > element, pseudo-element
- Inline Style > Inline Style > Inline Style
- introduce
position
Attributes of- Don’t forget to
static
sticky
- Don’t forget to
- Write out the
display:none
和visibility:hidden
The difference between new Boolean(false) && true
Return 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 paper
React Hooks
- What is the
Virturl DOM
React
It was officially brought to us in version 16.8Hooks API
. What is theHooks
? In short, yesFunctional componentSo we don’t have to writeclass
Form components can also be usedstate
And a few othersReact
Features.
- The paper
Diff
Algorithm implementation process ES6 class
的static
Is the property on the constructor prototype- No, on the constructor itself
- Three handshakes, four waves
ACK
: Confirm that the serial number is validSYN
: Initiates a new connectionFIN
: 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 about
PV / UV
And 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 header
referrer
field
- Through the request header
-
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