杨二

Machine repeats, Human creates

前端面试题的思考

are you ready

前言

最近公司在招前端,一件说大不大,说小不小的事情。第一次当起了面试官,不敢掉以轻心,准备工作要做足,毕竟要招进来的人是经常朝夕相处的同事,靠谱些为好。经过几天的实践与反思,总结了一套适合自己的面试问题,希望对一些人有所启发。每个题目都没有标准答案,注重的是答题的思路以及对问题本身的拓展,有些给出了参考链接,都是我曾经读过的文章,恩,如果英语不过关,祝好运。

面试题

预热

  • 昨天或者最近这一周,学了些什么?
    前端这个工种是依托互联网的繁荣快速发展起来的,因而也就促使着前端不断革新技术来满足日新月异的互联网。学习不是为了跟风,什么新学什么,而是为了完善和更新自己的技能树,保持核心竞争力。如果能从这个问题的回答看出你有阅读,学习,实践的习惯,那就更好了。

  • 如果今年想掌握一门新技术,会是什么?为什么选择它?
    如果说上面那个问题是战术问题,那么这个应该就是战略问题。无论想横向发展还是纵向发展,都逃不脱一个成长的话题,透过这个问题,可以了解下应聘者的技术视野,同时也是其成长的方向与潜力。

  • 最近有没有遇到些问题?你是如何解决的?
    这个问题比较开放,即使遇到的不是技术问题,也可以回答,比如,遇到的问题是马桶堵了,也可以说出来。主要是了解下应聘者解决问题的思路。

  • 谈谈你的开发流程与环境
    有多热爱开发,就得有多热心于开发环境的打磨,因为上班的绝大部分时间都是沉浸在这个环境下,舒适度很重要。

  • 有没有在线的得意之作,为了完成这个作品,用到了哪些工具,你贡献了哪些功能或者想法,能谈谈吗?
    有些前端业余会做一些小项目,实践新知的同时涨涨姿势。这些小作品往往能给面试锦上添花。

  • 有写博客吗?
    写博客是一种输出,也是一种沉淀,即便不怎么写技术类文章,能坚持写的,是靠谱特征之一。

HTML

HTML是骨架,是基础。语义化标签,SEO,兼容性,加载和渲染顺序与性能等等,在写HTML代码时都需要考虑进来。

  • 大概写一下你常用的HTML骨架(PC&Mobile)

  • Quirks Mode(怪异模式)和Standards Mode(标准模式)的异同点
    参考链接

  • 什么是Flash of Unstyled Content(FOUC),如何避免?
    参考链接

  • 尽可能多地列举出HTML5新标签
    基础问题,如果不能列举出三个以上,下面那个问题也没必要问了。

  • HTML5的新特性里面,你最喜欢哪个?为什么?
    开放性问题,目的在于了解对HTML5的认知与实践。

  • cookie,localStorage和sessionStorage 异同点
    参考链接

  • 解释下CORS,怎样使用
    参考链接

  • script标签 asyncdefer两个特性的异同点
    参考链接

  • CSS放在head标签头部,js放在body标签底部,有啥优点?可不可以不这样?
    参考链接

  • event.PreventDefaultevent.stopPropagationreturn false异同点
    参考链接

CSS

CSS是我的薄弱项,只考察基础,但是有这些基础我认为也就够了。任重道远,共勉。

  • 尽可能多地列举display属性值,追问:inlineinline-block的区别

  • 尽可能多地列举position属性值,追问:absolute是怎么工作的

  • 为什么会产生浮动,清除浮动的技巧
    参考链接

  • 描述下你对盒模型的理解,通过CSS怎么告知浏览器使用不同的盒模型
    参考链接

  • 解释下Block Formatting Content (BFC),它是如何工作的
    参考链接

  • 使用过哪些CSS框架?有没有试过更改或者改进它们?
    开放性问题,目测一般会回答Bootstrap。

Javascript

公司项目中写交互的场景比较多,所以这一块是重点考察的,虽然平时都使用jQuery,但有javascript的基础更为重要。

  • =====异同点
    基础问题,这个如果表现出不知所措,就没必要往下进行了。

  • 实现下面的函数

    duplicate(\[1,2,3\]);//\[1,2,3,1,2,3\]
  • 描述下document.write()使用场景

  • onload$(document).ready的区别
    参考链接

  • immediately-invoked function expression(IIFE)的工作原理
    参考链接

  • 谈一下你对javascript中this的理解
    参考链接

  • 事件代理(Event Delegation)
    参考链接

  • 闭包是什么?举例它在实际工作的应用
    参考链接

  • 说出下面代码Person函数使用的区别

    function Person(){};
    var person1=Person();
    var person2=new Person();
  • callapply的异同点
    参考链接

  • 你是如何理解hoisting
    参考链接

  • 尽可能详细地解释下AJAX,请写出创建并发送一个AJAX请求的过程。
    参考链接

  • 解释下JSONP,为什么说它不是真正的AJAX?
    参考链接

  • 当写onscroll事件的回调函数时,你能想到的最佳实践是什么?
    参考链接

jQuery

公司项目中,用到了jQuery,所以有必要考察一下这方面的基础,其实如果前面问题回答的足够出色,这一块可以忽略,因为相信有了前面的基础,jQuery上手会很快。

  • jQuery是个框架还是类库,为什么使用?

  • 如何使用jQuery获取元素的属性

  • 如何使用jQuery同时选取多个元素

  • 单击下面P标签,其背景色变为黑色,再单击回复原来颜色,使用jQuery实现

    <p id="test_tag">点我变色,再点我恢复</p>
  • 大概写出jQuery下AJAX使用场景

其它

  • 为什么说在多个域名下存放静态资源会好一些?

  • 浏览器地址栏输入URL敲回车那一刻起到页面完全呈现出,尽可能详细描述出中间发生了什么。

  • 长轮询,Websocket,SSE

  • HTTP Method 有哪些,尽可能多地列举

结束

以上是我经过思考与总结的一套前端技术面试题,大部分都能在网上找到答案。当然,面试时不会都问到,随机选七八个问题就差不多了。前端远不止这些,有很多比较成熟的技术并没有提及,比如NODE.js,比如Angular.js,再比如React.js,但招聘的目的不是为了炫技,更不是要故意为难应聘者,而是筛选出适合公司发展的人员。可以参考,但不要照搬,靠谱与否,自己衡量。

参考