Front-End development Engineer-Arine push one side

1. Introduce yourself 2. Project Introduction 3. CSS

1) Introduce CSS box model

The box model basically becomes the question which the interview must ask, has the box model of the common-system and the box model under IE browser, the box model from outside to include: margin, border, padding, content.

(1) Width of the box model = content Width

(2) The width of IE box model = border+padding+content width

2 CSS type of selector

2.1 Tag Selector (eg: body,div,p,ul,li)

2.2 class selector (such as: class= "Head", class= "Head_logo")

2.3 ID Selector (such as: id= "name", id= "Name_txt")

2.4 Global Selector (for example: * number)

2.5 combination Selector (such as:. Head. Head_logo, note that two selector is separated by the space key)

2.6 Inheritance Selector (for example: div p, note two selector separated by space key)

2.7 Pseudo class selector (such as: is the link style, a element of pseudo class, 4 different states: link, visited, active, hover. ）

2.8 String Matching property selector (^ $ * three, respectively corresponding start, end, inclusive)

3) CSS3 understand?

3.1 Word-wrap & Text-overflow style

(1) Set Word-wrap:break-word words, in the case of word wrapping, can maintain the integrity of the word, and word-wrap is working together, Word-wrap set or retrieve if the current row exceeds the bounds of the specified container to break the career
 change (2) Text-overflow Sets or retrieves how to display when the current row exceeds the bounds of the specified container, we set the Overflow:hidden in the parent container, and then set the "Text-overflow" Property with "clip" and "Ellipsis" Two options are available. "Clip" means direct cutting, and "ellipsis" is substituted with an ellipsis.   

3.2 text Rendering (text-decoration)

(1) Text-fill-color: Text inner fill color
(2) Text-stroke-color: text boundary fill Color
(3) Text-stroke-width: Text boundary width

multi-column layout for 3.3 CSS3 (multi-column layout)

  (1) Column-count: Represents the layout of several columns.
  (2) Column-rule: A style that represents the spacing bar between columns
  (3) Column-gap: Represents the interval between columns

3.4 borders and colors (color, border)

Supports RGBA and HSL for color, rounded corners, shadows, and other effects

3.5 CSS3 Gradient effect (gradient)

Supports linear and radial gradients

Shadow (Shadow) and reflection (reflect) effects of 3.6 CSS3

Shadow effects, which can be used for both normal elements and text 

background effect of 3.7 CSS3

(1) Background Clip: The genus determines the background painting area
(2) Background Origin: The location used to determine the background, usually in conjunction with the background-position, you can use the border, padding, Content to calculate Background-position
(3) Background size: Commonly used to adjust the size of the background picture, pay attention to the clip mix, this is mainly used to set the picture itself
(4) Background In BREAK:CSS3, elements can be divided into separate boxes, such as making inline elements span across multiple lines
(5) Background-break: To control how the background is displayed in these different boxes
(6) Background image support

the box model of 3.8 CSS3

Display:-webkit-box;  Display:-moz-box; 
-webkit-box-orient:horizontal; 
-moz-box-orient:horizontal; 

(1) "Display:-webkit-box; Display:-moz-box; " A box model that defines the element for WebKit and gecko browsers
(2) "-webkit-box-orient:horizontal;" he says the horizontal arrangement of the box model. If the Box-flex property of the element is matched:

. flex { 
      -webkit-box-flex:1; 
      -moz-box-flex:1   
} 
. Flex2 { 
  -webkit-box-flex:2; 
}

The width of the horizontal direction can be calculated automatically according to the proportional relationship of 1:2.  

3.9 CSS3 of transitions, Transforms and Animation

(1) Transitions

Transition-property: Used to specify the nature of a transition, such as Transition-property:backgound  means backgound participate in this transition
Transition-duration: Used to specify the duration of this transition
Transition-delay: Time to make a deferred transition
transition-timing-function: For specifying a transition type, Ease | Linear | ease-in | Ease-out | Ease-in-out | Cubic-bezier

(2) Transforms

Stretching, compressing, rotating, shifting, and so on some of the basic transformations in graphics

(3) Animation

