Web front-End pen Questions (2)--Wolf Factory

1.CSS attribute position What are the property values that describe their role

Value	Describe
Absolute	Absolute positioning, positioned relative to the first parent element other than the static location The position of the element is specified by the left right top bottom property
Fixed	Absolute positioning, relative to the browser The position of the element is specified by the left right top bottom property
Relative	Relative positioning relative to other normal positions (i.e., in normal flow without relative)
Default value	No positioning, element appears in normal flow Ignore left right top bottom and Z-index
Inherit	Specifies that the property value of postion should be inherited from the parent element

2. The procedure is defined as follows:

1 varmyobject={2Foo: "Bar",3Funcfunction(){4         varself= This;5Console.log ("outer func:this.foo=" + This. foo);6Console.log ("outer func:self.foo=" +self.foo);//7(function(){8Console.log ("outer func:this.foo=" + This. foo);9Console.log ("outer func:self.foo=" +Self.foo);Ten }) () One }}     A Myobject.func ();  - /*Print Results - outer Func:this.foo=bar the outer Func:self.foo=bar - outer func:this.foo=undefined - outer Func:self.foo=bar - */

In JavaScript, the context object is the this pointer, the environment in which the called function is located. The purpose of a context object is to reference the object itself that invokes it within a function.

When 12 rows are called, the code runs to 5, 6 lines, self and this case:

So This.foo=bar;self.foo=bar

When running into an anonymous function, that is, 8th, 9 rows

A closed bag of headaches! Because in the JavaScript language, only sub-functions inside the function can read local variables, it is possible to simply interpret the closure as "a function defined inside a function".

So This.foo=undefined;self.foo=bar

In the same way, a different invocation method:

foo= "Test"; func=myobject.func (); func () ; /* */

This and self are windows, but because global variables are defined, you can find the value of. Foo

3. Randomly generated colors

function Getrandomcolor () {    var colorch= "#";      for (var i=0;i<6;i++) {        var a=math.random ();     var choose=[1,2,3,4,5,6,7,8,9, ' A ', ' B ', ' C ', ' D ', ' E ', ' F ']    var num=math.round ( A *);        Colorch+ =Choose[num]    ;    } return colorch;        }

4. List the inline elements, block elements, and empty elements you know

Block element:

Common:<div><dl><ul><ol><form>

Always starts on a new line; This element is displayed as a block-level element with a newline character before and after this element.
Height,width,padding,margin are effective;
The width defaults to 100% of its container unless a width is set.

Convert to inline element when set to Display:inline

Inline element:

<a><b><br><span><i><input><select><label><q> <span><sub><sup><textarea>

and other elements are on one line; default. This element is displayed as an inline element with no line break before or after the element. Inline elements do not occupy a single row, but are displayed next to each other.
Width,height settings are not valid, horizontal padding and margin are valid, vertical padding and margin are not valid.
If you need to set the height, you can brace up by row height line-height.
Width is the width of the text or picture, and it cannot be changed.

Convert to block element when set to Display:block

void element

<br>

<area> <base> <col> <command> <embed> <keygen> <param> <source> < Track> <wbr>

Cannot contain any content, directly closed

The difference between link and @import in 5.CSS

There are 3 main ways to use CSS in your page:

Inline CSS: Inline add define Style property value

Outer chain CSS: page header inline call and outside link call, link and @import.

Link
<link rel= "stylesheet" rev= "stylesheet" href= "CSS file" type= "Text/css" media= "All"/>
@import:
<style type= "text/css" media= "screen" >
@import url ("CSS file");
</style>

Both are external ways of referencing CSS, but there are some differences:

The difference between 1:link is XHTML tags, in addition to loading CSS, you can also define other transactions such as RSS, @import belong to the CSS category, can only load CSS (the same as @font-face loaded fonts).

The difference between 2:link referencing a CSS, loading at the same time when the page loads, @import need to load the page after full loading.

The difference between 3:link is XHTML label, no compatibility problem, @import is proposed in CSS2.1, the lower version of the browser is not supported.

The difference 4:link supports using JavaScript to control the DOM to change styles, while @import does not support it.

6. The following code outputs the result:

var x=1,y=z=0; function Add (n) {    return n=n+1;} Y=Add (x); function Add (n) {    return n=n+3;} Z=Add (x)//x=1,y=4,z=4

7. Write at least 5 front-end optimization methods

1. Reduce the size of HTTP requests and request resources (merging pictures, with tools such as YUI compressor, such as slimming JS and CSS files, merging multiple CSS files, merging multiple JS files, pictures with lazyload, compressed image size)

2. Reduce DOM operations (such as replacing DOM operations such as createelement with innerhtml= "<a href>link<a>")

3. Using a CDN content distribution network (such as jquery, users may have downloaded jquery files from Microsoft's CDN in the cache when visiting other websites, so your page uses jquery without having to request a jquery file again)

4. Use JSON instead of XML to store and exchange data

5. Reduce unreasonable nesting (such as table's TD table, or body ul Li a)

6. Reduce cookies (because cookies are read every time the page is loaded)

7. Using the HTML5 local cache mechanism

8. Load the HTML page structure, then render the presentation layer, finally loading JS (CSS outside the chain head, JS outside the chain to put the tail, because the request JS will block other resources download request)

8. Implement digital kilobits (e.g. 100,000)

function comdify (num) {    var ch=num.tostring ();     var len=ch.length;     if (Len>3) {        for (var i=len-3;i>0;i-=3) {            ch=ch.substr (0, i) + "," +ch.substr (i,len-1);            Len++        ;    }    } return ch;}

Solution 2: Regular expression is my short board, really do not want to see!

function comdify (n) {    var re=/\d{1,3} (? = (\d{3}) +$)/g;     var n1=n.replace (/^ (\d+) ((\.\d+)?) $/,function(s,s1,s2) {return         s1.replace (Re, "$&,") +S2;});     return N1;}

At the same time, the input number becomes a decimal point when it loses focus, and becomes a number when the focus is obtained:

var input_box=document.getelementbyid ("Input_box"); Input_box.onblur=function() {     this. value=. Value.replace (/\d+? =(?:\ D{3}) +$)/g,function(s) {return s+ ', '});} Input_box.onfocus=function() {    this. value=. Value.replace (/,/g, ');}

9. Domain Hijacking

Domain hijacking is a way of attacking the Internet, by attacking the domain Name resolution server (DNS), or by forging the domain Name resolution server (DNS) method, the target website domain name resolves to the wrong address so that users can not access the target site.

The basic principle of Domain name resolution (DNS) is that the network address (domain name, in the form of a string) corresponds to the network address (IP address, such as 216.239.53.99) that the real computer can recognize, so that the computer can communicate further, deliver the URL and content. Since domain name hijacking often can only be carried out within a particular hijacked network, Domain name servers (DNS) outside this range can return to normal IP addresses, and advanced users can point DNS to these normal domain name servers in network settings to achieve normal access to URLs. So the domain hijacking usually accompanies the measure--block the normal DNS IP. If you know the real IP address of the domain name, you can use this IP instead of the domain name for access. For example, access to Google, you can change access to http://216.239.53.99/, thus bypassing the domain name hijacking. Specific to the degree of inquiry from the Encyclopedia: Http://baike.baidu.com/view/420825.htm?fr=aladdin

Web front-End pen Questions (2)--Wolf Factory