记一次网易前端面试

2023-11-09

很幸运地能收到网易的面试通知,就毫不犹豫翘了课去面试了 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 事件。对应mouseleave

3. 用正则表达式匹配字符串,以字母开头,后面是数字、字符串或者下划线,长度为 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,当时忘记了,后来面试的时候又重新问了我一下:

  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 元素渲染。

 

如何触发: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 区别,问项目如何实现什么的,再问了笔试题(上面讲过了)

 

等等等都问的项目。

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

 

 

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

记一次网易前端面试 的相关文章

  • 【读书笔记——开关电源】《精通开关电源设计》(1)

    第一章 开关功率变换原理 文章目录 第一章 开关功率变换原理 前言 1 1 概念和基本术语 1 2 电感 电感充放电的基本原理 功率变化中的稳态与不同工作模式 伏秒定律与占空比 开关器件的使用与保护 1 3 开关拓扑的演变 通过二极管控制感

随机推荐

  • 从自动贩卖机找零看Python中的动态规划问题

    原文 http www jianshu com p 144db81341a3 从自动贩卖机找零看Python中的动态规划问题 问题描述 假设在某国存在 1 x1 x2 x3 xn 多种货币 该国的自动贩卖机在找零时要遵循一个原则 找零的总张
  • LeetCode 62. 不同路径

    62 不同路径 一个机器人位于一个 m x n 网格的左上角 起始点在下图中标记为 Start 机器人每次只能向下或者向右移动一步 机器人试图达到网格的右下角 在下图中标记为 Finish 问总共有多少条不同的路径 示例 1 输入 m 3
  • ubuntu使用记录(2)在ubuntu下安装ssh时一直显示E: 无法定位软件包 sshd

    在ubuntu下安装ssh时一直显示E 无法定位软件包 sshd 安装方法 点击我们屏幕左上角的小齿轮 设置 gt 关于 gt 系统设置 gt 软件和更新 在点击其他后会跳出 我们直接点击选择最佳服务器即可 我电脑上是清华的最快
  • LeetCode 135. 分发糖果--排序判断

    分发糖果 老师想给孩子们分发糖果 有 N 个孩子站成了一条直线 老师会根据每个孩子的表现 预先给他们评分 你需要按照以下要求 帮助老师给这些孩子分发糖果 每个孩子至少分配到 1 个糖果 评分更高的孩子必须比他两侧的邻位孩子获得更多的糖果 那
  • 面试题2021.11.29----java基础

    2021 11 29 java基础 1 请你解释为什么会出现4 0 3 6 0 40000001这种现象 答 这是因为二进制数没办法准确的表示十进制数的数 十进制的小数在转化为二进制是会有误差 导致该运算结果的诞生 2 请你说说Lamda表
  • Exps on March 25th

    时差 What s your time there What time is it over there 在你那里 现在是几点啊 Greenwich Mean Time GMT 格林威治时间 0时区 伦敦标准时间China is locat
  • 操作系统怎么访问docker内的MySQL

    操作系统怎么访问docker内的MySQL 怎么访问docker内的MySQL 1 获取mysql镜像 docker pull mysql 5 6 2 启动mysql镜像 推荐学习 MySQL视频教程 docker run itd P my
  • 源码阅读心得

    简单记录一下自己最近一段时间阅读一个C语言开源项目的心得 1 阅读工具 source insight 4 0 gdb Typora 2 阅读心得 1 不要陷在代码的实现细节里面出不来 浪费时间 因为稍微大一点的开源项目 都有很多自定义的结构
  • 目标检测之性能指标

    推荐文章 https www cnblogs com isLinXu p 15893489 html
  • 小白循环神经网络RNN LSTM 参数数量 门单元 cell units timestep batch_size

    小白循环神经网络RNN LSTM 参数数量 门单元 cell units timestep batch size RNN循环神经网络 timestep batch size LSTM及参数计算 keras中若干个Cell例如LSTMCell
  • 使用内网穿透实现Blynk服务器远程访问

    使用内网穿透实现Blynk服务器远程访问 使用内网穿透实现Blynk服务器远程访问 1 安装宝塔面板和docker管理器 2 登陆小米球控制台 3 运行小米球linux版本软件 4 手机APP访问和网页访问 5 总结 使用内网穿透实现Bly
  • torch.device

    问题 device torch device cuda if torch cuda is available else cpu AttributeError module object has no attribute device tor
  • linux-basic(12)正则表达式与文件格式化处理

    12 1 1 什么是正则表达式 1 简单说 正则表示法就是处理字串的方法 他是以行为单位来进行字串的处理行为 正则表达式透过一些特殊符号的辅助 可以让使用者轻易的达到查找 删除 替换某特定字串的处理程序 12 1 5 扩展的正则表达式 正则
  • VirtualBox中Ubuntu 14.04 LTS安装GATE7.1

    开发环境 win7 VirtualBox Ubuntu 14 04 LTS 主要参考博客 1 Compilation Instructions V7 1 2 Gate7 1在Ubuntu下编译 3 Package Requirements
  • 面试官:你了解数据安全传输吗?

    鄢栋 微医云服务团队前端工程师 有志成为一名全栈开发工程师甚至架构师 路漫漫 吾求索 生活中通过健身释放压力 思考问题 看到这个标题 很多老铁会斩钉截铁的说 这道题我会 就是用 HTTPS 来进行安全传输的 对 很优秀 那你知道 HTTPS
  • Spring - SpringMVC(一)

    SpringMVC 第一章 SpringMVC入门 补充 浏览器地址中的绝对路径 代表的就是端口后面 哪怕你在配置文件中配置了项目的映射名 也是端口后面 不是映射名后面 它会直接忽视项目的映射名 只代表端口后边 知识点 概述 1 目标 了解
  • 不同数据类型的相关性分析总结

    在进行数据建模之前 我们一般会进行数据探索和描述性分析 发现数据规律及数据之间的相关性 本文主要从检验方法和可视化图形两个方面对不同数据类型的相关性分析方法进行总结 以加强对数据的了解和认识 为建模打下基础 目录 一 不同数据类型的相关性总
  • STL十大容器 之 list

    特点 内存不连续 底层实现是链表 插入和删除的效率比较快 随机访问效率比较低 和vector相比 不再需要 capacity 和 reserve 操作 因为链表没有大小限制 不需要为了效率增加预分配内存的功能 一 插入和删除 push ba
  • vue中从对象数组中拿到每一个对象的其中一个字段作为下拉框的选项

    原因分析 因为是对象数组 所以不能单纯的用this指向来赋值 解决方案 直接上代码 用到ES6的map 方法 具体使用不懂的还请自己百度哦 这是下拉框的代码
  • 记一次网易前端面试

    很幸运地能收到网易的面试通知 就毫不犹豫翘了课去面试了 hhhh 三点的面试 因为从来没去过那个中关村西北旺区 吃完饭早早就去了 想象中那里应该是繁华的地方 hhhh 到了发现都在建设中 很多还在建设中 看到了网易旁边的百度和搜狐 都是长长