Cookie is generated on the browser side, it will be invalid by default after closing the browser

left and right

5MB

header every time. If you use cookie to save too many The data will cause performance problems

The interface is not friendly

and Array have better support

10.ES6 new features

const and let, template string, arrow function, function parameter default value, object and array destructuring, for...of And for...in, classes in ES6

##11. The difference between Let, var and const

VarThe declared variables will be mounted on window, while let and constThe declared variables will not be

VarThe declared variables will have variable promotion, let and constThere is no variable promotion

Under the same scopevarcan be declared Variables with the same name, let and const, cannot

Let and const declarations will form a block-level scope

Lettemporary dead zone

Const Once declared, a value must be assigned, and null cannot be used as a placeholder. It cannot be modified after declaration. If the declaration is a composite type Data, attributes can be modified

12. Please briefly describe the array methods

push() Add from the back Element, the return value is the length of the added array

arr.pop() Delete elements from the back, there can only be one, the return value is deleted Element

arr.shift() Delete the element from the front, and can only delete one element whose return value is deleted

arr.unshift() Add elements from the front, the return value is the length of the added array

arr.splice(i,n) Delete the element starting from i (index value). The return value is the deleted element

arr.concat() Connecting two arrays the return value is the new array after the connection

str.split() Convert the string into an array

arr.sort() Sort the array and return the value It is a sorted array. The default is to sort by the leftmost number, not by number size

arr.reverse() Reverse the array, The return value is the reversed array

arr.slice(start,end) Cut off the array from index value start to index value end, excluding the end index The value, the return value is the cut out array

arr.forEach(callback) Traverse the array, no return Even if there is a return, no value will be returned. And it will affect the original array

arr.map(callback) Map the array (traverse the array), and return a new array.

arr.filter(callback) Filter the array and return an array that meets the requirements

13. How to update Json Add/delete key-value pairs

14. Please briefly describe what object-oriented is

Object-oriented is a kind of thinking, which is based on process-oriented. That is to say, object-oriented is to realize functions through objects, encapsulate functions into objects, and let the objects realize specific details; This idea is to put data as the first priority. This is an optimization of data, which makes the operation more convenient and simplifies the process.

Js itself does not have a class type, but each function has a prototypeAttribute, prototype points to an object. When the function is used as a constructor, prototype plays the role of Similar to the role of class

Object-oriented has three characteristics: encapsulation (hiding the properties and implementation details of the object, and providing public access to the outside world) ),

Inheritance (to improve code reusability, inheritance is the prerequisite for polymorphism), polymorphism (reference variables defined by parent classes or interfaces can point to subclasses or specific implementation classes Instance object)

15. The difference between ordinary functions and constructors

• The constructor is also an ordinary function. The creation method is the same as that of ordinary functions, but it is customary to capitalize the first letter of the constructor

• . The calling method is different. Ordinary functions are called directly, and the constructor uses the keyword new to call

• #When called, a new object will be created inside the constructor, which is an instance. Ordinary functions do not A new object will be created

• #this inside the constructor points to the instance, and # inside the ordinary function ##this points to the object calling the function (if no object is called, the default is window)

• The default return value of the constructor is the created object (that is, the instance). The return value of the ordinary function is determined by the return statement

• The function name of the constructor is the same as the class name

Any object instance has a prototype, also called a prototype object. This prototype The object's built-in attribute _proto_ points to the object pointed to by the prototype of its constructor, that is, any object is created by a constructor, but not every object has a prototype, only methods have prototypes.

We know that each constructor has a prototype object, each prototype object has a pointer to the constructor, and the instance contains an internal pointer to the prototype object.

_proto_ of the dependent object. When the attribute does not exist, the object is created layer by layer. The constructor, until it reaches Object, there is no _proto_ to point to.

_proto_ is essentially looking for prototype, so we only need to look for this chain prototype on the constructor. Among them, Object.prototype does not have a _proto_ attribute, it == null.

Each constructor has a prototype object. The prototype object contains a pointer to the constructor, and the instance contains a pointer to the inside of the prototype object. We make the prototype object (1) equal to the instance of another prototype object (2),

At this time the prototype object (2) will contain a pointer to the prototype object (1),

