preface

I have been busy looking for a job recently, looking for a company with good technology and good atmosphere. Most of the time may indeed be on the road. There is really no time to do some technology precipitation and new technology learning. Here is a record of the recent problems encountered, interested partners can consolidate their own foundation according to these. Wish all small partners can blow rockets in gold three silver, screw.

The CSS part

BFC

BFC is a concept of CSS layout, which is an environment in which elements do not affect the elements of the takeaway

Flex Flex layout

A sex box is a one-dimensional layout method for laying out elements in rows or columns. Elements can expand to fill extra space, shrink to fit smaller Spaces, and work on any element. If an element uses flex flex layout (hereafter referred to as flex layout), it will form a BFC inside

Commonly used attributes

  • Display:flex Enable elastic layout
  • align-items: center The text centered
  • justify-content: space-between Fixed left and right, adaptive in the middle
  • justify-content: end The box is on the right
  • flx-wrap: wrap Allow a newline
  • flex-flow:column Change direction

Understanding of media queries

A media query consists of an optional media type and zero or more expressions that limit the range of stylesheets using media capabilities, such as width, height, and color. Media query, added from CSS3, allows the presentation of content to be tailored to a specific range of output devices, without changing the content itself, suitable for Web pages to respond to different types of devices.

Simply put, it is based on different devices, dynamic change font size and other styles, to ensure user experience. Resetting the browser also rerenders the page based on the type of device and the height of the screen.

JS part

What are the data types of JS? What are the differences

Basic data types (raw data types)

  • string
  • number
  • null
  • undefined
  • boolean

ES6 new

  • symbol

ES10 new

  • biglnt

Reference data type

  • object
  • fn
  • Array

The difference between

Basic data types are stored in the stack, occupying small volume and fixed size. Frequently used reference data types are stored in the heap, occupying large space and not fixed size. If reference data types are stored in the stack, performance problems will occur.

Advanced thinking

What is the use of the new symbol type in ES6? Why do we need to add the symbol type?

A: Using the Symbol type is a good way to resolve naming conflicts between user data and program data. For example, if we declare an object globally, there may be two js files to add attributes to the global object. In this case, there will be the same key situation. If the symbol type is used, this problem can be avoided.

What are the different ways in which Js checks the type of a value

  • typeof

  • instanceof

  • constructor

  • Object.prototype.toString.call()

Typeof way

Typeof can only be used to verify basic data types. For reference data types, the return value is always Object, and Typeof (NULL) is also object

Consider: Why does Typeof (NULL) return Object

A: In the early JS layers, objects started with 0, and the binary of null was exactly 000, so this caused this bug

Instanceof way

The return value of instanceof is a Boolean value. Instanceof can only correctly determine the reference data type, not the basic data type

Consider: Why can’t Instanceof determine basic data types

A: Instanceof determines whether an object is in its stereotype chain. Primitive data types do not have stereotype chains, so they cannot be correctly judged. Using instanceof to determine reference data types makes sense because of the instanceof determination mechanism

The constructor method

It is possible to determine the base and reference data types of the JS, but there is a fatal flaw. Using constructor to determine null or undefined will result in code errors, which will directly cause the code to fail to execute.

Object. The prototype. ToString. Call () method

Using the prototype method (toString()) on an object for data type determination, you can correctly determine the base data type and reference data type.

Null and undefined

Undefined means undefined and is usually used as an initial value for a basic data type

Null means an empty object and is usually used for the initial value of object

Have you ever encountered floating-point accuracy problems? How is it solved?

The problem with floating-point accuracy is that computers store data in binary form, which in the case of JS is the initial decimal of variables, which are converted to binary, which are then added, subtracted, and multiplied, and finally converted to decimal. In binary, partial integers are actually infinite non-repeating decimals, which can lead to problems with floating-point accuracy.

Solution:

  • ToFixed () method

  • Introduce mature third party library: big.js etc

What is the difference between == and ===?

== Converts the two values being compared to the same data type.

=== Type and value checks the two values being compared. The checks are more rigorous

What is the difference between let const var

  • Block-level scope: Let const has block-level scope. Var has no block-level scope

  • Variable promotion: Var can be used before it is declared. Const let does not have variable promotion

  • Duplicate declarations: Var can duplicate declarations of a variable, and the last one overwrites the previous one.

  • A variable declared by var let may have no initial value, but a variable declared by const must have an initial value

  • A variable may not be used until it has been declared. It is syntactically called a temporary dead zone, but var does

New an arrow function, what happens

  • Create an object

  • Copy the scope to this object

  • Change the this point of the created object

  • Return a new object

