The most complete set of front-end interview (4) summary article

Note the interview:

Introduce myself not too long, not too short, about 3 minutes the most appropriate, especially as the web front-end technology

Aspects of the interview, to say more to the point, I turn from learning, project practices, future planning of this

Write down three self-introduction web front-end interview.

 Source: https://www.yinxiangit.com

Front-end developer interview outline a comprehensive collection of knowledge:

 

HTML + CSS:
understanding of Web standards, core browser differences, compatibility, hack, CSS basics: layout, box model, priority selector and use, HTML5, CSS3, mobile terminal adaptation

 

JavaScript:
data types, object-oriented, inheritance, closures, plug-ins, scope, cross-domain, the prototype chain, modular, custom events, a memory leak, the event mechanism, asynchronous callback loading template engine, Nodejs, JSON, ajax, etc. .

 

Other knowledge:
HTTP, safe, regular, optimization, reconstruction, responsive, understanding the mobile side, the front end of three frames, teamwork, maintainable, SEO, UED, architecture, career

As a front-end engineer, regardless of the length of working years must grasp the knowledge points:

1, DOM structure - which may be present and how to move the relationship between the node between any two nodes.
2, DOM operations - how to add, remove, move, copy, create, and find nodes and so on.
3, the event - how to use the event as well as the difference between the IE and the standard DOM event model.
4, XMLHttpRequest - What is this, how to perform a complete GET request, how to detect errors.
5, strict mode and mixed mode - how to trigger these two models, which distinguish what is the point.
6, box model - margins, box model of the relationship between the padding and borders, and the following versions of IE8 browser
7, in the block-level elements and inline elements - how to control them with CSS, and how reasonable they use
8, floating elements - how to use them, they have a problem and how to solve these problems.
9, HTML and both XHTML-- What is the difference, do you think which one to use and say why.
10, JSON - effect, use, design structure.

 

 

HTML (Interview)

 Doctype role? How to distinguish between strict mode and promiscuous mode? What is the significance of them?

1, <! DOCTYPE> declaration document located in the front, in the  < HTML> tag before. It tells the parser browser, what type of document to resolve this specification document.

2, strict mode and JS layout mode of operation is run to the highest standards of the browser supports.

3, in promiscuous mode, the loose pages display backwards-compatible way. Simulate the behavior of older browsers to prevent the site does not work.

4, DOCTYPE does not exist or incorrectly formatted will result in the document presented in promiscuous mode.

 

What are inline elements? Block-level elements are there? Empty (void) elements are those?

1, CSS specification, each display element has attributes, determine the type of the element, each display element has a default value, such as the default display attribute value div "Block", a "block level" element; span default display attribute value "inline", a "row" element.

2, the line element has: ab span img input select strong (emphasis tone) block-level element has: div ul ol li dl dt dd h1 h2 h3 h4 ... p

3, well-known empty elements:

<br> <hr> <img> <input> <link> <meta>

Little is known:

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

The difference between link and @import is?

1, link belongs XHTML tag, and @ Import CSS is provided;

2, when the page is loaded, link will also be loaded, and @ Import cited CSS will wait until the page has finished loading before loading;

3, Import only to recognize in IE5 or more, and is XHTML link tag, no compatibility issues;

4, the right way of re-style link above @ rights import weights.

What browser kernel are?

* IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink；

Common compatibility problems?

1, PNG24 bit picture appears on the background iE6 browser, the solution is made PNG8.

2, the browser's default margin and different padding, the solution is to add a global

{* Margin: 0; padding: 0;} to unity.

3, IE6 from bilateral bug: the block attribute tag float, the margin where there are rampant,

Display is larger than the margin settings in ie6.

4, the floating double ie produced from  #box {  a float: left;  width: 10px;  margin: 0  0  0  100px;}

5, under this situation IE 20 generates distance px, the solution is added --_ label style control float in the display : inline; which was converted to the attribute row. (_ This symbol only ie6 will recognize)

6, a progressive identifiable manner, gradually excluded from the local population.

7, first, the use of clever "9," the mark, the IE's browser separated from all cases. Next, again using the "+" will IE8 and IE7, IE6 separated, so IE8 been independently identified.