Then Let the instance of the prototype object (2) be equal to the prototype object (3). This layer-by-layer progression forms a chain of instances and prototypes. This is the concept of the prototype chain.

Each constructor has a prototype object , the prototype object contains a pointer to the constructor (constructor), and the instance object contains an internal pointer to the prototype object (__proto__). If a prototype object is equal to an instance of another prototype object, the prototype object will contain a pointer to another prototype (__proto__), and the other prototype will also contain a pointer to another constructor (constructor). If another prototype is an instance of another type...this forms a chain of instances and prototypes. Also called prototype chain

Prototypal inheritance is a way of inheritance in js,The prototype chain is the main method to implement inheritance, The basic idea is to use prototypes to let one reference type inherit the properties and methods of another reference type ,

Prototypal inheritance: Using members in the prototype can be combined with other Related objects share this feature and can achieve inheritance. This way of implementing inheritance is called prototypal inheritance.

17. Understanding of Promise

1. What is Promise? What problem do we use Promise to solve?

We all know that Promise means promise, a promise that it will give you a result after a period of time.

Promise is a solution to asynchronous programming, which is more reasonable and powerful than callback function and event.

Syntactically speaking, promise is an object from which asynchronous operation messages can be obtained;

2. promiseThere are three states: pending initial state is also called waiting state, fulfilledsuccess state, rejectedfailure state; once the state changes, It won’t change again. After creating the promise instance, it will be executed immediately.

3. Two characteristics of Promise

1. PromiseThe state of the object is not affected by the outside world

2. Once the state of Promise changes, it will not change again. You can get this result at any time. The state cannot be reversed,

4. Three of Promise Disadvantages

1)Cannot cancelPromise,will be executed immediately once it is created and cannot be canceled midway

2 )If the callback function is not set, PromiseThe error thrown internally will not be reflected to the outside

3)When in pending(waiting) state, it is impossible to know which stage the current progress is, whether it has just started or is about to be completed

promise is used to solve two problems:

1.Callback hell, the code is difficult to maintain, often the first function The output is the input of the second function.

2.promise can support multiple concurrent requests and obtain the data in concurrent requests

This promise can solve the asynchronous problem, but it cannot be said that promise is asynchronous

19. Please briefly describe the usage of async

Async is generation and ## The syntax sugar of #promise, async is the of generator Replace * with async and yiled with await

You must add a async before the function, and a await keyword before the asynchronous operation method, meaning Just wait a moment and then continue after execution. Note: await can only be run in the async function, otherwise an error will be reported

PromiseIf an incorrect result is returned and no exception handling is done, an error will be reported, so use try..catchJust catch the exception

20.. What happens in the process from inputting a URL to the completion of page loading and display on a page?

When sending a URL request, regardless of whether the URL is the URL of a Web page or a Web page For each resource URL, the browser will start a thread to handle the request and start a DNS query on the remote DNS server. This allows the browser to obtain the IP address corresponding to the request.

The browser and the remote Web server negotiate through the TCP three-way handshake to establish a TCP/IP connection . The handshake includes a synchronization message, a synchronization-response message and a response message, these three messages are passed between the browser and the server. In this handshake, the client first attempts to establish communication, then the server responds and accepts the client's request, and finally the client sends a message that the request has been accepted.

3. Once the TCP/IP connection is established, the browser will send an HTTP GET request to the remote server through the connection. The remote server finds the resource and returns it using an HTTP response

4. At this point, the web server provides resource services and the client begins downloading the resource.

jQueryRelated knowledge

What is Css preprocessing sass less? Why use them

Sass and less are both cssThe preprocessor is an abstraction layer on css. It is a special syntax that will eventually be compiled into css , less is a dynamic style language that gives css the characteristics of a dynamic language, such as: variables, inheritance , nested. LessCan be run on the client or on the server (requires node)

The difference between .call() and .apply() in Js

apply: Call a method of an object and replace the current one with another object object.

call: Call a method of an object and replace the current object with another object.

As can be seen from the definition, call and apply are both methods of calling an object and replacing the current object with another object. The difference lies in the parameters passed. apply can only have two parameters at most - a new this object and an array argArray. If arg is not an array, an error will be reported

Same. Point:The two methods have exactly the same effect. The function of call and apply is to borrow other people's methods to call, just like calling your own.

The difference: Parameters passed by the method Different