The difference between an arrow function and a normal function

  • Arrow functions do not have their own this. If we use this in arrow functions, we will refer to this in the upper scope

  • The arrow function has no prototype object of its own

  • The arrow function is written more concisely

  • Arrow functions have no arguments of their own

Do you usually use the extension operator?

The extension operator is a new syntactic feature in ES6. We often use the extension operator to merge objects and arrays. Depending on the usage scenario, we can also use the extension operator to deeply copy an object or an array

What is the difference between a deep copy and a shallow copy?

Deep copy creates an extra heap in memory to store new data, and changes to new data do not affect the original data.

The shallow copy only copies the storage address of the original data. After the data is changed, the original data will also be affected.

What is your understanding of deconstruction

Destruct is a new syntax in ES6. We usually use destruct to decompose a variable from an object. If the variable does not exist in the object, it will return undefined, and if it does, it will return the correct value

For example, React 16.8’s hook feature allows arrays to be deconstructed based on indexes rather than variable names.

Let’s talk about the common way arrays are used

  • Pop () removes the last item

  • Map () loops an array that has a return value and does not affect the original array

  • Filter () filters the array, has a return value, does not affect the original array

  • Shift () deletes the last item

  • Unshift () removes the first item

  • ForEach loop array that affects the original array

  • Splice cuts an array

Can you explain your understanding of forEath and map

ForEach loops are not allowed to be broken. Many Promise loops are created at the bottom. If you want to force a break, you can use a try catch to break the loop

The map loop does not affect the original array. At the bottom of a map is a nested for loop.

In fact, the use of forEath and map is mainly based on the scenario.

Say what you understand about Promise, the difference between Promise and async await

Promise is a solution to asynchrony. You can use the. Then method to get the result of a successful execution and the Rejected method to catch an error.

Promise.all() will wait for all asynchronous executions to finish before returning

Promise.race() an end-of-execution opportunity returns the result

Promise and async await are both JS solutions to asynchrony, and in the case of Promise, if we deal with asynchrony too often within a logic, we can lead to callback hell. And promises aren’t written succinctly enough. Async await for us, in code methods, is no callback hell and the code is much cleaner. And async await can catch an error with a try catch.

Can you explain your understanding of “for of” and “for in”

For of is a new loop method in ES6. For of can loop not only objects but also arrays. For in traverses an object.

For of iterates over the object’s key value, and for in iterates over the object’s key name.

How do you usually use forEach to delete an array?

Arrays before ES6, it is common to loop through an array, removing the same elements.

ES6 launched a new Set mode, we can use the Set mode to achieve a heavy purpose. The Set returns a Set object, which can use forEach, but not map. To use map, we need to convert it to an Array using array. from(arr)

Tell me about your understanding of the prototype chain

The prototype chain is basically divided into three parts

  • The constructor

  • The instance

  • A prototype object

The constructor new returns an instance whose proto points to the prototype object, whose prototype object points to the constructor.

Each instance can use Proto to look up its prototype object until the null prototype chain is found

What is a closure

Closures are functions that have access to variables in the scope of another function

Closures can cause a memory leak, and a variable called through the loop is not recognized and reclaimed by the browser’s GC algorithm, requiring the developer to manually set the variable to NULL before memory can be freed.

What is the difference between call() apply() bind()

Call () apply() bind() can either redirect this, but call() apply() will do so immediately.

Call () takes a single entry

The input method for apply() is an array

Network Protocol section

HTTP what is the difference between HTTPS

HTTP is a plaintext transmission without security guarantee. Both the server and client cannot verify their identities

HTTPS uses THE SECURE Sockets Layer (SSL) encryption mode. The server and server can identify each other, ensuring security. However, decryption and encryption are required, which affects performance to some extent.

Using HTTPS has certain technical requirements, which cannot be met by ordinary personal websites.

The HTTP port number is 80 and the HTTPS port number is 443.

What is the difference between HTTP1.1 and HTTP2

Http1.1 adds piped transportation, where requests no longer need to be sent in a queue and can be sent together, improving performance. Increased the cache mechanism, through the judgment of the request, to achieve strong cache or negotiated cache. The keep-alive mechanism is added to ensure a long connection between the server and the client, optimizing the interaction between the server and the client.

Http2 is a binary protocol that adds header compression, multiplexing,

Three handshakes, four waves. Why three handshakes, not two? Could it be four times?

Three-way handshake

The process of establishing a connection between a client and a server

  • The client initiates a SYN request, changes itself to SYN-sent, and sends seq = X

  • After receiving the request from the client, the server returns seq = y that the server status changes to SYN-revd

  • After receiving the return value, the client enters the ESTABLISHED state and completes the connection

