英文原稿： http://davidshariff.com/blog/preparing-for-a-front-end-web-development-interview-in-2017/#first-article
原作者： 现任Amazon UI 团队lead, 曾就职于Yahoo!， RBS, Richi等。
翻译转载已获得原作者允许。
在过去的几年中，我为Yahoo和Amazon 面试了无数的前端工程师，因而我想和大家分享一下一些准备前端面试的小tips.
声明： 这篇文章并不能覆盖所有你在面试中会被问到的问题，但涵盖了大部分的基础知识要领。
应聘者通常需要在45分钟的面试时间内内展示自己的能力，而面试官则需要在同样短的时间内判断应聘者是不是合适。这对两方都并不容易。前端面试都各不相同，没有通用的准则，作为面试官，我们通常会有一个出题范围，但是具体问什么问题则由我们自己决定。
我担任过面试官，同时也是应聘者，因而我写了这篇文章，希望可以将前端面试中可能会问道的重要领域知识尽可能的涵盖。
常见的误区
准备面试时，应聘者最容易犯的错误是，纠结于一些琐碎的小问题，例如： 盒子模型是什么？ Javascript中 ==和=== 的区别是什么？ 当然知道这些问题的答案很好，但这些问题并不能告诉面试官你到底会些啥。
相反的，你更应该准备一些实际的在写Javascript, CSS 和HTML 中会闻到的问题。用Lodash和Underscore.js库写个UI组件，或者写一些常用的utility 函数。比如：
参照一些常用的网站复现他们的layout和interaction （比如Netflix网页版）
实现一些组件，比如日期选择器，幻灯片，购物车等。
写一个函数实现对象的深复制或者函数去抖(debounce)
另一个常见的错误是，有些人会依赖且仅依赖某一个最新的框架来解决问题。你也许会想，在实际的开发过程中，我能轻松的用jQuery，React, Angular 就解决问题了，为什么面试中我不能使用呢？ 答案是，新的技术，新的框架和新的库总是日新月异层次不穷。 面试官更关心的是你是不是理解了前端开发的基础，而不是依赖于这些框架。如果你必须依赖他们来完成你的面试，那你最好也能彻底地解释一下这些库的原理和实现过程。
总而言之，你的面试会更倾向于实际应用，而不是理论知识。
Javascript
你必须彻底的理解Javascript， 如何使用和原理。你面试的岗位越资深，你会被问到越深入的问题。 你至少需要熟知这些方面：
执行上下文，尤其是闭包和词法作用域。
变量提升，函数，块级作用域，函数表达式，函数声明。
call,bind,apply和this相关的概念
对象的构造模式，原型模式和Mixin模式
组合函数和高阶函数
事件的delegation和bubbling
typeof, instanceof和Object.prototype.toString的使用
Ajax的callback, promise,await和async
函数声明与函数表达式的区别和使用
DOM
How to traverse and manipulate the DOM is important, and this is where most candidates struggle if they have been depending on jQuery or have been writing a lot of React & Angular type apps recently. You might not do this on a daily basis since most of us are using an abstraction of sorts, but without using a library you should know how to do the following:
遍历和操作DOM很重要。很多应聘者在这里由于太过依赖jQuery， React或者Angular反而对原生的操作不太熟练。不依赖外在库的情况下，你至少要会以下这些方面：
使用document.querySelector， 旧浏览器中使用document.getElementsByTagName来获取节点
上下遍历 - Node.parentNode,Node.firstChild,Node.lastChild以及Node.childNodes.
水平遍历 –Node.previousSibling和Node.nextSibling.
内容操作– 在DOM树中增加，修改，复制，删除节点。如何改编一个节点的文字，如何增加或去除一个CSS class
性能 - 如何提升效率，比如节点缓存和DocumentFragments（这个不知道中文名）
HTML
了解HTML 标签的规范使用。
语义化标签的使用
标签属性，例如disabled, async, defer以及data-*的使用
如何声明doctype ， meta tag的使用
UI的适用性。比如，使用checkbox的时候， 记得用lable "for" 使它有够大的交互点击区。 role=”button”, role=”presentation”等
系统设计
后端工程师的系统设计面试题通常是有关MapReduce， 分布式存储的设计或者是CAP理论相关。作为一个前端工程师，苏日安你不需要深入了解如何设计这些系统，但你也许也会被问道如何设计常见应用的前端架构。这些问题通常会问得很模糊，比如“如何设计一个像Pinterest的网站？” 或者是，“如何搭一个购物结账系统？”。你可以从以下几方面回答：
页面渲染 - 客户端渲染（CSR)，服务器端渲染（SSR)和广义渲染
布局 - 如果你设计一个有多个开发团队的系统，你需要考虑组件化，以及是不是要求团队使用统一的组件名
状态管理，例如选择单向还是双向绑定，选passive 编程还是reactive 编程。 组件之间的相互影响，例如Foo-> Bar
异步 - 你的组件也许需要实时与服务器端发出请求。你需要考虑XHR和双向请求的使用。比如聊天功能的实现，如果是老版浏览器，你可以选择使用隐藏的iFrames， stript tags 或者XHR。如果是新版浏览器，可以考虑使用websockets ，或者SSE
MVC, MVVM, MVP的选择
兼容性 - 你会选择网页端，移动网页端和Hybrid App共享还是为他们单独开发？ 如果你搭一个像pininterest的网站，在网页端显示三列，但在手机端显示一列，你会如何设计？
资源 - 在大型应用中，每个开发团队可能会有各自的代码库。 不同的代码库之间可能会有格子的容器，投产时也有不同的pipeline。 你的设计需要考虑到代码拆分，打包，测试和部署。你还需要考虑如何减少网络延迟，是否使用CDN
我会再写一篇文章专门探讨前端系统设计。
性能
除了通用的编程规范，面试官还会关心你的代码的设计和效率。CSS的引入需要放在最开始，JS脚本文件需要放在页面最后。web技术日新月异，以下是一些能够提升性能的新技术
关键渲染路径
Service worker
图片优化
懒加载，数据分批
HTTP/2及server-push效果对性能的提升
页面资源的预加载与预载入
减少浏览器的重排，开启硬件加速
浏览器的布局，构建呈现树和绘制
数据结构与算法
This is probably controversial but having a basic understanding of Big-O time complexities and common runtimes such as O(N) and O(N Log N) won’t hurt you. Single page apps are more common now and understanding things like memory management helps. For example, if you were asked to build a client-side spell checker, knowing common data structures and algorithms is going to make your life a lot easier.
I’m not advocating you need a CS degree, but the industry has moved on from building simple web pages. There are a lot of resources online where you can pick up the basics fairly quickly.
前端需不需要了解数据结构和算法是很有争议的。但对Big-O时间复杂度和一些常见的复杂度O(N)和O(NLogN) 有一个基本的了解对你并没有坏处。了解内存管理对现在常见的单页应用很有帮助。例如，假设你需要写一个客户端的拼写检查应用，此时常见的数据结构和算法会很有帮助。
我并不是说当前端工程师必须要CS学位，但现在网页构造的需求开始越来越复杂。数据结构与算法会很有帮助，你可以从网上找到很多可以自学基础的课程。
其他Web知识
一些其他的web相关的技术
HTTP请求 - GET, POST和请求header，例如Cache-Control, ETag, Status Codes, 和 Transfer-Encoding.
REST vs RPC.
安全性 – 什么时候使用 JSONP, CORs, 和 iFrame
小结
做一个前端工程师需要很多方面的技术。不要满足于精通一门技术，而是要了解所有那些能令你的产品变得更好的技术。
除了这篇文章中提到的相关技术，你在面试中还会需要描述你过去做过的项目，你都遇见过哪些有趣的情形？你是如何处理的？
欢迎大家分享你们的面试经验及对这篇文章进行补充。
感谢Facebook的ShihChih Huang 和 Coinbase的Preethi Kasireddy对这篇文章的建议与修改。
网友评论