What's new html5 have to remove those elements? How to deal with a new label HTML5 browser compatibility problems? How to distinguish between HTML and HTML5?

1, HTML5 now is not a subset of SGML, mainly to increase about image, location, storage, multi-tasking and other features.

2, painting canvas

 video and audio elements for media playback

 LocalStorage local offline storage for long term storage of data, the browser is closed after data is not lost;

 sessionStorage data is automatically deleted when the browser is closed

 Semantics of better content elements, such as article, footer, header, nav, section

 Form controls, calendar, date, time, email, url, search

 The new technology webworker, websockt, Geolocation

3, removing elements

 Pure performance elements: basefont, big, center, font, s, strike, tt, u;

 The elements negatively affect the availability of: frame, frameset, noframes;

4, support the new HTML5 tags:

IE8 / IE7 / IE6 support label produced by document.createElement method, you can use this feature to make these new browsers support HTML5 tags,

After the browser to support the new label, the label also need to add the default style:

5, of course, the best way is to directly use the mature framework, the framework of the most used is html5shim

<!--[if lt IE 9]>  <scriptsrc="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]-->

Semantic understanding?

1. Do the right thing with the right label!

2. html semantic structure is to make the content of the page, easy to browsers, search engines resolve;

3. Also available in one document format without CCS style case, and it is easy to read.

4. Search engine crawlers rely on markers to determine the weight of each keyword contextual and heavy, which will help SEO.

5. So read the source code of the Web site are more likely to block the site, easy to read maintenance understood.

 

HTML5's offline storage?

localStorage long-term storage of data, the browser is closed after data is not lost;

sessionStorage data is automatically deleted when the browser is closed.

 

iframe those shortcomings?

1. iframe will block Onload event of the main page;

2. iframe shared connection pool and the main page, and the browser is limited to connecting the same domain, it will affect the parallel load the page.

3. These two shortcomings need to be considered before using iframe. If you need to use iframe, preferably through javascript

4. Dynamically add value to the src attribute iframe, so that these two problems can be bypassed.

5.  

Describe the difference between cookies, sessionStorage and localStorage of?

1. cookie passed back and forth between the browser and the server. sessionStorage and not localStorage

2. LocalStorage greater sessionStorage and storage space;

3. sessionStorage and localStorage more abundant use interface;

4. sessionStorage localStorage and separate storage space;

 

CSS (Interview)

 

1, tell us about the CSS box model?

• There are two, IE box model, W3C standard box model; content portion contains IE's border and pading;
• Box model: content (content), filling (padding), border (margin), frame (border)

2, CSS3 What's new there?

1. CSS3 rounded corners (border-RADIUS: 8px), shadow (Shadow Box-: 10px),
2. Adding effects to the text (text-shadow,), linear gradient (gradient), rotation (Transform)
3. Transform: Rotate ( 9deg) Scale ( 0.85, 0.90) Translate ( 0px, -30px) skew ( -9deg, 0deg); // rotation, scaling, positioning, inclination
4. Added more CSS selectors and more background rgba

 

3. Why do you want to initialize CSS styles.

Because the browser compatibility issues, different browser the default value of some labels are different, if not on the CSS page initialization will always be a difference between the browser display.

Of course, the style will initialize SEO has some influence, but can not have both fish and bear's paw, but in the case sought to initialize minimal impact.

The easiest method is to initialize: * { padding:  0;  margin:  0;} (not recommended)

Of course, the style will initialize SEO has some influence, but can not have both fish and bear's paw, but in the case sought to initialize minimal impact.

4, lists the value display, indicating their role. position value, relative and absolute positioning origin is the?

5, how to design a full screen "product" word layout?

Simple way:

• Div width above 100%,
• The following two wide div 50%, respectively, with a float so as not to change the line or inline.

 

 

javascript (Interview)

 

1, JS data types are there? The results of the typeof operator what are data types?

Data type consists of two parts:

The basic data types: Undefined, Null, Boolean, Number, and String

Reference data types: Array, Object

Results typeof operator types:

number,string，boolean,object,function,undefined

