# data 必须是一个函数当我们定义这个<button-counter>组件时，你可能会发现它的 data并不是像这样直接提供一个对象：JSdata:{count:016取而代之的是，一个组件的data选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：JSdata: function () {return {count:0116如果Vue没有这条规则，点击一个按钮就可能会像如下代码一样影响到其它所有实

axios是什么?怎么使用？描述使用它实现登录功能的流程?

axios 是基于promise的用于浏览器和node.js的http客户端

主要作用就是向后台发送请求的

支持promise

提供了一些并发的方法

提供拦截器

浏览器支持防止csrf(跨站请求伪造）

axios fetch ajax(jquery>区别

前两者是基于promise 后者主要还是利用callback的形式

fetch 脱离了xhr是新的语法（默认不传cookie 另外不像xhr 可以监听到请求的进度）

swiper插件从后台获取数据没问题，css代码啥的也没问题，但是图片不动，应该怎么解决？

主要原因是swiper 提前初始化了而这个时候数据还没有完全出来

解决方法主要有两个方向一个从swiper入手一个是从vue入手

vue中专门给你提供了一个方法nextTick（）用于解决dom的先后执行问题.

路由懒加载

异步组件

ody>T

Vue-loader解释一下

什么是vue-loader

vue-loader就是一个加载器能把.vue 组件转化成]avaScript模块

为什么我们要转译这个vue组件

可以动态的渲染一些数据

对三个标签都做了优化script中可以直接使用es6 style也默认可以使用sass并且还给你提供了作用域的选择

用过插槽吗？用的是具名插槽还是匿名插槽？

vue中的插槽是一个非常好用的东西slot 说白了就是一个占位的

在vue当中插槽包含三种一种是默认插槽（匿名）一种是具名插槽还有一种就是作用域插槽

（起始点）一进行下一步操作一用户获得反馈用户输入人机交互等待用户输入（形成一人机交互将结果反馈给用户个闭环）ViewController控制器视图将用户输入的指令和数根据业务逻辑选Model据传递给业务模型择不同的视图模型进行业务逻辑判断、数据库存取数据库Baid百利

c v vmodel=>model...

前端面试\前端JavaScript面试技巧

关于面试
·基层工程师-基础知识
·高级工程师-项目经验
·架构师-解决方案

工程师的自我修养-基础
·扎实的基础会让你高效学习新技术

先从几道面试题说起
JS中使用typeof 能得到的哪些类型？
何时使用 === 何时使用 ==？
window.onload 和 DOMContentLoaded 的区别？
用JS 创建 10 个标签，点击的时候弹出来对应的序号简述如何实现一个模块加载器，实现类似require.js的基本功能实现数组的随机排序

www.itjc8.com什么是跨域·浏览器有同源策略，不允许ajax 访问其他域接口·http://www.yourname.com/page1.html·http://m.imooc.com/course/ajaxcourserecom?cid=459·跨域条件：协议、域名、端口，有一个不同就算跨域@5503089

cookie·本身用于客户端和服务器端通信·但是它有本地存储的功能，于是就被“借用”·使用document.cookie =.…获取和修改即可

locationStorage 和 sessionStorage·iOS safari隐藏模式下·localStorage.getItem会报错·建议统一使用 try-catch 封装

cookie sessionStorage localStorage 的区别·容量·是否会携带到ajax 中·API易用性

上线回滚流程介绍
是非常重要的开发环节
各个公司的具体流程不同由专门的工具后者系统完成，我们无需关心细节如果你没有参与过，面试时也要说出要点只讲要点，具体实现无法讲解

回滚流程要点·将当前服务器的代码打包并记录版本号，备份、·将备份的上一个版本号解压，覆盖到线上服务器，并生成新的版本号

window.onload 和 DOMContentLoaded·页面的全部资源加载完才会执行，包括图片、视频等·DOM渲染完即可执行，此时图片、视频还没有加载完

简历·简洁明了，重点突出项目经历和解决方案·把个人博客放在简历中，并且定期维护更新博客·把个人的开源项目放在简历中，并维护开源项目

简历千万不要造假，要保持能力和经历上的真实性

面试过程中·如何看待加班？加班就像借钱，救急不救穷

面试过程中
如何看待加班？加班就像借钱，救急不救穷千万不可挑战面试官，不要反考面试官学会给面试官惊喜，但不要太多

·遇到不会回答的问题，说出你知道的也可以·谈谈你的缺点—一说一下你最近正在学什么就可以了

前端跳槽面试必备技巧

技术面试
HR面试
负责人面试

面试准备复习指导题目演练面试技巧知识梳理

@5720316项目怎么准备？JD描述怎么看？面试那些事简历怎么写？和负责人怎么沟通？知识怎么复习？问题该怎么回答？HR印象怎么留？

课程安排JD描述分析面试业务分析准备技术栈准备自我介绍

面试技巧页面布局类模拟CSS盒模型DOM事件类HTTP协议类原型链类一面面向对象类通信类前端安全类前端算法类

模拟二面
面试技巧
渲染机制类
JS运行机制
页面性能

错误监控

模拟三面
面试技巧
业务能力
团队协作能力
带人能力

面试技巧模拟终面职业竞争力职业规划

课程总结
注意事项
复习指南

1、有前端基础
对HTML、CSS、JavaScript知识都掌握，至少提到一些概念是了解的2、端正的求职心态
技术过关+面试技巧=面试成功，不能只靠技巧而自身不够努力3、不浮躁的求知心境
这门课中涉及到的一些难点需要有耐心的学习、吸收；心浮气躁者不宜学习4、不求押题的初衷
@5720316这门课努力覆盖较全的面试知识点，但不是押题。我们追求技术原理弄懂弄会

如何看待面试什么是面试？
答：面试是测查和评价人员能力素质的一种考试活动。具体地说，面试是一种经过组织者精心设计，在特定场景下，以考官对考生的面对面交谈与观察为主要手段，由表及里测评考生的知识、能力、经验等有关素质的一种考试活动。

一面
二面/三面
三面/四面
终面

面试准备
职位描述（JD）分析
业务分析或实战模拟
技术栈准备
自我介绍

webgl

沟通能力...

分析网站...

link rel-"dns-prefefch" href-"//static.360buyimg.com"

旧项目

async

sources ---打包类型 工具

jq cmd

面试准备
技术栈准备

面试准备自我介绍
简历
基本信息，姓名-年龄-手机-邮箱-籍贯学历，博士》硕士》本科》大专工作经历，时间-公司-岗位-职责-技术栈-业绩开源项目，Github和说明自我陈述
把握面试的沟通方向
豁达、自信的适度发挥

1.熟练使用Js/Css/Html开发PC与移动端页面，对前端设计模式、模块化开发，性能优化有深刻理解。
2.熟悉Nodejs，使用其开发前端编译工具以及用Express搭建后台服务。
3.熟悉目前较流行的前端开发框架Angular React 等。
4.熟悉HTTP协议，可以配置nginx，以及用lua 脚本语言编写后台服务程序。

2version all simple dsx

面试准备自我陈述
实例
自如谈兴趣、巧妙示实例、适时讨疑问节奏要适宜、切忌小聪明实战
方向要对，过程要细胆子要大、心态要和

一面/二面
面试技巧
准备要充分
知识要系统
沟通要简洁
内心要诚实
态度要谦虚
回答要灵活

面试模拟
页面布局
CSS盒模型DOM事件HTTP协议 面向对象原型链
通信
安全
算法

leftf rightf midnf 1

整体absolute left-left-guw=right centterl+r+/不wh 2

table布局 left-right =table-cell-gwh centerauto 3

gird 布局 整体gird 4

display:grid;
width:100%;
grid-template-rows:100px;
grid-template-columns:300px auto 300px;

双飞翼 圣杯布局...

一面/二面
cSS盒模型
基本概念：标准模型+IE模型
标准模型和IE模型区别
csS如何设置这两种模型
JS如何设置获取盒模型对应的宽和高
实例题（根据盒模型解释边距重叠）

BFC（边距重叠解决方案）

cSS盒模型
csS如何设置这两种模型
box-sizing：content-box；box-sizing：border-box；

CSS盒模型JS如何设置获取盒模型对应的宽和高dom.style.width/heightdom.currentStyle.width/heightwindow.getComputedStyle(dom).width/heightdom.getBoundingClientRect().width/height

bfc block format content

v 重叠 不与floatelement重叠 独立容器不影响外面.... 高度flaot元素参与

ifc

cSS盒模型
BFC（边距重叠解决方案）
BFC的基本概念
BFC的原理
如何创建BFC
BFC的使用场景

父bfc 当前元素overflow:auto float

BFC子元素即使是float也会参与高度计算

一面/二面
DOM事件类
基本概念：DOM事件的级别
DOM事件模型
DOM事件流
描述DOM事件捕获的具体流程
Event对象的常见应用
自定义事件

一面/二面
DOM事件类
事件级别DOMO element.onclick=function（
DOM2
element.addEventListener（‘click'，function（），false）
DOM3
element.addEventListener（‘keyup'，function（）），false）

DOM事件类
事件流
捕获
冒泡
目标阶段

DOM事件类
描述DOM事件捕获的具体流程
window
document
html
body
目标元素

DOM事件类
Event对象的常见应用
event.preventDefault（）
event.stopPropagation（）
event.stoplmmediatePropagation（）
event.currentTarget
event.target

DOM事件类
自定义事件
var eve=new Event（'custome'）；ev.addEventListener（'custome'，function（）{
console.log（'custome'）；
@5720316
}）；ev.dispatchEvent（eve）；

HTTP协议类
HTTP协议的主要特点
HTTP 报文的组成部分
HTTP方法
POST和GET的区别
HTTP状态码
什么是持久连接
什么是管线化

HTTP协议类
HTTP协议的主要特点
简单快速
灵活
无连接
无状态

HTTP协议类
HTTP报文的组成部分
请求报文
响应报文
请求行
请求头
空行
请求体
状态行
响应头
空行
响应体

HTTP协议类
HTTP 方法
GET
获取资源
POST
传输资源
PUT
更新资源
DELETE
删除资源
HEAD
获得报文首部

HTTP协议类
POST和GET的区别
GET在浏览器回退时是无害的，而POST会再次提交请求GET产生的URL地址可以被收藏，而POST不可以GET请求会被浏览器主动缓存，而POST不会，除非手动设置GET请求只能进行url编码，而POST支持多种编码方式GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留GET请求在URL中传送的参数是有长度限制的，而POST没有限制对参数的数据类型，GET只接受ASCII字符，而POST没有限制GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息GET参数通过URL传递，POST放在Request body中

HTTP协议类HTTP状态码
200 OK：客户端请求成功
206 Partial Content：客户发送了一个带有Range头的GET请求，服务器完成了它301 Moved Permanently：所请求的页面已经转移至新的url
302 Found：所请求的页面已经临时转移至新的url
304 Not Modified：客户端有缓冲的文档并发出了一个条件性的请求，服务器告诉客户，原来缓冲的文档还可以继续使用

400 Bad Request：客户端请求有语法错误，不能被服务器所理解401 Unauthorized：请求未经授权，这个状态代码必须和www-Authenticate报头域一起使用403 Forbidden：对被请求页面的访问被禁止
404 Not Found：请求资源不存在
500 Internal Server Error：服务器发生不可预期的错误原来缓冲的文档还可以继续使用503 Server Unavailable：请求未完成，服务器临时过载或当机，一段时间后可能恢复正常

HTTP协议类
持久连接
HTTP 协议采用“请求-应答”模式，当使用普通模式，即非 Keep-Alive 模式时，每个请求/应答客户和服务器都要新建一个连接，完成之后立即断开连接（HTTP协议为无连接的协议）
当使用Keep-Alive模式（又称持久连接、连接重用）时，Keep-Alive功能使客户端到服务器端的连接持续有效，当出现对服务器的后继请求时，Keep-Alive功能避免了建立或者重新建立连接

HTTP协议类
管线化
在使用持久连接的情况下，某个连接上消息的传递类似于请求1->响应1->请求2-> 响应2->请求3->响应3某个连接上的消息变成了类似这样请求1->请求2->请求3->响应1->响应2->响应3

HTTP协议类
管线化
管线化机制通过持久连接完成，仅HTTP/1.1 支持此技术只有 GET 和 HEAD 请求可以进行管线化，而 POST 则有所限制初次创建连接时不应启动管线机制，因为对方（服务器）不一定支持 HTTP/1.1 版本的协议管线化不会影响响应到来的顺序，如上面的例子所示，响应返回的顺序并未改变HTTP/1.1 要求服务器端支持管线化，但并不要求服务器端也对响应进行管线化处理，只是要求对于管线化的请求不失败即可
器端和代理程序对管线化的支持并不好，因此现代浏览器如Chrome和Firefox默认并未开启管线化支持
由于上面提到的服务器端问题，开启管线化很可能并不会带来大幅度的性能提升，而且很多服务

创建对象有几种方法
原型、构造函数、实例、原型链
instanceof的原理
new运算符

原型链类
创建对象有几种方法
var o1={name:'o1'}；var o11=new Object（{name:'o11}）；var M=function（）{this.name='o2'）
var o2=new M（）；var P={name:'o3'}；var o3=Object.create（P）

proto instanceof prototype

var new2=function(func){var o=0bject.create(func.prototype);var k=func.call(o);if(typeof k==='object)return k}else{return o33

面向对象类
类与实例
类的声明
生成实例
类与继承
如何实现继承
继承的几种方式

/***组合继承的优化2*/function Parent5 () {this.name = 'parent5';this.play = [1, 2, 3];3function Child5(){Parent5.call(this);this.type = 'child5';T3Child5.prototype = 0bject.create(Parent5.prototype);// _.protoChild5.prototype.constructor = Child5;var s7 = new Child5();console.log(s7 instanceof Child5, s7 instanceof Parent5);console.log(s7.constructor);

要全 技巧 一步一步+ 缺点 优化思路...

5....

5+

通信类
什么是同源策略及限制
前后端如何通信
如何创建Ajax
跨域通信的几种方式

通信类
什么是同源策略及限制
同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。
这是一个用于隔离潜在恶意文件的关键的安全机制。
Cookie、LocalStorage和IndexDB无法读取DOM无法获得
AJAX 请求不能发送

通信类
前后端如何通信
Ajax
WebSocket
CORS

通信类
如何创建Ajax
XMLHttpRequest对象的工作流程
兼容性处理
事件的触发条件
事件的触发顺序

通信类
跨域通信的几种方式
JSONP
Hash 看#数据变化 ...
postMessage
WebSocket
CORS

9z

interview

Bwindow.postMessage（'data'，'http://B.com'）；
//在窗口B中监听；window.addventListener（'message'，function（event）{
console.log（event.origin）；//http://A.com console.log（event.source）；//Bwindow console.log（event.data）；//data！
}，false）；

安全类
CSRF
XSS

安全类
CSRF
基本概念和缩写
攻击原理
防御措施

ed jx dsks

安全类
CSRF基本概念和缩写
CSRF，通常称为跨站请求伪造，英文名 Cross-site request forgery 缩写 CSRF

安全类
CSRF 防御措施
Token 验证
Referer 验证
隐藏令牌 在header

安全类
XSS
基本概念和缩写
XSS（cross-site scripting跨域脚本攻击）

安全类
XSS
攻击原理：http://www.imooc.com/learn/812
防御措施：http://www.imooc.com/learn/812

黑白名单过滤 ....

算法类
排序
堆栈、队列、链表
递归
波兰式和逆波兰式

算法类排序快速排序：https://segmentfault.com/a/1190000009426421选择排序：https://segmentfault.com/a/1190000009366805希尔排序：httpg://segmentfault.com/a/1190000009461832

算法类堆栈、队列、链表堆栈：https://juejin.im/entry/58759e79128fe1006b48cdfd队列：https://juejin.im/entry/58759e79128fe1006b48cdfd链表：https://juejin.im/entry/58759e79128fe1006b48cdfd

各部

递归：https://segmentfault.com/a/1190000009857470

波兰式和逆波兰式理论：http://www.cnblogs.com/chenying99/p/3675876.html源码：https://github.com/Tairraos/rpn.js/blob/master/rpn.js

面试技巧
知识面要广
理解要深刻
内心要诚实
态度要谦虚
回答要灵活
要学会赞美

面试模拟
渲染机制
JS运行机制
页面性能
错误监控

渲染机制类
什么是DOCTYPE及作用
浏览器渲染过程
重排Reflow
重绘Repaint
布局Layout

渲染机制类什么是DOCTYPE及作用什么是DOCTYPE及作用DTD (document type definition,文档类型定义)是一系列的语法规则，用来定义XN或（X)HTML的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析以及切换浏览器模式DOCTYPE是用来声明文档类型和DTD规范的，一个主要的用途便是文件的合法性验如果文件代码不合法，那么浏览器解析时便会出一些差错

HTML 5
<！DOCTYPE html>
HTML 4.01 Strict 该DTD 包含所有HTML 元素和属性，但不包括展示性的和弃用的元素（比如font）
<！DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional该DTD包含所有HTML元素和属性，包括展示性的和弃用的元素（比如font）
<！DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

4 stricit 传统

渲染机制类重排Reflow定义DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式来计算并根据计算结果放到它该出现的位置，这个过程称之为reflow触发Reflow当你增加、删除、修改DOM结点时，会导致Reflow或Repaint当你移动DOM的位置，或是搞个动画的时候当你修改CSS样式的时候当你Resize窗口的时候（移动端没有这个问题），或是滚动的时候当你修改网页的默认字体时

渲染机制类重绘Repaint定义当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为repaint触发RepaintDOM改动CSS改动

运行机制类
异步任务
setTimeout和setInterval
DOM事件
ES6中的Promise

node的 evenloop

运行机制
总结
理解JS的单线程的概念
理解任务队列
理解Event Loop
理解哪些语句会放入异步任务队列
理解语句放入异步任务队列的时机

页面性能类
题目：提升页面性能的方法有哪些？
1、资源压缩合并，减少HTTP请求
2、非核心代码异步加载
异步加载的方式异步加载的区别
3、利用浏览器缓存
缓存的分类缓存的原理
4、使用CDN
5、预解析DNS

<meta http-equiv="x-dns-prefetch-control"content="on">

页面性能类
异步加载
1、异步加载的方式
1）动态脚本加载2）defer3）async
2、异步加载的区别
1）defer是在HTML解析完之后才会执行，如果是多个，按照加载的顺序依次执行2）async是在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关

页面性能类浏览器缓存1、缓存的分类1）强缓存Expires Expires:Thu, 21 Jan 2017 23:39:02 GMTCache-Control Cache-Control:max-age=36002）协商缓存Last-Modified If-Modified-Since Last-Modified: Wed, 26 Jan 2017 00:35:11 GMTEtag If-None-Match

错误监控类
前端错误的分类
错误的捕获方式
上报错误的基本原理

错误监控类
错误的捕获方式
即时运行错误的捕获方式
1）try..catch
2）window.onerror资源加载错误
1）object.onerror 2）performance.getEntries（）3）Error事件捕获延伸：跨域的js运行错误可以捕获吗，错误提示什么，应该怎么处理？

respone niginx-a after

错误监控类
错误的捕获方式
延伸：跨域的js运行错误可以捕获吗，错误提示什么，应该怎么处理？

Resource interpreted as Script but transferred错误信息：Script error.
出错文件：出错行号：0出错列号：0错误详情：null
1、在script标签增加crossorigin属性2、设置js资源响应头Access-Control-Allow-Origin:*

错误监控类
上报错误的基本原理
1、采用Ajax通信的方式上报
2、利用Image对象上报

yaog fhb

(new Image()), src = ' http://baidu. com/tesjk?r=tksjk'; kuoying

面试技巧
准备要充分
描述要演练
引导找时机
优势要发挥
回答要灵活

描述要演练 项目介绍 难点 解决法案

面试模拟
业务能力
团队协作能力
事务推动能力
带人能力
其他能力

业务能力主动描述
我做过什么业务？
被动回答
负责的业务有什么业绩？使用了什么技术方案？突破了什么技术难点？
遇到了什么问题？最大的收获是什么？

独立负责360数据彩票走势图开发历时3周完成所有彩种开发，用户量上涨15%
区别常规canvas方案，使用vml+svg方案解决了走势图高级绘图板的开发橡皮擦的问题、动态连线计算等对业务的理解更加深入、对技术图表更有把控

О chart.cp.360.cn/zft/syy？sb spm=581e3217d52bddf2b112f6bf03caa62a第当面的位置：360票西负>米热图表>11速5

团队协作能力
主动描述
对彩票足彩的奖金算法有深入研究，业内第一为H5、客户端讲解算法并协助完成开发和PHP、PM同学在一天的时间内快速支持足彩竞猜活动和leader独立负责彩票PC站

事务推动能力
主动描述
对历史算法更新换代
推动专题的CMS架构
主导客服系统的建设
完成多项专利的申请

带人能力
主动描述
带一个社招完成数字彩的开发和维护
带一个实习生完成专题活动的开发
代码规范、Review

其他
组织能力
学习能力
行业经验

终面面试技巧1、乐观积极2、主动沟通3、逻辑顺畅4、上进有责任心5、有主张，做事果断

hr

内容分布1、职业竞争力2、职业规划

职业竞争力1、业务能力可以做到行业第一2、思考能力对同一件事可以从不同角度去思考，找到最优解3、学习能力不断学习新的业务和技术，沉淀、总结4、无上限的付出对于无法解决的问题可以熬夜、加班

职业规划1、目标是什么在业务上成为专家，在技术上成为行业大牛2、近阶段的目标不断的学习积累各方面的经验，以学习为主3、长期目标@5720316做几件很有价值的事情，如开源作品、技术框架等4、方式方法先完成业务上的主要问题，做到极致，然后逐步向目标靠拢

面试技巧1、乐观积极2、主动沟通3、逻辑顺畅4、上进有责任心5、有主张，做事果断

JD描述对于社招一定要看，对于校招可以忽略简历对照JD改写出相吻合的简历，对于未掌握的技术栈快速复习、理解自我介绍一定要打草稿，展示什么优势、描述什么项目，切忌临场发挥

一面重基础、懂原理，要思考、知进退、势不可挡二面横向扩展、项目结合，做到有的放矢三面有经验、懂合作、有担当、懂规矩、察言观色

终面会沟通、要上进、好性格、有主见、强逻辑、无可挑剔复盘胜不骄、败不馁、总结经验、步步为营、多拿几个offer

复习指南课程中主要涉及的重点、难点，对于一些很基础的知识点没有涉及，如css选择器、html标签等等对于很基础的知识点,大家可以参考http://www.w3school.com.cn/,把HTML、HTML5、CSS、CSS3、JavaScript等再快速看一遍，有基础的同学估计2天就能都过一遍对于算法题，每个公司都是临时发挥，很难押题，建议还是把一些基础算法弄清楚、到时候把算法组合起来去解决问题，时间充裕的话可以刷LeetCode,https://leetcode.com/problemset/algorithms/

复习指南
快速排序：https://segmentfault.com/a/1190000009426421
选择排序：https://segmentfault.com/a/1190000009366805
希尔排序：https://segmentfault.com/a/1190000009461832
堆栈：https://juejin.im/entry/58759e79128fe1006b48cdfd
队列：https://juejin.im/entry/58759e79128fe1006b48cdfd
链表：https://juejin.im/entry/58759e79128fe1006b48cdfd
递归：https://segmentfault.com/a/1190000009857470
波兰式和逆波兰式：http://www.cnblogs.com/chenying99/p/3675876.html
https://github.com/Tairraos/rpn.js/blob/master/rpn.js