You don't know the front-end JS face question

1. Why should I use the IFRAME sparingly?

Iframes blocking page Loading

It is very important to trigger the OnLoad event of window in time. The OnLoad event trigger stops the browser's "busy" indicator, telling the user that the current page has been loaded. When the onload event load is delayed, it gives the user the feeling that the page is very slow.

The OnLoad event of window needs to be triggered after all the IFRAME has been loaded (including elements inside). In Safari and Chrome, this blocking situation can be avoided by dynamically setting the SRC in the IFRAME via JavaScript.

The only connection pool

The browser can only open a small number of connections to the Web server. Older browsers, including Internet Explorer 6 & 7 and Firefox 2, can only open two connections to a single domain name (hostname). This number of restrictions has been improved in the new version of the browser. Safari Plus and Opera + can open 4 connections to a domain at the same time, Chrome 1+, IE 8, and Firefox 3 can open 6 at a time. You can use this article to view a specific data sheet:

Browser	http/1.1	http/1.0
IE 6,7	2	4
IE 8	6	6
Firefox 2	2	8
Firefox 3	6	6
Safari 3,4	4	4
Chrome	6	?
Chrome 3	4	4
Chrome 4+	6	?
IPhone 2	4	?
IPhone 3	6	?
IPhone 4	4	?
Opera 9.63,10.00alpha	4	4
Opera 10.51+	8	?

One might expect the IFRAME to have its own separate connection pool, but that's not the case. Most browsers, the main page, and the IFRAME in it, share these connections. This means that the IFRAME may have exhausted all available connections when loading resources, blocking the loading of the master page resources. This is certainly good if the content in the IFRAME is more important than the contents of the main page. But usually, the content in the IFRAME is not important to the content of the main page. It is not worthwhile to use a usable connection in the IFRAME. One solution is to dynamically set the SRC of the IFRAME after the important element is loaded on the main page.

IFrame is used in the top 10 U.S. websites. In most cases, they use it to load ads. This is understandable and a logical solution, with an easy way to load ad services. Keep in mind, however, that IFRAME can impact your page's performance. Do not use the IFRAME whenever possible. Use them sparingly when you really need them.

2,JS in accordance with a property of an object array to sort

In the array of methods, there is a sort sorting method, then how to use this method to do this problem?

(1) One of the most common uses of sort (), arrayvar.sort () is sorted by default in ascending order.

(2) Sort (CB) This is the second method of the method used less:

What if I want to sort an array in descending order?

 var  Arrayvar = new  Array ("5", "6", "3        "); Arrayvar.sort ( function   (before, after)                { if  (before < after) {  return  1; // } else   //   // ["6", "5", "3"]  

If it's an array of objects, how do you sort a property of an object?

       varPerson1 ={name:"Zhangsan", Age:18        }        varPerson2 ={name:"LiSi", Age:14        }        varPerson3 ={name:"Wangwu", Age:20        }        varArrayvar =[Person1, Person2, Person3]; Arrayvar.sort (function(before, after) {if(Before.age < After.age) {//sort from large to small by age property                return1; } Else {                return-1;        }        }); Console.log (Arrayvar);//[{name: "Wangwu", age:20},{Name: "Zhangsan", age:18},{Name: "LiSi", age:14}]

Further expansion, if an array is prioritized by age and then sorted by name, what should be done?

      varPerson1 ={name:"Zhangsan", Age:18        }        varPerson2 ={name:"Qianliu", Age:14        }        varPerson3 ={name:"LiSi", Age:14        }        varPerson4 ={name:"Sunqi", Age:14        }        varPerson5 ={name:"Wangwu", Age:20        }        varArrayvar =[Person1, Person2, person3,person4,person5]; Arrayvar.sort (function(before, after) {if(Before.age < After.age) {//sort from large to small by age property                return1; } Else if(Before.age >after.age) {return-1; } Else{//if age is equal, it is arranged in descending order of the name letter                if(Before.name <after.name) {return1; } Else {                    return-1;        }            }        }); Console.log (Arrayvar);//[{name: "Wangwu", age:20},{Name: "Zhangsan", age:18},{Name: "Sunqi", Age:14},{name: "Qianliu", age:14},{name: "LiS I ", age:14}]

3,JS in the meaning of prototype and constructor, what is the relationship between them? What is the prototype chain?

You can show the relationship between the two.

Create a functional function with the object literal, which has the prototype property, the prototype attribute points to an object, and the object has a constructor property, which is a constructor attribute that points to an object, And this object is exactly the function itself.

The following examples illustrate the prototype chain:

      function foo () {            console.log (foo.prototype); // Object             Console.log (foo.prototype.constructor);        }         function () {            console.log ("HI");        }         var New foo ();        Childfoo.sayhi ();        Console.log (Childfoo);        Console.log (childfoo.prototype);

Run the results directly from the Chrome browser, as follows:

This means that the directly declared function has the prototype property, and the new constructor does not have a prototype property.

A sayhi function is defined on the prototype attribute in Foo, which is inherited by Chilefoo.

Each instance of the Foo object has an intrinsic property called __proto__, which points to its constructor Foo's property prototype.

New has mainly done the following three parts:

<1> var childfoo={}; In other words, initialize an object childfoo.

<2> Childfoo.__proto__=foo.prototype; (note the two lines before and after the underscore)

<3> Foo.call (Childfoo); that is to say, construct Childfoo, or initialize Childfoo.

        function foo () {}         var New foo ();         = = = Foo.prototype); // true    

So what is __proto__? Let's simply say here. Each object initializes a property inside it, that is, __proto__, when we access the property of an object, if the object does not exist inside this property, then he will go to __proto__ to find this attribute, this __proto__ will have their own __proto__, So we have been looking for the concept of the prototype chain we usually call.

According to the standard, __proto__ is not public, that is, a private property, but the engine of Firefox exposes him to become a common attribute, we can access and set up externally.

The first piece of code is very simple, I believe everyone has written this, so let's see why Childfoo can access Foo's sayhi.

First var childfoo=new foo (); Childfoo.__proto__=foo.prototype can be derived. So when we call Childfoo.sayhi (), there is no sayhi this attribute in the first Childfoo, so he needs to go to his __proto__ to find it, That is foo.prototype, and we define the Foo.prototype.sayhi=function () {...} above; So, we found this method.

4. What is the difference between a function declaration and a function expression ?

Example: function declaration

Alert (Add (34)); function Add (A, b) {        return a + b;    }

function expression:

        Alert (Add (34));         var add = function (A, b) {            return a + b;        }

Since VAR defines a declaration statement, the parsing of the variable add is before the code is run, so the add variable is already defined when the code is run.

However, since the assignment statement executes only at run time, the value of sum defaults to undefined before the corresponding code executes.

In the above example, the function expression will be an error.

　　The function declaration parser is first read and made available before any code is executed;

For a function expression, you must wait until the parser executes to the line of code where it is located before it is actually parsed for execution.

In addition to the difference in when to pass variable access functions, the function declaration is equivalent to the syntax of the function expression.

You don't know the front-end JS face question