世界顶级公司的前端面试都问些什么

标签: 面试技巧 面试 前端 | 发表时间:2019-01-21 09:00 | 作者:疯狂的技术宅
出处:https://segmentfault.com/blogs
原文: http://davidshariff.com/blog/...
作者: David Shariff
翻译:疯狂的技术宅

本文首发微信公众号:jingchengyideng
欢迎关注,每天都给你推送新鲜的前端技术文章


在过去的几年里,我在亚马逊和雅虎面试过许多前端工程师。在这篇文章中,我想分享一些技巧,帮助大家做好准备。

免责声明: 本文的目的并不是为你列出在前端面试中可能会被问到的问题,但是可以将其视为知识储备。

面试很难,作为候选人,通常会给你45分钟的时间来让你展示自己的技能。 作为一名面试官,同样难以在这么短的时间里评估这个人是否适合这项工作。 对于面试来说,没有任何一种标准能够适合所有人,面试官通常会覆盖某一个领域,但除此之外,他们会自行决定应该问哪些问题。

不管你坐在面试桌的哪一侧,这篇文章都会尽可能的涵盖前端开发中那些最重要的领域。

常见的误解

我看到面试者犯的最大错误之一是喜欢准备一些琐碎的问题,例如“什么是盒子模型?”或“告诉我在JavaScript中==和===之间的区别?”等等。 知道这些问题的答案固然很好,但它并不能让面试官知道你真正的水平。

相反,你应该为面试做一些非常实际的准备,能够真正体现出自己的JavaScript,CSS和HTML编码水平。为面试的准备包括去实现UI,构建窗口小部件或实现诸如Lodash和Underscore.js库中常见的功能,例如:

  • 构建常见Web应用程序的布局和交互,例如Netflix浏览器站点。
  • 实现小工具,如日期选择器,轮播或电子商务购物车。
  • 编写类似debounce或深度克隆对象的函数。

说到库,常见的另一个错误是人们喜欢完全依赖最新的框架来解决面试问题。你可能会想:既然在开发中我可以使用jQuery,React,Angular等,为什么还要重新发明轮子,为什么不能在面试中使用它?这个问题很好,技术、框架和库总会随着时间的推移而发生变化 —— 我更感兴趣的是: 你需要了解前端开发的基本原理,而不是依赖更高级别的抽象。如果你不能在不依赖这些库的情况下回答的面试问题,我希望你至少可以彻底解释和推测库在背后都做了什么。

总的来说,你应该期望大部分的面试都是非常实际的。

JavaScript

你需要了解JavaScript,而且是深入了解。 在面试中,越高级别的人对语言知识深度的期望也越高。 至少,以下是你应该熟悉的JavaScript内容:

  • 执行上下文、尤其是词法作用域和闭包。
  • 提升机制、函数与块作用域、以及函数表达式和声明。
  • 绑定 - 特别是调用、bind、apply 和this关键字。
  • 对象原型,构造函数和mixins。
  • 组合函数和高阶函数。
  • 时间委托和冒泡。
  • typeof,instanceof和Object.prototype.toString。
  • 使用回调,promises,await和async处理异步调用。
  • 何时使用函数声明和表达式。

DOM

如何遍历和操作DOM很重要,如果他们依赖jQuery或者编写了很多React和Angular类型的应用,那么这就是大多数面试者应该努力的地方。你可能不会每天都做这些,因为我们大多数人都使用抽象排序。但是如果不依赖第三方库,你应该知道该如何进行以下操作:

  • 使用 document.querySelector和旧版浏览器中的 document.getElementsByTagName选择或查找节点。
  • 上下遍历: Node.parentNodeNode.firstChildNode.lastChildNode.childNodes
  • 左右遍历: Node.previousSiblingNode.nextSibling
  • 操作:在DOM树中添加,删除,复制和创建节点。 你应该了解如何修改节点的文本内容,以及切换,删除或添加CSS类名等操作。
  • 性能:当你有很多节点时,操作DOM的代价可能会很高,所以你至少应该知道文档片段和节点缓存。

CSS

至少,你应该知道如何在页面上布局元素,如何使用子元素或直接用后代选择器来定位元素,以及何时使用classes与id。

  • 布局:坐在彼此相邻的元素以及如何将元素放在两列与三列中。
  • 响应式设计:根据浏览器宽度更改元素的尺寸。
  • 自适应设计:根据特定断点更改元素的尺寸。
  • 特异性:如何计算选择器的特异性以及级联怎样影响属性。
  • 使用恰当的命名空间和类名。

HTML