2.null, undefined difference?

denotes a null object is defined, the value of "null";

undefined said they did not have this value.

3. Analyzing how a variable is not defined

typeof bianliang ==”undefined”

4. Analyzing how a variable is an array arr if (typeof this question not used)

Arr instanceof Array

5. What is the event delegate

Event delegates that the event target itself does not handle the event, but to entrust the task to deal with their parent or ancestor elements, or even the root element (document).

6. Description JSON object under two very important way

JSON.parse () // JSON an object string into a JSON

JSON.stringify () // JSON object into a string

7. Write a function getRandomNumber (startNum, endNum), remove any random number between StartNum to endNum

function getRandomNumber(startNum,endNum){
        var endRand = endNum - startNum + 1;
        //0~1中间的16位数字
        var randNum = Math.random();
        //随机取出来0~9之间的任意一个数字
        randNum = Math.floor(randNum * endRand);
        return randNum+startNum;
}
 

8. Write a generic function to remove spaces around the string?

String.prototype.strim = function(){
return this.replace(/(^s|s$)/g,””);}

Other issues (Interview)

1, a display page load completion from enter the URL to the page, what the process have taken place?

查找浏览器缓存     
DNS解析、查找该域名对应的IP地址、重定向（301）、发出第二个GET请求    进行HTTP协议会话    客户端发送报头(请求报头)    
服务器回馈报头(响应报头)    html文档开始下载    文档树建立，根据标记请求所需指定MIME类型的文件    
文件显示浏览器这边做的工作大致分为以下几步： 加载：根据请求的URL进行域名解析，向服务器发起请求，接收文件（HTML、JS、CSS、图象等）。
解析：对加载到的资源（HTML、JS、CSS等）进行语法解析，建议相应的内部数据结构（比如HTML的DOM树，JS的（对象）属性表，CSS的样式规则等等）

 

2, http status codes are those? Represent What does it mean?

100-199 用于指定客户端应相应的某些动作。
200-299 用于表示请求成功。 
300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。 
400-499 用于指出客户端的错误。
400   语义有误，当前请求无法被服务器理解。
401   当前请求需要用户验证 
403  服务器已经理解请求，但是拒绝执行它。
500-599 用于支持服务器错误。 
503 – 服务不可用

 

3, with regular verify the identity number?

1、//身份证正则表达式(15位)
isIDCard1=/^[1-9]d{7}((0d)|(1[0-2]))(([0|1|2]d)|3[0-1])d{3}$/;
2、//身份证正则表达式(18位)
isIDCard2=/^[1-9]d{5}[1-9]d{3}((0d)|(1[0-2]))(([0|1|2]d)|3[0-1])d{4}$/;
身份证正则合并：(^d{15})|(d17([0−9]|X))

4, cross-domain solutions Summary

1. 1 ,: JSONP use, i.e. json with padding (inner fill), the name suggests, it is to fill a box JSON
2. 2 ,: directly provided on the server side cross-domain resource access CORS (Cross-Origin Resource Sharing), provided Request Header header Access-Control-Allow-Origin can be obtained for the specified data domain
3. 3 ,: direct request a picture
4. By modifying document.domain to 4 ,: across subdomains 5 ,: cross-domain reception data by window.name
5. 6 ,: window.postMessage method of cross-domain using HTML5

5, TCP / IP four-layer protocol architecture?

From top to bottom order:

1. 1, the application layer (FTP, Telnet, SMTP, RIP, NFS, DNS)
2. 2, the transport layer (TCP, UDP)
3. 3, an Internet layer (IP, ICMP, ARP, RARP)
4. 4, the network interface layer

 

Five-layer protocol architecture?

1. Application layer
2. Transport Layer
3. Network layer
4. data link layer
5. Physical Layer

 

OSI seven-layer architecture?

1. Application layer
2. Presentation layer
3. Session Layer
4. Transport Layer
5. Network layer
6. data link layer
7. Physical Layer

 

 

Browser-origin policy:

Browser security is the cornerstone of the "same origin policy" (same-origin policy). The so-called "homologous" refers to the "three identical":

• The same protocol
• The same domain
• The same port