< > NetEase 2016 intern front End pen Question part summary

NetEase 2016 intern front End pen Question part summary

Original address: http://www.cnblogs.com/venoral/p/5325202.html

This is only part of the question, the answer for a personal point of view if the wrong welcome point, feel the test center are very basic, but pay attention to the details, through the collation also know their CSS3 and HTML5, network knowledge and other aspects of the lack of learning more to practice more thinking. Save RP, I hope I can easily answer in the 360 written test tomorrow ~

Css

1. Multi-Select

Html<p> a long paragraph of text, a long paragraph of text, a long paragraph of text, particularly long text </p>//css   p{      width:100px;      White-space:nowrap;     }

Add any of the following styles to make the out-of-section text change to "...".

A.white-space:normal B.overflow:hidden C.overflow:auto d.text-overflow:ellipsis

Analysis: Investigate White-space,overflow,text-overflow. Select B and C and D
white-space: describes how to handle an element hollow lattice . The initial value of normal, which applies to all elements, is inherited.
Value is normal | nowrap | Pre | Pre-wrap | Pre-line

Normal by default, consecutive whitespace characters are merged, line breaks are treated as whitespace characters, and line boxes are filled when necessary.

nowrap translation means "no package", continuous whitespace and newline characters will be merged, but the text touches the boundary of the automatic line break is not valid, the non-package reflects that the text beyond the given length will not wrap.

Pre-contiguous whitespace characters are preserved, and line breaks are encountered when a newline or <br> element encounters it. Corresponds to the <pre> tag in HTML, which can be predefined formatted text.

Pre-wrap above the pre is very rigid, beyond the box on the outside, and pre-wrap meaning to format the package, can be formatted and can be wrapped in the box, so is a continuous white space character will be retained, encountered line break or <br> element or need to fill the line box will be wrapped.

Pre-line consecutive spaces will be merged and will be wrapped when a newline or <br> element is encountered or a line box needs to be filled. This is more humane, pay attention to formatting but pay more attention to line change.

The following table summarizes the white-space behavior

	line break	space and tab	text wrapping
Normal	Merge	Merge	Career Change
nowrap	merge	merge	no career change
Pre	does not merge	do not merge	no career change
pre-wrap	do not merge	do not merge	career
pre-line	does not merge	merge	career change

overflow: This property is used on block-type elements to specify what happens when a content element overflows the element box (that is, whether the setting can be trimmed and trimmed in any way): The content can be clipped (hidden, scrolled), not trimmed (directly displaying the out-of-section). The default value is visible, and the property is not inherited. Using a value other than the overflow default value creates a new block-level format context (BFC). Want to know BFC students please poke in-depth understanding BFC and margin Collapse.
Value Visible | Hidden | Scroll | Auto | Inherit
The visible default value, the content is not trimmed, is rendered outside the element box.

Hidden content is trimmed and the rest is not visible

The scroll content is trimmed and the browser uses scrollbars to view its contents, but the printer prints the overflow content.

Auto depends on the user agent and, if necessary, displays the scroll bars in that direction, and FF and Chrome provide scrollbars.

Text-overflow: determines how the content of the overflow is clipped, which is the form of prompting the user, the premise of using this property is that the overflow content has been set to be trimmed (overflow and trim are two concepts, before overflow is set to be trimmed to set how to trim, Otherwise only setting how the trim is not working). It can be cut directly (clipped), or it can display an ellipsis, or display a custom symbol. The default value is clip, which applies to all block-level elements without inheritance.

Take Value Clip | ellipsis | String


