如何优雅地面试一名前端工程师

记得倒杯水,要凉的。

先问一下项目,包括 技术栈(前后端)、项目的规模(页面数、代码量、人数)、担任的职责、开发流程 以及 CodeReview,项目中遇到过那些困难,都是怎么解决的(这里要随机应变接茬问下去)


然后问一下基础知识。

以下所有问题均为本人凭记忆整理,已经组织成问题链,最好问到双方都答不上来为止

HTML

  • 新标签 -> 新标签实现响应式图片 -> 新标签在 IE8 下的兼容性 -> 语义化 -> SEO -> SPA 的 SEO
  • 文档结构应该如何组织 -> 为什么 CSS 在最前面 JS 在最后面 -> script 标签的加载机制 -> 如何异步加载脚本及 CSS
  • Cookie、LocalStorage、SessionStorage 区别 -> Cookie 如何在服务器和客户端传递 -> XSS 或 跨域 Cookie 或 跨域权限校验

CSS

  • 移动端适配的几种方式 -> 响应式布局实现方式 -> 优缺点 -> 所以什么时候应该选择响应式布局 预处理器 -> 优势 -> 角标的实现 -> 实现一个循环
  • OOCSS -> 项目样式文件组织 (variable、mixin、函数怎么放) -> 部署(less 的话要问 less.js)、构建方式
  • CSS 选择器的顺序 -> 伪元素 以及 伪元素的妙用 -> 性能优化
  • 如何不用 JS 实现一个五星评价组件

JS

  • 解释一下「按值传递」和「按引用传递」 -> 函数的传值方式
  • undefined null 区别 -> ![] == [] 为什么 -> 闭包 以及 使用闭包的注意点
  • Ajax 是什么 -> 如何实现 -> fetch 优势 -> 异步处理 (回调、Defer、Promise、Generator、Async)
  • 解释一下 JS 的单线程 -> 什么是异步非阻塞(Event Loop 线程) -> 如何在浏览器中实现多线程 (以及 Node)
  • JS 性能优化(如何监测性能、最小帧数) -> GC 机制(闭包)
  • ES6 -> 新特性 (箭头函数、解构赋值) -> 如何在浏览器环境使用 (babel)

AngularJS

  • service 和 factory 的区别 -> provider 和 service 的区别 -> service 与 controller 通讯
  • 不同 Controller 之间的通讯方式 -> Angular 中数据层的作用及实现 -> 项目分层、目录结构
  • AngularJS 双向绑定的实现方法 -> 与其他框架(vue、react)的区别

Node

  • 什么是 Node(V8)-> 其他JS引擎? -> 是否使用过 -> 使用场景(开发工具、后端服务)
  • 进程与线程的区别 -> 如何在 Node 中实现多线程 -> 什么是线程阻塞、如何避免

HTTP

  • HTTP 方法有哪些 -> GET 与 POST 的区别与使用场景(能说出幂等最好) -> 无状态的含义 -> RESTful 理解 -> 路由(URL)设计
  • (接上一问题链) HTTP 状态码 -> 301 与 302 的区别 -> REST API 如何设计返回状态码
  • 浏览器输入网址后的一系列过程 -> 什么是网关 -> 网关与应用服务器如何连接 -> 反向代理 -> 负载均衡
  • HTTPS 与 HTTP 的区别 (443端口、证书加密) -> 优势 (安全、防运营商广告) -> 什么是中间人攻击 -> 举出另一种安全传输协议 (ssh、wss)
  • 基于 HTTP 的性能优化(HTTP2、lazyLoad、gzip、keep-alive、缓存) -> HTTP 缓存的机制 -> 304 与 Cache-Control 缓存的区别

工具

  • IDE 用什么 -> Vim 用过吗?
  • Git -> Git 撤销提交的方式(reset、revert、force push) -> Git 分支管理 -> 项目如何部署 -> 持续集成

接下来问一下,平时都从哪里接触新知识,最近学到的一个新技能是什么

问一下为什么会投我司的这个职位,对这个职位的期望,希望能得到什么,自己的职业规划

最后表示一下对面试者的肯定,问一下「你还有什么问题要问我吗?」

然后在亲切友好的氛围中结束本次面试(撒花!★,°:.☆( ̄▽ ̄)/$:.°★。)