1) The difference between GET and POST requests

The parameters for GET are passed through the URL, and the parameters for POST are placed in the Request Body.

The parameters of GET are limited by length through the URL; post is not.

Get requests are more dangerous because they are directly exposed to the URL.

Get requests are fully logged in browser history, while POST requests are not.

A GET request can only be url encoded, while a POST request supports multiple encoding methods.

Get requests are actively cached by the browser, post requests are not, unless set manually.

In general, GET and POST are essentially TCP links, but they are applied differently due to HTTP regulations and browser/server restrictions. For get requests, the browser sends both HTTP headers and data, and the server responds with 200. For POST requests, the browser sends the header first, and the server responds with 100, continue, and the browser sends data, and the server responds with 200, which returns data. In a good network environment, there is no difference between the time of sending a packet once and the time of sending a packet twice. In a bad network environment, the TCP of sending a packet twice has great advantages in verifying the integrity of the packet.

2) What are the HTTP methods

Safe way

HTTP defines a set of methods called security methods. Both the GET and HEAD methods are considered secure, which means that HTTP requests using either the GE or HEAD methods do not generate actions. A secure method does not necessarily perform any action (at the developer’s discretion). The purpose of using a secure method is to run an HTTP application to notify the user when an unsafe method is used that might trigger an action.

The get method

Usually used to ask the server to send a resource.

The head method

The head method behaves similarly to the GET method, but the server returns only the header in the response. Does not revert back to the body of the entity. Using head, you can learn about a resource without getting it, see if an object exists by looking at the status code in the response, and test if it has been modified by looking at the header. The server developer must ensure that the header returned is exactly the same as the one returned by the GET request

Put method

In contrast to the GET method, which reads documents from the server, the PUT method writes documents to the server. Some publishing systems allow users to create Web pages and install them directly on a Web server using PUT.

Post method

The POST method was originally used to write data to the server. In fact, it’s often used to support HTML forms. The data filled in on the form is usually sent to the server, which then sends it to where it wants to go.

The trace method

The trace method is only used for diagnostics, allowing the client to see what it looks like when it finally sends the request to the server. The Trance request eventually initiates a loopback diagnosis on the destination server, and the server at the end of the trip bounces back a Trance response with the original request message it received in the response subject. This allows the client to see if and how the original message has been corrupted or modified in the response chain of all intermediate HTTP programs. Intermediate applications decide how to handle Trance requests, which cannot have a physical subject part. The entity body of the Trance response contains an exact copy of the request received by the response server.

The option method

The Option method asks the Web server to tell it what functionality it supports. You can ask the server which methods are generally supported, or which methods are supported for particular resources. Examples of requests and responses using the option method:

The request message

The OPTIONS www.cnivi.com.cn/ HTTP / 1.1

Accept-Encoding: gzip,deflate

Host: www.cnivi.com.cn

Connection: Keep-Alive

The user-agent: Apache HttpClient / 4.4.1 (Java 1.5)

The response message

HTTP / 1.1 200 OK

Server: Apache – 1.1 – / – Coyote

Allow: GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH

Content-Length: 0

Date: Thu, 09 Oct 2014 04:20:09 GMT

The delete method

All the delete method does is ask the server to delete the resource specified by the request URL. However, the client application cannot guarantee that the deletion will be performed. This is because the HTTP specification allows the server to revoke the request without notifying the client.

The lock method

Allow the user to lock a resource, for example, when it can be edited to prevent others from editing it at the same time.

Mkcol method

Allows users to create resources

The copy method

Users can copy resources on the server

Move method

Move resources on the server

3) Deconstructive assignment of ES6 variables

To extract values from arrays and objects and assign values to variables, following a pattern, is called deconstruction.

  • Destruct assignment of arrays

let[foo,[[bar],baz]]=[1,[[2],3]]; foo // 1bar // 2baz // 3

Note that an error will be reported if the right-hand side of the equals sign is not an array (or, strictly speaking, not a traversable structure).

/ / an error

let[foo]=1; let[foo]=false; let[foo]=NaN; let[foo]=undefined; let[foo]=null; let[foo]={};

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.

let[x=1]=[undefined]; x // 1let[x=1]=[null]; x // null

  • The deconstruction of objects differs from arrays in one important way. The elements of an array are arranged in order, and the value of a variable is determined by its position. The attributes of an object have no order, and variables must have the same name as the attributes to get the correct value.

let {bar,foo}={foo:”aaa”,bar:”bbb”}; foo // “aaa”bar //”bbb” let {baz}={foo:”aaa”,bar:”bbb”}; baz // undefined

  • String destruct assignment Strings can also destruct assignment. This is because at this point, the string is converted to an array-like object.

const [a, b, c, d, e]=’hello’; a // “h”b // “e”c // “l”d // “l”e // “o”

Array-like objects have a length attribute, so you can also deconstruct and assign to this attribute.

let {length: len}=’hello’; len // 5

  • Value and Boolean deconstruction Assignment, if the value and Boolean value are to the right of the equals sign, the object is converted first.

let {toString: s}=123; s===Number.prototype.toString//true let{toString:s}=true; s===Boolean.prototype.toString // true

The rule for deconstructing assignment is to turn the value to the right of the equals sign into an object whenever it is not an object or array. Undefined and NULL cannot be converted to objects, so destructuring assignments to them will result in an error.

let{prop:x}=undefined; // TypeErrorlet{prop:y}=null; // TypeError

  • Function arguments can also be destructively assigned.

[[1, 2], [3, 4]]. The map (((a, b)) = > a + b); // [3, 7]

function add([x, y]){ return x + y; }add([1, 2]); / / 3Copy the code

4) What is a closure and what does a closure do?