知道哪些HTML标签能最好的表现你正在显示的内容以及相关属性,应该掌握手写HTML的技能。

  • 语义标记。
  • 标记属性,例如disabled, async, defer以及何时使用data-*。
  • 知道如何声明你的doctype(很多人因为不是每天都写新页面,从而忘记了这一点),以及可以使用哪些meta标签。
  • 可访问性问题,例如:确保输入复选框具有更大的响应区域(使用标签“for”)。 另外还有role =“button”,role =“presentation”等。

系统设计

针对后端系统设计的面试通常会涉及MapReduce、设计分布式键值存储或需要CAP定理等知识。 尽管你的前端工作不需要深入了解此类系统是如何设计的,但是在被要求设计常见应用程序的前端架构时,千万不要感到惊讶。 通常这些问题会问的含糊,比如“设计像Pinterest这样的网站”或“告诉我如何构建购物结账服务?”。 以下是需要考虑的领域:

  • 渲染: 客户端渲染(CSR),服务器端渲染(SSR)和通用渲染。
  • 布局: 如果你正在设计多个开发团队使用的系统,则需要考虑构建组件,以及是否需要团队遵循一致的规范来使用这些组件。
  • 状态管理:例如在单向数据流或双向数据绑定之间进行选择。你还应该考虑自己的设计是否遵循被动或响应式编程模型,以及组件应该如何相互关联。
  • 异步流: 你的组件可能需要与服务器实时通信。你的设计应考虑XHR与双向调用。如果面试官要求你支持旧版浏览器,那么你的设计需要在隐藏的iFrame,脚本标签或XHR之间进行选择以进行消息传递。如果没有,你可以建议使用websockets,或者你可能决定服务器发送事件(SSE)更好。
  • 关注点分离: MVC、MVVM和MVP模式。
  • 多设备支持: 你的设计是否会针对Web、移动Web和混合应用使用相同的实现,或是单独实现?如果你正在开发类似于Pinterest这样的站点,可能会考虑在Web上使用三列,但在移动设备上只考虑一列,那么你的设计该如何处理这个问题?
  • 交付: 在大型应用程序中,让独立团队拥有自己的代码库并不罕见。这些不同的代码库可能彼此依赖,每个代码库通常都有自己的管道来释放对生产环境的更改。你的设计应考虑如何使用依赖关系(代码拆分)、测试(单元和集成测试)和部署来构建这些资源。你还应该考虑如何通过CDN分发资源或内联它们以减少网络延迟。

网络表现

除了通用编程技术之外,你应该期望面试官查看你的代码或设计及其对性能的影响。 在以前将CSS放在页面的顶部,并在底部放置JS脚本的做法就足够了,但是Web正在快速发展,你应该熟悉这个领域的复杂性。

  • 关键渲染路径。
  • Service workers。
  • 图像优化。
  • 延迟加载和捆绑拆分。
  • HTTP/2和服务器推送的一般含义。
  • 何时预取和预加载资源。
  • 减少浏览器重排以及何时将元素渲染交给GPU。
  • 浏览器布局,合成和绘制之间的差异。

数据结构和算法

