你可能需要的网易前端三轮面经

关注若川视野, 回复"pdf" 领取资料,回复"加群",可加群长期交流

前言

最近一个星期面了几家公司,最后收获了心仪的网易有道offer,于是推掉了其他的面试,至于一些其他大厂,并没有投简历,由于种种原因(就是菜),准备目前先踏实的学吧。

希望大家秋招顺利,成为offer收割机。

最有意思的就是网易有道第三轮技术面试,因为这个没有具体的答案,有兴趣的可以看看,我就先把这个第三轮面试场景题拿出来吧,其他的一些基础的话,自己可以过一遍。

网易有道

三面

第三轮面试的是一个小哥哥,面试全程大概70分钟,本来是远程面试的,但是因为声音的问题,所以选择的就是电话面试了,小哥哥也挺好的,给我感觉就是很厉害的感觉,确实,接下来的问题,我就知道不简单了。

第一个场景问题

比如直播的场景,你应该知道吧,你需要实现一个这样子的场景,比如某个老师点击某个地方,比如U盘,你这个时候需要展示U盘的动画效果,比如这个时候,老师点击这个电脑屏幕,你需要展示一个小电脑的动画效果,向上述这样子,「需要在特定的时间点,完成特定的动画效果」

  • 嗯,这个问题,我的想法是,动画是例外加上去的,如果说是直接后期处理的话,那应该跟我们前端的关系不大了,所以我们接下来的问题,就是如何去处理,时间同步的问题,怎么在具体的时间点,开始展示动画呢

  • 第二个问题,假设我们可以获取到某个时间点的动画,那么接下来,小哥哥,给我们提出了一个新的问题,就是当你的网络拥塞时,比如有延迟的时候,这个时候,出现卡顿的效果,原本需要5秒播放完的,可能需要7秒,那么你是如何去解决动画同步的?

嗯,我没有做过这种类似的问题,所以回答起来感觉很吃力,有了解的小伙伴可以评论留下你们的答案,我虚心学习。

第二个场景问题

有一个场景,在一个输入框输入内容,怎么更加高效的去提示用户你输入的信息,举个例子,你输入天猫,那么对应的提示信息是天猫商城,天猫集团,这个信息如何最快的获取,有没有不需要发请求的方式来实现?

  • 比如数据请求的时候,尽量发的请求少,那么可以做防抖和节流处理

  • 接下来的小哥哥,给了新的场景,当你的服务器挂了,数据取不到,那如何设计一个小型的本地数据库

  • 接下来问题就是如何设计一个本地的数据,优化的点,就是尽可能的快,每次查询数据尽可能的快

  • 我的第一个思路,是key-value这样子去设计,但是随后就被小哥哥给质疑出问题了,举个例子,如果按照你的想法,如果关键字为 天猫,这样子设计数据的话,就会存在被数据重复,这样子显然是不合理的。

  • 想了很久,这个时候,既然有前缀重合的情况,那么是不是有一种数据结构可以解决这个问题呢??

  • 字典树,我们可以在本地建立一个预读的字典树,这样子的话,根据用户输入的内容,查字典树,这个时间复杂度大概就是O(m+n),所以很大程度上加快了查找效率。

当然了,有更好的解决办法的话,可以留下你们的答案,看看你们是如何解决问题的。

第三个场景问题

Git版本工具你使用过吧,那你能不能实现一个这样子的效果,完成Git Diff算法,比较两个文件的不同,然后说一说具体的思路,这个过程怎么去比较的?两个文件不同的位置如何标注出来,如何找出这个不同,具体说一说思路。

  • 一开始我想的是diff算法,比如是vue中的虚拟dom算法,但是感觉不对啊,diff是做了优化的,这里很明显不合理,于是这个方法就不合理了。

  • 那么两个文件,该如何快速的找到对应的两者文件的差别呢?这个问题想了好久,嗯,当时自己好像是口胡了一些思路,比如去逐行逐行的比较,这样子的话,其实也不是很合理的,仔细想一想不行

  • 小哥哥提示了我,我们是不是要去找最长的公共子串,这个是时候,我应该想起来这个是两个串的LCS,应该就是经典的动态规划问题,最后一个问题,确实没有想到这个,可能就是很久没有接触这类动态规划问题了。

  • 核心应该是动态规划解决LCS,以及后续的处理,可以去看看有些文章,写的很不错,我这里就不张开啦。

