Front-end Knowledge Point finishing 02

what exactly did the 53.new operator do ?

1. Create an empty object, and the this variable references the object, and also inherits the prototype of the function.

2, properties and methods are added to the object referenced by this.

3. The newly created object is referenced by this and the last implicitly returns this.

var obj = {};

obj.__proto__ = Base.prototype;

Base.call (obj);

What are the modes of 54.js lazy loading?

Defer and async, dynamically create DOM mode (create script, insert into DOM, load finished callback), asynchronously load JS on demand

55.call () and apply () The difference and role?

Function: Dynamically alters the running environment (execution context) of a method of a class.

Differences See also: JavaScript Learning Summary (iv) Function functions section

56. What operations can cause memory leaks?

A memory leak refers to any object that persists after you no longer own or need it.

The garbage collector periodically scans the objects and calculates the number of other objects that reference each object. If an object has a reference quantity of 0 (no other object has referenced the object), or if the unique reference to the object is circular, then the object's memory is recycled.

The first argument of SetTimeout uses a string instead of a function, which causes a memory leak.

Closures, console logs, loops (a loop is generated when two objects are referenced to each other and reserved to each other)

See: Detailed JS variable, scope and memory
57. List the features of IE that are not the same as other browsers?

IE supports Currentstyle,firefox using Getcomputstyle

IE uses Innertext,firefox to use Textcontent

Filter aspect: IE:filter:alpha (opacity= num); firefox:-moz-opacity:num

Event aspect: Ie:attachevent: Firefox is AddEventListener

Mouse position: IE is event.clientx; Firefox is Event.pagex

IE uses Event.srcelement;firefox to use Event.target

IE in the elimination of the list of the original point only need margin:0 to achieve the final effect; Firefox needs to set margin:0;padding:0 and List-style:none

CSS fillet: IE7 does not support rounded corners

What are the ways 58.WEB applications proactively push data from the server to the client?

JavaScript data push

Commet: Server Push technology based on HTTP long connection

WebSocket-based push scheme

SSE (Server-send Event): New way for server to push data

59. How is the position of the front-end interface engineer understood? What is the future of it?

The front end is the most user-close programmer, close to the backend, database, product Manager, operations, security.

1. Realize interface interaction

2. Enhance the user experience

3. With node. js, the front end can realize some of the things on the service side

The front-end is the most user-close programmer, the ability of the front end is to allow the product from 90 to 100 points, or even better,

Participate in the project, fast and high-quality implementation, accurate to 1px;

Communicate with team members, UI design, product manager;

Good page structure, page refactoring and user experience;

Handle hack, compatible, write graceful code format;

Optimized for servers, embracing the latest front-end technology.

60. A page from the input URL to the page load display completed, what happened in this process?

It is divided into 4 steps:

(1) When sending a URL request, whether the URL is a Web page URL or a URL for each resource on a Web page, the browser opens a thread to process the request and initiates a DNS query on the remote DNS server. This enables the browser to obtain the corresponding IP address of the request.

(2), the browser and the remote ' Web ' Server through the ' TCP ' three handshake negotiation to establish a ' TCP/IP ' connection. The handshake consists of a synchronization message, a synchronous-response message, and a response message, which is passed between the browser and the server in three messages. The handshake is first attempted by the client to establish communication, then the server answers 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 sends a ' GET ' request for ' HTTP ' to the remote server through the connection. The remote server locates the resource and returns the resource using an HTTP response, and the HTTP response status of 200 indicates a correct response.

(4), at this point, the ' Web ' server provides the resource service, and the client begins to download the resource.

When the request returns, it enters the front-end module that we care about

In a nutshell, the browser parses ' HTML ' to generate ' dom tree ', followed by CSS Rule Tree, and ' JavaScript ' can operate ' DOM ' based on ' Dom API '

Details: What happened in the process from the input URL to the browser reception?
several ways to create a 61.javascript object

1, Factory mode

