记一次网易前端面试
很幸运地能收到网易的面试通知，就毫不犹豫翘了课去面试了 hhhh~三点的面试，因为从来没去过那个中关村西北旺区，吃完饭早早就去了, 想象中那里应该是繁华的地方 hhhh，到了发现都在建设中，很多还在建设中，看到了网易旁边的百度和搜狐，都是长长的大楼或者是高高的建筑，满满大企业的既视感~一进网易楼就没网= =，在里面也没事干，就呆在外面看看前端的东西准备下，到 2 点 40 的时候跟前台说了下，一个网易年轻姐姐就带我上去了~
步入正题-笔试
本来我以为只有面试的，发现那个姐姐并不是带我去面试的，带我去了个房间，留了两张题目给我，说半小时来说，毫无防备 hhh 接下来步入正题吧~
1.alert(1&&2),alert(1||0)
具体我不记得了反正就这两个，我以为考的是纯粹的与运算和或运算，后来发现太天真了
1 alert(1&&2)的结果是2
2 只要“&&”前面是false，无论“&&”后面是true还是false，结果都将返“&&”前面的值;
3 只要“&&”前面是true，无论“&&”后面是true还是false，结果都将返“&&”后面的值;
4
5 alert(0||1)的结果是1
6 只要“||”前面为false,不管“||”后面是true还是false，都返回“||”后面的值。
7 只要“||”前面为true,不管“||”后面是true还是false，都返回“||”前面的值。2.mouseenter 和 mouseover 的区别
这个之前看了下，大概是答出来了，但可能不够详细吧
1 不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。对应mouseout
2 只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。对应mouseleave3. 用正则表达式匹配字符串，以字母开头，后面是数字、字符串或者下划线，长度为 9-20
看到这题我是崩溃的，因为正则学的不多，但是稍微写了下也差不多只是忘了些。
1 var re=new RegExp("^[a-zA-Z][a-zA-Z0-9_]{9,20}$");4.js 字符串两边截取空白的 trim 的原型方法的实现
1 //我的笨方法，当时还想错了一些，回来后实现了一下，思路是这样
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 //后来面试官跟我说一句话就解决了，然而我正则都忘了，平时没怎么用
21 String.prototype.trim = function () {
22 return this.replace(/(^\s*)|(\s*$)/g,'');
23 };5.三道判断输出的题都是经典的题
1 //5.1
2 var a=4;
3 function b() {
4 a=3;
5 console.log(a);
6 function a(){};
7 }
8 b();
9 //明显输出是3，因为里面修改了a这个全局变量，那个function a(){}是用来干扰的，虽然函数声明会提升，就被a给覆盖掉了，这是我的理解
10 //5.2
12 //不记得具体的就类似如下
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 //第一个输出是2，第二个输出是3，这题考察的就是this的指向，函数作为对象本身属性调用的时候this指向对象，作为普通函数调用的时候就指向全局了
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 //典型的闭包啊，看都不用看，肯定弹出5啊6.写出position不同值和区别
突然想到还有inherit，当时忘记了，后来面试的时候又重新问了我一下：
absolute: 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。(不占位)
relative: 生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。（占位）
static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）inherit：规定应该从父元素继承 position 属性的值。
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
7. 写一个 div+css 布局，左边图片右边文字，文字环绕图片，外面容器固定宽度，文字不固定（这是后来根据面试官描述的，笔试题上只有图我就不放上来了)
这道题我没答好，刚开始我不清楚那个文字是要自适应的面试官说用 p 标签包裹文字，我当时就紧张了下，把 p 标签错当成内联了，然后我再修正，然后加左浮动, 然后不行，我就跟面试官说，我以前都直接就一个 img 它 float：left，加文字不加 p 标签就好了然后我回来试一试才发现= =，直接加 p 标签就可以了啊= =，omg 我的错误！！！
8. 讲述你对 reflow 和 repaint 的理解
这个真不会了没接触，第一个我猜是重新布局，第二个倒是见过就是重绘，就想到 document.write(), 这个后来也没再问我了查查查：
repaint 就是重绘，reflow 就是回流。repaint 主要是针对某一个 DOM 元素进行的重绘，reflow 则是回流，针对整个页面的重排。
严重性：在性能优先的前提下，性能消耗 reflow 大于 repaint。
体现：repaint 是某个 DOM 元素进行重绘；reflow 是整个页面进行重排，也就是页面所有 DOM 元素渲染。
如何触发：style 变动造成 repaint 和 reflow。不涉及任何 DOM 元素的排版问题的变动为 repaint，例如元素的 color/text-align/text-decoration 等等属性的变动。除上面所提到的 DOM 元素 style 的修改基本为 reflow。例如元素的任何涉及长、宽、行高、边框、display 等 style 的修改。
常见触发场景：
触发 repaint：
1 color的修改，如color=#ddd；
2 text-align的修改，如text-align=center；
3 a:hover也会造成重绘。
4 :hover引起的颜色等不导致页面回流的style变动。触发 reflow：
1 width/height/border/margin/padding的修改，如width=778px；
2 动画，:hover等伪类引起的元素表现改动，display=none等造成页面回流；
3 appendChild等DOM元素操作；
4 font类style的修改；
5 background的修改，注意着字面上可能以为是重绘，但是浏览器确实回流了，经过浏览器厂家的优化，部分background的修改只触发repaint，当然IE不用考虑；
6 scroll页面，这个不可避免；
7 resize页面，桌面版本的进行浏览器大小的缩放，移动端的话，还没玩过能拖动程序，resize程序窗口大小的多窗口操作系统。
8 读取元素的属性（这个无法理解，但是技术达人是这么说的，那就把它当做定理吧）：读取元素的某些属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE))；如何避免：
尽可能在 DOM 末梢通过改变 class 来修改元素的 style 属性：尽可能的减少受影响的 DOM 元素。
避免设置多项内联样式：使用常用的 class 的方式进行设置样式，以避免设置样式时访问 DOM 的低效率。
设置动画元素 position 属性为 fixed 或者 absolute：由于当前元素从 DOM 流中独立出来，因此受影响的只有当前元素，元素 repaint。
牺牲平滑度满足性能：动画精度太强，会造成更多次的 repaint/reflow，牺牲精度，能满足性能的损耗，获取性能和平滑度的平衡。
避免使用 table 进行布局：table 的每个元素的大小以及内容的改动，都会导致整个 table 进行重新计算，造成大幅度的 repaint 或者 reflow。改用 div 则可以进行针对性的 repaint 和避免不必要的 reflow。
避免在 CSS 中使用运算式：学习 CSS 的时候就知道，这个应该避免，不应该加深到这一层再去了解，因为这个的后果确实非常严重，一旦存在动画性的 repaint/reflow，那么每一帧动画都会进行计算，性能消耗不容小觑。
面试部分
半小时写完笔试后，等待面试，hh 中途遇到了北邮的师兄聊了一些 nodejs 的东西步入正题面试。
什么时候开始学前端
如何学前端
看过谁的博客
开始看我的简历问了，问项目，问 webpack/gulp 区别，问项目如何实现什么的，再问了笔试题（上面讲过了）
等等等都问的项目。
基本也就这些，面试官人挺好的，感觉没什么压力~最后也让我过了吧，就后面暑假放假再去联系~说我还得多去看看基础的东西~确实基础还不够扎实哈，不过总的来说，这人生第一次面试还挺顺利的说，也是运气好吧~希望学校早放假能去实习一番~
就本文讨论的话题，你有什么想法，欢迎在留言区跟大家分享讨论哦~
点击图片get更多精彩