Web Front end engineer Face question

Today just ended an interview (including a written test), not satisfied with their performance, feel not to play well due level, also can only blame oneself usually do not accumulate and organize knowledge in time, preparation is not sufficient.

Not so much, the following is the interview, I did not answer or feel that the answer is not good enough questions.

　　

The 1.position attribute specifies the positioning type of the element

value	Description
Absolute	Creates an absolutely positioned element that is positioned relative to the first parent element other than the static anchor. The position of the element is defined by the "left", "Top", "right" and "bottom" attributes.
Fixed	Generates an absolutely positioned element that is positioned relative to the browser window. The position of the element is defined by the "left", "Top", "right" and "bottom" attributes.
Relative	Creates a relative positioned element, positioned relative to its normal position. Therefore, "left:20" adds 20 pixels to the left position of the element.
Static	The default value. No positioning, elements appear in the normal stream (ignoring top, bottom, left, right, or z-index declarations).
Inherit	Specifies that the value of the position property should be inherited from the parent element.

 

2.border-width:

Example 1

Border-width:thin medium thick 10px;

• The top border is a thin bounding box
• The right border is a medium frame
• The bottom border is a thick frame
• The left border is a 10px wide frame.

Example 2

Border-width:thin medium thick;

• Top frame is 10px
• The right and left borders are medium borders
• The bottom border is a thick frame

3. What are the ways to refer to external CSS files? What's the difference?

Referencing an external CSS file using @import
Recommend this method by referencing an external CSS file using link

The difference between 1:link is XHTML tags, in addition to loading CSS, you can also define RSS and other transactions, @import belong to the CSS category, can only load CSS.

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:ink supports using JavaScript to control the DOM to change styles, while @import does not support it.

4. What is the prefix for mainstream browsers?

Firefox:-moz-box-shadow

Safari:-webkit-box-shadow

Opera:-o-box-shadow

Ie:-ms-box-shadow

5. Why are browser compatibility issues? Workaround?

Because different browsers use the kernel and the supported HTML (one app in standard Universal Markup Language), and the user client's environment is different (such as different resolution), the display effect can not achieve the desired results. The most common problem is that the location of web elements is confusing and misplaced.

At present, there is no unified solution to such a tool, the most common solution is to constantly debug the Web page display between the browser, through the CSS style control and through the script to determine and give different browser parsing standards.

6. What are the factors that affect page loading speed and what are the optimization options?

Answer reference to: http://blog.sina.com.cn/s/blog_6116a35301012ux2.html

7. What are the design patterns?

Refer to "Head Frist design mode"

One: Create model
Factory method, abstract factory, builder mode, single State mode, prototype mode
Two: Stereotype mode
Adapter mode, bridging mode, combo mode, decorative mode, appearance mode
Enjoy meta mode, proxy mode
Three: Behavioral patterns
Responsibility chain mode, command mode, interpreter mode, iterator mode, mediator mode
Memo mode, observer mode, State mode, policy mode, template method, access mode

8.B/S are you using several layers of structure to develop the relationship between each layer and why is this layered?

Typically three layers, the presentation layer (UI), the Business Logic layer (BLL), the data Access Layer (DAL).

Three-tier is to make the project architecture system clearer, and the division of the project participants can be more clear, but also conducive to post-project maintenance, these are the advantages of layering.

As for the relationship, the presentation layer is responsible for interacting with the user (data interaction), the business logic layer is the performance layer and the data access layer of the intermediary, assigning the data access layer for the presentation layer request logical business processing, and the data access layer is responsible for the direct operation of the data (usually only direct data operations, It is best not to deal with logic in this layer, otherwise it would be a headache for later maintenance when the business layer is staggered).

9. What is JS cross-domain? A cross-domain solution?

Answer reference to: http://blog.csdn.net/macky0668/article/details/6247803

Finally, very grateful to the interviewer, asked questions are very helpful to me, as well as thank the personnel of Miss X, very good, thank you.