Record A Netease front-end internship interview and Netease internship interview

Record A Netease front-end internship interview and Netease internship interview

We were lucky to receive an interview notice from Netease, so we didn't hesitate to skip the course to interview hhhh ~ Three-point interview, because I have never been to the northwest wangyuan district of Zhongguancun, and I went there early after dinner. I think there should be a prosperous place, hhhh, and all the findings are under construction, many of them are still under construction. Baidu and Sohu Next To Netease are both long buildings or tall buildings. They are full of big enterprises ~ When I entered the Netease building, I had no network ==, and I had nothing to do in it. I stayed out and checked out the front-end preparations. I told the front desk, A young Netease sister took me up ~

Step into the topic-test
I thought I only had an interview. I found that my sister did not take me to the interview. I took me to a room and left me two questions. For example, for half an hour, there is no defense against hhh. Next, let's proceed to the topic ~

1. alert (1 & 2), alert (1 | 0)
I don't remember the specifics. I thought it was purely an operation and an operation or an operation. Later I found it naive.

1 alert (1 & 2) returns 22 as long as the value before "&" is false, whether it is true or false after, the values before "&" are returned. 3. If the values before "&" are true, whether they are true or false, the value after "&" is returned. 45. The result of alert (0 | 1) is 16. If "|" is set to false, whether "|" is followed by "true" or "false", the value after "|" is returned. 7. If the value is true before "|", the value before "|" is returned regardless of whether "|" is true or false.

2. Differences between mouseenter and mouseover
After reading this, I probably answered it, but it may not be detailed enough.

1 The mouseover event is triggered regardless of whether the mouse pointer passes through the selected element or its child element. The corresponding mouseout2 event will be triggered only when the mouse pointer passes through the selected element. Mouseleave

3. Use a regular expression to match a string. It must start with a letter and be followed by a number, string, or underline. The length is 9-20.
I collapsed when I saw this question, because I didn't learn much about regular expressions, but I forgot a little bit about it.

1  var re=new RegExp("^[a-zA-Z][a-zA-Z0-9_]{9,20}$");

4. Implementation of the trim Prototype Method for intercepting gaps on both sides of the js string

1 // my stupid method. I still thought about some mistakes at the time. After I came back, I realized it. The idea is like this: 2 String. prototype. trim = function () {3 var arr = this. split (""); 4 while (1) {5 if (arr [0] = "") {6 arr. shift (); 7 continue; 8} 9 break; 10} 11 while (1) {12 if (arr [arr. length-1] = "") {13 arr. pop (); 14 continue; 15} 16 break; 17} 18 return arr. join (""); 19} 20 // then the interviewer solved the problem by saying a word to me. However, I forgot the regular expression, but I didn't usually use the 21 String. prototype. trim = function () {22 return this. replace (/(^ \ s *) | (\ s * $)/g, ''); 23 };

5. The three output questions are classic questions.

1 // 5.12 var a = 4; 3 function B () {4 a = 3; 5 console. log (a); 6 function a () {}; 7} 8 B (); 9 // The output is obviously 3, because the global variable a is modified in it, the function a () {} is used for interference. Although the function declaration will be upgraded, it will be overwritten by, this is my understanding 10 // 5.212 // do not remember the specifics, just like the following 13 var baz = 3; 14 var bazz = {15 baz: 2, 16 getbaz: function () {17 return this. baz 18} 19} 20 console. log (bazz. getbaz () 21 var g = bazz. getbaz; 22 console. log (g (); 23 // The first output is 2 and the second output is 3. this is the point of this, when a function is called as an object property, this points to the object, and when it is called as a common function, it points to global 24 // 5.3var arr = [1, 2, 3, 4, 5]; 25 for (var I = 0; I <arr. length; I ++) 26 {27 arr [I] = function () {28 alert (I) 29} 30} 31 arr [3] (); 32 // typical closure. You don't need to check it. 5 is displayed.

6. Write the position values and differences.
I suddenly thought there was inherit. I forgot it at the time and asked me again during the interview.

8. Your understanding of reflow and repaint
I guess this is a re-layout, and the second is a re-painting. I thought of document. write (). I didn't ask me to check it again later.

Repaint indicates re-painting, and reflow indicates reflux. Repaint is mainly for the re-painting of a DOM element, and reflow is the reflux, for the whole page
Severity:
On the premise of performance first, the performance consumption reflow is greater than repaint.

Embodiment:
Repaint is a DOM element for re-painting; reflow is the whole page for re-arrangement, that is, all DOM elements of the page for rendering.

Style changes cause repaint and reflow. Changes that do not involve any DOM element typographical issues are repaint, such as changes to the element's color/text-align/text-decoration attributes. Except for the DOM element style mentioned above, the modification is basically reflow. For example, any modification of an element that involves styles such as length, width, Row Height, border, and display.

Common triggering scenarios:
Trigger repaint:

1. Modify the color, such as color = # ddd; 2 text-align, such as text-align = center; 3 a: hover may also cause re-painting. 4: hover-caused style changes that do not cause page reflux.

Trigger reflow:

1 modify width/height/border/margin/padding, such as width = 778px; 2 modify the element performance caused by pseudo classes such as animation and hover, and display = none to cause page reflux; 3. DOM element operations such as appendChild; 4. Modification of font styles; 5. Modification of background. Note that it may be literally re-painted, but the browser does return back, after optimization by browser manufacturers, some modifications to the background only trigger repaint, of course, IE does not need to consider; 6 scroll page, this is inevitable; 7 resize page, desktop version of the browser size scaling, if you are a mobile client, you have never played a multi-window operating system that can drag programs and resize program windows. 8. Read the attributes of an element (this cannot be understood, but the technical experts say so. Use it as a theorem ): read certain attributes of an element (offsetLeft, offsetTop, offsetHeight, offsetWidth, scrollTop/Left/Width/Height, clientTop/Left/Width/Height, getComputedStyle (), currentStyle (in IE ));

How to avoid:
Try to modify the style attribute of an element at the DOM terminal by changing the class: minimize the impact of DOM elements.

Avoid setting multiple inline styles: use the common class method to set styles to avoid inefficient DOM access when setting styles.

Set the position attribute of the animation element to fixed or absolute: because the current element is independent from the DOM stream, only the current element and the element repaint are affected.

Sacrifice smoothness to meet performance: the animation accuracy is too high, which may lead to more repaint/reflow times. At the same time, the animation precision can meet the performance loss and obtain a balance between performance and smoothness.

Avoid table layout: Changes to the size and content of each element of the table will lead to a re-calculation of the entire table, resulting in a large repaint or reflow. Instead of div, you can perform targeted repainting and avoid unnecessary reflow.

Avoid using computation in CSS: this should be avoided when learning CSS, and should not be further understood, because the consequences are indeed very serious, once an animated repaint/reflow exists, each frame of animation is computed, and the performance consumption cannot be underestimated.

Interview
After half an hour of writing the written test, I waited for the interview. In hh, I met the brother of beiyou and chatted about some node. js stuff and entered the subject interview.

I have a front-end learning exchange QQ group: 328058344 if you encounter any problems during the process of learning the front-end, please come to my QQ Group to ask questions. The group will update some learning resources every day. Chat is prohibited.