Definition animation, CSS3 animation almost supports all style changes, can define a variety of animation effects to meet the needs of our user experience

For more CSS3 new features please refer to https://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/

4 has an element to set the height of the width, how to make the elements vertical and horizontal center

Position is set to absolute,top and left each of the 50%,margin-top as the height of the negative half, margin-left as the width of the negative half

Key code
div {
    position:absolute;
    width:400px;
    height:200px;
    top:50%;
    left:50%;
    Margin-top: -100px;
    Margin-left: -200px;
}     

More CSS centering problems can be referenced HTTPS://GITHUB.COM/SIMAQ/CSSFUN/ISSUES/3

5 Display:none;visibility:hidden Difference When the element is set to Display:none, the element disappears completely on the page and no longer occupies space, which means that it causes the browser to rearrange and redraw to set the element to Visibility:hidden, after the page disappears, the space it occupies will remain, so it will only cause the browser to redraw and not rearrange

6) Several attributes of position: static, relative, absolute, fixed, inherit, what do you mean, specifically?

Property	Description
Static	Default, ignoring top, bottom, left, right, and Z-index
Relative	Generates a relatively positioned element that is positioned relative to its normal position. The position of the element is defined by the left, right, top, bottom
Absolute	Generates an absolutely positioned element that is positioned relative to the first parent element other than static positioning. The position of the element is defined by the left, right, top, bottom
Fixed	Generates an absolutely positioned element that is positioned relative to the browser window. The position of the element is defined by the left, right, top, bottom
Inherit	Inherit the value of this property from the parent element

7 has done the mobile end of the development

Did not do the mobile end of the development, the use of bootstrap, know that H5 can do the development of mobile end, the actual project is not used for the time being

8 Did you write the style of the mobile end ?

No

9) Em, the unit, you know?

(1) EM is the relative length unit. The font size relative to the text within the current object. If the font size of the current text in the row is not set artificially, it is relative to the browser's default font size.
(2) The default font height of any browser is 16px. All the unadjusted browsers are compliant: 1EM=16PX. So 12px=0.75em,10px=0.625em. In order to simplify the conversion of font-size, it is necessary to declare font-size=62.5% in the body selector in CSS, which makes the EM value 16px*62.5%=10px, so 12px=1.2em, 10px=1em, That means you just have to divide your original PX value by 10, and then change EM as a unit.
(3) The value of EM is not fixed; em inherits the font size of the parent element.

For more information, refer to https://www.cnblogs.com/leejersey/p/3662612.html 4. HTML

1 Talking about the understanding of HTML semantics

(1) When the HTML was first designed, it had a certain "semantics", including paragraphs, tables, pictures, headings, and so on, the HTML specification has been in the direction of semantics, many elements, attributes in the design, has been considered how to make a variety of user agents and even web crawler to better understand HTML document.

(2) HTML5 has modified or deleted semantic descriptions on the basis of previous specifications, adding many elements that can express richer semantics. such as Nav,header,footer, the so-called semantics itself is a consensus on the symbol, the degree of recognition is higher, the scope of the wider, people can rely on it to achieve a variety of functions.

2 to enumerate the semantics of some HTML tags casually

HR, BR, strong, I, A, span, IMG, UL, OL, Li, DL, DT, p, Div, etc.

3) The difference between UL and Ol

(1) UL is unordered list, that is to say no arrangement limit can add Li;
(2) OL on the sequence table, will be according to your written Li before and after order
(3) say one more: the DL is the definition list, will default front and back level relations;

<dl> 
    <dt> I'm the head </dt> 
    <dd> I'm content </dd> 
    <dd> I'm content </dd> 
</ Dl>

4 An INPUT element, want to turn off Auto-complete function, how to do, browser characteristics

AutoComplete = Off

5) @import The reason for the splash screen

@import is a CSS category, you can only load CSS, you must be inside a style label, or a CSS file, and you want to use it before the style definition, and the imported external style definition will be overwritten by the definition in the document, @import although it is written in the front of the style sheet, However, the browser parsing is the last to resolve, so it is easy to cause the splash screen in the IE6 or in the process of opening the page without style until the page load will not load the phenomenon of the style.

6 How to enable Chrome to support text less than 12px.