Why does it cause cross-domain/please briefly describe the same-origin policy

The reasons why cross-domain problems occur:

In the front-end and back-end separation mode, the domain names of the front and back ends are inconsistent, and cross-domain access problems will occur. During the request process, if we want to get back the data, it is usually a post/get request, so... cross-domain problems occur

Cross-domain problems come from JavaScript's same-origin policy, that is, only If the protocol host name and port number (if present) are the same, mutual access is allowed. In other words, JavaScript can only access and operate resources in its own domain, but cannot access and operate resources in other domains.

Same-origin policy is a well-known security policy proposed by NetScape. The so-called same origin refers to the same protocol, domain name, and port. For security reasons, the browser only allows interface interaction under this domain name. Client scripts from different sources cannot read or write the other party's resources without explicit authorization.

Please output three ways to reduce page loading time

1. Optimize images

2. Selection of image format (GIF: provides fewer colors and can be used in places where color requirements are not high)

3. Optimize CSS (compress and merge css, such as margin-top, margin-left...)

4. Add after the URL Slash (such as www.campr.com/directory, it will determine what file type or directory this directory is.) cdn hosting

5. Indicates the height and width (if the browser does not find these two parameters, it needs to calculate the size while downloading the image. If there are many images, the browser needs to constantly adjust the page. This not only affects the speed, but also affects the browsing experience.

When the browser knows the height and width parameters, even if the image cannot be displayed temporarily, it will make room for the image on the page, and then continue to load the following content. As a result, the loading time is faster and the browsing experience is better. Okay)

6. Reduce http requests (merge files, merge pictures)

This points to

In JavaScript, this usually points to the function we are executing, or to the object to which the function belongs.

Global this → points to this in the Window

→ points to itself

In the event this → points to the event object

What is jsonp and how does it work? Why is it not real ajax

Jsonp is actually a cross-domain solution.

JsCross-domain request for data is not allowed, but js cross-domain request for js script is possible .

So you can encapsulate the data to be requested into a js statement and make a method call.

Cross-domain request js script can get this script. The js script will be executed immediately after getting it.

You can pass data into the method as a parameter. You can get the data. This solves cross-domain issues.

jsonpPrinciple: (Dynamic creation of script tags, Callback function)

The browser allows src cross-domain requests through the script tag in the js request. You can add the callback method name to the request result and define the method in the request page to obtain it. Data requested across domains.

Why is it not real ajax?

1, the two technologies of ajax and jsonp are called in the same way" They look very similar and have the same purpose, which is to request a URL and then process the data returned by the server. Therefore, frameworks such as jquery and ext encapsulate jsonp as a form of ajax;

2、But ajax and jsonp are essentially different things. The core of ajax is to obtain the content of this page through XmlHttpRequest, while the core of jsonp is to dynamically add the <script> tag to call the js script provided by the server. </script>

3. So, in fact, the difference between ajax and jsonp is not whether it is cross-domain. Ajax can also achieve cross-domain through the server proxy, and jsonp itself does not Excludes the acquisition of data in the same domain.

4. Also, jsonp is a method or non-mandatory protocol. Like ajax, it does not necessarily require json format to transmit data. , if you want, you can change the characters, but this is not conducive to jsonp providing public services.

Please master 2 or more ways to remove duplicates from arrays

• Use indexof() method

• Use lastindexof() method andindexofThe method is the same indexofmatch from the headlastindexofmatch from the tail

• ES6#set structure setDo not accept duplicate data

• Use the sort method to sort the original array first, then compare it with the adjacent one, and if different, store it in the new array

• Use the filiter and indexof methods

• Use ES6 ’s set and spread operator

• Use set and Array.from() method array.from can convert the set structure into an array

• using splice and double layer loop

• Use includesmethod

What is deep and shallow copy and how to achieve it?

Deep copy: pointer assignment and content copy,

Shallow copy: just simple pointer assignment

Array shallow copy: If it is an array, you can use some methods of the array to implement it: slice(), concat() returns the characteristics of a new array to implement copy. Use the spread operator spread to implement

Array deep copy: JSON.parse(JSON.stringify()) is not only applicable to arrays but also to the object. Functions, undefined, and symbols cannot be copied.

Why js is a weakly typed language

