web面试题
1、定位有哪几种？分别简述其特点。
static：默认值，没有定位，元素出现在正常的文档流中
relative：生成相对定位的元素，不脱离文档流，相对于自身位置进行定位
absolute：生成绝对定位的元素，脱离文档流，相对于最近一级的定位，而不是static的父元素来进行定位
fixed：生成绝对定位元素（老IE不支持），脱离文档流，相对于浏览器窗口进行定位
2、请描述一下网页从开始请求到最终显示的完整过程
1.1在浏览器中输入地址
1.2发送到DNS服务器，解析获取域名对应的web服务器的ip地址
1.3与web服务器建立TCP链接
1.4浏览器向web服务器发起相应的HTTP请求
1.5web服务器响应请求，并返回响应数据
1.6浏览器解析并展示HTML
1.7如果当前页面存在其他请求(外布css/js)，浏览器对这些文件重复以上的步骤
3、link和import的区别
区别1：link是XHTML标签，除了加载css外，还可以定义RSS等其他事务；
@import属于css范畴，只加载css
区别2：link引入css时，在页面载入时同时加载
@import需要页面完全加载后再加载
区别3：link是XHTML标签，无兼容问题
@import是css2.1提出的，低版本浏览器不支持
区别4：link支持JavaScript控制ＤＯＭ去改变样式
而＠import不支持
４、阅读一下代码
代码运行后，是产生输出结果还是报错？为什么？
Var age=20;
Var test;
If(age>20&&test.length>0){
console.log(1)
}else{
console.log(2)
}
输出2，不会报错
因为if判断的第一个条件就是false不满足，此时就产生了‘逻辑短路’，第二个判断不会执行，就不会报错
5、call()和apply()的区别和作用？
apply()函数有两个参数，第一个参数是上下文，第二个是参数组成的数组。
如果上下文为null，则使用全局对象this代替
function.apply(this,[1,2,3]);
call()的第一个产生是上下文，后续是实例传入的参数序列
function.call(this.1,2,3)
6、js深拷贝和浅拷贝的区别？
浅拷贝：复制一层对象的属性，并不包括对象里面的引用类型的数据，当改变拷贝的对象里面的引用类型时，源对象也会改变
深度拷贝：重新开辟一块内存空间，需要递归拷贝对象里的引用数据类型，直到子属性都为基本类型。两个对象的对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性
function deepClone(obj){
let _obj = JSON.stringify(obj),
objClone = JSON.parse(_obj);
return objClone
}
7、通过es6解构赋值的方法提取以下对象的street值和prices的第2个元素
let sth={
orderId:”123456”,
address:{city:”HZ”,street:”XIHU”},
prices:[10,20,30]
}
let {address:{street},prices:[,prices]} = sth;
console.log(street,prices);
8、HTTP状态码知道哪些
100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求，但尚未处理
301 Moved Permanently 请求的网页已永久移动到新位置。
302 Found 临时性重定向。
303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。
304 Not Modified 自从上次请求后，请求的网页未修改过。
400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized 请求未授权。
403 Forbidden 禁止访问。
404 Not Found 找不到如何与 URI 相匹配的资源。
500 Internal Server Error 最常见的服务器端错误。
503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。
9、vue.js的两个核心是什么？
数据驱动、组件系统
10、vue中怎么使css只在当前组件起作用？
在style标签中写 scoped 即可
<style scoped></style>
11、常见兼容性问题及解决方法
1.1浏览器默认的margin和padding不同
解决方法：加一个全局的*{margin:0;padding:0;}统一
1.2IE6双边距问题，在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍
解决方法：在float的标签样式控制中加入_display:inline;将其转换为行内属性
1.3ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，但是margin-top和matgin-bottom却会发生重合
解决方法：养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom
1.4几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中通配符也不起作用
解决方法：使用float属性为img布局
12、说出至少5个ES6的新特性，并简述它们的作用
1.1 let关键字，用于声明只在块级作用域起作用的遍变量
1.2 const 关键字，用于声明一个常量
1.3 解构赋值，一种新的变量赋值方式。常用来交换变量值，提取函数返回值，设置默认值等
1.4 for-of遍历，可用来遍历具有Iterator接口的数据解构(Array,String,Set,Map,arguments,NodeList等)
1.5 Set解构，存储不重复的成员的集合
1.6 Map结构，键名可以是任何类型的键值对集合
1.7 Promise对象，更合理规范的处理异步操作
1.8 Class类，定义类和更简便的实现类的继承
13、使用模板字符串改写下面的代码（ES5 to ES6改写题）
let iam = "我是";
let name = "tom";
let str = "大家好，"+ iam + name +",多指教。";
改写：
let str = `大家好，${iam+name},多指教`;
14、什么是vue生命周期和生命周期钩子函数
vue的生命周期就是vue实例从创建到销毁的过程
beforeCreate 在实例初始化之后，数据观察(data observer)和event/watch事件配置之前被调用
created 在实例创建完成后立即被调用，在这一步实例已经完成了：数据观察、属性和方法的运算和event/watch事件的回调，但是$el属性目前不可见
beforeMount 在挂载开始之前被调用
mounted 在挂载成功后被调用，el被创建的vm.$el替换
beforeUpdate 数据更新之前调用
update 数据更新完成时调用，组件DOM已经更新 activated组件被激活时调用deactivated组件被移除时调用
beforeDestory 组件销毁前调用
destoryed 组件销毁后调用
15、如何解决跨域问题
1.1 JSONP：原理是动态插入script标签引入一个带回调函数的js文件，这个js文件载入成功后会执行该文件所请求的地址，并且把我们需要的JSON参数传入，在会调函数中我们就可以获得所请求到的数据
优点：兼容性好，支持浏览器与服务器双向通信
缺点：只支持get请求
1.2 cors:该方法主要作用服务端，设置Access-Control-Allow-Origin来进行，就可以通过Ajax实现跨域访问了
1.3 反向代理转发
16、说活对闭包的理解
使用闭包主要是为了设计私有的方法和变量。
优点：可以避免全局变量的污染
缺点：闭包会常驻内容，会增大内存使用量，使用不当容易造成内存泄漏
在js中函数即闭包，只有函数才会产生作用域的概念
特性：函数嵌套函数
函数内部可以引用外部的参数和变量
参数和变量不会被垃圾回收机制回收
17、JavaScript对象的几种创建方式
1.1 工厂模式
1.2 构造函数模式
1.3 原型模式
1.4 混合构造函数和原型模式
1.5 动态原型模式
1.6 寄生构造函数模式
1.7 稳妥构造函数模式
18、v-for产生的列表，实现active切换
html：
<ul>
<li v-for="(item,index) in list" :key="index" @click="select(index)" :class="{'active': item.active}">{{item.name}}</li>
</ul>
Data:
list:[
{name:'a',active:false},
{name:'b',active:false},
{name:'c',active:false},
]
事件：
select(i){
this.list.map(item=>item.active = false);
this.list[i].active = true;
}
样式：
<style scoped>
li.active{
background-color:red;
}
</style>
19、小程序页面间有哪些传递数据的方法
1.1 使用全局变量实现数据传递，使用的时候，直接用getApp()拿到存储信息
1.2 使用wx.navigateTO与wx.redirectTo的时候，可以将部分数据放在url里面，并在新页面onLoad时初始化
注意：wx.navigateTo和wx.redirectTo不允许跳转tab所包含的页面，onLoad只执行一次
1.3 使用本地缓存Storage
20、简单描述下微信小程序的相关文件类型
项目目录结构主要有四种文件类型
1.1 wxml 是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构，内部主要是微信自己定义的一套组件
1.2 wxss 是一套样式语言，用于描述wxml的组件样式
1.3 js 逻辑处理，网络请求
1.4 json 小程序设置，如页面注册、页面标题及tabBar设置
21你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?
1.1 Gecko内核 Mozilla Firefox火狐浏览器 兼容性前缀 -moz-
1.2 WebKit内核 Chrome(blink是WebKit的分支)、Safari 兼容性前缀 -webkit-
1.3 Presto内核 Opera(欧朋原为：Presto，现为：Blink) 兼容性前缀 -o-
1.4 Trident内核 IE 兼容性前缀 -ms-
22、css清除浮动的几种方法
1）为浮动元素的父级盒加固定的高度——不够灵活
2）为浮动元素的父级盒加浮动——会产生新的浮动问题
3）为浮动元素的父级盒设置overflow属性，属性值可以是hidden|scroll|auto——可能会导致内容显示不完全；代码简洁
4）在浮动元素之后，跟浮动元素呈并列关系的位置，加一个空div，在空div上添加一个属性clear: both;——代码冗余；通俗易懂、书写方便
5）推荐方法：
给浮动元素的父元素添加.clearfix，(不会在结构上产生冗余代码，可多次重复使用)
.clearfix{ *zoom: 1; } /*处理ie6,7兼容*/
.clearfix:after{ content: ""; display: block; clear: both; }
//其他方法
1.1【.clr{clear:both;}】，设置了clear属性的元素，其上边框会紧贴着浮动元素的margin-bottom边界位置渲染，忽略其margin-top设置
1.2 空标签清浮动：【.clr{clear:both;height:0;overflow:hidden;}】，不推荐。
1.3 伪类after清浮动：【.clearfix:after{content:" ";clear:both;display:block;height:0;visibility:hidden;line-height:0;} .clearfix{zoom:1}】。
1.4 使用【display:table】。
1.5 使用overflow除visible，类似于激发haslayout。
1.6 使用浮动父元素清浮动。
23、关于Set结构，阅读下面的代码
问：打印出来的size的值是多少？为什么？
let s = new Set();
s.add([1]);
s.add([1]);
console.log(s.size);
打印出来的值是2，两个[1]定义的是两个不同的数组，在内存种的存储地址不同，所以是不同的值
24、es6:定义一个类Animal，通过传参初始化它的类型
如：“猫科类”。它有一个实例方法：run，run函数体内容可自行定义
Class Animal{
constructor(type){
this.type = type;
}
run(){
console.log("i can run");
}
}
25、利用module模块
实现两个模块A和B，A模块导出变量name，age和say方法。B模块只导入变量name和say方法，并且重命名name为nickname
A模块：
let name = 'tom';
let age = ()=>{console.log("age")};
let say = ()=>{console.log("say")};
export {name,age,say}
B模块：
import {name as nickname,say} from 'A'
26、判断字符串中出现次数最多的元素，并统计次数
let str = 'asdfghhgffffieekdnwolfhqnczeeesssg';
let obj = {};//存放每个字符的个数
let num = str.length;
for(let i=0;i<num;i++){
if(obj[str.charAt(i)]){
obj[str.charAt(i)] = parseInt(obj[str.charAt(i)])+1;//个数增加
}else{
obj[str.charAt(i)] = 1;//设置初始值 添加
}
}
let maxNum = 0;//次数
let maxDocument = null;//字符
for(let j in obj){
if(obj[j]>maxNum){
maxNum = obj[j];
maxDocument = j;
}
}
console.log('obj：',obj);
console.log('次数：',maxNum,'字符：',maxDocument);
27、MVC和MVVM的理解
MVC：
Model(模型)：是应用程序中处理应用程序数据逻辑的部分。
通常模型对象负责在数据库中存取数据
View(视图)：是应用程序中处理数据显示的部分。
通常视图是依据模型数据创建的
Controller(控制器)：是应用程序中处理用户交互的部分。
通常控制器负责从视图层读取数据，控制用户输入，并向模型发送数据
MVVM：
MVVM即Model-View-ViewModel的简写。即模型-视图-视图模型
模型(Model)：指的是后端传递的数据。
视图(View)：指的是所看到的页面。
视图模型(ViewModel)：是mvvm模式的核心，它是连接view和model的桥梁
它有两个方向：
一是将模型（Model）转化成视图(View)，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。
二是将视图(View)转化成模型(Model)，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。
28、vue-router有哪几种导航钩子（ 导航守卫 ）？
1.1 全局钩子函数：定义在全局的路由对象中
主要有：beforeEach：在路由切换开始时调用
afterEach：在每次路由切换成功进入激活阶段时调用
1.2 单独路由独享的钩子：可以在路由配置上直接定义beforeEnter钩子
1.3 组件的钩子函数：定义在组件的router选项中
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave
29、Promise对象
Promise对象是什么？三种状态是什么？成功时执行的方法，失败时执行的方法？
Promise对象是ES6（ ECMAScript 2015 ）对于异步编程提供的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。
Promise对象有三种状态：pending（进行中）、reslove（已成功）和reject （已失败）。
then方法：用于指定调用成功时的回调函数。
catch方法：用于指定发生错误时的回调函数。
30、怎么定义vue-router的动态路由？怎么获取传过来的动态参数？
定义：在router目录下的index.js文件中，对path属性加上/:id;
获取：使用router对象的params.id;
31、原生js ajax请求有几个步骤？分别是什么
//创建 XMLHttpRequest 对象
var ajax = new XMLHttpRequest();
//规定请求的类型、URL 以及是否异步处理请求。
ajax.open('GET',url,true);
//发送信息至服务器时内容编码类型
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//发送请求
ajax.send(null);
//接受服务器响应数据
ajax.onreadystatechange = function () {
if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) {
}
]
32、在CSS样式中常使用px、em，各有什么优劣，在表现上有什么区别？
px是相对长度单位，相对于显示器屏幕分辨率而言的。
em是相对长度单位，相对于当前对象内文本的字体尺寸。
px定义的字体，无法用浏览器字体放大功能。
em的值并不是固定的，会继承父级元素的字体大小，1 ÷ 父元素的font-size × 需要转换的像素值 = em值
33、解释下 CSS sprites原理，优缺点
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。
优点：
a. 减少网页的http请求
b. 减少图片的字节
c. 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名
d. 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。
缺点：
a. 在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂
b. CSS Sprites在开发的时候，要通过photoshop或其他工具测量计算每一个背景单元的精确位置
c. 在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片
34、split() join() 的区别
前者是将字符串切割成数组的形式，后者是将数组转换成字符串
35、get和post 的区别？
1. Get是不安全的，因为在传输过程，数据被放在请求的URL中；Post的所有操作对用户来说都是不可见的。
2. Get传送的数据量较小，这主要是因为受URL长度限制；Post传送的数据量较大，一般被默认为不受限制。
3. Get限制Form表单的数据集的值必须为ASCII字符；而Post支持整个ISO10646字符集。
4. Get执行效率却比Post方法好。Get是form提交的默认方法。
36、Vue组件间的参数传递
1.父组件与子组件传值
父组件传给子组件：子组件通过props方法接受数据;
子组件传给父组件：$emit方法传递参数
2.非父子组件间的数据传递，兄弟组件传值
$bus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适。（虽然也有不少人推荐直接用VUEX，具体来说看需求咯。技术只是手段，目的达到才是王道。）
37、添加 删除 替换 插入到某个节点的方法
1.1 创建新节点
createElement()//创建一个具体的元素
createTextNode()//创建一个文本节点
1.2 添加、移除、替换、插入
appendChild()//添加
removeChild()//移除
replaceChild()//替换
insertBefore()//插入
1.3 查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性
38、自定义指令（v-check、v-focus）的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？
全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。组件内定义指令：directives
钩子函数：bind（绑定事件触发）、inserted(节点插入的时候触发)、update（组件内相关更新）
钩子函数参数：el、binding
39、说出至少4种vue当中的指令和它的用法？
v-if：判断是否隐藏；
v-show:显示隐藏
v-for：数据循环出来；
v-bind:class绑定一个属性；
v-model：实现双向绑定
40、请说出vue.cli项目中src目录每个文件夹和文件的用法？
assets文件夹是放静态资源；
components是放组件；
router是定义路由相关的配置;
view视图；
app.vue是一个应用主组件；
main.js是入口文件
41、怪异盒模型box-sizing？弹性盒模型|盒布局?
在标准模式下的盒模型：盒子总宽度/高=width/height+padding+border+margin
在怪异模式下的盒模型下，盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，盒子总宽度/高度=width/height + margin
box-sizing有两个值一个是content-box，另一个是border-box。
当设置为box-sizing:content-box时，将采用标准模式解析计算；
当设置为box-sizing:border-box时，将采用怪异模式解析计算
42、简述几个css hack?
(1) 图片间隙
在div中插入图片，图片会将div下方撑大3px。
hack1：将<div>与<img>写在同一行。
hack2：给<img>添加display：block；
(2) dt li 中的图片间隙。
hack：给<img>添加display：block；
(3) 默认高度，IE6以下版本中，部分块元素，拥有默认高度（低于18px）
hack1：给元素添加：font-size：0；
hack2：声明：overflow：hidden；
(4) 表单行高不一致
hack1：给表单添加声明：float：left；height： ；border： 0；
43、vue常用的修饰符？
.prevent: 提交事件不再重载页面；
.stop: 阻止单击事件冒泡；
.self: 当事件发生在该元素本身而不是子元素的时候会触发；
.capture: 事件侦听，事件发生的时候会调用
44、vue-router 是什么?它有哪些组件？router-link有哪些属性？
vue用来写路由一个插件。router-link、router-view、Router-link的属性有：to,active-class,replace...
45、回答以下代码，alert的值分别是多少？
var a = 100;
function test(){
alert(a); //100
a = 10;
alert(a);//10
}
test();//调用函数执行
alert(a);//最后执行 10
因为a为全局变量，函数中改变的也是全局a
46、new操作符具体干了什么呢?
1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中
3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。
47、componentWillUpdate可以直接修改state的值吗？
不能，如果在shouldComponentUpdate和componentWillUpdate中调用了setState，此时this._pendingStateQueue != null，则performUpdateIfNecessary方法就会调用updateComponent方法进行组件更新。但是updateComponent方法又会调用shouldComponentUpdate和componentWillUpdate，因此造成循环调用，使得浏览器内存占满后崩溃
48、vue中如何获取dom?
ref="domName"
用法：this.$refs.domName
49、vue组件中data为什么必须是一个函数？
因为JavaScript的特性所导致，在component中，data必须以函数的形式存在，不可以是对象。
组件中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。
而单纯的写成对象形式，就是所有的组件实例共用了一个data，这样改一个全都改了。
50、冒泡排序算法
let arr = [5,4,6,2,7,1];
for(let i=0;i<arr.length-1;i++){
for(let j=0;j<arr.length-i-1;j++){
if(arr[j]>arr[j+1]){
let temp = arr[j+1];
arr[j+1] = arr[j];
arr[j] = temp;
}
}
}
console.log('arr',arr);//[1, 2, 4, 5, 6, 7]
51、Doctype作用，HTML5 为什么只需要写
doctype是一种标准通用标记语言文档类型声明，目的是告诉标准通用标记语言解析器要用什么样的文档类型定义DTD来解析文档，<!DOCTYPE>声明必须是HTML文档的第一行，位于html标签之前
52、如何实现浏览器内多个标签页之间的通信
1）使用 localStorage: localStorage.setItem(key,value)、localStorage.getItem(key)
2）websocket协议
3）webworker
53、响应式和自适应有什么区别?
响应式设计（Responsive design）：一个网站能够兼容多个终端—而不是为每个终端做一个特定的版本。
自适应设计（Adaptive Design）：是为同类别的物理设备建立三种不同的网页（PC），检测到设备分辨率大小后调用相应的网页。
54、Vue 中怎么自定义指令？
指令：分为全局指令和局部指令
//注册一个全局自定义指令 v-focus
Vue.directive('focus',{
//当绑定的元素插入到DOM中时...
inserted:function(el){
//聚焦元素
el.focus()
}
})
//局部注册
directive:{
focus:{
//指令的定义
inserted:function(el){
el.focus()
}
}
}
55、 什么是事件代理，它的原理是什么
事件代理：通俗来说就是将元素的事件委托给它的父级或者更外级元素处理 原理：利用事件冒泡机制实现的
优点：只需要将同类元素的事件委托给父级或者更外级的元素，不需要给所有元素都绑定事件，减少内存空间占用，提升性能; 动态新增的元素无需重新绑定事件
56、watch、methods 和 computed 的区别?
watch 为了监听某个响应数据的变化。
computed 是自动监听依赖值的变化，从而动态返回内容，主要目的是简化模板内的复杂运算。
所以区别来源于用法，只是需要动态值，那就用 computed ；需要知道值的改变后执行业务逻辑，才用 watch。
methods是一个方法，它可以接受参数，而computed 不能，computed 是可以缓存的，methods 不会。computed 可以依赖其他 computed，甚至是其他组件的 data。
57、break和continue语句的作用？
break语句 当前循环中退出
continue语句 继续下一个循环语句
58、b继承a的方法
原型链继承
构造函数继承
实例继承
组合继承
拷贝继承
寄生组合继承
59、列举浏览器对象模型中常用的对象，并列举window对象常用的方法至少五个
对象：Window，document，location，screen，history，navigator，screen
方法：Alert（），confirm（），prompt（），open（），close（），moveTo(),moveBy()。
60、vue自定义组件@click点击失效的原因和解决办法
原因：click事件作用于组件内部，如果组件内没有写click事件，便会无响应。
解决：
1.参照官方文档，可以用@click.native=“click”解决
2.可以用：将事件传递至组件内，也符合组件间的单向数据流，我就是这样解决的
主组件写法：
<v-nav :click="toggle"></v-nav>
被调用组件写法：
<div @click="click">...</div>
export default{
props:{
click:{
type:Function
}
}
}
3.使用$emit来实现事件传递
<div @click="_click"></div>
methods:{
_click(){
this.$emit("click");
}
}
61、 router的区别
1.$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。
2.$router是“路由实例”对象包括了路由的跳转方法，钩子函数等。
62、请描述一下 cookies，sessionStorage 和 localStorage 的区别
1.localStorage长期存储数据，浏览器关闭数据后不丢失；
2.sessionStorage数据在浏览器关闭后自动删除；
3.cookie是网站为了标识用户身份而存储在用户本地终端（Client Side）上的数据（通常经过加密）。cookie始终在同源的http请求中携带（即使不需要）都会在浏览器和服务器端间来回传递。sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存；
4.存储大小：cookie数据大小不会超过4K，sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或者更多；
5.有期时间：localStorage存储持久数据，浏览器关闭后数据不丢失，除非自动删除数据。sessionStorage数据在当前浏览器窗口关闭后自动删除。cookie 设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭；
63、说下行内元素和块级元素的区别？行内块元素的兼容性使用？（IE8 以下）
行内元素：会水平方向排列，不能包含块级元素，设置width无效，height无效，可设置line-height,margin上下无效，padding上下无效
块级元素：各占据一行，垂直方向排列，可设置width、height等属性,从新行开始结束接着一个断行
兼容问题：display:inline-block;*display:inline;*zoom:1;
64、ie和标准浏览器，有哪些兼容的写法？
let ev = ev || window.event;
document.documentElement.clientWidth || document.body.clientWidth;
let target = ev.srcElement || ev.target;
65、事件委托是什么？如何阻止事件冒泡？如何阻止默认事件？
事件委托:利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行
阻止事件冒泡:
ie:阻止冒泡ev.cancelBubble = true;
非IE ev.stopPropagation();
阻止默认事件:
(1)return false；
(2)ev.preventDefault()
66、简述下面页面跳转区别
wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch()的区别？
wx.navigateTo():保留当前页面，跳转到应用内的某个页面。不能跳转tabBar页
wx.redirectTo():关闭当前页面，跳转到应用内的某个页面。不能跳转tabBar页
wx.switchTab():跳转到tabBar页，关闭其他非tabBar页面
wx.navigateBack():关闭当前页面，返回上一页面或多级页面
可通过getCurrentPages()获取当前的页面栈，决定需要返回几层
wx.reLaunch():关闭所有页面，打开到应用内的某个页面
67、setTimeout、Promise、Async/Await 的区别
事件循环中分为宏任务队列和微任务队列
其中setTimeout的回调函数放到宏任务队列里，等到执行栈清空以后执行
promise.then里的回调函数会放到相应宏任务的微任务队列里，等宏任务里面的同步代码执行完再执行
async函数表示函数里面可能会有异步方法，await后面跟一个表达式
async方法执行时，遇到await会立即执行表达式，然后把表达式后面的代码放到微任务队列里，让出执行栈让同步代码先执行
68、小程序的声明周期函数
onLoad()页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数
onShow()页面显示/切入前台时触发
onReady()页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互
onHide()页面隐藏/切入后台时触发。 如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等
onUnload()页面卸载时触发。如 redirectTo 或 navigateBack 到其他页面时
69、react 生命周期函数
初始化阶段：
getDefaultProps:获取实例的默认属性
getInitialState:获取每个实例的初始化状态
componentWillMount：组件即将被装载、渲染到页面上
render:组件在这里生成虚拟的 DOM 节点
componentDidMount:组件真正在被装载之后
运行中状态：
componentWillReceiveProps:组件将要接收到属性的时候调用
shouldComponentUpdate:组件接受到新属性或者新状态的时候（可以返回 false，接收数据后不更新，阻止 render 调用，后面的函数不会被继续执行了）
componentWillUpdate:组件即将更新不能修改属性和状态
render:组件重新描绘
componentDidUpdate:组件已经更新
销毁阶段：
componentWillUnmount:组件即将销毁
70、Vue 组件中data 为什么必须是函数
组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。
71、forEach、for in、for of三者区别
forEach 用来遍历数组
for of 数组对象都可以遍历，历的是数组元素值
遍历对象需要通过Object.keys()
for in 一般用来遍历对象或json，遍历的是数组的索引（即键名key）
72、v-show和v-if指令的共同点和不同点？
共同点：都能控制元素的显示和隐藏；
不同点：实现本质方法不同
v-show：本质是通过控制css中的display设置为none，控制隐藏，只会编辑一次；
v-if是动态的向DOM树内添加或删除DOM元素，若初始值为false，就不会编译了，而且v-if不停的销毁和创建会比较销毁性能；
总结：如果要频繁切换某节点，使用v-show(切换开销比较小，初始开销较大)。如果不需要频繁切换某节点使用v-if（初始渲染开销较小，切换开销比较大）。
73、Vue的双向数据绑定原理是什么？
vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
74、canvas在标签上设置宽高和在style中设置宽高有什么区别？
canvas标签的width和height是画布实际宽度和高度，绘制的图形都是在这个上面。
而style的width和height是canvas在浏览器中被渲染的高度和宽度，还会出现被拉伸的效果，和设置的值不符合
如果canvas的width和height没指定或值不正确，就被设置成默认值
75、vue第一次页面加载会触发哪几个钩子？
beforeCreate,created,beforeMount,mounted
76、params和query的区别
传参可以使用params和query两种方式。
2、使用params传参只能用name来引入路由，即push里面只能是 name:’xxxx’,不能是path:’/xxx’,因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！。
3、使用query传参使用path来引入路由。
4、params是路由的一部分,必须要在路由后面添加参数名。query是拼接在url后面的参数，没有也没关系。
5、二者还有点区别，直白的来说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示。
77、vuex是什么？怎么使用？哪种功能场景使用它？
vue框架中的状态管理器
在main.js引入store 注入挂载
新建一个目录store.js，...导出export
场景：当页面应用中，组件之间的状态、音乐的播放、登录状态、加入购物车等
78、push()、pop()、unshift()、shift()的用处及返回值
push()方法是向数组末尾添加一个或者多个元素，并返回新的长度。
pop()方法删除数组的最后一个元素，把数组的长度减1，并且返回它被删除元素的值unshift()方法是向数组的开头添加一个或多个元素，并且返回新的长度。
Shift()方法用于把数组的第一个元素从其中删除，并返回被删除的值
79、window.onload和$(document).ready的区别
window.onLoad只会出现一次，$(document).ready能出现多次
window.onload需要等所有文件都加载完才开始加载，$(document).ready只需等文档结构加载完了就开始加载
80、哪些操作会造成内存泄露
内存泄露指任何对象在不再拥有或不再需要它之后依然存在
setTimeout第一个参数是字符串而不是函数的时候就会造成内存泄露
闭包
控制台日志
循环（两个对象彼此引用且彼此保留）
81、实现数组去重
// 数组去重
let arr = [1,1,2,3,2,3,5,6,7,8,8,7];
let narr = [];
function removeItem(arr){
for(let i=0;i<arr.length;i++){
// 判断narr中是否已存在该值
if(narr.indexOf(arr[i])==-1){
narr.push(arr[i]);
}
}
return narr;
}
console.log(removeItem(arr));//[1, 2, 3, 5, 6, 7, 8]
82、CSS3新增伪类有那些?
p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中。
83、 请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？
该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。
84、下面代码输出什么？
var output = (function(x){
delete x;//只针对对象属性，不会释放内存 间接中断对象的引用
return x;
})(0);//函数的自执行
console.log(output); //0
85、解释一下变量的提升
变量的提升是JavaScript的默认行为，这意味着将所有变量声明移动到当前作用域的顶部，并且可以在声明之前使用变量。初始化不会被提升，提升仅作用于变量的声明。
var x = 1;
console.log(x,y);//1 undefined
console.log(x,y,z);//z is not defined
var y = 2;
let z = 3;//不会提升
console.log(x,y,z);//1 2 3
86、解释一下严格模式(strict mode)
严格模式用于标准化正常的JavaScript语义。严格模式可以嵌入到非严格模式中，关键字'use strict'。使用严格模式后的代码应遵循JS严格的语法规则。例如，分号在每个语句声明之后使用。
87、Vue里面router-link在电脑上有用，在安卓上没反应怎么解决？
Vue路由在Android机上有问题，babel问题，安装babel polypill插件解决。 框架底层
88、vue更新数组时能够触发视图更新的数组方法
push()；pop()；shift()；unshift()；splice()；sort()；reverse()
89、created和mounted的区别
created(创建完成):在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted(挂载完成):在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
90、为什么要初始化CSS样式
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
91、display:none与visibility：hidden的区别？
display：none 不显示对应的元素(不占位)，在文档布局中不再分配空间（回流+重绘）
visibility：hidden 隐藏对应元素(占位)，在文档布局中仍保留原来的空间（重绘）
92、null，undefined的区别？
null 表示一个对象被定义，但是放了个空指针，转换为数值时为0
undefined 表示声明的变量未初始化，转换为数值时为NaN
typeof(null) //object
typeof(undefined) //undefined
93、同步和异步的区别？
同步的概念在操作系统中：不同进程协同完成某项工作而先后次序调整（通过阻塞、唤醒等方式），同步强调的是顺序性，谁先谁后。异步不存在顺序性。
同步：浏览器访问服务器，用户看到页面刷新，重新发请求，等请求完，页面刷新，新内容出现，用户看到新内容之后进行下一步操作。
异步：浏览器访问服务器请求，用户正常操作，浏览器在后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容。
94、请给出异步加载js方案，不少于两种
1）defer，只支持IE
2）async/await
3）创建script，插入到DOM中，加载完毕后callBack
95、项目做过哪些性能优化？
1、减少HTTP请求数
2、减少DNS查询
3、使用CDN
4、避免重定向
5、图片懒加载
6、减少DOM元素数量
7、减少DOM操作
8、使用外部JavaScript和CSS
9、压缩JavaScript、CSS、字体、图片等
10、优化CSS Sprite
11、使用iconfont
12、字体裁剪
96、vue-router如何定义嵌套路由？
主要是通过 children，它同样是一个数组
{
path:'/user',
component:user,
children:[
{
path:'file',
component:()=>import(...)//懒加载
}
]
}
97、媒体查询是什么?怎么使用？
媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式。
@media [not | only] media-type [and] ( media-condition){}
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
98、promise.all和promise.race的 区别
Promise.all可以将多个Promise实例包装成一个新的Promise实例。用于将多个Promise实例，包装成一个新的Promise实例。都成功才会返回成功
promise.race类似于Promise.all() ,区别在于 它有任意一个返回成功后，就算完成，但是 进程不会立即停止
99、import和require区别
遵循规范
require 是 AMD规范引入方式
import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法
调用时间
require是运行时调用，所以require理论上可以运用在代码的任何地方
import是编译时调用，所以必须放在文件开头
本质
require是赋值过程，其实require的结果就是对象、数字、字符串、函数等，再把require的结果赋值给某个变量
import是解构过程，但是目前所有的引擎都还没有实现import，我们在node中使用babel支持ES6，也仅仅是将ES6转码为ES5再执行，import语法会被转码为require