body{
    -webkit-text-size-adjust:none;
}

5. JavaScript

1 cookies, localstorage, sessionstorage understand?

(1) Cookies are very small, it is limited to the size of about 4KB, the main purpose is to save the login information, by depositing a section of the cookie to identify the user's identity data to achieve
(2) Localstorage is a new technology added to the HTML5 standard for localized storage
(3) Sessionstorage is similar to Localstorage interface, but the life cycle of saving data is different from that of localstorage. It can only save a portion of the data in the current session, and refreshing the page data still exists. But when the page closes, the data in the sessionstorage is emptied.

2 How to choose to use the three ways

characteristic	Cookies	Localstorage	Sessionstorage
The lifetime of the data	Typically generated by the server, you can set the expiration time. If cookies are generated on the browser side, default is not valid after closing the browser	Save permanently unless it is cleared	Valid only under current session, cleared after closing page or browser
Store data size	4K or so	Generally 5MB	Generally 5MB
Communicating with the server side	Each time it is carried in an HTTP header, it can cause performance problems if you save too much data using cookies	Save only in the client (that is, in the browser) and not in the communication with the server	Save only in the client (that is, in the browser) and not in the communication with the server
Ease of Use	Programmers need to encapsulate themselves, the source of the cookie interface is unfriendly	The source interface is acceptable and can be encapsulated again to better support for object and array	The source interface is acceptable and can be encapsulated again to better support for object and array

(1) Considering that each HTTP request will carry a cookie, the cookie is streamlined and streamlined, and a more common application scenario is to determine whether the user is logged in. For a logged-on user, the server side inserts a single user identification code into the Cookie when he logs in, and the next time you can read the value, you will be able to determine whether the current user is logged in. Cookies were used to store the user's shopping cart information on the dealer's website and are now saved using Localstorage.

(2) On the other hand, localstorage the Cookie to manage the shopping cart, while also being able to perform other tasks. For example, the HTML5 game usually produces some local data, Localstorage is also very suitable.

(3) Not all data is suitable for cookies, localstorage and sessionstorage. When using them, you need to keep in mind that there is a risk that the code has an XSS injection. As long as you open the console, you are free to modify their values, that is, if your site has XSS risk, they will be able to do your localstorage. So never use them to store sensitive data in your system.

For more, see http://jerryzou.com/posts/cookie-and-web-storage/

3 Cookies and localstorage can be stored locally, what is the difference, save the user's login information why stored in cookies

(1) Sessionstorage is similar to Localstorage interface, but the life cycle of saving data is different from that of localstorage. It can only save a portion of the data in the current session, and refreshing the page data still exists. But when the page closes, the data in the sessionstorage is emptied.

(2) The biggest reason is that each HTTP request will carry the information of the cookie, for the logged in user, the server side will be in his login to the cookie to insert a piece of encrypted unique identification code to identify a single user SessionID

4) The consortium prevents passing events to the parent container

(1) e.stopimmediatepropagation () cancel event bubbling while preventing event handlers on the current node from being invoked

(2) E.preventdefault () is used to cancel the default behavior of the event.

(3) stoppropagation () Cancel event bubbling has no effect on the current node

(4) The event object in IE:

Cancelbubble () Cancel event bubbling
returnvalue () Cancel event default behavior

5 The wireless end with JS implementation of the effect has been written

No

6 JS Array to copy an array, can be used in any way.

(1) Circular traversal

(2) Flexible replication: slice or Concat

(3) deep copy: You need to consider the case that the array value is a variety of reference types, the reference code is as follows

function Deepcopy (p, c) {
    var c = C | | {};
    for (var i in P) {
        if (typeof p[i] = = = ' object ') {
            c[i] = (P[i].constructor = = Array)? [] : {};
            Deepcopy (P[i], c[i]);
        } else {
            C[i] = P[i];
        }
    }
    return c;
}

7 asynchronous programming, including what the callback function also contains

Event listening, publishing/subscribing, Promise objects

For more information, please refer to Nanyi's 4 ways of JavaScript asynchronous programming
Http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html

8) ES6 understand?