Git是怎样生成diff的:Myers算法

嗯,三面的话,考察的是你思考问题,以及结合问题是如何分析,可能也考了算法吧,嗯,害,挺难的。

一面

面试流程50分钟,基本上自我介绍,我花了一分钟介绍完自己在校经历,接下来就是提问环节。

全程下来小哥哥耐心指点,非常温柔,这就是我现象中的面试官应该有的样子,还会耐心去提示你,有问题的话,也就帮助你,引导你怎么去回答。

H5新特性

简历上面写了这个内容,所以被问到了,害,当时脑子一蒙,都完全没有答好,这里在好好的梳理一遍?

  1. 本地存储特性

  2. 设备兼容特性 HTML5提供了前所未有的数据与应用接入开放接口

  3. 连接特性 WebSockets

  4. 网页多媒体特性 支持Audio Video SVG Canvas WebGL CSS3

  5. CSS3特性

增加拖放API地理定位SVG绘图canvas绘图Web WorkerWebSocket

然后我答了本地存储,接下来就问我这方便的问题啦?

localstroge sessionstoge 区别 应用场景

vue组件间通信

好几次面试都问了这个问题,这个问题我是这么看待的,取决于你平时项目中经常使用的方式是哪些,所以我每次都会答三种方式,反而网上8种组件间通信的方式,我记不住,也觉得了解一下即可,跟面试官交流一下,你在项目种是如何使用的即可。

遍历对象方法

  • for in  遍历的也可以,不过对于非继承的属性名称也会获取到,通过hasOwnproperty判断

  • Object.keys()  可枚举属性和方法名

  • Object.getOwnPropertyNames() 可以获取数组内包括自身拥有的枚举或不可枚举属性名称字符串,如果是数组的话,还有可能获取到length属性

编程题?

数组去重

常规题,讲清楚思路,最后小哥哥提示能不能使用O(n),我给出了两者方案

  • Set

  • 用对象特性,我觉得他就是想考这个,给你们贴一个代码吧?

let unique = arr => {let obj = {}return arr.filter((ele) => {return obj.hasOwnProperty(typeof ele + ele) ? false : (obj[typeof ele + ele] = true)})}

数组的扁平化

let flatArr = (arr) => {return arr.reduce((res, ele) => {if(Object.prototype.toString.call(ele).slice(8,-1) === 'Array') {return [...res, ...flatArr(ele)]}else{return [...res, ele]}},[])}let arr = [1,2,3,[2,3,4,5]];console.log(flatArr(arr))

当然了,实现的方式有很多种,看你自己怎么去实现它了,最简单的就是去递归对象。

深度遍历

const tree = {name: 'root',children: [{name: 'c1',children: [{name: 'c11',children: []		},{name: 'c12',children: []		}]},{name: 'c2',children: [{name: 'c21',children: []		},{name: 'c22',children: []		}]}]
}// 深度优先的方式遍历 打印 name
// ['root', 'c1','c11', 'c12', 'c2', 'c21', 'c22']

这题,我一开始想到的就是递归的写法,写完之后,然后小哥哥问了我递归的缺点,以及如何去优化,不用递归的方法该怎么去实现?

面试的时候,没有写出来,太紧张了,不在状态,复盘的时候,写了一下用「栈」的实现方式?

