JavaScript section
1. What are the operations that cause memory leaks?
1. Global variables cause
2. Closure caused
3. The dom is cleared and the event is not cleared
4. There is a reference to the child element
5. The Forgotten Timer
2. How to implement ajax request
Get an instance by instantiating an XMLHttpRequest object,
Call the open method of the instance to set the corresponding http method, corresponding address and whether it is asynchronous for this ajax request. Of course, in most cases, we choose asynchronous.
Take asynchronous as an example, then call the send method ajax request, this method can set the body of the message to be sent,
Then, by listening to the readystatechange event, the state of the ajax request is judged by the readyState property of the instance, which is divided into four states: 0, 1, 2, 3, and 4.
When the status is 4, that is, when the data is received, you can judge whether the request is successful through the status attribute of the instance.
var xhr = new XMLHttpRequest(); xhr.open('get', 'aabb.php', true); xhr.send(null); xhr.onreadystatechange = function() { if(xhr.readyState==4) { if(xhr.status==200) { console.log(xhr.responseText); } } }
3. A brief introduction to ES6
ES6 adds let and const to declare variables in the declaration and definition of variables, and has the concept of local variables. There are more attractive structure assignments in assignment. At the same time, ES6 extends some methods for strings, arrays, regular expressions, objects, functions, etc. , such as template strings in terms of strings, default parameters in functions, and concise expressions of attributes in objects. ES6 also introduces a new data type symbol, new data structures set and map, and symbols can be detected by typeof. To solve the problem of asynchronous callbacks, promises and generators are introduced, and the most attractive implementation of Class and module is to implement better object-oriented programming through Class, and use module loading to facilitate modular programming. Of course, considering browser compatibility, we are in In actual development, babel needs to be used for compilation.
4. Understanding of js prototype
We know that before es6, js did not have the concept of classes and inheritance, and js achieved inheritance through prototypes. In js, a constructor has a prototype property by default, the property value of this is an object, and the prototype object has a constructor property, which points to the constructor, and each instance has a __proto__ The property points to this prototype object. We can call this an implicit prototype. When we use an instance method, we will first check whether the instance has this method. If not, we will continue to look up whether the prototype object has this method. Just now we said that prototype is an object, which means that this is an instance of an object, then this object will also have a __proto__ attribute pointing to the prototype object of the object.
5. Understanding of js modularization
Before the emergence of ES6, js did not have a standard modular concept, which also caused the situation that js multi-person writing and development could easily cause global pollution. In the past, we may use immediate execution of functions, objects, etc. to minimize variables. Later, the community proposed AMD specifications and CMD specifications to solve this problem. The reason why this is different from CommonJS of Node.js is that all modules on the server exist in the hard disk, and it takes almost no time to load and read. On the browser side, because the loading speed depends on the network speed, it needs to use asynchronous loading. In the AMD specification, define is used to define a module, and the require method is used to load a module. Now ES6 has also introduced a standard module loading scheme, through exports and require to export and import modules.
6. Briefly introduce event proxying, when to use it, what stage of event proxying occurs in the event processing flow, and what are the benefits?
Event delegation means that we add the event to the parent node where the event was originally added, and delegate the event to the parent node to trigger the handler function, which is usually used when a large number of sibling elements need to add the same type of event. For example, a very dynamic list needs to add a click event for each list item. At this time, you can use the event agent to judge the specific element that occurs by judging e.target.nodeName, so as to judge whether it is triggered in the list item. , the advantage of this is that event binding can be reduced, while the dynamic DOM structure can still be monitored. Event delegation occurs during the bubbling phase.
7. Specific steps to instantiate an object using the new operator
1. Construct a new object
2. Assign the scope of the constructor to the new object (that is, this points to the new object)
3. Execute the code in the constructor
4. Return the new object
8. What is the difference between recursion and iteration, and what are the advantages and disadvantages of each?
The program call itself is called recursion, and the use of the original value of the variable to introduce a new value is called iteration. The advantages of recursion are transformed into small problems, which can reduce the amount of code. At the same time, the code should be simplified and readable. The disadvantage is that recursive calls Waste of space, and recursion too deep can easily cause stack overflow. The advantage of iteration is that the code runs efficiently, because the time only increases due to the increase in the number of loops, and there is no additional space overhead. The disadvantage is that the code is not as concise as recursion
9. What is the strategy mode, tell me your understanding?
The strategy mode means that we encapsulate a series of algorithms so that they can be replaced with each other. The encapsulated algorithms have a certain independence and will not change with the changes of the client. The more common use is similar to form validation. In a multi-scenario situation, we can use the strategy pattern to avoid using a bunch of if...else.
10. js how to judge the success or failure of the image loading in the webpage
Use the onload event to run the load successfully, use the onerror event to judge the failure
11. What are the methods of native JS to manipulate the DOM?
The methods of getting nodes getElementById, getElementsByClassName, getElementsByTagName, getElementsByName, querySelector, querySelectorAll, the getAttribute, setAttribute, removeAttribute methods of operating element attributes, appendChild, insertBefore, replaceChild, removeChild, createElement, etc.
12. What are the return values of the typeof operator, and what is returned by using this operator for undefined, null, and NaN
The return values of typeof are undefined, boolean, string, number, object, function, symbol. Use undefined to return undefined, null to return object, and NaN to return number
13. What is the difference between setTimeout and setInterval, including memory analysis?
setTimeout means to perform a call after a period of time, while setInterval is called cyclically every period of time until the end of clearInterval. In terms of memory, setTimeout only needs to enter the queue once, and will not cause memory overflow. Because setInterval does not calculate the code execution time, it may execute multiple codes at the same time, resulting in memory overflow.
14. What is the Same Origin Policy?
The same-origin policy means that only pages with the same origin can share data, such as cookies. Same-origin means that pages have the same protocol, domain name, and port number. There is a same-origin policy to ensure the security of web pages.
15. How to stop event bubbling and default events?
In standard DOM objects, the stopPropagation() method of the event object can be used to prevent event bubbling, but in IE8 and below, the IE event object can prevent bubbling by setting the cancelBubble property of the event object to true;
The default event is blocked by the preventDefault() method of the event object, while IE prevents the default event by setting the returnValue property of the event object to false.
16. How to implement lazy loading?
Lazy loading is to record the content according to the user's browsing needs, that is, continue to load the content when the user is about to browse the current content. This technology is often used when loading pictures. We judge whether the user is about to browse to the bottom and then perform at-home content. At this time, a large amount of content may need to be loaded. Fragment can be used to optimize it, because most of them are triggered by sliding and scrolling, so it is likely to be triggered continuously. You can Use function throttling to make an optimization to prevent users from constantly triggering.
17. What is function throttling?
Function throttling is to prevent a function from being called continuously in a short time interval, but to be executed at intervals, which is often used when we bind some events to elements, such as we bind a resize to the window Event, if the user keeps changing the window size, this event handler will always be triggered, which has a great impact on performance.
18. What are the browser cores? Which browsers do they correspond to?
Common browser kernels include Trident, Gecko, WebKit, and Presto. The corresponding browsers are Trident, corresponding to IE, Gecko, corresponding to Firefox, Webkit, chrome and safari, and Presto, Opera.
19. What is a deep copy and what is a shallow copy?
A shallow copy means only copying the reference to the object, not the object itself; a deep copy means copying all the objects referenced by the copied object.
20. Please tell me the realization idea of jsonp?
The principle of jsonp is to use the script tag to achieve cross-domain, because the src attribute of the script tag is not affected by the same-origin policy, so it can be used to cross-domain. One of the simplest jsonp is to create a script tag, set src to the corresponding url, add the corresponding callback after the url, the format is similar to url?callback=xxx, the server returns the corresponding data according to our callback, similar to res .send(req.query.callback + '('+ data + ')'), which implements the simplest jsonp
21. What are the native js string methods?
It is simply divided into obtaining class methods. The obtaining class method has the charAt method to obtain the character at the specified position, the charCodeAt method to obtain the unicode encoding of the character at the specified position, and the opposite fromCharCode method, which returns a string through the incoming unicode. Lookup class methods include indexof(), lastIndexOf(), search(), and match() methods. There are three methods for intercepting the class: substring, slice, and substr, and other methods include replace, split, toLowerCase, and toUpperCase.
22. What is the purpose of placing static resources on other domain names?
The main purpose of this is to not send cookies when requesting these static resources, saving traffic. It should be noted that cookies will be sent to subdomains (second-level domain names), so these static resources will not be placed in subdomains. domain name, but placed under a separate main domain name. At the same time, there is another reason that the browser has a limit on the number of requests for a domain name. This method is convenient for CDN.
23. What are the states of readyState of ajax and what are their meanings?
The readyState of ajax has a total of 5 states, which are 0-4. The meaning of each number is that 0 represents that the open method has not been called, and 1 represents that the send method has not been called, that is, the data has not been sent to the server. 2 represents Yes, the response has not been received yet, 3 means that some data has been received, 4 means that the reception is completed, and the data can be used on the client side.