Web front-end interview questions:

Front-end Development interview Knowledge Point outline:

HTML&CSS：    对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应 JavaScript：      数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等。其他：   

Http://developer.51cto.com/art/201004/192415.htm

Browser compatibility Issue One: different browser tags default external patches and internal patches are different

Problem symptom: Write a few labels casually, do not add style control case, each margin and padding difference is big.

Hit frequency: 100%

Solution: CSS in *{margin:0;padding:0;}

Note: This is the most common and the most easy to solve a browser compatibility problem, almost all of the CSS file starts with a wildcard * to set the internal and external patches of each tag is 0.

Browser compatibility Issue two: block attribute tag float, and there is the margin of the case, in the IE6 show margin than set the large

Problem symptom: A common symptom is that the next piece in IE6 is top to bottom row

Frequency: 90% (a slightly more complex page will encounter, float layout most common browser compatibility issues)

Solution: Add Display:inline to the label style control of float and convert it into inline properties

Note: Our most commonly used is div+css layout, and Div is a typical block attribute tag, horizontal layout when we are usually implemented with div float, horizontal spacing setting if using margin to achieve, this is a must encounter compatibility problem.

Browser compatibility issue Three: set a smaller height label (generally less than 10px), in the Ie6,ie7, the height of the tour beyond its own set height

Symptoms: IE6, 7, and the height of this label are uncontrolled, exceeding the height of your own settings

Hit frequency: 60%

Solution: Set Overflow:hidden for labels that are out of height, or set line height line-height less than you set.

Note: This usually occurs in the label where we set the small rounded background. This problem occurs because the browser before IE8 will give the label a minimum height of the row height. Even if your label is empty, the height of the label will still reach the default row height.

Browser compatibility issues Four: in-line attribute tags, set display:block after the float layout, there are horizontal margin, IE6 spacing bug

Problem symptom: The spacing in IE6 is more than the spacing set

Chance to hit: 20%

Solution: Add display:inline;display:table after Display:block;

Note: In-line property labels, in order to set the width, we need to set display:block; (except that the input tag is special). With float layout and horizontal margin, under IE6, he has a bug of horizontal margin after the Block property float. However, because it is the inline attribute tag itself, so if we add display:inline, its aspect will not be set. We also need to add display:talbe behind Display:inline.

Browser compatibility issue Five: Image default spacing

Problem symptom: When several IMG tags are put together, some browsers will have default spacing, and adding the wildcard character mentioned in the question does not work.

Chance to hit: 20%

Solution: Use the Float property for the IMG layout

NOTE: Because the IMG tag is an inline attribute tag, the img tag is lined up on a single line as long as the container width is not exceeded, but there is a gap between the IMG tags in some browsers. Removing this spacing using float is the right path. (One of my students uses negative margin, although it can be solved, but the negative margin itself is prone to browser compatibility problems, so I forbid them to use)

Browser compatibility question six: Label minimum height setting min-height incompatible

Problem symptom: Because Min-height itself is an incompatible CSS property, setting Min-height is not very well compatible with each browser.

Chance to hit: 5%

Solution: If we want to set a minimum height of 200px for a label, the setting required is: {min-height:200px; height:auto!important; height:200px; overflow:visible;}

Note: In the front of the B/s system, there are many situations where we have this demand. When the content is less than a single value (such as 300px). The height of the container is 300px, and when the content height is greater than this value, the container height is high, not the scroll bar. This is when we face this compatibility issue.

Browser compatibility issue VII: Compatible CSS settings for transparency

The way to do a compatible page is to write a small piece of code (a line or a piece of the layout) we have to see in different browsers is compatible, of course, proficiency to a certain degree is not so troublesome. It is recommended that you often encounter compatibility issues with novice users. Many compatibility issues are caused by the browser's default attribute resolution for the label, as long as we can easily fix these compatibility issues with a little bit of setup. If we are familiar with the default properties of tags, we can understand why compatibility issues arise and how to resolve them.

1. /* CSS hack*/

