记一次网易前端实习面试

2018-02-28 860
摘要:记一次网易前端实习面试 很幸运地能收到网易的面试通知,就毫不犹豫翘了课去面试了hhhh~三点的面试,因为从来没去过那个中关村西北旺区,吃完饭早早就去了,想象中那里应该是繁华的地方hhhh,到了发现都在建设中,很多还在建设中,看到了网易旁边的百度和搜狐,都是长长的大楼或者是高高的建筑,满满大企业的既视感~一进网

记一次网易前端实习面试

很幸运地能收到网易的面试通知,就毫不犹豫翘了课去面试了hhhh~三点的面试,因为从来没去过那个中关村西北旺区,吃完饭早早就去了,想象中那里应该是繁华的地方hhhh,到了发现都在建设中,很多还在建设中,看到了网易旁边的百度和搜狐,都是长长的大楼或者是高高的建筑,满满大企业的既视感~一进网易楼就没网= =,在里面也没事干,就呆在外面看看前端的东西准备下,到2点40的时候跟前台说了下,一个网易年轻姐姐就带我上去了~

步入正题-笔试

本来我以为只有面试的,发现那个姐姐并不是带我去面试的,带我去了个房间,留了两张题目给我,说半小时来说,毫无防备hhh接下来步入正题吧~

1.alert(1&&2),alert(1||0)

具体我不记得了反正就这两个,我以为考的是纯粹的与运算和或运算,后来发现太天真了

1alert( 1&& 2)的结果是 22只要“&&”前面是 false,无论“&&”后面是 true还是 false,结果都将返“&&”前面的值; 3只要“&&”前面是 true,无论“&&”后面是 true还是 false,结果都将返“&&”后面的值; 45alert( 0|| 1)的结果是 16只要“||”前面为 false,不管“||”后面是 true还是 false,都返回“||”后面的值。 7只要“||”前面为 true,不管“||”后面是 true还是 false,都返回“||”前面的值。

2.mouseenter和mouseover的区别

这个之前看了下,大概是答出来了,但可能不够详细吧

1 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。对应mouseout 2 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。对应mouseleave

3.用正则表达式匹配字符串,以字母开头,后面是数字、字符串或者下划线,长度为9-20

看到这题我是崩溃的,因为正则学的不多,但是稍微写了下也差不多只是忘了些

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

4.js字符串两边截取空白的trim的原型方法的实现

1//我的笨方法,当时还想错了一些,回来后实现了一下,思路是这样2String.prototype.trim = function(){3vararr= this.split( ""); 4while( 1) { 5if(arr[ 0]== " ") { 6arr.shift(); 7continue; 8} 9break; 10} 11while( 1){ 12if(arr[arr.length- 1]== " ") { 13arr.pop(); 14continue; 15} 16break; 17} 18returnarr.join( ""); 19} 20//后来面试官跟我说一句话就解决了,然而我正则都忘了,平时没怎么用21String.prototype.trim = function(){22returnthis.replace( /(^\s*)|(\s*$)/g, ''); 23};

5.三道判断输出的题都是经典的题

1//5.12vara= 4; 3functionb(){4a= 3; 5console.log(a); 6functiona(){}; 7} 8b(); 9//明显输出是3,因为里面修改了a这个全局变量,那个function a(){}是用来干扰的,虽然函数声明会提升,就被a给覆盖掉了,这是我的理解10//5.212//不记得具体的就类似如下13varbaz= 3; 14varbazz={ 15baz: 2, 16getbaz: function(){17returnthis.baz 18} 19} 20console.log(bazz.getbaz()) 21varg=bazz.getbaz; 22console.log(g()) ; 23//第一个输出是2,第二个输出是3,这题考察的就是this的指向,函数作为对象本身属性调用的时候this指向对象,作为普通函数调用的时候就指向全局了24//5.3var arr=[1,2,3,4,5];25for( vari= 0;i<arr.length;i++) 26{ 27arr[i]= function(){28alert(i) 29} 30} 31arr[ 3](); 32//典型的闭包啊,看都不用看,肯定弹出5啊

6.写出position不同值和区别

突然想到还有inherit,当时忘记了,后来面试的时候又重新问了我一下

  1. absolute: 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。(不占位)
  2. relative: 生成相对定位的元素,相对于其正常位置进行定位。因此,”left:20” 会向元素的 LEFT 位置添加 20 像素。(占位)
  3. static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)inherit:规定应该从父元素继承 position 属性的值。
  4. 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元素渲染。(web前端学习交流群:328058344 禁止闲聊,非喜勿进!)

如何触发:

style变动造成repaint和reflow。不涉及任何DOM元素的排版问题的变动为repaint,例如元素的color/text-align/text-decoration等等属性的变动。除上面所提到的DOM元素style的修改基本为reflow。例如元素的任何涉及长、宽、行高、边框、display等style的修改。

常见触发场景:

触发repaint:

