MENU

如何面试前端开发

• June 22, 2018 • 前端阅读设置

考察点

• 眼缘
• 现有认知
• 深度
• 广度
• 自学能力
• 学习方向
• 学习热情
• 合作意识
• 需求沟通
• 开发沟通
• 表达能力
• 自我介绍
• 对项目的表述

应聘者等级

• 初级:一般指工作2年以内的同学。主要偏重前端基础,达到了解以及熟练调用API即可。
• 中级:一般指工作2年及以上的同学。前端技术达到熟练程度,并且了解基本原理。

现有认知

计算机基础

主要针对科班同学进行提问,非科班视情况而定。

网络协议

• TCP三次握手、四次挥手
• HTTP 1.1 协议简述(起始行、请求头和请求体),HTTP Code;HTTP 2.0 协议(加分项)
• HTTPS原理(加分项)
• WebSocket原理(加分项)

数据结构

• 时间复杂度
• 排序算法
• 查找算法

HTML

不需要全部问到,主要视应聘者的简历内容而定。

初级

• 标签,行内和块级
• 语义化,<main> <nav> <aside>等
• canvas,能应用到哪些场景
• HTML5 支持内联 SVG
• Geolocation 地理定位
• Web存储,localStorage 和 sessionStorage 区别

中级

• 标签,行内和块级(区别),文档流
• 语义化,<main> <nav> <aside>等,语义化好处
• canvas,能应用到哪些场景,如何创建一个画布
• HTML5 支持内联 SVG
• Geolocation 地理定位
• 视频(video)和音频(audio)
• Web存储,localStorage 和 sessionStorage 的存储大小,哪些场景会用到,和 cookie 的区别
• Web Workers 运行在后台的 JavaScript,不会影响页面的性能
• HTML5 WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议

CSS

不需要全部问到,主要视应聘者的简历内容而定。

初级

• 盒模型,IE盒模型和标准盒模型
• 布局,表格布局、绝对定位、浮动布局、Flex布局(重点考察Flex布局,主轴和交叉轴)、Grid布局(display: grid;grid-template-columns: 100px 100px 100px;)
• BFC,知道概念
• CSS选择器,伪类应用
• 文本样式,文本溢出省略处理
• 2D转换,transform:translate、skew等
• 动画,知道transition(过渡)和animation,@keyframes(动画)即可
• 是否进行过移动端适配,如何做的(做过,并且能讲清楚怎么做的即可)
• 移动端meta标签设置,<meta name="viewport" content="width=device-width, initial-scale=1.0">
• 1px解决方案(说出思路即可)

中级

• 盒模型,IE盒模型和标准盒模型,如何设置box-sizing
• 布局,表格布局、绝对定位、浮动布局(适当)、Grid布局(display: grid;grid-template-columns: 100px 100px 100px;)
• Flex布局(重点考察Flex布局,主轴和交叉轴),6个容器属性,6个项目属性
• BFC,知道概念和应用
• CSS选择器,before和after伪类应用
• 文本样式,文本溢出省略处理,多行文本溢出
• 2D与3D转换,transform:translate、skew等
• 动画,知道transition(过渡)和animation,@keyframes(动画),了解API使用
• 是否进行过移动端适配,如何做的(基本实现原理,本质百分比相对布局)
• 移动端meta标签设置,<meta name="viewport" content="width=device-width, initial-scale=1.0">,知道viewport是什么
• 1px解决方案(说出思路即可)

JavaScript

不需要全部问到,主要视应聘者的简历内容而定。

初级

• 作用域(全局、函数作用域,ES6新增块级作用域)
• 闭包概念
• 提升,变量和函数提升
• this和对象(可选)
• 原型和原型链(可选)
• 对象创建和继承(可选)
• 类型判断,typeof与instance
• 引用类型,主要考察数组的方法
• 异步,ajax、回调和Promise
• DOM操作(获取DOM,增加DOM)、浏览器跳转
• 事件,捕获和冒泡的概念
• ES6,let和const、解构赋值-扩展运算法(...)

中级

• 作用域(全局、函数作用域、动态作用域,ES6新增块级作用域)
• 闭包概念和应用
• 提升,变量和函数提升
• this和对象(在new操作运算符时,发生了什么)
• 原型和原型链(可选)
• 对象创建和继承(可选)
• 类型判断,typeof与instanceof
• 引用类型,主要考察数组(常用的方法)与正则表达式(判断是否为11手机号)
• 异步,ajax、回调、Promise以及async
• DOM操作(增、删、查)、浏览器跳转
• 事件,捕获和冒泡的概念与控制
• ES6,let和const、解构赋值-扩展运算法(...)、Set和Map、Class与模块加载等

Vue

不需要全部问到,主要视应聘者的简历内容而定。

初级

• 生命周期,created与mounted区别
• 指令,v-on与v-bind,v-show与v-if
• 组件,父子组件、兄弟组件如何通讯
• vuex,vue-router是否使用,如何使用

中级

• 生命周期,created与mounted区别,activated什么时候触发
• 指令,v-model语法糖的底层实现,事件修饰符(.stop)
• 组件,父子组件、兄弟组件如何通讯
• 动态组件,component
• 自定义组件,插槽应用
• vuex,vue-router是否使用,基本原理

Webpack

初级

• 了解基本作用
• 知道主要配置文件节点

中级

• 知道基本原理
• plugin与loader的区别,常用的有哪些
• 如何进行打包速度优化

浏览器及性能

• 一个页面从输入 URL 到页面加载完的过程中都发生了什么事情?越详细越好
• 谈一下你所知道的页面性能优化方法?

设计模式(可选项)

• 工厂模式
• 单例模式
• 适配器模式
• 观察者模式

代码管理(可选项)

• Git
• SVN

项目经验

• 做过最满意的项目是什么?
• 项目背景
• 为什么要做这件事情?
• 最终达到什么效果?
• 你处于什么样的角色,起到了什么方面的作用?
• 在项目中遇到什么技术问题?具体是如何解决的?
• 如果再做这个项目,你会在哪些方面进行改善?

Last Modified: December 30, 2019
Archives QR Code Tip
QR Code for this page
Tipping QR Code