I seldom use hacker, may be personal habits bar, I do not like to write code ie incompatible, and then use Hack to solve. But the hacker is still very useful. Using hacker I can divide the browser into 3 categories: IE6, IE7 and Roaming, others (IE8 Chrome FF Safari Opera, etc.)

IE6 know Hacker is the underscore _ and the asterisk *

IE7 Hacker is an asterisk *

For example, a CSS setting like this:

1. height:300px;*height:200px;_height:100px;

IE6 Browser when reading to height:300px will think high 300px; Continue reading, he also know *heihgt, so when IE6 read *height:200px will overwrite the previous one of the conflicting settings, think height is 200px. Continue to read, IE6 also know _height, so he will cover off 200px high setting, set the height of 100px;

IE7 and roaming are the same. read from the setting of height 300px. When they read the *height200px, they stopped because they didn't know _height. So they will parse the height into 200px, the rest of the browsers only know the first height:300px, so they will parse the height into 300px. The order of the writing is important because the same priority and the conflicting properties are set to overwrite the previous one.

Html+css
1. Understanding and knowledge of Web standards and website
Tag closure, label lowercase, no nesting, improve search robot search probability, use of external chain CSS and JS scripts, structure behavior of the separation, file download and page speed, content can be accessed by more users, content can be accessed by a wider range of devices, less code and components, easy maintenance, revision convenience, No need to change the content of the page, provide a print version without the need to copy content, improve the usability of the site;

What is the difference between 2.xhtml and HTML?
HTML is a basic Web page design language, XHTML is an XML-based labeling language
The most important differences are:
XHTML elements must be nested correctly.
XHTML elements must be closed.
The label name must be in lowercase letters.
The XHTML document must have a root element.

3.Doctype? Strict and promiscuous modes-how do you trigger these two patterns to differentiate between them?
Used to declare documents using that specification (html/xhtml) is generally strictly over-frame-based HTML documents
Adding an XML declaration can be triggered and resolved to a bug that IE5.5 has IE5.5

4. What are the inline elements? What are the block-level elements? CSS box model?
Block-level elements: div p H1 H2 H3 h4 form UL
Inline elements: A b br i span input Select
CSS box model: Content, Border, margin,padding

What are the ways 5.CSS is introduced? What is the difference between link and @import?
Inline embedded outer chain import
Difference: Loading at the same time
The former does not have compatibility, the latter CSS2.1 the following browsers do not support
Link supports the use of JavaScript to change styles, which cannot be

What are the 6.CSS selectors? What attributes can be inherited? How is the priority algorithm calculated? Inline and important which priority is high?
Tag Selector class Selector ID Selector
Inheritance is better than specifying id>class> tag selection
The latter has a high priority

7. What are the three layers of the front-end page, and what are the roles?
Structure Layer Html Presentation layer CSS behavior Layer JS

What is the basic statement composition of 8.CSS?
Selector {Attribute 1: value 1; Property 2: Value 2; ...}

9. What are the browsers that you have made? What are the cores of the browser?
IE (ie kernel) firefox (Gecko) Google (WebKit) opear (Presto)

10. How to solve several IE6 bugs
1. Use display for double-sided bug float
2.3 MP problem using float caused by use of dislpay:inline-3px
3. Hyperlink hover After click fails to use the correct writing order link visited hover active
4.Ie z-index problem add position:relative to Parent
5.Png Transparent use JS code to change
6.min-height min Height! Important Solution '
7.select hiding under IE6 using IFRAME nesting
8. Why there is no way to define a width container around 1px (IE6 default row height, using over:hidden,zoom:0.08 line-height:1px)

11. What is the difference between the title and ALT attribute on the label?
Alt when the picture is not displayed is represented by the text.
Title provides information for this property

12. Describes the role and purpose of CSS reset.
Reset the browser's CSS default properties browser for different symbols, different styles, and then reset them to unify

13. Explain CSS sprites, how to use it.
The CSS Wizard consolidates a bunch of small images onto a large picture, reducing the number of requests to the server for pictures

14. What is the difference between browser standard mode and weird mode?
Different rendering modes for box models
Use Window.top.document.compatMode to show why the pattern