这点可能具有争议,但是不了解高时间复杂度和常见运行时(如O(N)和O(N Log N)的基本知识会对你造成困扰。理解内存管理等方面的知识对当前十分常见的单页应用非常有帮助。 例如:如果你要实现一个拼写检查功能,那么了解常见的数据结构和算法将使你的工作变得更加轻松。

我不是说你需要一个CS学位,但是这个行业已经不再是写一个简单的页面了。 网上有很多资源,你可以很快掌握这些基础知识。

常用Web知识

你需要掌握构成Web的技术和范例。

  • HTTP请求: GET和POST以及相关标头,如Cache-Control,ETag,Status Codes和Transfer-Encoding。
  • REST与RPC。
  • 安全性:何时使用JSONP,CORs和iFrame策略。

总结

作为Web开发人员或工程师,需要大量的知识。 不要拘泥于所需的知识深度,而要保持开放的心态,学习开发所需的所有复杂技术

除了本文涉及的技术主题外,在面试中你还需要谈谈自己过去的项目,描述有趣的纠结点以及所做的权衡。

我知道前端面试中还有很多方面被我忽略了,所以我很想听听你的经历,或者你认为自己在面试时被问到,但是被我忽略的那些重要内容。


本文首发微信公众号:jingchengyideng
关注公众号 jingchengyideng ,回复“体系”,查看本文所讲到的知识体系大图


相关 [世界 公司 前端] 推荐:

世界顶级公司的前端面试都问些什么

- - SegmentFault 最新的文章
原文: http://davidshariff.com/blog/. 作者: David Shariff. 本文首发微信公众号:jingchengyideng. 欢迎关注,每天都给你推送新鲜的前端技术文章. 在过去的几年里,我在亚马逊和雅虎面试过许多前端工程师. 在这篇文章中,我想分享一些技巧,帮助大家做好准备.

世界知名IT公司名字由来

- LeiYue - cnBeta.COM
微软、雅虎、苹果,Google,索尼,英特尔…都是我们整天在新闻中接触到的著名IT公司,可是你知道它们名字的由来吗. 下面这篇有趣的文章列出了18家IT公司的名字由来,相信一定能让你收获不少.

世界6大电影公司标识是怎么来的?

- sheng - 非正常人类研究中心 – Mtime时光网
在欣赏好莱坞影片时,你首先看到的也是出现在片头的摄制这部影片的电影公司的标识,比如,梦工厂那个坐在月亮上垂钓的男孩,米高梅的雄狮,华纳兄弟标有WB字样的盾牌等. 但你知道隐藏在这些标识背后的故事吗. 梦工厂影业公司标识中那个坐在月亮上垂钓的男孩到底是谁. 哥伦比亚影业公司标识中手持火炬的女人又是何方神圣.

可口可乐公司世界杯广告

- G - 河蟹娱乐
2011可口可乐广告,我觉得比雪碧的有趣~~. 少年玩CS成瘾 误将可乐罐当炸弹掷官兵. 原文链接: http://hxyl.net/2011/07/26/cola/. 火星娱乐 河蟹娱乐 Copyright © 2007-2009 爱祖国,爱人民,唉派对. 更多精彩欢迎您订阅http://feed.feedsky.com/kisshi,更加欢迎投稿.

11家改变世界的超牛B创业公司

- - 互联网的那点事
1)Makerbot开源3D打印机. 创始人: Bre Pettis. 融资:从Foundry Group, Bezos Expeditions, True Ventures, RRE Ventures以及 Sam Lessin处获得100万美元融资. 为什么具有颠覆性:能将数字文件变成实物,如果你的孩子需要一件玩具,可以扫描玩具实物,打印出来,不只是打印机,也是实物“克隆机”.

[更新]新的帝国时代,苹果超越美孚石油成为世界市值最高的公司

- 涛涛 - 爱范儿 · Beats of Bits
在超越微软市值仅仅 15 个月后,苹果(Apple)今天再度超越美孚石油,成为世界上市值最高的公司. 我们在难以复制的苹果模式一文提到,  苹果市值 2003 年仅为 60 亿美元,但在随后短短 8 年内,它获得了高速成长. 此际,苹果的股价达 366.06 美元,市值为 3386 亿美元,超过了当前市值 3381 亿美元 的Exxon Mobil ,远超市值 2065 亿美元的老对手微软,成为新的资本市场王者.

创业公司MusiXmatch打造世界上最大的歌词库,移动应用下载超过100万次

- est - 36氪
我喜欢唱歌,但是我很难记住歌词,不知道朋友们如何. 事实上这个问题也是一个创业的机会. 现在网络上已经有不少的歌词网站,但是他们大多面临几个主要的问题:未经版权方授权,收录歌词不完全以及挂有恶意软件或者垃圾广告等. 一家名叫MusiXmatch的创业公司就打算改变这一现状. 该公司成立于2010年,目前总共已收录超过包括18种语言的550万首歌的歌词.

世界上有10种软件公司:一种像工厂,另一种像电影摄制组

- - 博客 - 伯乐在线
英文原文: stackexchange,编译:  36kr. 在2011年, 程序员问答网站 StackExchange上有人提问:“我们都知道编程比做甘特图(项目进度管理图表)要更难,而且程序员加班也更多,那为什么 IT 公司里 PM 和 BA 的工资比程序员要高. ” 英国的 Vlad Gudim 给出了一个很有意思的答复.

麻省理工学院公布世界最聪明公司名单:英伟达居首

- - TechWeb 今日焦点 RSS阅读
【TechWeb报道】7月4日消息,据国外媒体报道,著名的麻省理工学院科技评论已经公布了世界上50家最聪明的科技公司的名单,英伟达成功击败了所有公司包括SpaceX、亚马逊、英特尔和苹果等,成为2017年全球最聪明的公司. 这份名单是由麻省理工学院的科技评论撰写的,它基于重要的技术开发人员及其“商业头脑”,包括大型和小型科技公司.

前端技术

- - CSDN博客综合推荐文章
随着互联网产业的爆炸式增长,与之伴生的Web前端技术也在历经洗礼和蜕变. 尤其是近几年随着移动终端的发展,越来越多的人开始投身或转行至新领域,这更为当今的IT产业注入了新的活力. 尽管Web前端技术诞生至今时日并不长,但随着Web技术的逐渐深入,今后将会在以下几方面发力. JavaScript的兄弟们.