Front-end Interview questions (JavaScript)

JavaScript Section 1. What are the actions that cause a memory leak

1. Global variables cause

2. Closure caused

3.dom empty, event not cleared

4. Child element Existence reference

5. Forgotten Timers

2. How to implement AJAX requests

By instantiating an XMLHttpRequest object to get an instance,

The open method of invoking an instance sets the appropriate HTTP method for this AJAX request, the corresponding address, and whether it is asynchronous, and most of the time we are choosing async,

Take Async as an example, then call the Send method Ajax request, this method can set the message body to be sent,

Then through the listening ReadyStateChange event, through the ReadyState property of this instance to determine the status of the AJAX request, which is divided into 0,1,2,3,4 these four states,

When the status is 4, which is when the data is received, it is possible to determine the success of the request by the status property of the instance.

var New XMLHttpRequest (); Xhr.open (true); Xhr.send (nullfunction () {  if(xhr.readystate==4) {    if(xhr.status==200) {      Console.log (Xhr.responsetext);   }}}

3. Brief introduction of ES6

ES6 added let, const declaration variables in the declaration and definition of variables, there is the concept of local variables, the assignment has more attractive structure assignment, while ES6 to string, array, regular, object, function and so on extended some methods, such as string aspects of the template string, function of the default parameters, The concise expression of the object aspect attribute, ES6 also introduced a new data type symbol, the new structure set and Map,symbol can be detected by TypeOf, in order to solve the asynchronous callback problem, introduced promise and generator, There are also the most attractive to implement class and module, through class can better object-oriented programming, the use of module loading convenient modular programming, of course, considering the browser compatibility, we need to use Babel to compile in the actual development.

4. The understanding of JS prototype

We know that before Es6, JS does not have the concept of class and inheritance, JS is through the prototype to achieve inheritance. In JS, a constructor defaults to a prototype property, and this property value is an object, and the prototype object comes with a constructor attribute, which points to the constructor, and each instance has a __proto__ Property points to this prototype object, we can call this implicit prototype, when we use an instance of the method, we will first check if there is this method in this instance, do not continue to look up the prototype object whether there is this method, Just now we say that prototype is an object, so that is an instance of an object, then this object will also have a __proto__ property that points to the object's prototype object.

5. The understanding of JS Modularization

Before the advent of ES6, JS does not have the standard modular concept, which also caused the JS multiplayer writing development prone to global pollution situation, before we may use immediate execution functions, objects and other ways to minimize the variable this situation, the community in order to solve this problem in succession, the AMD specification and CMD specification, The reason this is different from node. JS's commonjs is that all the modules on the server are present on the hard disk, loading and reading are almost time-dependent, and the browser side needs to be loaded asynchronously because of the speed of the load, and the AMD specification uses define to define a module. Using the Require method to load a module, ES6 also now has a standard module loading scheme, which exports and imports modules through exports and require.

6. What are the benefits of a brief description of the event agent, and when to use it, and at what stage of the event-handling process does the event agent take place?

The event proxy means that we add events to the parent node that we would like to add the event to, 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 class of events, such as a very dynamic list, to add a click event for each list item. It is possible to use event proxies to judge E.target.nodename to determine whether a specific element is triggered in a list item, and the benefit is to reduce event binding, while the dynamic DOM structure can still be monitored. The event agent occurs during the bubbling phase.

7. Concrete steps for instantiating 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. Executing the code in the constructor

4. Returning new objects

8. What are the differences between recursion and iteration, and what are the pros and cons?

The program call itself is called recursion, using the original value of the variable to introduce a new value called iteration, the advantages of recursion into small problems, can reduce the amount of code, while the code is streamlined, readable, the disadvantage is that recursive calls wasted space, and recursive too deep prone to overflow stack. The benefit of the iteration is that the code runs efficiently because the time is increased by the number of cycles and there is no additional space overhead, and the disadvantage is that the code is not as simple as recursion

9. What is the strategy model and what is your understanding?

The strategy mode is that we encapsulate a series of algorithms, so that they can be replaced with each other, the encapsulation algorithm has a certain degree of independence, will not change with the client, the more common use is similar to form validation of this multi-scenario situation, we use the policy mode can avoid using a bunch of if ... Else

10.js how to tell if a picture in a webpage is successfully loaded or failed

Using the OnLoad event to run the load successfully, using the OnError event to determine the failure

11. What are the methods for native JS to manipulate the DOM?

Methods of acquiring nodes getElementById, Getelementsbyclassname, getElementsByTagName, Getelementsbyname, Queryselector, Queryselectorall, GetAttribute, SetAttribute, removeattribute methods for manipulating element attributes, AppendChild, InsertBefore, and/or additions to the nodes. ReplaceChild, RemoveChild, createelement, etc.

What is the return value of the 12.typeof operator, and what is returned for undefined, null, nan using this operator, respectively

The return value of typeof is Undefined, Boolean, string, number, object, function, symbol. Use return undefined for undefined, null using return Object,nan using return number

What is the difference between 13.setTimeout and SetInterval, which includes memory-related analysis?

SetTimeout indicates that a call is performed after a period of time, while SetInterval is looped over a period of time until the end of the clearinterval. In terms of memory, settimeout only need to go into a queue and not cause memory overflow, setinterval because the code execution time is not calculated, it is possible to execute multiple code at the same time, causing memory overflow.

14. What is the same-origin strategy?

The same-origin policy means that only pages with the same source can share data, such as cookies, which means that the page has the same protocol, domain name, port number, and a different one is not the same origin. There is a homologous policy to ensure the security of Web pages.

15. How do I block event bubbling and default events?

The Stoppropagation () method of the event object can be used in a standard DOM object to block event bubbling, but in IE8 the event object of IE is prevented from 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, and IE blocks the default event by setting the event object's ReturnValue property to False.

16. How to implement lazy loading?

Lazy loading is based on the user's browsing needs to record content, that is, when the user is about to browse the current content to continue loading content, this technology is often used to load images. We determine whether the user is about to browse to the bottom after the home content may need to load a lot of content, you can use fragment to optimize, because most of the use of sliding and wheel to trigger, so it is likely to be triggered, you can use function throttling to do an optimization to prevent users from constantly triggering.

17. What is function throttling?

The function throttle is to allow a function to not be called continuously within a short interval of time, but to execute over a period of time, which is often used when we bind some events to the element, for example, we bind a Resize event for window, and if the user keeps changing the window size, Will always trigger this event handler function, which has a significant impact on performance.

18. What are the browser cores? Which browsers are appropriate for each?

Common browser kernel has trident, Gecko, WebKit, Presto, corresponding browser for Trident corresponds to Ie,gecko corresponding to Firefox browser, WebKit has Chrome and Safari,presto has opera.

19. What is a deep copy and what is a shallow copy?

A shallow copy is simply a reference to a copy of an object, not a copy of the object itself; a deep copy copies all the objects referenced by the copied object.

20. Would you please say something about the realization of JSONP?

The JSONP principle is to use the script tag for cross-domain, because the src attribute of the script tag is not affected by the same-origin policy, so it can be used across domains. 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 + ') '), this implements the simplest JSONP

21. What are the native JS string methods?

A simple way to get a class method is to get a class method that has the Charat method used to get the character at the specified position, get the Unicode encoded charCodeAt method for the specified position character, and the opposite fromCharCode method, returning the string through the incoming Unicode. The Find class method has indexof (), lastIndexOf (), search (), and Match () methods. The methods of intercepting classes are substring, slice, substr three methods, others are replace, split, toLowerCase, toUpperCase method.

22. What is the purpose of placing static resources in other domain names?

The main purpose of this is to request these static resources do not send a cookie, save traffic, it is important to note that the cookie is sent to the subdomain (level two domain name), so these static resources are not placed under the sub-domain name, but placed in a separate primary domain name. There is also a reason that the browser for a domain name will have a limit on the number of requests, this method can be convenient to do CDN.

What are the states of the readystate of 23.ajax, and what are the meanings respectively?

Ajax readystate A total of 5 states, respectively, 0-4, each of which means that the meaning of each number is 0 is not called the Open method, 1 means that the Send method is not called, that is, the data has not been sent to server 2 is not yet received a response, 3 represents the beginning of receiving a portion of the data, 4 representing the completion of the reception, the data can be used on the client.

Front-end interview questions (JavaScript)