网易前端面试题总结,你见过几个?

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

步入正题—笔试

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

1.alert(1&&2),alert(1||0)
具体我不记得了反正就这两个,我以为考的是纯粹的与运算和或运算,后来发现太天真了
alert(1&&2)的结果是2
只要“&&”前面是false,无论“&&”后面是true还是false,结果都将返“&&”前面的值;
只要“&&”前面是true,无论“&&”后面是true还是false,结果都将返“&&”后面的值;
alert(0||1)的结果是
只要“||”前面为false,不管“||”后面是true还是false,都返回“||”后面的值
只要“||”前面为true,不管“||”后面是true还是false,都返回“||”前面的值。

2.mouseenter和mouseover的区别
这个之前看了下,大概是答出来了,但可能不够详细吧
不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。对应mouseout
只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。对应mouseleave

3.用正则表达式匹配字符串,以字母开头,后面是数字、字符串或者下划线,长度为9-20
看到这题我是崩溃的,因为正则学的不多,但是稍微写了下也差不多只是忘了些
var re=new RegExp("^[a-zA-Z][a-zA-Z0-9_]{9,20}$");

4.js字符串两边截取空白的trim的原型方法的实现
//我的笨方法,当时还想错了一些,回来后实现了一下,思路是这
String.prototype.trim = function () {
 var arr=this.split("");   
 while(1) {   
  if(arr[0]==" ") {    
       arr.shift();              
   continue;     
    }       
 break;    
  } 
  while(1){   
    if(arr[arr.length-1]==" ") {  
         arr.pop();             
    continue;      
   }       
   break;      
  }   
 return arr.join(""); 
 }  //后来面试官跟我说一句话就解决了,然而我正则都忘了,平时没怎么用 
 String.prototype.trim = function () { 
   return this.replace(/(^s)|(s$)/g,'');   
 };

5.三道判断输出的题都是经典的题
 //5.1
var a=4
function b()
    a=3;    
  console.log(a);   
  function a(){}; 
 } b();  
//明显输出是3,因为里面修改了a这个全局变量,那个function a(){}是用来干扰的,虽然函数声明会提升,就被a给覆盖掉了,这是我的理解
//5.2 
//不记得具体的就类似如下
 var baz=3; 
 var bazz={    
  baz: 2,   
  getbaz: function() {  
        return this.baz        
  } 
 }  
 console.log(bazz.getbaz())  
 var g=bazz.getbaz;  
 console.log(g()) ;  
  //第一个输出是2,第二个输出是3,这题考察的就是this的指向,函数作为对象本身属性调用的时候this指向对象,作为普通函数调用的时候就指向全局了  
 //5.3var arr=[1,2,3,4,5];  
 for(var i=0;i<arr.length;i++) 
 {     
  arr[i]=function(){  
 alert(i)  
 }  
 }  
 arr[3](); 
 //典型的闭包啊,看都不用看,肯定弹出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:

color的修改,如color=#ddd

text-align的修改,如text-align=center

a:hover也会造成重绘

:hover引起的颜色等不导致页面回流的style变动。

触发reflow:

width/height/border/margin/padding的修改,如width=778px;

动画,:hover等伪类引起的元素表现改动,display=none等造成页面回流appendChild等DOM元素操作;

font类style的修改;

background的修改,注意着字面上可能以为是重绘,但是浏览器确实回流了,经过浏览器厂家的优化,部分background的修改只触发repaint,当然IE不用考虑;

scroll页面,这个不可避免;

resize页面,桌面版本的进行浏览器大小的缩放,移动端的话,还没玩过能拖动程序,resize程序窗口大小的多窗口操作系统。

