Web Front end interview questions and answers summary

Html/css part

1. What is a box model?

In a Web page, the size of an element's space is composed of several parts, including the contents of the element (content), the element's padding (padding), the border of the element (border), and the margin of the element (margin) four parts. The four parts occupy space, some parts can display the corresponding content, and some parts are only used to separate adjacent areas 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 block-level elements? What are the empty (void) elements?

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: A HTML element that has no content, for example: BR, meta, HR, LINK, input, img

3, the CSS to achieve vertical horizontal center

A classic problem, there are many ways of implementation, 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; Height,widthmargin-left of One-second: -100px;}

4, briefly describe the difference between src and href

The href is a link to the location of the network resource, the establishment and the current element (anchor point), or the current document (link), for hyperlinks.

SRC is the location of the external resource, which is embedded in the document where the current label is located, and the resources it points to are downloaded and applied to the document when the SRC resource is requested, such as JS scripts, IMG images, and frame elements. When the browser resolves to the element, it pauses the download and processing of other resources until the resource is loaded, compiled, executed, and so on, like pictures and frames, similar to embedding the resource in the current tag. This is why the JS script is placed at the bottom instead of the head.

5. What is CSS Hack?

In general, for different browsers to write a different CSS, is the CSS Hack.

IE browser hack is generally divided into three kinds, condition hack, attribute level hack, selector hack (detailed reference CSS document: CSS document). For example:

1, conditions 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, selector hack* HTML. Test{color: #090;}     /* for IE6 and earlier */* + HTML. Test{color: #ff0;} /* for IE7 */

6. Brief description of the difference between synchronous and asynchronous

Synchronization is blocking mode, asynchronous non-blocking mode.

Synchronization means that when a process executes a request, if the request takes a while to return the information, the process will wait until the return message is received before it continues;

Async means that a process does not have to wait, but continues to do the following, regardless of the state of other processes. The system notifies the process when a message is returned, which can improve the efficiency of execution.

7. The difference between PX and em

PX and EM are length units, the difference is that the PX value is fixed, specifying how much is how much, the calculation is relatively easy. The EM value is not fixed, and EM inherits the font size of the parent element.

The browser's default font height is 16px. So the unmodified browser is compliant with: 1EM=16PX. So 12px=0.75em, 10px=0.625em.

8. What is graceful downgrade and progressive enhancement?

Progressive Enhancement Progressive Enhancement:
Build pages for low-version browsers to ensure the most basic functionality, and then improve and append features such as effects and interactivity for advanced browsers to achieve a better user experience.

Graceful downgrade Graceful degradation:
Build the full functionality from the start and then be compatible with the low-version browser.

Difference:

A. Graceful demotion begins with a complex situation and attempts to reduce the supply of user experience

B. Progressive enhancement begins with a very basic, workable version and is continuously expanded to suit the needs of the future environment

C. Downgrading (functional decay) means looking back, while progressive enhancement means looking forward while keeping its roots in a safe zone

9. What is the browser's kernel, 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 (co-developed with Opera Software based on Webkit,google)

JavaScript Section 1. How do I add, remove, move, copy, create, and find nodes?

1) Create a new node

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

2) Add, remove, replace, insert

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

3) Find

getElementsByTagName ()//by tag name Getelementsbyname ()//through the value of the element's Name property getElementById ()//through element ID, uniqueness

2. To implement a function clone, you can copy values for 5 major data types in JavaScript, including number, String, Object, Array, Boolean.

/** * Object Cloning * supports basic data types and objects * Recursive method */function Clone (obj) {   var o;    switch (typeof obj) {  &nbs P    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 case objects (object) or arrays (array)            i F (obj = = null) {               o = null,           &NB SP;} else {               if (Object.prototype.toString.call (obj). Slice (8,-1) = == "Array") {                   o = [];         &NBS P          for (var i = 0; i < obj.length; i++) {            &NBS P          o.push (Clone (Obj[i));                    }               &N BSP;} else {                   o = {};           &NB Sp        for (var k in obj) {                    &NBS P &NBSP;O[K] = Clone (Obj[k]);                    }               &N BSP;}            }            break;        default:         &NBSp  o = obj;            break;    }    return o;}

3. How to eliminate the repeated elements in an array?

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? (use native JS).

<! DOCTYPE html>


<style type= "Text/css" >
#div1 {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type= "Text/javascript" >
function AllowDrop (EV)
{
Ev.preventdefault ();
}

function drag (EV)
{
Ev.dataTransfer.setData ("Text", ev.target.id);
}

function Drop (EV)
{
Ev.preventdefault ();
var data=ev.datatransfer.getdata ("Text");
Ev.target.appendChild (document.getElementById (data));
}
</script>

<body>

<p> please drag and drop the W3school picture into the rectangle:</p>

<div id= "Div1" ondrop= "Drop (event)" Ondragover= "AllowDrop (event)" ></div>
<br/>

</body>

5. What is a pseudo-array in javascript? How to convert a pseudo-array to a standard array？

Pseudo-Arrays (class arrays): You cannot call an array method directly or expect any special behavior for the length property, but you can still traverse them with a true array traversal method. Typically, the argument parameters of a function, as well as calls to Getelementsbytagname,document.childnodes, are all returned 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);      In order to use the Unshift array method, convert the argument into a true array 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 invokes the current function;

Callee is the body of the function object that is being executed, which is the function that is being performed.

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 destroyed when the session ends. So sessionstorage is not a persistent local store, only session-level storage. While Localstorage is used for persistent local storage, the data will never expire unless the data is actively deleted.

The difference between Web storage and cookies

The concept of WEB storage 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 past, which virtually wastes bandwidth, and the cookie needs to specify the scope and cannot be called across domains.

In addition, WEB storage has methods such as setitem,getitem,removeitem,clear, unlike cookies that require front-end developers to encapsulate Setcookie,getcookie themselves. However, cookies are also not available or missing: The role of cookies is to interact with the server as part of the HTTP specification, and Web Storage is only for local "storage" of data.

8. Quick sort of handwritten array

For a detailed description of the fast-track algorithm, you can refer to the Nanyi Teacher's article for quick sorting

The idea of "quick sorting" is simple, and the entire sequencing process takes only three steps:

(1) In the dataset, select an element as the "datum" (pivot).
(2) All elements smaller than "datum" are moved to the left of "datum", and all elements that are greater than "datum" are moved to the right of "datum".
(3) for the two subsets to the left and right of the Datum, repeat the first and second steps until there is only one element left in all the subsets.

9, the statistical string "AAAABBBCCCCDDFGH" the number of letters or statistics of the maximum 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) {document.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 string before and after the space. (compatible with all browsers)

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

other 1. What is the process of a complete HTTP transaction?

Basic Flow:

A. Domain Name resolution

B. 3-time handshake to initiate TCP

C. Initiating an HTTP request after establishing a TCP connection

D. server-side response HTTP request, browser gets HTML code

E. Browser parsing HTML code and requesting resources in HTML code

F. Browser renders a page rendering to the user

2. How do you understand the position of the front-end engineer?

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

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

C. Communication with team members, UI design, product manager;

D. Good page structure, page refactoring and user experience;

E. processing hack, compatible, write beautiful code format;

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

Web Front end interview questions and answers summary