MU Course network: Web front-end interview questions and answers summary

html/css Part

1, what is the box model.

In a Web page, the size of an element's space consists of several parts, including the contents of the element (content), the inner margin of the element (padding), the border of the element (border), and the outer margin (margin) of the element (four). In this four-part space, some parts can display the corresponding content, while others are used only to separate adjacent regions or regions. The 4 sections together form the box model of the elements in the CSS.

2. What are the elements in the line? What are the block-level elements? Empty (void) elements have those.

Inline elements: A, B, span, IMG, input, strong, select, Label, EM, Button, textarea
Block-level elements: Div, UL, Li, DL, DT, DD, p, H1-h6, blockquote
Empty element: The HTML element that is not content, for example: BR, meta, HR, LINK, input, img

3, CSS to achieve vertical horizontal center

A classic problem, there are many ways to implement, the following is one of the implementation:
HTML structure:

<div class= "wrapper" >
    <div class= "content" ></div>
</div>

Css:

. wrapper{position:relative; 
content{background-color: #6699FF; 
width:200px; 
height:200px; 
Position:absolute; The parent element needs relative positioning 
top:50%; 
left:50%; 
margin-top:-100px; One-second of Height,width 

4, briefly explain the difference between src and href

HREF is a link between the current element (the anchor point) or the current document (link) that points to the location of the network resource, for hyperlinks.

SRC is where you point to external resources, and the content that you point to is embedded in the location of the current label in the document; When you request the SRC resource, the resources it points to are downloaded and applied to the document, such as JS scripts, IMG images, and frame elements. When the browser resolves to the element, it suspends downloading and processing of other resources until the resource is loaded, compiled, executed, and so on, such as pictures and frames, similar to embedding the resource in the current tab. This is why the JS script is placed at the bottom rather than the head.

5, what is CSS Hack?

In general, for different browsers to write different CSS, is the CSS Hack.
IE browser hack generally divided into three kinds, conditional hack, attribute-level hack, selector hack (detailed reference CSS document: CSS document).

For example://1, condition hack

<!--[if ie]>
<style>
test{color:red}
</style>
<![ Endif]>

2. Attribute hack

test{color: #090 \9/For ie8+/ 
color: #f00;/For IE7 and earlier/ 
_color: #ff0;/For IE6 and earlier */}

3, the selector character hack

HTML. Test{color: #090;}/For IE6 and earlier/ 

6, briefly describe the difference between synchronous and asynchronous

Synchronization is blocking mode, and asynchronous is non-blocking.
Synchronization is when a process executes a request, and if the request takes a while to return information, the process waits until the return message is received;
Asynchrony means that the process does not have to wait all the time, but continues to do the following, regardless of the state of the other processes. When a message returns, the system notifies the process to handle it, which can increase the efficiency of the execution.

7, the difference between PX and em

PX and EM are length units, the difference is that PX value is fixed, the number of specified is how much, calculation is relatively easy. The EM value is not fixed, and EM inherits the font size of the parent element. The default font height for browsers is 16px. So the unadjusted browsers are compliant: 1EM=16PX. So 12px=0.75em, 10px=0.625em.

8, what is called graceful demotion and progressive enhancement.

Progressive Enhancement Progressive Enhancement:

Build the page for the lower version of the browser to ensure the most basic functionality, and then for the Advanced browser performance, interaction and other improvements and additional features to achieve a better user experience.

Graceful demotion Graceful degradation:

Build the complete functionality from the outset and then be compatible with the lower version of the browser.

Difference:
A. Graceful demotion starts with a complex situation and attempts to reduce the supply of user experience
B. Progressive enhancement begins with a very basic, functional version and is constantly expanding to meet the needs of the future environment
C. Demotion (functional decay) means looking back, and progressive enhancement means looking ahead while keeping its roots safe.

9, what is the kernel of the browser respectively?

Ie:trident kernel
Firefox:gecko kernel
Safari:webkit kernel
Opera: formerly the Presto kernel, opera has now switched to Google Chrome's blink kernel
Chrome:blink (based on Webkit,google and opera Software) JavaScript part

1. How to add, remove, move, copy, create, and find nodes.

1) Create a new node

Createdocumentfragment ()//Create a DOM fragment 
createelement ()//create a specific element

2) Add, remove, replace, insert

AppendChild ()///Add 
removechild ()//Remove
replacechild ()//Replace
insertbefore ()//Insert

3) Find

getElementsByTagName ()//through the label name
getelementsbyname ()//through the value of the element's Name property 

2. Implement a function clone, you can copy the 5 main types of data in JavaScript (including number, String, Object, Array, Boolean) for value replication.

/** * Object Cloning * supports basic data types and Object * Recursive method/function Clone (obj) {var o; 
        Switch (typeof obj) {case ' undefined ': break; 
            Case "string": o = obj + ""; 
        Break 
            Case "number": o = obj-0; 
        Break 
            Case "Boolean": o = obj; 
        Break 
            Case "Object"://object is divided into two conditions (object) or array (array) if (obj = = null) {o = null;}  
                else {if (Object.prototype.toString.call (obj). Slice (8,-1) = = "Array") { 
                o = []; 
                for (var i = 0; i < obj.length i++) {O.push (Clone (Obj[i));} 
                else {o = {}; 
                    For (var k in obj) {o[k] = Clone (Obj[k]); 
                }} break; 
                Default:o = obj; 
        Break
    }//switch function endsreturn o; Author: visor_03389873 Link: http://www.imooc.com/article/8201 Source: mu-Lesson Net

3, how to eliminate an array of repeated elements.

Method One: 
var arr1 =[1,2,2,2,3,3,3,4,5,6], 
    arr2 = []; 
for (var i = 0,len = Arr1.length; i< len; i++) { 
    if (Arr2.indexof (arr1[i)) < 0) { 
        arr2.push (arr1[i)); 
    } 
document.write (ARR2); 1,2,3,4,5,6

4, want to implement a page to a node of the drag. How to do it. (using native JS).

5. What is a pseudo array in JavaScript? How to convert a pseudo array into a standard array.

Pseudo-Array (class array): There is no specific behavior for calling array methods directly or expecting length properties, but they can still be traversed by true array traversal methods. Typically, the argument parameters of a function, as well as calls to Getelementsbytagname,document.childnodes, all return nodelist objects are pseudo arrays. You can use Array.prototype.slice.call (Fakearray) to convert an array to a true array object.

function log () { 
    var args = Array.prototype.slice.call (arguments);//To convert argument to a true array 
    using the Unshift array method Args.unshift (' (app) '); 
    Console.log.apply (console, args); 
};

6, the role of callee and caller in JavaScript.

Caller is the return of a reference to a function that calls the current function;
Callee is the function that is being executed, that is, the body of the specified function object.

7, please describe the difference between cookies,sessionstorage and Localstorage

Sessionstorage is used to store data locally in a session, which can only be accessed by a page in the same session and the data is destroyed when the session ends. So sessionstorage is not a persistent local store, it's just session-level storage. The localstorage is used for persistent local storage, and the data will never expire unless the data is actively deleted. The difference between Web storage and cookies is that the Web Storage concept is similar to a cookie, except that it is designed for larger capacity storage. The size of the cookie is limited, and every time you request a new page, the cookie is sent to the past, which wastes bandwidth, and the cookie needs to specify the scope and not be called across domains. In addition, WEB storage have methods such as setitem,getitem,removeitem,clear, unlike cookies that require front-end developers to encapsulate Setcookie,getcookie themselves. But cookies are also unavailable or missing: Cookies are used to interact with the server and exist as part of the HTTP specification, and the Web Storage is intended only for storing data locally.

8. Quick sort of handwritten array

About the Quick row algorithm detailed explanation, may refer to the Nanyi Teacher's article Quick sort
The idea of "quick sort" is simple, and the whole sort process takes only three steps:
(1) In the dataset, select an element as the "datum" (pivot).
(2) All elements less than "datum" are moved to the left of the datum, and all elements greater than "datum" are moved to the right side of the datum.
(3) for the two subsets to the left and right of the "datum", repeat the first and second steps until all subsets are left with only one element.

9, the statistical string "AAAABBBCCCCDDFGH" in the number of letters or statistics up to the number of letters.

var str = "AAAABBBCCCCDDFGH"; 
var obj = {}; 
for (Var i=0;i<str.length;i++) {
var v = str.charat (i);
if (obj[v]&&obj[v].value==v) {
obj[v].count=++obj[v].count;
} else{
obj[v]={};
Obj[v].count=1;
Obj[v].value=v
}
}
for (key in obj) {
documemt.write (obj[key].value+ ' = ' +obj[key].count+ ');//a=4 b=3 c=4 d=2 f=1 g=1 h=1
}

10, write a function, clear the space before and after the string. (compatible with all browsers)

function Trim (str) {
if (str&&typeof str = = "string") {return
str.replace (/^\s)/(LS) $/g, ""); Remove front and back blank characters
}
}

Other
1, a complete HTTP transaction is a process.
Basic process:
A. Domain Name resolution
B. 3 handshake initiated by TCP
C. initiate an HTTP request after a TCP connection is established
D. server-side response to HTTP requests, browsers get HTML code
E. Browsers parse HTML code and request resources in HTML code
F. Rendering the page rendered to the user by the browser

2. How do you understand the position of the front-end engineer?
A. Front end is the most close to the user programmer, the front-end ability is to allow the product from 90 to 100 points, or even better
B. Participate in the project, fast and high-quality completion of the implementation of the map, accurate to 1px;
C. Communication with team members, UI design, product manager;
D. Good page structure, page refactoring and user experience;
E. Handle hack, compatible, write beautiful code format;
F. Optimized for servers, embracing the latest front-end technology.

Author: visor_03389873
Link: http://www.imooc.com/article/8201
Source: MU-course Network