读取元素的属性(这个无法理解,但是技术达人是这么说的,那就把它当做定理吧):读取元素的某些属性(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区别,问项目如何实现什么的,再问了笔试题(上面讲过了)
等等等都问的项目

基本也就这些,面试官人挺好的,感觉没什么压力~最后也让我过了吧,说我还得多去看看基础的东西~确实基础还不够扎实哈,不过总的来说,这人生第一次面试还挺顺利的说,也是运气好吧~希望以后的路能踏实的走下去吧~

需要的的可以加我qq3252897743领取

转载于:https://blog.51cto.com/14334627/2402862

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/279451.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

webpack 配置详解

最近在学习webpack&#xff0c;边学边练习&#xff0c;下面是对一些应用到的属性、插件记录分享出来&#xff0c;也方便以后查找与复习&#xff0c;过程中碰到了一些坑&#xff0c;在注释中有说明&#xff1a; const path require(path) const webpack require("webpack…

连续对焦 auto对焦_如何在Windows 10上使用对焦辅助(请勿打扰模式)

连续对焦 auto对焦Windows 10’s “Focus Assist” feature is a “Do Not Disturb” mode that hides notifications. Windows automatically activates it when you’re playing PC games or mirroring your display—and you can have Windows automatically activate it on…

小米品牌

对于现阶段的小米公司来说&#xff0c;他们的策略是行走在钢丝上的。为什么这么说呢&#xff1f;原因是营销策略的优势和劣势都很容易被人翻转。换句话来说就是优势的稳定性不够&#xff0c;劣势的方面又很容易崩盘&#xff0c;这两个方向的丝毫失误都会带给小米公司严重的打击…

wepy学习笔记之环境搭建

写了近两年小程序了&#xff0c;越来越发现原生小程序有太多鸡肋的地方。所以今天准备尝试一下wepy&#xff0c;正好最近手上有个外包&#xff0c;可以拿来练手。如果可以的话&#xff0c;或许会出一系列wepy相关的文章&#xff08;偏实战&#xff09;&#xff0c;欢迎大佬们指…

山东青岛市南区:创建物联网 信息化管理涉案财物

近日,山东省青岛市市南区检察院自主设计研发“物联网”涉案财物管理系统,使涉案财物管理工作步入了信息化管理模式。 涉案财物管理工作是案件办理过程中一个相当重要的环节,而以往主要靠人工进行涉案财物管理,工作繁琐,业务量大,存在查找困难、堆放混乱等问题。库存现状不能及时…

spotify能免费下歌吗_Spotify免费版与高级版:值得升级吗?

spotify能免费下歌吗Spotify offers two tiers: a free, ad-supported plan and a $9.99 per month Premium plan. But what are the differences between the two and is it worth upgrading? Let’s find out. Spotify提供两个等级&#xff1a;免费的广告支持计划和每月9.99…

BZOJ4012 [HNOI2015]开店

BZOJ4012 [HNOI2015]开店 这道题因为太多人拿这个题卡$BZOJ$&#xff0c;于是成了权限题。。。 本蒟蒻表示没钱氪金。。。 无奈&#xff0c;拿出了洛谷&#xff1a;P3241 [HNOI2015]开店 还有$LOJ$&#xff1a;#2116. 「HNOI2015」开店 这里附上洛谷的题面&#xff1a; 题目描述…

ElasticSearch实战-入门

1.概述 今天接着《ElasticSearch实战&#xff0d;日志监控平台》一文来给大家分享后续的学习&#xff0c;在《ElasticSearch实战&#xff0d;日志监控平台》中给大家介绍一个日志监控平台的架构方案&#xff0c;接下来给大家分享如何去搭建部署这样一个平台&#xff0c;给大家做…

如何解决90%的报表设计难题?300张报表模板任君挑选

下载ActiveReport最新试用版 大数据时代&#xff0c;数据价值愈发彰显&#xff0c;数据分析正在成为影响业务决策的关键因素。其中&#xff0c;数据分析的结果以报表的形式呈现给用户&#xff0c;究竟什么样的报表设计才能真正让用户满意&#xff0c;如何保证用户在复杂的数据…

macos 版本_如何检查您使用的macOS版本

macos 版本Apple releases new versions of the macOS operating system about once per year. Here’s how to check which release of the macOS operating system is installed on your MacBook, iMac, Mac Mini, or Mac Pro. 苹果大约每年发布一次新版本的macOS操作系统。 …

luogu 1484\1792 种树 奇怪的贪心可反悔

1484 种树 此版本是线性的&#xff0c;那么根据链表维护即可&#xff1b; 构建新点&#xff0c;点的左右分别是原整个区间的前驱及后继&#xff0c;再正常维护即可 注意两个版本的维护有所不同 第二个版本的维护直接将左右两点删除 1792 种树2 此版本是环 1484 #include<bi…

第十四周作业

2019春第二次课程设计实验报告 一.实验项目 贪吃蛇游戏 二.实验功能描述&#xff1a; 存储数据&#xff0c;实现wasd控制蛇方向&#xff0c;吃到食物就增加长度&#xff0c;最后按长度算分数&#xff0c;撞到障碍物则死亡&#xff0c;计算积分 三.项目模板结构介绍&#xff1a;…

java语言不用担心内存吗_不用担心智能手机的电池,只需使用它

java语言不用担心内存吗When you’re trying to get the most life out of your device, it’s easy to overthink batteries. Don’t. Plug in your devices when possible, carry a battery pack with you, and get on with your life. 当您试图充分利用设备的使用寿命时&…

asp.net core结合NLog搭建ELK实时日志分析平台

0、整体架构 整体架构目录&#xff1a;ASP.NET Core分布式项目实战-目录 一、介绍ELK 1、说明&#xff08;此篇ELK采用rpm的方式安装在服务器上&#xff09;-牛刀小试 承接上一篇文章的内容准备部署ELK来展示asp.net core 的数据。目前此篇文章只用到单台服务器&#xff0c;等下…

Rhel7 设置目录权限,acl权限

Rhel7 设置目录权限&#xff0c;acl权限 改变用户和组的所属 Getfacl 取得 Setfacl设置 [rootdesktop0 tmp]# setfacl -m u:natasha:rw fstab [rootdesktop0 tmp]# setfacl -m u:harry:- fstab [rootdesktop0 tmp]# setfacl -m o::r fstab [rootdesktop0 tmp]# getfacl fstab #…

IT兄弟连 JavaWeb教程 AJAX定义以及解决的问题

2019独角兽企业重金招聘Python工程师标准>>> Ajax是"Asynchronous JavaScript And XML"的缩写(即&#xff1a;异步的JavaScript和XML)&#xff0c;是一种实现无页面刷新获取服务器数据的混合技术,Ajax这个概念的最早提出者是Jesse James Garrett。我们知道…

echo和@echo_如何在Echo Show和Echo Spot上切换到24小时时钟

echo和echoIf you prefer the 24-hour clock format instead of the usual 12-hour format, Amazon recently (and quietly) added the ability to switch between the two on the Echo Show and Echo Spot. 如果您希望使用24小时制而不是通常的12小时制&#xff0c;那么Amazon…

springMVC--XML解析

一 springMVC 入口 web.xml; DispatcherServlet二 初始化过程 1.寻找init(); 查看DispatcherServlet时候时&#xff0c;继承自servlet&#xff0c;肯定有初始化方法,DispatcherServlet继承自FrameworkServlet FrameworkServlet继承自HttpServletBean HttpServletBean继承自Http…

Vim 4 常用插件

Vim 系列教程目录: Vim 1 基本使用Vim 2 高级用法Vim 3 vimrcVim 4 常用插件Vim 5 其他编辑器的 Vim 插件Vim 插件网站 Vim 之所以强大, 有个很大的原因就是他有丰富的插件. 插件可以极大地增强 Vim 的功能. 那么去哪里下载插件呢? 插件怎么安装和管理呢, 听我慢慢道来. 先说到…

[Windows编程] 通过GetModuleHandleEx 得到函数调用者所在的DLL/EXE 原创陈本峰2009-02

在有些情况下需要得到函数调用者的模块名字。比如你想限制你的某个函数只能被自己某个特定的DLL调用。 或者比如在异常处理中你想了解是那个DLL/EXE抛出了异常。API函数_ReturnAddress 和GetModuleHandleEx 函数可以帮助我们达到这个目的。以下代码演示它们的用法&#xff1a;v…