Weakly typed language implementation is compared to strongly typed language. In strongly typed language, variables There are many types, such as int char float Boolean Sometimes conversion between different types requires forced conversion, while jacascript has only one typevar, when assigning a value to a variable, the type will be automatically determined and converted, so it is a weakly typed language.

How to convert less to css

• Use node to lessFile generated as cssfile

• Use webstorm Automatic generation

What are the most commonly used echarts

Charts and chart combinations

What is the difference between a For loop and a map loop?

ForTraverse the object's own and inherit enumerable properties, and also That is to say, which properties on the prototype chain will be included

MapThe method will not detect empty arrays, mapWill return a new array and will not affect the original array

Please write a simple class and inheritance

There are three steps to create a class Type:

• Use the function and this keywords

• Prototype method Use prototype and thisKeywords

• Use object.create() method to construct

There are six types of inheritance:

• Prototypal inheritance

• Borrowing constructor inheritance

• Combined inheritance

• Prototypal inheritance

• Parasitic inheritance

• Parasitic combined inheritance

The difference between synchronous and asynchronous/the difference between blocking and non-blocking

Synchronous (blocking)

Asynchronous (non-blocking)

For example: synchronization, we work together, it’s time to eat, I go I asked you to eat together. You are very busy, so I will sit and wait for you to finish your work before we go to eat together. At work, it’s time to eat. I’ll call you to eat together. You’re very busy, so I’ll eat by myself first. You’ll go to eat after you’re done.

Synchronous (blocking) and asynchronous (non-blocking) these two focus on The status of the program when waiting for the call result

What are redraw and reflow

Reflow: Whenrender tree Part or all of it needs to be rebuilt due to changes in the size, layout, hiding, etc. of the elements. This is called reflow. Requires at least once for each page Reflow is when the page is loaded for the first time. Reflow will definitely occur at this time because render tree

When reflowing, the browser will Invalidate the affected part of the rendering tree and reconstruct this part of the rendering tree. After completing the reflow, the browser will redraw the affected part to the screen. This is redrawing

When some elements in render tree need to update attributes, and these attributes only affect the appearance of the elements, not It will affect the layout and is called redrawing

#What is http? What are the characteristics

http is called Hypertext Transfer Protocol, which is the most widely used network protocol on the Internet

Features: Request-based - response mode Stateless saving No connection

HTTP The difference between the protocol and HTTPS

• http is the hypertext transfer protocol, and the information is transmitted in clear text, https is a secure ssl decryption transport protocol

• http and httpsThe connection method is completely different, and the port is also different, http is 80, https is 443

• ##http The connection is very simple , is stateless. The https protocol is a network protocol built from the ssl http protocol that can perform encrypted transmission and identity authentication. Safer than http protocol

The difference between prototype and inheritance, prototype, call and apply inheritance (the first The parameters are the same, what is the difference in the second one)

apply()Receives two parameters, one is the scope in which the function runs (this), The other is the parameter array.

call()The first parameter of the method is the same as the apply() method, but the parameters passed to the function must be listed.

The difference between arrow functions and ordinary functions

• The arrow function is an anonymous function and cannot be used as a constructor or used new

• Arrow functions cannot be bound arguments, use restParameter solution

• #Arrow function has no prototype attribute

• The arrow function’s this always points to its context’s this,

• Arrow functions cannot bind this and will capture this## of the context in which they are located. #Value, as its own thisvalue

What is a js memory leak?

Memory leak refers to a piece of allocated memory that cannot be used or recycled until the browser process ends

Methods to release memory: Assign the value to null

How do you optimize the files and resources of your website?

1, file merging (the purpose is to reduce http requests)

2, files Compression (the purpose is to directly reduce the size of file downloads)

3, use cdn hosting resources

4, use cache

5, gizp compress your js and css files

6, meta tag optimization (title, description, keywords), heading tag optimization, alt optimization 7. Backlinks, website external link optimization

Please briefly describe ajax Execution process and common HTTP status codes

100: This status code tells the client that it should continue to send requests. This temporary response is used to notify the client. Part of the request has been accepted by the server, but the client should continue to send the remaining part of the request. If the request has been completed, the response is ignored, and the server will send a final result to the client after the request is completed

200: This is the most common http status code, indicating that the server has successfully accepted the request and will return the final result requested by the client