Understand that, add the Let and const command, added import and class commands, can be used to solve the variable value, the string, regular, numeric, array, functions, objects are extended to provide a new data structure set and map, asynchronous operations and async functions, Promise objects, please refer to the introduction of the ES6 Standard (second edition) of Ruan Feng Http://www.ruanyifeng.com/blog/2016/01/ecmascript-6-primer.html

9 What is the difference between let and const

(1) Once Const declares a constant, it must be initialized immediately and cannot be left to be assigned later
(2) Once the value of the declaration can not be changed, for the compound type of variables, the variable name refers to the address of the data, you can change the data in the address.

10 arrow function is there any idea?

(1) The arrow function is a simpler form of function declaration, and it is always anonymous.

(2) Do not bind this, the arrow function captures the this value of the context in which it resides, as its own this value

Before the arrow function appears, each newly defined function has its own this value (for example, this of the constructor points to a new object; The This value of the function in strict mode is undefined; if the function is invoked as a method of the object, this Point to the object that called it.

(3) unbound parameters, the arrow function does not have its own arguments, but in most cases the rest parameter can give a solution

function foo () { 
    var f = (... args) => args[0]; 
    Return F (2); 
}
Foo (1); 2

11 do not rely on any framework to send an AJAX request will use the method

XMLHttpRequest ()

12 to send AJAX requests when a Cross-domain request will occur. Same domain name, will different ports cross domain?

Domain names are the same (www.example.com and example.com), the protocols are the same (HTTP and HTTPS are different), and the port number is the same (default is: 80 port, it and: 8080 is different). Some browsers are loose and allow different ports, and most browsers will strictly adhere to this limit. 6. Other

the principle of Jsonp

(1) The first is to use the SRC attribute of the script tag to realize Cross-domain

(2) Implementing server-side communication to client by passing the front-end method as a parameter to the server side and then returning to the server-side injection parameters

(3) because the SRC attribute of the script tag is used, only the Get method is supported

More please refer to the principle and implementation of JSONP https://segmentfault.com/a/1190000007665361

14 The front end has no contact to the performance optimization

Read the "High-performance Web site Construction Guide," a book to reduce the HTTP request, the script placed at the bottom, style placed at the top, use the external JS and CSS, reduce DNS lookup, etc., before the blog has summed up, see the High-performance front-end optimization of the 14 guidelines
http://blog.csdn.net/zjuwwj/article/details/53524244

15 front-end security has no contact, XSS and csrf understand it.

XSS: Cross-site scripting (Cross-site scripting, commonly referred to as XSS) is a security vulnerability attack of a Web application that is a kind of code injection. It allows a malicious user to inject code into a Web page, and other users will be affected when they view the Web page. This type of attack typically contains HTML as well as a client-side scripting language.

CSRF: Cross-station request forgery (Cross-site requests forgery), also known as One-click attack or session riding, usually abbreviated to CSRF or XSRF, is a bondage user in the currently logged-on Web application An attack method that performs an unintended operation on.

that's a little bit more straightforward.

XSS: Posting a malicious JavaScript code in a forum post in a client-side scripting language (most commonly such as: JavaScript) is a script injection, which is called XSS if the content of the code requests an external server.

Generally speaking, CSRF is implemented by XSS, so CSRF is often referred to as xsrf [to implement bogus requests in an XSS way] (but not in a way that can be implemented directly by using command-line mode (command-line knocking commands) to forge a request directly [as long as it is legally authenticated]).

XSS is more biased towards code implementation, which is to write a JavaScript script that has a cross station request feature into a post, then a user visited the post, which is considered an XSS attack, csrf more in favor of an attack result, as long as the launch of a fake request then is CSRF.

All Roads (XSS Road, Command Route) pass Rome (csrf Horse, xsrf Horse)
See vernacular about XSS and CSRF https://segmentfault.com/a/1190000007059639

JS Framework In addition to jquery also used other, angular data binding is how to achieve

Angularjs uses dirty checks in $scope variables to enable bidirectional data binding

Angular data Dirty check do you understand?

Angular does not trigger dirty checks periodically, only when UI events, Ajax requests, or timeout latency events trigger dirty checks, and dirty checks compare UI and background data for consistency

(1) $watch

Whenever we bind data to the UI, angular inserts a $watch to the watchlist
watch = {
    name: ',//the      current Watch object observes the data name
    Getnewvalue: function ($scope) {//Get new value
            ...
            Return NewValue
   },
    listener:function (newvalue,oldvalue) {  
           //action to be taken when data changes
           ...
    }
} Getnewvalue () can get the latest value on the current $scope, and the listener function gets the new value and the old value and does some action.

$digest

When $digest is invoked, only monitoring on the current scope and its child scopes is triggered

$apply

When $apply is invoked, all monitoring on the scope tree is triggered

For more information see angular meditation (i) data binding, angular data two-way binding

18 in the browser to open google.com, to the page rendering out, what happened in the middle

(1) DNS resolution

First in the local domain name server query IP address, if not found, the local domain name server will send a request to the root domain name server, if the root domain name server does not exist, the local domain name will send a request to the COM top-level domain name server, and so on. Until the last local domain name server gets Google's IP address and caches it locally for next query use. From the above process, you can see that the resolution of the URL is a right-to-left process:.->com-> google.com-> www.google.com

(2) TCP connection

Three handshake on TCP connection

(3) Send HTTP request

The HTTP request message consists of three parts: the request line, the request header, and the request body.

(4) The server processes the request and returns the HTTP message

HTTP response message is also composed of three parts: status code, Response header and response message

after receiving TCP message from the fixed port, the TCP connection is processed, the HTTP protocol is parsed and further encapsulated in the message format as HTTP request object for upper use.

(5) Browser Resolution rendering page

(a) Parse the HTML structure. 
 (b) loading external scripts and style sheet files. 
 (c) parsing and executing scripting code. 
 (d) construct the HTML DOM model. Ready performs 
 (e) Loading external files such as pictures. 
 (f) the page has finished loading. Load execution

(6) End of connection

For more information, please refer to what happened from the input URL to the page load

19 What is the major of the university, why do the front-end

Because of the science of Java, so the interviewer will basically ask me this question

20 What should the front-end engineer do? What does the future do?

(1) Front-End engineers are using HTML, CSS, JavaScript and other professional skills to convert the design of the Web site, to be compatible with browsers, but also to adapt to the mobile end, to deal with visual and interactive issues, but also to consider security and performance.

(2) I personally may consider to the development of the whole stack of engineers, the future of the development of mobile end is a trend, at the same time with the development of AR, front-end engineers in the future more likely to be interactive, front-end engineers this career will only develop more and more good, the original farther away.

21 How to understand the whole stack of engineers

The entire stack of engineers should be a multi-year experience of engineers, have their own complete knowledge system, have an efficient way to solve problems, front-end knowledge and back-end knowledge have their own understanding, master a lot of frameworks, security and performance has its own technical solutions. The heart has the structure, has the high speed study ability and the good communication ability.

22) Background of the development of contact?

The science of Java, used Springmvc, spring and MyBatis

23 problems encountered in the process of doing the project

Look at your own project.

24 recent technical articles or books that are being read

Mainly to see if you really care about the front end, is it really interested in the front?

25 Learning new things, is through what channel

The main is to study your way of learning and learning new knowledge of the way, I usually first reader nets, the official website generally have beginners or quick start, and then reader network to provide the API, do not understand the words will go to see a blog, if necessary, will buy a related book, if still can not understand will find some video to see.

26 What do you think is your greatest strength? The biggest drawback is what.

Open questions

27) Talk about planning for one to two years. A plan for your desires

Open questions

28 Do you have any questions to ask me

It is best to ask some related to their own development, do not ask salary, you can ask the technology stack, where they still lack how to improve the 7. Summary

The entire phone interview time of nearly one hours, inspected the knowledge dot ring clasp, the overall attitude of the interviewer is very good, there is no deliberately embarrassed, will not be the knowledge point will be prompted, one side of the foundation, I should be no resume face, I was in the afternoon in the internal push system CIC, the evening became an interview in the state, I got an interview call the next day.

In fact, the interview has been one months, has been trying to sum up, but too many things to delay, one side can also smoothly into the two side.