Web 前端面试总结

2017-05-08 11,397 阅读6分钟

这是 2017 年参加面试后，做的一些记录。

面试告一段落, 把自己的面试体验整理一下, 给各位提供一下备战的思路.

声明: 以下皆是个人观点, 仅供参考之用.

简历投递

如果对市场和自身不够了解，可以海投一些简历，为自己做一些积累，不建议长期海投简历，投简历之前最起码要关注以下几点(薪资范围, 公司位置, 职位要求, 是否为培训机构冒充招聘).

前端发展方向

前端经过蓬勃发展，现在前端招人分的挺细了，下面是几个方向，目前都会要求你同时具备其中几种能力。

Web 前端开发工程师 (传统web)
HTML5 前端开发工程师 (移动端H5、H5动画、Hybrid H5等)
WebGL 前端开发工程师 (数据可视化)
APP 前端开发工程师 (RN、weex等)
小程序、公众号开发 (现在小程序很火热)
PHP/JAVA/Go/Pathon等 (掌握一门后端语言)
React/Vue/ES6+ (国内这两个框架比较热门)
Nodejs 工程师 (现在有专职 Node 开发，deno 短期不会对 Node 造成冲击)

面试官考教流程

你的笔试题, 根据其做延伸.
你的简历, 技术栈、工作外学习情况、项目经验. 第一页很重要, 最好都能掌握, 有亮点更好.
面试官额外的延展的知识点, 随机问,看你运气和积累(一般会提及到 ES6、解决实际问题的方法、数据结构与算法都有可能).

应对

刷题, 各种基础题会帮你快速回忆起来, 比你看书快, 如果基础不好的话, 看书好好学学吧.
简历上自己写的东西, 要能说出来.
积累, 每次面试不成功就回来填坑吧, 还是有掌握不到位的. 我觉得能坚持下来的话, 找工作只是时间问题.

面试着重点分类

根据公司业务不同, 着重点不一样, 公司能把你简历挑出来, 就说明有用人单位感兴趣的部分.

可能你写的是 熟练使用 Vue, 公司也是这个技术栈.
可能你知识写的全面, 公司想面面你实际掌握怎么样.
可能你项目写的贴合用人单位需要, 比如都是做后台管理的.

框架问题: (Vue 举例, 3框架实质问题差不多, 具体有些差异)

封装过哪些组件?有自己写过 UI 组件吗?
什么是 MVVM , 和 MVC 是什么区别, 原理是什么?
父子组件怎么通信的?
兄弟组件怎么通信的?
生命周期有哪些, 怎么用?
Vue 全家桶都用过哪些?具体怎么用?

HTML5 + CSS3

盒子模型
如何给未知宽高的图片垂直居中对齐? 有几种方法?
移动端的 rem 布局.
前端可以做哪些优化, 或问你 SEO, 基本都问.
清除浮动方式和原理, 基本都问. 几种方式? 原理? 为什么要用伪元素? 具体代码怎么写,为什么这么写?
清除浮动就会涉及到 BFC 的问题.
给你实际页面例子, 让你口述布局或手写实现细节, 可以使用几种方法, 怎么写兼容性好, 拓展性好.
具体 API 哪个 CSS 版本的?
CSS3 新增了哪些 API?
可能问你哪些 API 是 CSS 哪个版本的? 兼容性怎么样.
CSS hack 是什么? 包含什么? 怎么处理兼容性问题?
HTML5 新增了哪些 API? 哪些比较常用? 用来做什么? 实际怎么用?
cookie, session, localStrorage, sessionStorage 区别, 具体怎么用代码去操作?

JavaScript

变量声明提升的问题.
闭包的原理, 闭包的各种题, 基本都问.
DOM2 事件流, 冒泡和捕获问题?
this 指向问题, 一般都是在笔试题里, 拿着问你, 问的比较多.
call 和 apply 区别? 有的还会加问 bind?
jQuery 获取复选框选中状态, 为什么要用 prop 方法?
面向对象编程中的继承问题, 原型链问题在笔试题里比较常见.
jQuery API , 各种操作 DOM 用法, 还有一些新的 API, 这种在不用 3 大框架的公司会问的很详细.
可能有些考算法结构的, 可以了解一下, 一般前端掌握的很少.
Ajax 基本都问, 问的细节可能不同, 比如 get 和 post 有什么区别?
数组的方法 - es6 以下基本都能熟练使用, 应该会加分不少
字符串的方法 - 拼接, 截取, 带些正则
数组去重问的挺多的(解法很多, ES6 有很多简短写法)
ES6 的 Promise , 很多都会问. 如果公司用框架或者你写了, 还会问你 Class.
var, let, const区别, 问的多.
栈和队列结构, 有的会问.
跨域问题: 同源策略, 解决方案, 解决原理(比如 jsonp 的原理), 这里都是高发区.

其他

url 解析过程.
缓存的原理.
TCP 3次握手.
HTTP 协议.
看过哪些技术书籍? 可能直接问你书里的东西, 个人觉得至少 2 本以上储备量吧.

项目

问你用过什么技术, 用过哪些插件解决什么问题之类的, 了解一下你的技术栈.

那些开发用的插件和技术名词最好回想, 整理一下, 不要面试的时候蒙了.

负责什么模块?
使用到的技术?
遇到过什么难题?
怎么解决的?
工作之外的学习情况? 一般会从侧面了解一下

技术部门架构

按照业务线来划分部门, 每个部门配置(运营, 产品, UI, 前端, 服务端, 安卓, ios), 工作效率高, 前端 1-4 人或更多都有可能, 看业务量.
按照技术种类划分部门, 交流成本较高.
恩, 还有可能前端只有 1 或 2 人.

技术人员配置主要还是看公司业务量的多寡, 和公司产品类型.

开发流程

一个版本从需求讨论, 一直到开发完成上线, 大致经过以下几个过程.

需求讨论(技术可行性, 时间需求等)
需求讲解(产品告诉技术我们这次需要多什么)
前后端约定接口形式(一般都有通用形式的要求, 但具体参数和返回值需要具体商议)
前端, 后端, 客户端分别开发
前后端联调(测试交互功能)
提测(交于QA测试功能)
QA测试(禅道等bug管理平台, bug 指向人修改 bug)
预上线(模拟真实线上环境)
上线(预上线一切正常就可以上线了)

这其中涉及到几处环境:

研发环境
测试环境
预上线环境
线上环境

想理解几套环境的差异, 需要了解 host 这个概念.

127.0.0.1 www.xing-chuan.com 指向本地
10.10.10.111 www.xing-chuan.com 指向局域网服务器
45.23.26.23 www.xing-chuan.com 指向网络独立IP

host 可以改变域名指向的服务器 IP 地址, 线上的各种网站也是需要在域名控制台配置域名指向的, 所以你想办网站, 不只是要有域名, 还要有一台拥有独立 IP 地址的服务器.

我们通过切换 host 的指向, 改变资源(js,css,images)的指向, 可以自由切换到不同的服务器上去, 基于这一点, 形成开发平台的概念.

想看网上域名指向何处, 可以搜一下关键词 ping