杨二

Machine repeats, Human creates
分类
归档
标签
关于

前端面试题的思考

2016-3-6 阅读笔记前端备忘面试成长

![are you ready]/images/areyouok.png)

前言

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

面试题

预热

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

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

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

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

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

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

HTML

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

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

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

  • 什么是 Flash of Unstyled Content（FOUC），如何避免？
    参考链接

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

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

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

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

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

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

    event.PreventDefault，event.stopPropagation与return false异同点
    参考链接

CSS

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

  • 尽可能多地列举 display 属性值，追问：inline和inline-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();

  • call和apply的异同点
    参考链接

  • 你是如何理解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，但招聘的目的不是为了炫技，更不是要故意为难应聘者，而是筛选出适合公司发展的人员。可以参考，但不要照搬，靠谱与否，自己衡量。

参考

分类
归档
标签
关于