202: Indicates that the server has accepted the request, but has not yet processed it, and it is still uncertain whether the request will be processed eventually

204: The server successfully processed the request, but did not return any entity content and may return new header meta information

301: The web page requested by the client has been Move permanently to a new location. When the link changes, a 301 code is returned to tell the client the link change. The client saves the new link and makes a request to the new link. The request result has been returned

404: The request failed. The resource requested by the client was not found or does not exist.

500: The server encountered an unknown error, resulting in the inability to complete the client's current request.

503: The server cannot handle the current request due to temporary server overload or maintenance

Preloading and The difference between lazy loading and when is the appropriate time for preloading? Lazy loading is delayed loading, which waits until certain conditions or requirements are met before loading the corresponding resources.

The main difference between the two is that one loads in advance, and the other loads slowly or even not at all. . Lazy loading can relieve pressure on the server front-end to a certain extent, while preloading will increase the pressure on the server front-end.

Jquery

1. Basic selector

The basic selector is the most commonly used and simplest selector in jQuery. It finds DOM elements through the element's id, class and tag name.

1, ID selector #id
Description: Match an element based on the given id and return a single element (Note : In the web page, the id name cannot be repeated)
Example: $("#test") Select the element with the id of test

2 , class selector.class
Description: Match elements according to the given class name and return a collection of elements
Example: $(".test") Select all elements with class test

3, element selector element
Description: Match elements according to the given element name , return the element set
Example: $("p") selects all

elements

4,*
Description: Match all elements and return the element set
Example: $("*") selects all elements

5, selector1, selector2,...,selectorN
Description: Merge the elements matched by each selector and return them together, and return the merged element set
Example: $("p,span,p.myClass") selects all elements of

, and

tags whose class is myClass

2. Hierarchical selector

The hierarchical selector obtains specific elements based on hierarchical relationships.

1, descendant selector
Example: $("p span") selects all elements in

The element (note: the descendant selector selects all specified selected elements of the parent element, whether it is a child or a grandchild)

2, Child selector $("parent>child")
Example: $("p>span") selects all elements under the

element (note: child selector Only select child elements directly belonging to the parent element)

##3. Filter selection Device

1>Basic filter selector
1, :first
Description: Select the first An element, returns a single element
Example: $("p:first") selects the first

element among all

elements

##2>Content filter selector
1、:contains(text)
Description: Select the element containing text and return the element collection
Example: $(" p:contains('I')") Select elements containing the text "I"
2, :empty
Description: Select not Empty elements that contain child elements or text elements, return element collection
Example: $("p:empty") selects empty