How to set Text-overflow does not work at this time, because the current overflow value is visible meaning it is not trimmed ( window.getcomputedstyle ($ (' P ')). overflow;//"Visible " ）。

Set overflow to be trimmed (Hidden,scroll,auto can be used), here Overflow:hidden as an example
Clip default, Trim text

Ellipsis display omitting text in lieu of trimmed

String replaces the trimmed text with the given string. The Chrome browser does not support the inability to demonstrate.

2. How wide is the red area?

html<div> text </div>//css   div{       box-sizing:border-box;       width:100px;       padding:10px;       background-color:red;       Background-clip:content-box;    }

Analysis: Study box model, Css3box-sizing,background-clip. The answer is 80px.
box Model: Each element in the document is depicted as a rectangular box, determining its size, attributes (color background border, etc.), and the location is the target of the rendering engine.
Under CSS, these boxes are described by the standard box model, which describes the element content footprint, the box has four boundaries (margin margin edge, border border border edge, margin border padding edge, content boundary contents edge)

The content area is the area that really contains the content of the element, its size is content width/height or content-box width/height. If box-sizing is the default value (Content-box), the size is determined by the width/height,min-width/min-height,max-width/max-height.
The padding inner margin area is a blank field between the content and the possible borders that is used to extend the content area. It is inside the inner margin boundary and the background is a color or picture (opaque images cover the color). Its size is padding-box wide and padding-box high.
The border border area is the area that contains the border, extending the inner margin area and the size border-box width/height. Controlled by border-width and shorthand attribute border.
Margin margin area expands the bounding area with white space to separate adjacent elements. The size is margin-box wide. Margins are shared between boxes in the case of margin merging (margin overlap issues can refer to CSS margin overlap issues).
Note that for inline non-replacement elements, their occupy height is determined by line-height, regardless of margin and padding, why? This is to say that the EM box, content area, line spacing, inline boxes, line boxes and other concepts to deep classmates can poke some common CSS skills why (ii) I understand the line-height.

Anyway, you'll remember. In-line non-replacement elements occupy a height (it should be said that the relationship between the line and the previous row or row) is not related to how margin and padding are set.
box-sizing:Used to change the CSS box model for the width of the calculation method, the default value is Content-box, applies to all elements, there is no inheritance.
Value Content-box | Border-box
Content-box default value, Standard box model. Width and height include only the width and height of the content, not including the Padding+border+margin. For example, if you set width:350px;border:10px solid black, the actual width rendered in the browser is 370px.
Border-box width and height include padding and border, not including margin. This is the box model used by IE quirks mode (viewable in IE5). For example, set width:350px;border:10px solid black, the browser will render a width of 350px, the true content width is 330px, if the internal content of the calculation after the width of negative, will be calculated as 0, Because the content is still impossible to hide through border-box.
Background-clip:Sets whether the background (background picture or color) of an element extends below the border. The default value is Border-box, which applies to all elements, without inheritance.
Value Border-box | Padding-box | Content-box
The Border-box background extends beyond the border but below the border.

There is no background under the Padding-box border, which extends to the outer edge of padding.

The content-box background is clipped to the content-box of the content area.

Javascript
What values do 1.alert output separately?

var A=2;var func= (function () {    var a=3;    return function () {       a++;       alert (a);    }}) (); Func (); func ();

a.3,4 b.4,4 c.4,5 d.undefiend undefined
Parsing: Investigating function expressions, executing functions immediately, closures, scopes, reference types, etc. Specific relevant knowledge points do not expand said, I think since the answer to the D option here should also test a variable to improve how good ~ the correct answer select C.
The first two sentences are assignment statements, the global variable a=2, the immediately executed anonymous function expression after the initialization of the parentheses inside the function of the active object AO and scope chain simultaneously determined the This object, added the internal variable a=3, returned a function reference. The global variable func points to a reference to the returned function (this is the closure). The first execution of Func (), Func points to a function object in the memory heap, after executing the a++, looking for a variable in the scope of this function in AO to find the AO of the outer scope along the scope chain, find A=3, execute a++ after A=4,alert (4). Execute func (), or execute the function object in the memory heap, and once again initialize the scope chain and AO of this function in the memory heap, look for a not fruit along the scope chain to find the outer AO found a=4, perform a++ after A=5,alert (5), finished!
2. After the following code executes, the value of arr is

var Arr=[{a:1},{}];arr.foreach (function (item,idx) {  item.b=idx;});

a.[{a:1},{}] b.[{a:1,b:0},{b:1}] c.[{a:1,b:1},{b:1}] d.[{a:1,b:0},{b:0}]
Parse: Investigate the array of foreach method, object add attribute operation, very basic problem. The answer is B.
Array.prototype.forEach (Callback[,args]) is one of the array iteration methods, and the method does not return a value. Let the array perform the callback function once for each item in ascending order (can receive three parameters: item current item, IDX current index, arr array itself), args optional parameter, which is used as the object of this value in the callback function. Items in the array that have been deleted (delete, and so on) or have never been assigned are skipped (but do not include items that are assigned the Undefiend value).

3.cookie,sessionstorage,localstorage the correct description is
A.cookie.setitem () to set a cookie
B.sessionstorage is stored on the server side of the
C. Object types can be stored through Localstorage.setitem ()
D. When the browser is reopened, the data stored in the Localstorage still exists.
Analysis: Investigate the sessionstorage,localstorage of HTML5. The C error SetItem parameter is a key-value pair for the string. The answer is D.
Document.cookie: To save login information, such as landing site can see the "Remember Password" option, which is usually by depositing a cookie to identify the user identity of the data to achieve.
Localstorage: Local storage.
Sessionstorage: The life cycle of the saved data is different from the localstorage, it simply saves a portion of the data in the current session, and the data in Sessionstorage is emptied when it is closed.

Characteristics	Cookies	Localstorage	Sessionstorage
Life cycle	Normally generated by the server can set the expiration time. If the cookie is generated on the browser side by default, the browser is disabled after closing	Save permanently unless cleared	Only valid under current session, close page or after the browser is cleared
Store data size	Around 4k	Around 5MB	Around 5MB
Communicating with the server	Each time it is carried in the HTTP header	Do not participate in communication only on client save	Do not participate in communication only on client save

4. Extend a method clone to object to enable deep cloning of objects.

Parse: Before thought of Tainima simple, think with for-in traverse assignment can complete copy, at that time is considered not comprehensive, the code is naïve enough to write! Finally, in retrospect, even the object type is not considered in case there are arrays, functions and other objects, let alone this kind of writing for-in will be the prototype of some of the properties are also traversed so that the properties of the prototype added to the newobj, more and more not strict ...

Object.prototype.clone=function () {   var newobj={};   for (var i, this) {       newobj[i]=this[i];   }   Retrun newobj;}

So underneath this is the great God level of writing, direct object.create () without even thinking about the type of object to be cloned. You said to learn also used to use it, why at that time did not think of the way to fry the day with this dick, a word or not skilled still need to work!!

Object.prototype.clone=function () {    //prototype pointing to consistent    var newobj=object.create (object.getprototypeof (this));    The property itself remains the same as    var propnames=object.getownpropertynames (this);    Propnames.foreach (item) {       //keeps the properties of each property as well as       var des=object.getownpropertydescriptor (this,item);       Object.defineproperty (newobj,item,des);    },this);    return newobj;}

5. There is such a url,http://mail.163.com/?a=1&b=2&c=3&d=xxx&e. The output function Querysearch (), which has a parameter name, outputs its corresponding value.
Analysis: The main is to do two times division.

function Querysearch (name) {   var url= "Http://mail.163.com/?a=1&b=2&c=3&d=xxx&e",         arr= Url.split ('? ') [1].split (' & '),         str=name+ ' = ', Index,start;for (var i=0;i<arr.length;) {       index=arr[i].indexof (str);       if (index<0) {           //If STR is not in this entry, enter the next           i++;       } else{           start=index+str.length;           Return Arr[i].slice (start);       }   }   If all the loops have not been found, then return "" Return "   ;}

General programming questions (not limited to programming languages)
1. Enter two digits to output the greatest common divisor of the two digits. such as 16,4 output 4.
Analysis: pure test basic feeling. Greatest common divisor is <= the smallest number, that is the smallest number start a trial Bai, this is the most stupid method but good understanding.

function Maxdivisor (num1,num2) {   var max=num1>num2?num1:num2,       min=num1>num2?num2:num1;   for (Var i=min;i>=1;i--) {      if (max%i==0&&min%i==0) {         return i;}}   }

Incidentally also write down least common multiple is the largest number of >=, then from the largest number start a trial Bai.

function Mindivisor (num1,num2) {   var max=num1>num2?num1:num2,       min=num1>num2?num2:num1;   for (Var i=max;i>=max;i++) {      if (i%max==0&&i%min==0) {         return i;}}   }

There are many methods, and there are several ways to divide the method, and to do it recursively.

function Maxdivisor (num1,num2) {   if (num2==0) {      return num1;   } else{      return Maxdivisor (num2,num1%num2);   }}

2. It is known that the General app version is 1.0.0/1.0.1/1.2.3, which conforms to the A.B.C rules, sorting irregular about 100w version numbers from small to large.
Analysis: The algorithm is not fine for the moment there is no idea. It's definitely not a bubble. Think of it should be first by a value of ... The sort is divided into many large groups, in each group by the second value of the three-way sorting and then grouping ... Seems to be a bit divided or dynamic planning feeling.

Network and HTTP
1.ping based on which of the following protocols?
a.icmp b.tcp C.ip d.udp
Resolution: Select a
Wikipedia introduction: Ping is a computer network tool to test whether a packet can reach a particular host through an IP protocol, and the ping works by sending out an ICMP [email protected] Request packet to the target host and waiting for the packet to receive the echo response. The program estimates the lost packet rate (packet loss rate) and packet round-trip time (network latency) by the number of times and successful responses.
ICMP: An Internet Control Message protocol is an integral part of the IP layer that transmits error messages and other information that needs attention. ICMP packets are usually used by the IP layer or higher-level protocol (TCP/UDP). The figure shows that it is part of the IP and must be implemented in each IP module.

Simply learn about the TCP/IP protocol family:
Internet Protocol Family (IPS) is a network communication model + a whole network transmission protocol family, which is the infrastructure of Internet communication. Also become the TCP/IP protocol family, referred to as TCP/IP, the two core protocols of this protocol family include TCP (Transmission Control Protocol) and IP (Internet Protocol). In a network communication protocol, a hierarchical structure is commonly used, which is similar to a stack in a computer when multiple hierarchical protocols work together. TCP/IP provides a point-to-point linkage mechanism that standardizes how data should be encapsulated, addressed, transmitted, routed, and received at the destination. It abstracts the software communication process into four abstraction layers, and implements different communication protocols in the way of protocol stack.
Seven Layer OSI model

Physical layer: transmission via mediabit bit。
Data Link layer: Assemble the bits intoFrameand point-to-point delivery, which provides the creation, maintenance, and release management of data link connections between two network entities.
Network layer: Provides routing and addressing functions that are responsible forData PackageTransfer from source to host and Internetwork interconnect.
Transport Layer: Provides end-to-end reliable message delivery and error recovery. Responsible for the overall data transmission and data control, the above three layer to provide reliable transmission services. （segment）
Session Layer: Establish, manage and terminate sessions, the process of data transfer between session users is to convert SSDU (user data Unit) to SPDU (Session Protocol Data Unit）。
Presentation layer: Translation, encryption, and compression of data. The correct syntax for providing data and information to the upper-level users of different terminals represents the conversion method. （represents the protocol data unitPPDU)
Application layer: Direct and application interfaces and provides common Web application services. （Application Protocol Data UnitAPDU)
TCP/IP four layer model

2. In the following HTTP header information, what is associated with the cache?

A.cache-control b.expires c.last-modified D.etag
Resolution: Full selection of answers
Cache-control: The most important rule, this field is used to specify the instructions that all caching mechanisms must obey in the entire request/response chain. Common values are private (default), No-cache,max-age,must-revalidate, etc.
Expires: translates to "expire", allowing the client to not send requests until this time. Given the date and time after the response is considered obsolete, it needs to be used in conjunction with last-modified to control the validity time of the requested file, and when the request data is within the validity period, the client requests the data from the cache instead of the server side, and when the cached data fails or expires, the data is updated from the server. Last-modified is able to save a bit of broadband, but still can not escape to send an HTTP request out, and to use with expires. While the expires logo makes the browser even do not send HTTP requests, such as when the user press F5 or click the Refresh button, even if the only expires URI will be sent requests, so last-modified and expires with.
Last-modified: When the browser requests a URL for the first time, the server returns a status code of 200, which is the resource you requested, along with a last-modified attribute tag (httpresponse Header) This file was last modified on the server side in a format similar to Last-modified:thu, 09:29:25 GMT. When the customer requests this URL for the second time, according to the HTTP protocol, the browser will send the If-modified-since header (HttpRequest header) to the server asking if the file has been changed after that time If-modified-since:thu , 09:29:25 GMT, if the server-side resource does not change automatically return 304 status code, the content is empty, so that the amount of data transfer. When the server-side code changes or restarts the server, the resource is re-sent, and the return is similar to the first request.
ETag: The entity tag of the requested variable, that is, the server responds to the request URL token, and sends it to the client in the HTTP response header, in the format etag: "F65e34b472a13e773a65109614ea9be8", Tell the client that the resource you have received represents Id:f65e34b472a13e773a65109614ea9be8. The next time you need to request the same URI, the client emits a header in the format if-none-match: "F65e34b472a13e773a65109614ea9be8", and if the etag does not change, return the status 304

3.HTTP Status Code
1XX: The request has been received and needs to be processed. Such responses are temporary responses that contain only the status lines and some optional response header information.
2XX: The request has been successfully received by the server, understood and accepted.
206: The server has successfully processed a partial GET request, applied to resume the breakpoint or to break a large file into multiple download segments to download at the same time.
3xx: Redirect, the client needs to take further action to complete the request,
302: Temporary redirect, requested resource temporarily responds from different URI
4XX: The client may appear to have an error preventing the server from processing.
403: No permission to access this station. The server understood the request but refused to perform the task.
5XX: The server has an error or an abnormal state occurred during the processing of the request.
500: The server encounters an unexpected condition that causes it to be unable to complete the request processing.
503: Temporary server maintenance or overload, unable to process the current request.

Other computer-related
1. Relational database and non-relational database
Relational database: A database that uses relational models to organize data
Non-relational database: A collection of data-structured storage methods, persistent storage and mass storage needs

2. The code implements a depth-first search in a non-recursive way, with
A. Queue B. Stack c. Hash D. Heap
Parse: Select B stack
The execution of the depth-first traversal is as follows, and a stack is designed to simulate the work stack of the system setup in the recursive implementation.
(1) Stack initialization;
(2) The output starting vertex, the starting vertex is changed to the "visited" flag , the starting vertex into the stack, repeat the following operations until the top of the stack is empty

• take the top element of the stack (not out of the stack, just out)
• The top element vertex of the stack if there is an inaccessible adjacency point W, then
  Output vertex W
  Change vertex W to "visited" flag
  Move vertex W into stack
• Otherwise the current vertex fallback

Reference:
MDN White-space
MDN Overlow
CSS3 Text-overflow Properties
MDN Box Model
MDN box-sizing
MDN Background-clip
MDN Array.prototype.forEach ()
A simple understanding of the ICMP protocol
TCP/IP protocol family
Browser cache Details: Expires,cache-control,last-modified,etag detailed description
Translation: Web authoring, developer-aware Web caching knowledge
HTTP status Code
Talk about Cookie,localstorage and Sessionstorage
relational databases and non-relational databases
Non-recursive implementation of depth-first traversal algorithm

< > NetEase 2016 intern front End pen Question part summary