Four times to wave

  • The client sends a FIN packet and sends seq = x to the server to enter fin-WaIT-1 state

  • The server receives the packet and sends an ACK. The client receives the ACK and enters the FIN-WaIT-2 state

  • The server processes the data and sends the data to the client

  • After receiving the data, the client sends an ACK to the server for confirmation

The three-way handshake is a process in which the server and client verify their identities. The server cannot confirm the identity of the client. Three times to identify both parties, four times not necessary.

What is DNS? Do you know anything about DNS?

DNS is the domain name system, an application layer protocol. We usually resolve the domain name through DNS to obtain the IP, and send data requests to the server according to the IP.

DNS is also a distributed database, because of the DNS cache mechanism, we can quickly know the IP address corresponding to the domain name, so as to obtain connections faster.

Do you know anything about Nginx? I see you have a personal blog on your resume, can you tell me what you understand nginx to be?

Nginx has three features: forward proxy, reverse proxy, and load balancing.

The reverse proxy

Reverse proxy is actually one of the things that Nginx does the most. Translate the request internally and send it to the corresponding server, or the same server, with different port numbers. The IP address of the server is not easy to be captured.


server {  
	listen       80;                                                         
	server_name  localhost;                                               
	client_max_body_size 1024M;
  
	location / {
	  proxy_pass http:'Proxy address'; proxy_set_header Host $host:$server_port; }}Copy the code

Load balancing

Load balancing is also one of the most commonly used functions of Nginx. If there are too many requests, different requests are sent to different servers, to avoid the server processing requests too slow, resulting in response data problems.

Do you know CDN? Said the CDN

CDN is an intelligent virtual network built on the basis of the existing network. It relies on edge servers deployed in various places to enable users to obtain the content they need nearby, reduce network congestion, and improve user access response speed and hit ratio.

What happens when the browser enters a URL

  • DNS translates domain names into IP addresses

  • A three-way handshake is performed to establish a connection between the client and the server.

  • Sending an Http request

  • Four waves to get the data

  • Parsing HTML

  • To render the page

  • disconnect

The React part

What is React and why do you use React

React is the JS UI programming library that provides developers with a functional programming approach that makes it more comfortable to use. React provides a lower limit for browser performance and can be used anywhere at once

React is widely used in foreign countries. Some large enterprise applications in China also use React, while some small and medium-sized enterprise applications in China use Vue.

Can you talk about the React event mechanism

React’s event mechanism is a composite event. For the browser, we in the JS code, each set an event monitoring, the browser will tell a browser object for processing, if too many listen for an event, the browser will tell more browser object for listening, actually will impact on the performance of the browser, the React is will this event by event delegation, Mount all of them to the parent element and fire events from the parent element. That’s why, when we use the input component, or when we click on the component, we go to e.Target to get the trigger source, right

Why use VDOM? Does VDOM have better performance than DOM?

This actually needs to distinguish the scene, for example, we just change a tag in this article, we use VDOM operation actually performance is not better than direct operation DOM, because there is a layer of VDOM transformation in the middle, but why we use VDOM, because VDOM centralized browser operations into JS, Browser computations are slow. The VDOM gives us a lower limit of performance

Talk about common hooks

UseState, useEffect, useMeno,

How does the useEffect simulate the life cycle

  • The second argument is passed to the null array componentDidMount

  • The second parameter passes the dependency componentDidUpdata

  • UseEffect returns a method componentWillUnmount

React Hook: How do you React Hook

The problem of changing a value using useState and not getting the latest value is usually solved using useRef

Do you know JSX?

The React. CreateElement method is used to convert JSX to Babel. The first parameter is the category of the tag, the second parameter is the Props of the component, and the third parameter is the child node

React updates are the best

Juejin. Cn/post / 707337…

React is not recommended for looping arraysindexAs akey.

When the array changes, the index changes, so the index is used as the key. When Diff is performed inside React, the complexity increases. React Diff performs a series of operations on these marked elements to ensure that unnecessary elements are rendered and to improve performance. Keys need to be unique among sibling elements

Advantages of the virtual DOM over the real DOM

For some scenarios, the virtual DOM is not necessarily more efficient than the real DOM, such as modifying the text of a button or rendering for the first time. Because React has more operations at the virtual DOM level, the efficiency is also slower than the real DOM. However, the virtual DOM provides a lower limit of performance, ensuring the performance of the page when updating and rendering. The advantage of the virtual DOM is that it provides a way for a functional UI to become efficient at the same time

Afterword.

If a company is willing to give me a chance, I can add my brother’s wechat account. The Schema form and integrated form I am working on now can form a set of specifications. It also reduces development time by 40 percent and improves efficiency. Thank you very much