function solve(root) {let stack = [],result = [];if(!root) return [];stack.push(root)while(stack.length) {let node = stack.pop()if(node == null ) continueresult.push(node.name)for(let i = node.children.length-1; i >= 0; i--) {// 这里就是面试的重点,应该从后面的节点压入栈中stack.push(node.children[i])}}return result}

链表的相加问题?

这个是LeetCode上面的题目,我好像还写过,面试的最后一题的时候,我以及蒙了,完全不知道自己在干嘛,其实「链表题都是套路」,我连套路都没有掌握,

这个我写了一个专题,把题目刷完之后,应该遇到链表问题,可以轻松解决了。

「算法与数据结构」链表的9个基本操作

二面

大概的时间上的安排,算了一下,大致上是花了50分钟吧,是个小姐姐,小姐姐好温柔,我印象中小姐姐很nice,我记得我笔试做Promise的时候,我做错了,她还特意问了我一遍,当时我大概知道错了,不过呢,这个过程小姐姐是微笑的,缓解了尴尬,而且还耐心的去指导我,给她点赞呀。

ES6语法,Promise了解吗

const promise = new Promise((resolve, reject) => {console.log(1);resolve();reject()console.log(2);})promise.then(() => {console.log(3);},() => {console.log("失败的状态")})console.log(4);

我看到以后,就直接说答案了,这点不好,因为一般而言,面试官出的题目肯定有点小坑,下次要注意了,最后面试官小姐姐还是微笑的告诉我,应该这么去做,然后怎么怎么样。

聊一聊map和set

这个我是跟她说了用法,以及它们之间的区别,也就是它们经常使用的场景是哪些。

顺便的话,就聊了一下Weakmap,然后这里的难点也不是很多,就是你的明白它们两者数据结构的区别是啥,举个例子说明情况即可。

前端性能优化

这个问题太大了,而且对于一个实际开发经验为0的而言,这个问题就很置命,所以呢,我就准备了从URL到页面渲染这个一块去说,里面的优化点挺多的,可以自行去了解。

  • 构建请求行

  • 查缓存 (重点说一说)

  • dns解析(如何优化)

  • tcp http (比如减少请求次数,嗯,应该还有其他优化吧,cdn?)

  • 浏览器渲染过程 (这里面就有优化了,比如常见的如何避免回流和重绘)

  • 防抖和节流处理

  • webpack打包优化也可以说一说,前提你得有自信

其他问题

这场面试的话,给我的感觉就是,并不是跟面经一样,问一些标准的答案,反而更多是跟你交流技术上的问题,比如,你遇到的问题,是如何去解决的。小姐姐还提到了,如果需要你做技术上的分享,你觉得你有哪些技术上的分享是可以跟团队分享的。

好尴尬,我一个实习生,我感觉我最近研究的是webpack打包上面的问题,以及会的都是写基础的内容,所以多多少少的话,我也把我的观点表达清楚了,表示我愿意去学习,愿意去分享这个技术。


其他面经

这里面就是其他一些公司的问题了,比如有赞,涂鸦等,问题很基础,所以我带过了,主要是觉得简单,所以就掉过啦。

你说你最近在研究webpack,说一说

这个问题,我介绍的时候,就直接说了,最近在写博客以及研究webpack,讲一讲webpack一些配置,比如loader,plugins,常见的loader,自己配过loader的话,答起来就很流畅。

然后顺便叫我说一说原理,这我暂时就不清楚了。

ES6了解吗,说一说

嗯,就按照你平常的来说,比如箭头函数,展开运算符,Promise,然后好像就说了这三个….太紧张了

其实还有很多都用过,这里记录一下

  • ES6类 Class

  • for...of 和 for...in

  • 对象的解构

  • rest操作符 / Spread操作符

  • 模板字符串

  • const let

闭包

嗯,这个问题,老生常谈的问题了,就过吧,不同的人,对这个有不一样的理解。

某知音科技

面试长达80分钟,我觉得我都快要被问倒了,真的,这个过程太长了呀,不过呢,这个小哥哥也非常nice,过程中有非常认真听我讲,嗯,听我一个人在那么巴拉巴拉半天。

  • 原型

  • 闭包

  • 作用域

  • 输入url过程整个过程

  • https区别,TLS握手

  • 浏览器缓存

  • https如何保证安全,TLS握手的过程聊一聊

  • vue通信方式

  • vue数据响应式的原理,数组是怎么重写的

以上的答案,就不梳理了,我之前的写的博客都有涉及了,所以,好好准备的话,其实是没有多大的问题的。

可以看看我之前梳理的,基本上真的全部覆盖了?

推荐阅读

我在阿里招前端,我该怎么帮你?(文末有福利)
如何拿下阿里巴巴 P6 的前端 Offer
如何准备阿里P6/P7前端面试--项目经历准备篇
大厂面试官常问的亮点,该如何做出?
如何从初级到专家(P4-P7)打破成长瓶颈和有效突破
若川知乎问答:2年前端经验,做的项目没什么技术含量,怎么办?
若川知乎高赞:有哪些必看的 JS库?

末尾

你好,我是若川,江湖人称菜如若川,历时一年只写了一个学习源码整体架构系列~(点击蓝字了解我)

  1. 关注若川视野,回复"pdf" 领取优质前端书籍pdf,回复"加群",可加群长期交流学习

  2. 我的博客地址:https://lxchuan12.gitee.io 欢迎收藏

  3. 觉得文章不错,可以点个在看呀^_^另外欢迎留言交流~

小提醒:若川视野公众号面试、源码等文章合集在菜单栏中间【源码精选】按钮,欢迎点击阅读,也可以星标我的公众号,便于查找

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

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

相关文章

复习.net/c#时的小文章之万年草稿版 (全是基础概念,请懂的人绕行)

必读文:61条面向对象设计的经验原则(体会篇) C#知识点集合 (面试必备)一、显式(explicit)转换和隐式(implicit)转换的一般概念int i 100; Response.Write(i); // 这就是隐式 Response.Write(i.ToString()); // 这就是显式 一般来讲&#xff…

timertask run函数未执行_图执行模式下的 TensorFlow 2

文 / 李锡涵,Google Developers Expert本文节选自《简单粗暴 TensorFlow 2.0》尽管 TensorFlow 2 建议以即时执行模式(Eager Execution)作为主要执行模式,然而,图执行模式(Graph Execution)作为 TensorFlow 2 之前的主要执行模式&#xff0c…

如何从 0 到 1 打造团队 PC/H5 构建工具

关注若川视野, 回复"pdf" 领取资料,回复"加群",可加群长期交流学习一、前言 大家好,我叫鳗鱼,这次分享的主题是如何从 0 到 1 打造适合自己的构建部署方案。image.png先例行的自我介绍,大概 14 年…

testng接口自动化测试_Java+Maven+TestNG接口(API)自动化测试教程(10) 使用 Jenkins 构建自动化测试持续集成...

现在代码可以运行了,但是每次运行都需要我们手工去执行,并且测试报告也只能在执行测试的电脑上才能看到,我们希望能够定时自动执行测试,并且能够做到自动发送测试报告到相关人员的电子邮箱中。Jenkins 正好可以很好的完成以上诉求…

论公众号内卷

关注若川视野, 回复"pdf" 领取资料,回复"加群",可加群长期交流学习曾几何时公众号文章的标题单纯且没有套路七年前的我就是这样仅仅把公众号当做一个写文章的博客平台甚至是像有道云一样的在线笔记平台当时的标题是这样子滴《hashma…

程序异常异常代码: 0xc0000005_Java基础:看完这篇你还怕碰到异常吗?

前言在日常的开发以及平时的学习练习中,异常相信对于大家来讲并不陌生,但是对于异常的具体使用、底层实现以及分类等等可能并不是很了解。今天我就抽出了一点时间系统的整理了异常的各个知识点,希望能够帮助到大家对于Java 异常的理解与学习。…

写给初中级前端工程师的进阶指南

学习一门新技术的时候,最大的苦恼之一,大概就是不知道从何入手。典型的情况是,你大概知道学会以后,这门技术可以帮你解决什么问题。但是,怎么才能学会、循序渐进的学习路线是什么、学习范围有多大的深度和广度、涉及到…

千层套路 - Vue 3.0 初始化源码探秘

关注若川视野, 回复"pdf" 领取资料,回复"1",可加群长期交流学习刘崇桢,微医云服务团队前端工程师,左手抱娃、右手持家的非典型码农。9 月初 Vue.js 3.0 正式发布,代号 "One Piece"。大秘…

2020年大前端技术趋势解读

导Lead语如今的前端早已不再拘泥于满足页面展示,而是开始延展到通过全栈来闭环产品。这表明前端已经有能力透过业务深入产业,继而影响商业结果。这种表象的改变背后是本质的转变,从更为宏观的角度来说,前端正在通过持续的技术革新…

lc滤波器是利用电感的感抗_你对LC谐振电路你都了解吗

根据在电路中电感器L和电容C的连接方式不同,可以有两种LC谐振电路,LC并联谐振电路和LC串联谐振电路。LC并联、串联谐振电路在应用中的变化较多,是电路中分析的一个难点,只有掌握LC并联、串联电路的阻抗特性等基本概念,…

给小程序再减重 30% 的秘密​(京喜小程序首页瘦身实践)

前言—在 web 开发场景,减少代码体积虽然是性能优化的一个方向,还没到锱铢必较的程度。但是在小程序场景,由于代码包上传阶段限制了主包 2M 和总包 16M(近期微信官方正在内测将总包上限调整至 20M )的尺寸,…

本周ASP.NET英文技术文章推荐[10/21 – 10/27]

这一篇是《本周ASP.NET英文技术文章推荐》系列的第一篇,在这个系列中,我将介绍5-10篇比较有价值的、本周发布的、与ASP.NET相关的英文技术文章,帮助各位朋友从良莠不齐的大量文章中挑出一些我认为非常有价值阅读的,在进行一段简要…

3 年前端面经和他在创业公司的成长历程

在掘金上当了几年的伸手党,最近也准备输出一些自己的东西。关于我首先介绍一下我自己,17 年毕业于一所 211 学校,但是由于大学四年驰骋在召唤师峡谷,毕业时也没有找到一份大厂的工作,随便找了一家创业公司签了三方就去…

Spring.NET学习笔记9——打造简易的依赖注入框架(练习篇) Level 100

我们在第三篇中学习里一个简易的IoC框架。今天我们接着上次的程序,实现带参数构造函数对象的实例和属性的注入 。  我们知道可以通过反射获取类的构造函数及参数(GetConstructors方法);可以获取属性和属性的类型(GetProperties方法)。通过Activator的C…

android 单元测试

首先AndroidManifest.xml View Code <?xml version"1.0" encoding"utf-8"?> <manifest xmlns:android"http://schemas.android.com/apk/res/android"package"com.travelsky.test" android:versionCode"1"androi…

申万一级行业日指数_基金收评 | 指数震荡走弱,军工股成两市主线!后期行情如何?...

收评君复盘日记(2020年9月21日)三大指数集体收跌&#xff0c;北向资金全天大幅净流出近65亿元&#xff0c;军工板块表现强势。盘面回顾9月21日&#xff0c;两市全天高开低走&#xff0c;早盘指数弱势震荡&#xff0c;三大指数盘中一度翻红&#xff0c;但随后震荡走弱&#xff0…

若川的2016年度总结,毕业工作

可以点击上方的标签若川的故事、年度总结&#xff0c;查看往期文章有读者反馈说看我年度总结系列比我源码系列更有启发。所以打算把2016-2018的年度总结发布到公众号声明原创&#xff0c;希望对大家有所启发。&#xff08;虽然我的每一年都过得非常普通...&#xff09;以下是正…

jQuery之Ajax

转载链接&#xff1a;http://cargoj.iteye.com/blog/1008047 1 . jQuery帮助之Ajax请求&#xff08;一&#xff09;jQuery.ajax(options) 2 . jQuery帮助之Ajax请求&#xff08;二&#xff09;jQuery.get(url,[data],[callback] 3 . jQuery帮助之Ajax请求&#xff08;三&am…

面试官问:能否模拟实现JS的new操作符(高频考点)

可以点击上方的话题JS基础系列&#xff0c;查看往期文章这篇文章写于2018年11月05日&#xff0c;new模拟实现&#xff0c;Object.create是面试高频考点&#xff0c;之前发布在掘金有近2万人阅读&#xff0c;现在发布到公众号声明原创。1. 前言这是面试官问系列的第一篇&#xf…

跟我一起学WCF(2)——利用.NET Remoting技术开发分布式应用

一、引言 上一篇博文分享了消息队列&#xff08;MSMQ&#xff09;技术来实现分布式应用&#xff0c;在这篇博文继续分享下.NET平台下另一种分布式技术——.NET Remoting。 二、.NET Remoting 介绍 2.1 .NET Remoting简介 .NET REmoting与MSMQ不同&#xff0c;它不支持离线可得&…