1color的修改,如 color=#ddd; 2text- align的修改,如 text- align=center; 3a:hover也会造成重绘。 4:hover引起的颜色等不导致页面回流的style变动。

触发reflow:

1width/height/border/margin/padding的修改,如width= 778px; 2动画,:hover等伪类引起的元素表现改动,display=none等造成页面回流; 3等DOM元素操作; 4font类style的修改; 5background的修改,注意着字面上可能以为是重绘,但是浏览器确实回流了,经过浏览器厂家的优化,部分background的修改只触发repaint,当然IE不用考虑; 6scroll页面,这个不可避免; 7resize页面,桌面版本的进行浏览器大小的缩放,移动端的话,还没玩过能拖动程序,resize程序窗口大小的多窗口操作系统。 8读取元素的属性(这个无法理解,但是技术达人是这么说的,那就把它当做定理吧):读取元素的某些属性(offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/ Left/Width/Height、clientTop/ Left/Width/Height、getComputedStyle()、currentStyle( inIE));

如何避免:

尽可能在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的东西步入正题面试

  1. 什么时候开始学前端
  2. 如何学前端
  3. 看过谁的博客
  4. 开始看我的简历问了,问项目,问webpack/gulp区别,问项目如何实现什么的,再问了笔试题(上面讲过了)
  5. 等等等都问的项目

    基本也就这些,面试官人挺好的,感觉没什么压力~最后也让我过了吧,就后面暑假放假再去联系~说我还得多去看看基础的东西~确实基础还不够扎实哈,不过总的来说,这人生第一次面试还挺顺利的说,也是运气好吧~希望学校早放假能去实习一番~


最新文章

“通号铁军”助力长春市轨道交通6号线开通运营

58同城携海量名企开启“涨薪求职季”,助力求职者金三银四“薪”愿达成

【博鳌之声】阿斯利康全球CEO:中国经济表现亮眼 技术创新令人印象深刻

金柚网「梧桐范式」数字化人事管理,引领零售与餐饮业升级

共话AI产业发展!第十三届创投峰会在长隆万博圆满召开

推动创新性战略变革 企业内驱力不容忽视

中国人寿2023年实现归母净利润超461亿元 内含价值超1.26万亿元

诺迪康胶囊入选《西藏自治区第一批精品藏药品种目录》

国家电网红岩(忠县)青年志愿者服务队举行情暖春苗心公益活动 助力儿童提升用电知识安全成长

官宣丨汇丰青少年携手迪桑特儿童,助力中国高尔夫新生代!

变与不变,百年蒙牛的新台阶

瓜州税务:“线上办”助力纳税人便捷快速办税

人民创意与泰丰文化达成合作 携手共建“文化+科技”融合新模式

中建四局开展“精诚奉献、建证未来”学雷锋志愿服务系列活动

豫酒荣耀 赊店元青花·金2015荣获年度“青酌奖”!

日立公司采用元太科技电子纸实现了无纸化营运

2024流行色装修邂逅蒙娜丽莎瓷砖,解锁专属浪漫

DHC持续践行公益助学12年,共筑爱心校园,守护希望未来!

我国用水效率和效益持续提升(新数据 新看点)

【提升司法公信力 推进诚信建设工程】满洲里市公安局“三个聚焦”扎实开展春季交通安全专项整治工作

推荐文章

黄金关键变局,金价、日元、美债三角连动崩解?

为何薪资不涨,研究指雇主缺乏竞争

拥抱高通三星后,魅族推出了一款不是联发科芯片的全面屏手机

专家:锂金属电极瓶颈突破尚需十年光景,但值得期待

挑战特斯拉,法拉利计划在 2020 年推出电动超跑

苹果摊手vivo微笑,调研称指纹识别才能解锁手机未来

阿里云凌晨表态:绝不会发行比特币也不会提供挖矿平台

美团队展示与拓朴绝缘体相关的新型磁阻效应,有望改善未来电脑运算及储存功能

全球二手衣回收市场消失,快时尚将酿环境灾难

上海地铁全线接入支付宝,断网居然也能刷手机进站?

AGC 研发新型石英透镜,简化 UV LED 制程

黄金关键变局,金价、日元、美债三角连动崩解?

美团队展示与拓朴绝缘体相关的新型磁阻效应,有望改善未来电脑运算及储存功能

比特币空单周周飙太一面倒?当心轧空引爆涨势

微软研发人工智能,单凭文字就可以作画

科技早报 – iPhone X或成苹果最短命旗舰、神秘小米新机遭曝光 – 20180122

华为无情嘲讽苹果电池?我的手机冰封在水下照样来电

马云,马化腾要叹气,李彦宏率先登上《时代》杂志封面

微信下架875个“假货、高仿类”小程序,淘宝乐了

科技早报 – 比特币价格重回1.1万美元、苹果将允许iPhone 6/6S/7手动解除降速 – 20180119