15. How do you optimize your website's files and resources? The expected solutions include:
File merge
File minimization/File compression
Using CDN Hosting
Use of the cache

16. What is semantic HTML?
Intuitive recognition tags are good for search engine crawling

17. Several ways to clear the float, the advantages and disadvantages of each
1. Use empty label to clear floating clear:both (theoretically clear any label,, add meaningless label)
2. Use Overflow:auto (empty tag element to clear floating and have to increase the abuse of unintentional code, using zoom:1 for IE compatibility)
3. Clear float with Afert pseudo element (for non IE browser)

Javascript
What data types are returned by the typeof of 1.javascript
Object number Function Boolean Underfind

2. Examples of 3 coercion type conversions and 2 implicit type conversions?
Force (Parseint,parsefloat,number)
Implicit (==–===)

3.split () The difference between join ()
The former is the form of an array of cuts, the latter is the conversion of arrays into strings

4. Array method Pop () push () unshift () Shift ()
Push () trailing add pop () trailing delete
Unshift () header add Shift () header Delete

5. What is the difference between event bindings and ordinary events?

The difference between 6.IE and DOM event streams
1. The order of execution is different,
2. Different parameters
3. Event not added on
4.this pointing problem

What is the compatibility of 7.IE and standard?
Var ev = EV | | Window.event
Document.documentElement.clientWidth | | Document.body.clientWidth
Var target = ev.srcelement| | Ev.target

The difference between the Get and post modes when 8.ajax requests
One in the back of the URL and placed inside the virtual carrier
There is a size limit
Security issues
Application of a different one is a forum and so on only need to request, one is similar to change the password

The difference between 9.call and apply
Object.call (THIS,OBJ1,OBJ2,OBJ3)
Object.apply (this,arguments)

How to interpret JSON data when 10.ajax requests
Use the Eval parse in view of security considerations using parse more reliable
11.b method of inheriting a

12. Write a function that gets a non-inline style

function GetStyle (obj,attr,value)
{
if (!value)
{
if (Obj.currentstyle)
{
Return Obj.currentstyle (attr)
}
Else
{
Obj.getcomputedstyle (Attr,false)
}
}
Else
{
Obj.style[attr]=value
}
}

13. What is the event delegate?
Let's take advantage of the event bubbling principle, let your own trigger event, let his parent element instead of execution!
http://www.webasily.com/?p=78 example shows this link

14. What are closures, what are the features, and what are the effects on the page?
Closures are functions that can read other functions ' internal variables.
http://blog.csdn.net/gaoshanwudi/article/details/7355794 This link can be viewed (not a company asking this question)

15. How to block event bubbling and default events
Cancebubble return False

16. Add Delete to replace the method inserted into a contact
Obj.appendchidl ()
Obj.innersetbefore
Obj.replacechild
Obj.removechild

17. Explain the principles of JSONP, and why not the real Ajax
Dynamically create a script tag, callback function
Ajax is a page no refresh request data operation

18.javascript local objects, built-in objects and host objects
The local object is an array of obj regexp, etc. that can be instantiated with new
The built-in objects are gload Math, etc. that cannot be instantiated.
The host is the browser's own Document,window, etc.

The difference between 19.document load and document ready
Document.onload is executed after the structure and style are loaded. js
Document.ready native species there is no such method, there is $ () in jquery. Ready (function)

20. The difference between "= =" and "= = ="
The former will automatically convert the type
The latter will not

Same-origin strategy for 21.javascript
A script can read only the properties of windows and documents from the same source, where the same source refers to a combination of host name, protocol, and port number

22. Write an array-to-weight method
function Osort (arr)
{
var result ={};
var newarr=[];
for (Var i=0;i<arr.length;i++)
{
if (!result[arr])
{
Newarr.push (arr)
Result[arr]=1
}
}
Return NEWARR
}

How to optimize SEO: Search engine optimization

1. Search for some keywords with your website content

2. Modify the site's keyword layout, density and presentation

3. Add title and Alt to images, links, and more.

4. Making Site Map

5. Static Web site

6. Add content daily and pay attention to the inner chain

7. Increasing the chain daily

Web front-end interview questions: