备注：FE端： front end 前端
鉴于最近公司招聘前端技术！需要我进行面试！真的很头疼！但是又不想随便应付！于是在网上找了些面试技巧和流程！结合自己的经验总结处理啊！希望尽可能给公司招到真料的人！
一、面试时间：1个小时到1个半小时
二、面试准备：
- JD描述分析
以京东金融为例
pc端和移动端--交叉交互
金融App h5开发 --hybrid开发
调试数据接口 mock数据模拟
前端组件库的建立‘
对现有系统的优化与重构
任职要求：
1. 了解html5最新规范
关注最新动态
2. 面向对象知识
3. 实战经验： 有一两个项目拿出手
4. 前端架构分析与设计能力
通过一个项目从开始如何设计目录、技术栈、优化、上线流程
代码易读、易维护、高质量、高效率
抽象逻辑部分、编码习惯按eslint、命名规范、注释清晰
对用户可用性、用户体验、用户研究
项目中某个功能完成后！又做了那些优化改进！提高用户体验！
对web前端技术研究和新技术调研有良好的学习能力和团队合作精神
去github或码云等技术博客了解！github去看排名靠前的项目源码！运用到那些技术！
sass less
了解css预编译语言
熟悉web构建工具、Grunt 、Gulp、能够自己搭建前端环境
为啥不用Grunt 和gulp的区别--重点学习gulp
nodejs
除非了解nodejs否则不要去写
动画的实现
基础的DOM操作、 svg的path使用、canvans、css3
完成一个动画项目
web最新标准
ES6是最新的标准、完成彩票业务
- 业务分析
通过对项目的了解！里面用到的技术！
通过页面查看用到的功能和实现细节
emement 查看head的属性！
source查看里面用到的webpack源码
application 查看里面的数据存储或者字体技术
用jquery会用到模板引擎
- 技术栈准备
jquery -- 看源码：核心架构-事件委托怎么做-插件机制是什么--兼容性
看jquery的源码博客
vue.js -- 阿里对vue源码面试最细
找源码博客
react.js
angular.js
nodejs
前段工程化
sass -- 要学习
less -- 要学习
gulp -- 要学习
grunt
npm -- 要学习
browserify
webpack
4. 自我介绍
简历：
基本信息：姓名- 年龄- 手机- 邮箱- 籍贯
学历：
工作经历：时间-公司-岗位-职责-技术栈-业绩
开源项目：github和说明 找个参与开源项目
要求：简历排版简介、突出重点！涉及到的技术全部要会！
自我陈述
把握面试的沟通方向
豁达、自信的适度发挥
当不知道的时候 话语玩转： 1. 能指导一下么！ 这个我回去思考下！
三、面试环节设置：
- 一面考察基础知识
页面布局》css盒模型》DOM事件》HTTP协议》面向对象》原型链
通信(跨域通信，前后端通信)》安全(web安全XSS)》算法(找题目了解)
页面布局：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各位300px,中间自适应
解决方案：float、定位、flex布局、table布局、grid网格布局
延伸：这几种方法的兼容性、去掉高度已知、这集中方法的优缺点
浮动：脱离文档流，兼容好
决定定位：脱离文档里、
flex: 完美、不支持IE7
table表格布局：兼容性好、按场景
grid网格布局：代码少！
css盒模型：标准模型(W3c盒子模型)+IE模型(怪异模型)
css标准模型：content、padding、border、margin
cssIE模型：宽度包含padding和border
box-sizing:content-box代表标准模型
box-sizing:border-box代表IE模型
JS如何获取盒模型对应的宽和高
dom.style.width/height 只能获取到内联央视的css值
dom.currentStyle.width/height 获取到盒模型的宽高只有IE支持
window.getComputedStyle(dom).width/height 兼容好
dom.getBoundingClientRect().width/hright获取到四个值
BFC边距重叠解决方案 overflow属性设置
传送门
基本概念： Block Formatting Context 块级格式化上下文
原理：1. 在BFC元素的边距会发生重叠
- BFC区域不会和浮动元素重叠
- 是个独立的元素！里外元素不会互相影响
- 计算BFC的高度的时候！浮动元素不会参与计算！
创建BFC：
float不为none
position不为static和relactive
display:设置table-cell
overflow: auto/hidden
BFC使用场景
清除浮动
在BFC元素的边距会发生重叠
document.getElementById("myDIV").classList.add("mystyle");为元素添加class
www.runoob.com/前端基础
DOM事件
传送门
基本概念：DOM事件的级别
分为DOM0: 早期btn.onclick(function (){})
DOM1标准制定的时候没有新增的DOM事件！原理是将一个函数赋值给一个DOM事件处理属性
DOM2: btn.addEventListener("click",function(){{)false}！原理是添加事件处理程序！第一个参数是添加的事件名、第二个参数是事件处理函数、第三个是判定事件触发时候是否执行函数
DOM3: btn.addEventListener("keyup",function(){},false)
新增加了事件类型
DOM事件模型
捕获
冒泡
DOM事件流
当用户操作页面所触发的事件顺序
事件流的三个阶段:
事件捕获阶段
执行目标阶段（事件通过捕获到达目标阶段！）
事件冒泡阶段
描述DOM事件捕获的具体流程
用户触发事件的时候从上往下
window-document-body-html标签
document.body 获取body
document.documentElement 获取html
Event对象的常见应用
event.preventDefault() 阻止元素默认事件
event.stopPropagation() 阻止事件冒泡
event.stopImmediatePropagation() 事件响应优先级
event.currentTarget 当前绑定的事件的元素
event.target
自定义事件
传送门
通过创建event对象-初始化-设置监听
var e = document.createEvent('event') // 创建一个event对象
e.initEvent('test', true, true) // 初始化对象
// initEvent(eventType, canBubble, cancelable) eventType 事件类型 canBubble 事件是否起泡 cancelable 是否可以用preventDefault() 方法取消事件
var eventDOM = document.getElementById('event')
eventDOM.addEventListener('test', function() { // 自定义监听事件
console.log('我监听到test')
}, false)
eventDOM.dispatchEvent(e)
HTTP协议 需要去看博客
http协议的主要特点
简单快速：url固定
灵活：同一个http协议！可以通过修改部分内容返回不同结果
无连接：连接一次就断开
无状态：客户端请求服务端一次完成后就断开！第二次无法是否一样！
http报文的组成部分
- 请求报文：请求行、请求头(key vale值)、空行、请求体
- 响应报文：状态行、响应头、空行、响应体
http方法
GET 获取资源
POST 传输资源
PUT 更新资源
DELETE 删除资源
HEAD 获得报文首部
POST和GET的区别
- get在浏览器回退时不提交！而POST则会再次提交请求
- get请求的参数是在url中！而POST是在Request.body中
- get请求会被浏览器主动缓存，POST不会
- GET请求在URL中传送的参数是有长度限制的，而POST没有限制
- GET比POST更加不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息
- GET请求只能进行url编码，而POST支持多种编码方式
http状态码
1xx: 指示信息 - 表示请求已接受，继续处理
2xx: 成功 - 表示请求已经被成功接受
3xx: 重定向 - 要完成请求必须进行更进一步的操作
4xx: 客户端错误 - 请求有语法错误或请求无法实现
5xx: 服务端错误 - 服务端未能实现合法的请求
200 ok:客户端请求成功
206 partial content: 客户发送了一个带有Range头的GET请求，服务器完成了它 一般是在video或audio文件大的时候服务端返回！
301 moved Permanently : 所请求的页面被转移到新URL
403 Forbidden: 请求页面访问被禁止
404 请求资源不存在
500 服务端错误
什么是持久连接
HTTP协议一般都是断开连接
当1.1版本支持keep-Alive持久连接！一般都是请求-应答-断开！但是HTTP支持不断开！下次请求不用重新连接！
什么是管线化
在使用持久链接的情况下，某个连接流程
请求1>响应1>请求2>相应2>请求3>响应3
管线化是在持久连接的基础上进行集中请求！
请求1>请求2>请求3>响应1>响应2>响应3
特性：
1.管线化机制通过持久化连接完成，仅HTTP/1.1支持此技术
2.只有GET和HEAD请求可以进行管线化，POST则有限制
3.初次创建连接不应启动管线机制，因为服务器不一定支持HTTP/1.1版本的协议
4.HTTP/1.1要求服务器端支持管线化，但并不要求服务端也响应进行关管线化处理，只是要求对于管线话的请求不失败即可
原型链 一脸懵逼 重新看书
创建对象有几种方法
- var a = {name: 1} // 字面量
var b = new Object({name: 1})- function a(){location.href = 'http://www.baidu.com'}
var b = new a() // 构造函数- 工厂模式 在里面创建一个object 然后return
var p = {name: 'p'}
var o = Object.create(p)
什么是实例：
什么是构造函数：能通过一个new生成的一个函数
函数也是一个对象
实例对象才有proto
instanceof
面向对象
- call和apply
通信类**
什么是同源策略及限制
同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。
源： 同HTTP/端口/域名
Cookie、LocalStore、mongDB无法获取
无法操作DOM
无法进行Ajax通信
前后端如何通信
- Ajax
- WebSocket
- CORS
如何创建Ajax
- XMLHttpRequest 对象的工作流程
- 兼容性处理
- 事件的触发条件
- 事件的触发顺序
手写一个Ajax的通信
跨域通信的几种方式
- JSONP
手写一个JSONP的原理- Hash 改变页面不刷新
- postMessage
- WebSocket
- CORS 传送门
安全类
CSRF
CSRF ，通常称为跨站请求伪造 Cross-site request forgery
原理：在网站登陆过！网站接口有漏洞
防御：1. Token 验证！ 2.Referer 验证是否是站点下面的来源！3.隐藏令牌
XSS： 跨域脚本攻击 传送门
原理： 在页面注入恶意脚本！比如评论区 提交！
算法类
排序
快速排序、选择排序、希尔排序 传送门
堆栈、队列、链表
递归
波兰式和逆波兰式
二面/三面考察技术知识
知识面要广、理解要深刻、内心要诚实、态度要谦虚、回答要灵活、要学会赞美
渲染机制
什么是DOCTYPE及作用
一种生命文档类型
告诉浏览器我用的是什么版本的文档！你要用什么引擎去解析！
<!DOCTYPE html>HTML5的版本
HTML4规定了三种文档类型！一个严格模式一个宽松模式一个框架模式！区别是：严格模式是不包括HTML4废弃的标签
浏览器渲染机制
重排Reflow（回流）:1. 当你增加、删除、修改DOM节点时，会导致Reflow或Repaint
- 移动DOM位置
- 修改css样式
- 当你Resize窗口或滚动的时候
- 修改网页默认字体
重绘Repaint
当DOM或者CSS改动
如果要修改多个节点！要创建一个节点把需要改动的一次性添加到DOM节点里面！
布局Layout
JS运行机制 传送门
console.log(1)
setTimeout(function() {
console.log(2)
}, 0)
console.log(3)
打印： 1，3，2
js是单线程，执行到setTimeout()时候会把它放到异步队列里面！只有在执行完后面的js时候才会返回过来执行它！
理解JS的单线程的概念：同一个时间段只能执行一件事情！
理解队列任务：同步队列和异步队列
理解Event Loop：
理解哪些语句会放入异步任务队列：setTimeout setInterval DOM事件 ES6的Promise
理解语句放入异步任务队列的时机:
页面性能
提升页面性能的方法有哪些1. 资源压缩合并，减少HTTP请求
- 非核心代码异步加载 -异步加载的方式-异步加载的区别
- 利用浏览器缓存-缓存的分类-缓存的原理
4.使用CDN
5.预解析DNS 传送门
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="http://hm.baidu.com" />
6.异步加载的方式：动态脚本加载、defer、async
7.异步加载的区别：1.defer是在HTML解析完之后才执行，如果是多个，按照加载的顺序依此执行
2.async是异步加载！在加载完后立即执行，如果是多个！执行顺序和加载顺序无关！
缓存的分类
强缓存：Expires：Sat, 02 Dec 2017 01:29:15 GMT在这个时间之前不会和服务器交互
Cache-Control：max-age=432000
协商缓存
错误监控
- 前端错误的分类
即时运行错误：代码错误try..cathc window.onerror window.addEventListener('error')
资源加载错误: object.onerror 、performance.getEntries() 传送门、Error事件捕获
- 错误的捕获方式
window.onerror window.addEventListener('error',function() {},false)
跨域的JS运行错误可以捕获吗，错误提示什么，应该怎么处理？： 在script标签增加crossorigin属性！在服务端设置js资源响应头Access-Control-Allow-Origin:*
- 上报错误的基本原理
采用Ajax通信的方式上报
利用Image对象上报 传送门
- 四面/五面考察项目架构(一般偏向技术负责人或业务负责人)
面试技巧
准备要充分、描述要演练、引导找时机、优势要发挥、回答要灵活
特长：业务能力、团队写作能力、事务推动能力、带人能力
业务能力：
我做过什么业务？
负责的业务有什么业绩
使用了什么技术方案
突破了什么技术难点
遇到了什么问题
最大的收获是什么
团队协作能力：
主动描述：对彩票足彩的奖金算法有深入研究，业内第一
为H5、客户端讲解算法并协助完成开发
和PHP、PM同学在一天的时间内快速支持足彩竞猜活动
和leader独立负责彩票PC站
事物推动能力
主动描述
对历史算法更新换代
推动专题的CMS架构
主导客服系统的建设
完成多项专利的申请
带人能力
主动描述
带一个社招完成数字彩的开发和维护
带一个实习生完成专题的开发
代码规范、Review（代码审查）
- 终面考察性格、人品、职业人生规划
乐观积极
主动沟通
逻辑顺畅
上进有责任心
职业竞争力
- 业务能力
- 思考能力 学会对同一件事可以从不同角度去思考，找到最优解
- 学习能力 不断学习新的业务和技术，沉淀、总结
- 无上限的付出
职业规划
- 目标是什么
在业务上成为专家，在技术上成为行业大牛 - 近阶段的目标
不断的学习各方面的知识！以学习为主！ - 长期目标
做几件很有价值的事情，如开源作品、技术框架等 - 方式方法
先完成业务上主要问题，做到极致，然后逐步向目标靠拢
四、面试类型：
1.校招:技术面和hr面无业务和项目面试
- 校招:全面考察添加项目面试
网友评论