Closures are functions that can read variables inside other functions. Another is to keep the value of a variable in memory, not automatically cleared when it is called.

var f1 = function(){ var a=1; return function f2(){ a++; console.log(a); } } var b = f1(); b(); // 2 b(); / / 3Copy the code

5) The difference between client storage localStorage and SessionStorage

Localstorage life cycle is permanent, sessionStorage life cycle is the current window or TAB, once the window or TAB is closed, then the data stored through sessionStorage will also be cleared.

6) How many ways does JavaScript define functions

There are three ways to define functions: function definition statements, function direct expressions, and the function() constructor.

  • Function definition statement

      function sum(a, b){

      return a+b;

  }
Copy the code

* Function direct quantity expression

Var factorial = function fact(x){if(x<0) {return NaN; } else if(x===0) {return 1; } else return x*fact(x-1); // Recursive function}; console.log(factorial(3));Copy the code

*function() constructor

var f =new Function("x","y","return x+y"); Var f = Function(x, y){return x+y};Copy the code

7) How to determine whether an object is a function

There are no compatibility issues with calling object primitive methods. Typeof can be used, but there are browser compatibility issues. Object.propotype.toString.call(object) === "[object Function]"Copy the code

8) Write JavaScript deep clone functions

function clone(obj) {
  var o = obj instanceof Array ? [] : {};
  for(var k in obj)
    o[k] = typeof obj[k] === Object ? clone(obj[k]) : obj[k];
      return o;
}
var a = [[1, 2, 3], [4, 5, 6, 7]];
var b = clone(a);
console.log(b);
Copy the code

9) What is the virtual DOM and why is it used?

You can think of JavaScript as emulating the tree structure of the DOM structure, which contains information about the entire DOM structure. VDOM puts the COMPARISON of DOM in the JS layer and selects newly rendered DOM nodes by comparing the differences, thus improving the rendering efficiency.

10) Advantages and disadvantages of JSONP

  • Advantages:

Jsonp is compatible across the same origin policy, and can call callback after the request.

  • Disadvantages:

Get requests are supported, and only cross-domain HTTP requests are supported. When the call fails, HTTP status codes are not returned, which is not secure and has page injection vulnerabilities.

11) React component lifecycle function

I. Initialization Phase:

GetDefaultProps: Gets the default properties of the instance

GetInitialState: Gets the initial state of each instance

ComponentWillMount: The component is about to be loaded and rendered onto the page

Render: This is where the component generates virtual DOM nodes

ComponentDidMount: After the component is loaded

Ii. In operation:

ComponentWillReceiveProps: components that will receive calls to the property

ShouldComponentUpdate: When the component receives a new property or state

ComponentWillUpdate: The component is about to update and cannot modify its properties and state

Render: Component repainting

ComponentDidUpdate: Components have been updated

Iii. Destruction Stage:

ComponentWillUnmount: Component is about to be destroyed

12) ES6 data types

Number,String, Null, Undefined, Symbol, Boolean

13) What is event delegation and what does it do?

Event delegate is also called event delegate. Event delegate is to manage all events of a certain type by specifying only one event handler by using event bubble. In JS, the number of event handlers added to the page will be directly related to the overall performance of the page, because the need to constantly interact with the DOM node, the more times to access the DOM, the more times the browser will return and rearrange, which will prolong the interaction ready time of the whole page. , the use of event delegation, will put all the operations in the JS program, and the dom operation is only one time, so that can greatly reduce the number of interactions with dom, improve performance.

14) What is event bubbling? How do I prevent events from bubbling up?

Event bubbling is the sequential firing from the target object to the outer layer.

Stop event propagation: in W3C, cancelBubble = true in IE, using stopPropagation();

Prevent event default behavior: in W3C, use preventDefault(), set window.event. ReturnValue = false in IE;

15) What is async function and what does it do?

Async functions are syntactic sugar for Generator functions. The async function returns a Promise object, and callbacks can be added using the then method. When a function executes, it returns as soon as it encounters await, waits for the asynchronous operation to complete, and then executes the following statement in the function body.

16) How to use HTML5 offline storage, can you explain the working principle?

How it works: HTML5 offline storage is based on the caching mechanism of a newly created.appCache file, which stores resources offline through parsed lists that are stored like cookies. When the network is offline, the browser displays the data stored offline.

Use: add a manifest attribute to the page avatar, compile offline storage resources in the cache. Manifest file, and operate window.applicationCache to implement requirements in offline state

16) How do you divide the React component

The UI component is usually divided into the container component, which is responsible for the presentation of complex UI, and the container component, which is responsible for managing data and logic.

17) What periodic function is React performance optimization, the React performance optimization scheme?

ShouldComponentUpdate is used to determine if the DOM needs to be repainted by calling the Render method. Because dom rendering is very performance consuming, if we can write a more optimized DOM diff algorithm in shouldComponentUpdate method, we can greatly improve performance.

Optimizations: Rewrite shouldComponentUpdate to avoid unnecessary DOM manipulation, use the Production version of React. Js, and use keys to help React recognize minimal changes to all subcomponents in the list.

18) Talk about the flow of events in the front end

Javascript interaction in HTML is event-driven, and the event flow describes the order in which events are received from the page. The DOM level event flow consists of the following phases.

  • Event capture phase

  • In the target stage

  • Event bubbling phase

19) The role of the js new operator

The new operator creates a new control object that points to the constructor’s prototype and returns the object after execution.

20) Bind, apply, call Changes the difference between this Pointers inside the function.

1> Change this with apply and call. The first argument to both functions is the same, indicating the object to be changed. The second argument, apply, is an array, and call, arg1, arg2… This form

2> Changing the this scope by bind returns a new function that will not be executed immediately.

More updates will follow