结构化面试 - 前端篇

基础理论能力

主要考察面试者基础语法概念(面向对象、js/css/html基础语法)、常用框架概念(Vue、React、Angular等)、基础网络知识(http协议、cookie、CDN、request等)、存储、兼容性、前端优化等

基础

  • 你如何理解什么是js中的对象概念?
  • js有哪些基础类型?
  • const 和var的区别
  • css中flex布局
  • 多个页面之间如何进行通信
  • CSS匹配机制
  • webstorage
  • http状态码
  • .etc

中等

  • new操作符的执行流程
  • es6中,generator和promise有什么区别?async/wait和yield有什么区别
  • 静态变量和实例变量之间的差别
  • 重构和回流?
  • 前端提高网页加载速度的策略?
  • 常见的设计模式有哪些,随便挑一两个简单考察。
  • 当你在浏览器中输入一个网址,敲下回车发生了什么?
  • cookie,sessionStorage,localeStorage的区别
  • JavaScript的作用域和作用域链
  • 跨域的几种方式
  • .ect

困难

  • 前端模块化的理解
  • 前端优化
  • 经常遇到的浏览器的兼容性有哪些?原因,解决方法是什么,常用hack的技巧 ?
  • 什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?

设计能力

考察面试者项目设计能力,注意检查点:项目关键功能点拆解&理解能力、设计是否满足全部项目功能、数据库表设计是否合理(字段设计、关联主附表、索引是否合理)、扩展灵活性等

基础(针对在校生、应届和工作1-2年者)

商品列表页中商品数据较多,请为该系统进行设计。要求如下:

  • 页面滚动时尽可能避免卡顿
  • 可能会有上千个商品
  • 不同的商品,展示可能不一样

中度(针对有3-6年工作经验者)

产品/套系各类目对于结构化信息的要求不一致。如婚纱摄影需要描述服装、场景、拍摄、摄影师等信息;婚庆公司需要描述布置、道具、司仪、摄像等信息,幼儿教育则需要描述课程、老师等信息。如何解决这个问题?

困难(针对6年以上经验者)

请设计一个即时聊天网站,要求如下:

  • 如何实现及时获取消息
  • 要求网站的加载速度快
  • 网络环境较差的情况下,如何确保消息的发送

公司的业务按照行业分为美食、结婚、亲子、家装等,这些业务是由不同的团队开发。这样就存在多个团队开发一个相同的业务,如商户页。各行业商户页上,有些功能是相同的,有些则不同。如各业务独立开发,则有些功能需要开发多次,优点是团队间的耦合性好;各行业共同维护一套,则互相之间的依赖太高。如何解决这个问题?

排错能力

碰到过什么的问题以及如何解决,举例子说明,开放式问题,主要根据应聘者的回答来判断对方的经验,从问题现象到具体排错手段的思维过程。

基础

某种条件下能稳定重现的问题

中等

不能稳定重现的问题,一般和多线程相关;解决方法可以是通过code review和压测验证,更换浏览器来重现;能够结合现象说明一定的排错逻辑(不一定非常强,很多时候会猜测);事后能提出一些有效的防范措施

困难

不能稳定重现的问题;除了"一般"的回答,还有运维知识,思路上能够非常清晰的分析出可能的几种情况并能按照可能性排序.对计算机系统非常熟悉,明白网络通信原理等并能将分析推测落地到这些基础知识和业务情况(不是凭空乱猜);熟悉web页面解析过程等;事后能从多维度预防,监控等;

工具使用

主要考察点面试者在日常开发时的必备工具,考察其工具的知识广度、实际掌握深度、对工具活学活用与自主创新的能力等

简单

你用过或知道哪些开发工具?比如:

  • package:gulp,webpack,npm
  • web:fiddler(Charles),chrome inspector
  • scm: git, github

中等

开放性问题,面试者通过以上这些工具在日常开发中有效地解决过什么问题?

困难

开放性问题

  • 有没有自己研发过工具?工具解决的是一个什么问题?
  • 现有的工具为何解决不了此问题?工具的价值如何衡量?工具实现的难点在哪里?
  • 如何推广自己的工具?
  • 自己的工具还有什么改进点?

产品&项目能力

考察own过的项目或业务。

  • 项目规模大小
  • 业务复杂度
  • 遇到的挑战
  • 解决问题的思路是否开阔
  • 项目的拆解是否合理清晰,有无明确是时间点
  • 监控&风险控制是否完善,项目指标如何量化衡量
  • 有限资源下,业务压力和技术的平衡

学习能力

开放性问题,主要考察面试者的学习主动性,属于加分项。比如

  • 最近看过哪些技术相关的书
  • 掌握多种开发语言 java?objc?ruby?nodejs?等等
  • github有没有开源项目
  • 有没有做过提高效率的工具等

潜力兴趣度

开放了解其本身对技术的热情,可以结合上面的学习能力进行提问了解。

沟通表达能力

考察关键点:需要区分和啰嗦的差别

  • 描述清楚项目的背景和功能点
  • 描述清楚整体方案
  • 描述清楚具体模块or关键功能的细节
  • 其他

理解能力

  • 提问的时候对方有无认真听讲,
  • 提题的问题有无正确理解
  • 有无正面回答问题
  • 其他…