2, constructor mode

3, prototype mode

4, mixed constructors and prototype patterns

5, dynamic prototype mode

6, parasitic constructor mode

7, secure constructor mode

6 ways to inherit from 62.javascript

1, prototype chain inheritance

2, borrowing constructor inheritance

3, combination inheritance (prototype + borrowing constructs)

4, prototype-type inheritance

5, parasitic inheritance

6, parasitic combined inheritance

Details: JavaScript inheritance in a detailed way
63. The process of creating Ajax

(1) Create an ' XMLHttpRequest ' object, that is, create an asynchronous call object.

(2) Create a new ' HTTP ' request and specify the ' HTTP ' request method, ' URL ', and authentication information.

(3) Set the function that responds to the ' HTTP ' request state change.

(4) Send the ' HTTP ' request.

(5) Gets the data returned by the asynchronous call.

(6) Use JavaScript and Dom for local refreshes.

var New XMLHttpRequest ();    Xmlhttp.open (' GET ', ' demo.php ', ' true ');    Xmlhttp.send ()    function() {        if(xmlhttp.readystate = = = 4 & Xmlhttp.status = = = () {        }    }
1190000000691919 Ajax and HTTP status word

64. Asynchronous loading and lazy loading

1. Asynchronous loading scenario: Dynamically inserting a script tag

2. Use Ajax to get the JS code and then execute it via eval

Add defer or Async properties to the 3.script tag

4. Create and insert an IFRAME and let it execute JS asynchronously

5. Lazy loading: Some JS code is not needed immediately when the page is initialized, and some cases are needed later.

65.ie How many resources each version and chrome can download in parallel

IE6 two concurrent, 6 concurrency after iE7 upgrade, and 6 later

Firefox,chrome is also a 6

66.Flash, the advantages and disadvantages of Ajax, in the use of how to choose?

Flash suitable for processing multimedia, vector graphics, access to the machine, CSS, processing text is insufficient, not easy to be searched.

-ajax to CSS, text support is very good, support search, multimedia, vector graphics, machine access is insufficient.

Common denominator: No flush delivery of messages with the server, user offline and online status, manipulation of the DOM

67. Please explain JavaScript's homologous strategy.

Concept: The same-origin policy is an important security metric for client-side scripting, especially JavaScript. It was first derived from Netscape Navigator2.0, which was designed to prevent a document or script from being loaded from multiple different sources.

Here the homologous strategy refers to: protocol, domain name, the same port, the same Origin policy is a security protocol.

A script can read only the properties of windows and documents from the same source.

68. Why should there be a homologous restriction?

We illustrate: For example, a hacker program, he uses an IFRAME to embed the real Bank login page on his page, when you use the real user name, password login, his page can be read through JavaScript to your form input content, so the user name, The password is easy to get.

Disadvantages:

Now the site JS will be compressed, some files with strict mode, while others do not. At this time these are the strict mode of the file, the merge, the string to the middle of the file, not only does not indicate strict mode, but in the compression after the waste of bytes.

What is the difference between 69.GET and post and when to use post?

Get: Generally used for information acquisition, using URL to pass parameters, the number of messages sent is also limited, generally in 2000 characters

POST: Generally used to modify resources on the server, there is no limit to the information sent.

The Get method needs to use Request.QueryString to get the value of the variable, and the Post method takes the value of the variable by Request.Form.

This means that get is passed through the address bar, and post is forms by submitting the table.

However, use the POST request in the following cases:

Unable to use cache file (update file or database on server)

Send a large amount of data to the server (POST has no data volume limit)

Post is more stable and more reliable than GET when sending user input with unknown characters

70. What is the difference between events, IE and Firefox's event mechanism? How do I stop bubbling?

1. We have an action on the Web page (some actions correspond to multiple events). For example, when we click on a button, an event is generated. is a behavior that can be detected by JavaScript.

2. Event handling mechanism: IE is event bubbling, Firefox supports two event models simultaneously, namely: Capture-type event and bubbling-type event. ；

3. ' Ev.stoppropagation () '; note the old ie method ' ev.cancelbubble = True ';

71.ajax disadvantages and problems under IE?

For details, see: JavaScript Learning Summary (vii) AJAX and HTTP status word
Disadvantages of Ajax

1, Ajax does not support the browser back button.

2. Security issues Ajax exposes the details of interacting with the server.

3, the support of the search engine is weaker.

4. The abnormal mechanism of the program is destroyed.

5, not easy to debug.

IE Caching issues

In IE, if the requested method is get, and the requested URL is not changed, then the result of the request will be cached. The solution to this problem can be changed by changing the URL of the request in real time, as long as the URL changes, it will not be cached, you can add the URL at the end of the random timestamp parameter (' t ' = + new Date (). GetTime ())

Or:

Open (' GET ', ' demo.php?rand=+math.random () ', true);//

Page history status issues for AJAX requests

The state can be recorded by an anchor point, Location.hash. Let the browser record the changes in the state of the page when Ajax requests.

You can also use HTML5 's history.pushstate to implement a no-refresh change to the browser address bar

72. Talk about your understanding of refactoring

Site refactoring: Simplify the structure, add readability, and maintain consistent behavior at the front end of the site without changing the external behavior. This means that the Web site is optimized to maintain a consistent UI while expanding without changing the UI.

For traditional sites, refactoring is usually:

Table layout changed to Div+css

Make your site front-end compatible with modern browsers (for noncompliant CSS, such as IE6)

Optimized for mobile platforms

Optimized for SEO

Deep-seated site refactoring should be considered

Reduce the coupling between code

Keep your code flexible

Write code strictly by specification

Design an extensible API

Replace the old frame, language (e.g. VB)

Enhance the user experience

In general, the optimization of speed is also included in the refactoring

Compress front-end resources such as JS, CSS, and image (usually by the server)

Program performance optimizations (such as data read and write)

Use CDN to accelerate resource loading

Optimization for JS Dom

File caching for HTTP servers

73.HTTP Status Code

Continue continue, generally when the post request is sent, the HTTP header is sent after the server will return this information, indicating confirmation, and then send the specific parameter information

OK normal return information

201 Created Request succeeds and the server creates a new resource

202 Accepted Server has accepted the request but has not processed

301 Moved Permanently The requested page has been permanently moved to a new location.

302 Found Temporary redirection.

303 See other temporary redirection, and always use GET to request a new URI.

304 not Modified The requested Web page has not been modified since the last request.

The request server cannot understand the requested format, and the client should not attempt to initiate the request again using the same content.

401 Unauthorized request is not authorized.

403 Forbidden prohibit access.

404 Not Found Could not find a resource to match the URI.

The most common server-side error for the Internal server error.

The 503 Service unavailable server side is temporarily unable to process requests (possibly overloading or maintenance).

74. Tell me about your understanding of promise.

According to the definition of promise/a+, there are four states of Promise:

Pending: Initial state, non-fulfilled or rejected.

Fulfilled: successful operation.

Rejected: failed operation.

Settled:promise has been fulfilled or rejected, and is not pending

In addition, fulfilled and rejected together collectively settled.

The Promise object is used for deferred (deferred) and asynchronous (asynchronous) computations.

The Promise constructor

Constructs a Promise, the most basic usage is as follows:

var New Promise (function(resolve, Reject) {        if (...) {  //  succeed            Resolve (result);         Else {   //  fails            reject (Error (errmessage));        }    });

The Promise instance owns the then method (the object with the then method, which is often referred to as thenable). It is used in the following ways:

Promise.then (onfulfilled, onrejected)

Receive two functions as parameters, one at the time of fulfilled is called, one in rejected time is called, the receiving parameter is future,onfulfilled corresponding resolve, onrejected corresponds to reject.

Front-end Knowledge Point finishing 02