elements that do not contain child elements or text elements (

element containing the

element (

)
4, :parent
Description: Select elements containing child elements or text and return a collection of elements
Example: $("p:parent") selects

elements containing child elements or text elements (

Visibility filter selector1
, :hidden Description: Select all invisible elements and return the element set
2
, :visibleDescription: Select all visible elements and return the element collection

4>Attribute filter selector (returns element collection)
1、[attribute]
Example: $("p[id]") selects the p element with the id attribute
2、[attribute=value]
Example: $("input[name=text]") selects the input element with the name attribute equal to text
3、[attribute!=value]
Example: $("input[name!=text]") selects input elements with name attributes that are not equal to text
4、[attribute^= value]
Example: $("input[name^=text]") Select the input element whose name attribute starts with text
5, [attribute$=value]
Example: $("input[name$=text]") selects the input element whose name attribute ends with text
6、[attribute*=value]
Example: $("input[name*=text]") Select the input element with name attribute containing text
7、[attribute~=value]
Example: $("input[class~=text]") Select the class attribute separated by spaces Input elements whose value contains text
8, [attribute1][attribute2][attributeN]
Description: Combine multiple attributes to filter selections Device

5>Form object attribute filter selector (returns element collection)
1,: enabled
Description: Select all available elements
2, :disabled
Description: Select all unavailable elements Element
3, :checked
Description: Select all selected elements (radio boxes, check boxes)
Example: $("input:checked") selects all selected elements
4、:selected
Description: Select all selected option elements (drop-down list)
Example: $("select option:selected") Select all selected option elements

Jquery method of inserting nodes

append() Append content to each matching element

appendTo() Append all matching elements to the specified element. In fact, using this method reverses the regular $(A).append(B) operation to append A to B.

prepend() Prepend content inside each matching element

prependTo() Prepend all matching elements to the specified element. In fact, using this method reverses the conventional $(A).prepend(B) operation, that is, instead of prepending B to A, A is prepended to B

after() Insert content after each matching element

insertAfter() Insert all matching elements into behind the specified element. In fact, using this method reverses the conventional $(A).after(B) operation, that is, instead of inserting B after A, A is inserted after B

before() Insert content before each matching element

insertBefore() Insert all matching elements in front of the specified element. In fact, using this method reverses the conventional $(A).before(B) operation, that is, instead of inserting B before A, insert A before B

The difference between function throttling and function anti-shake in Js

Function throttling means that the js method is only executed once within a certain period of time .

Function anti-shake means that when triggered frequently, the code will only be executed once if there is enough idle time

Function throttling is a statement A variable is used as a flag to record whether the current code is executing. If it is executing, cancel the method execution and directly return. If it is idle, trigger the method execution normally

Function anti-shake isrequires a delayer to assist the implementation, delaying the execution of the code that needs to be executed. If the method is triggered multiple times, use the last recorded delayed execution code with cleartimeoutClear it and start again. If the timer is over and there is no way to access the trigger, the code will be executed

Get is different from post

Get is to get data from the server, post is to send data to the server

on the client, get Submit data through url, the data can be seen in url, post method, the data is placed in html header to submit

Security issues

GetThe submitted data can only have a maximum of 1024 bytes, post No restrictions

What is csrf attack

Csrf(Cross-site request forgery) After the user has logged in to the target website, the attacker induces the user to visit an attack page, uses the target website's trust in the user, and uses the user's identity to attack the page to initiate a request for a forged user operation to the target website to achieve the purpose of the attack

JsWrite a deep copy by hand

When to use deep copy/shallow copy

No matter how deep it is, it is needed. When a deep copy occurs, it usually indicates that there is an aggregation relationship. When a shallow copy occurs, it usually indicates that there is an acquaintance relationship.

For example Simple example: When implementing a composite patternComposite Pattern, deep copy is usually implemented

When implementing an observer patternObserver Pattern, you need to implement shallow copy

Vue related

##1.Vue What is the core of

Vue is a set of progressive bottom-up incremental development for building user interfaces TheMVVMframework,vue The core only focuses on the view layer,

Core idea:

Data-driven (the content of the view changes as the data changes)

Componentization (can increase code reusability, maintainability, testability, improve development efficiency, facilitate reuse, and reflect high cohesion and low coupling)

2. Please briefly describe your understanding of vue

Vue is a set of progressive methods for building user interfaces The MVVM# framework is developed incrementally from the bottom up. The core is to focus on the view layer, The core of vue isIn order to solve the data binding problem, in order to develop large-scale single-page applications and componentization,So the core ofvue The idea is data-driven and componentized. Here we also talk about the MVVM idea. The MVVM idea is the model View vm is the bridge connecting v and m , when the model layer data is modified, the VM layer will detect it and notify the view layer to make corresponding modifications

3. Please briefly describe Vue's one-way data flow

The update of the parentprop will flow downward to the child component, every time the parent component is updated , all prop of the child component will be refreshed to the latest value

The data is passed from the parent component to the child component, and can only be bound in one direction It is determined that the data passed by the parent component cannot be directly modified inside the child component (you can use data and computed to solve it)

4. What are the commonly used modifiers in Vue

Modifiers：.lazy Triggered after change, the value will only change when the cursor leaves the input input box

##   .number Convert the output string to numbertype

.trim Automatically filter user input The leading and trailing spaces

Event modifier:

.stop Prevent click events from bubbling , equivalent to event.stopPropagation().prevent in native

js Preventing the execution of preset behaviors is equivalent to event.preventDefault()##.capture # in native js

##Use the event capture mode when adding an event listener, that is, whoever has the event modifier will trigger it first.self

will only Trigger events within its own scope, excluding child elements.once

Execute only once

.enter Enter key .tab Tab key .escReturn key .space Space bar

new Vue({
　　　　filters:{
　　　　　　myCurrency:function(myInput){
　　　　　　　　return 处理后的数据
　　　　　　}
　　　　}
})