一．盒模型
盒模型的组成，由里向外content，padding，border，margin。
盒模型有两种标准，一个是标准模型 （width+border+padding ），一个是IE模型（width）。
/* 标准模型 / box-sizing:content-box;
/IE模型*/ box-sizing:border-box;
二．xml和json的区别
1、读取的方式不一样。XML是使用XML DOM来循环遍历文档，JSON可以通过JSON.parse方法将json字符串转化为JavaScript可解析的格式。
2、格式不一样，XML的格式是对便签类似于HTML便签一样，而JSON是key/value的格式。
JSON的优点：
1、JSON更小，相同的数据量，文件size比XML小。
2、更快，读写的速度比XML快。
3、更容易解析，因为json的格式与JavaScript的格式类似，所以将json转化为js可读的格式的时候更加容易。
三．内存泄露
闭包、定时器、
https://zhuanlan.zhihu.com/p/67843006
四．所有浏览器总共有哪几种内核？
1、Trident内核：IE最先开发或使用的，也称IE内核，360浏览器使用的也是IE内核；
2、Webkit内核：谷歌chrome浏览器最先开发或使用，也叫谷歌内核，枫树浏览器、太阳花使用的也是谷歌内核；
3、Gecko内核： Netscape6开始采用的内核，后来的Mozilla FireFox (火狐浏览器) 也采用了该内核，K-Meleon浏览器也是使用这种内核；
4、Presto内核：目前只有Opera浏览器采用该内核此外，由于IE浏览器在国内的普及率非常高，所以造成了很多网上银行和支付系统只支持IE的Trident内核，其他浏览器访问根本无法进行正常支付和转账等业务。这就造成了经常在网上购物的人离不开Trident内核的IE浏览器。但是Trident内核的速度和兼容性上又是在比不上Chrome浏览器的WebKit内核和Firefox浏览器的Gecko内核。于是双核浏览器应运而生，比如傲游、枫树浏览器（ChromePlus）、搜狗高速浏览器。
五．从一个url地址到最终页面渲染完成，发生了什么？
1.DNS解析：将域名地址解析为ip地址
-浏览器DNS缓存
-系统DNS缓存
-路由器DNS缓存
-网络运营商DNS缓存 （移动 联通）
-递归搜索： blog.baidu.com
- .com域名下查找DNS解析
- .baidu域名下查找DNS解析
- blog域名下查找DNS解析
- 出错了
- TCP连接： TCP三次握手
-第一次握手，由浏览器发起，告诉服务器我要发送请求了
-第二次握手。由服务器发起。告诉浏览器我准备接受了，你赶紧发送吧
-第三次握手，由浏览器发送，告诉服务器，我马上就发了，准备接受吧 - 发送请求
-请求报文：http协议的通信内容 - 接受响应
-响应报文 - 渲染页面
-遇见http标记，浏览器调用HTML解析器解析成Token并构建成dom树
-遇见style/link标记，浏览器调用css解析器，处理css标记并构建cssom树
-遇到script标记，调用javascript解析器，处理script代码，（绑定事件，修改dom树/cssom树）
-将dom树和cssom树合并成一个渲染树
-根据渲染树来计算布局，计算每个节点的几何信息（布局）
-将各个节点颜色绘制到屏幕上（渲染）
注意：这五个步骤不一定按照顺序执行，如果dom树或cssom树被修改了，可能会执行多次布局和渲染
往往实际页面中，这些步骤都会执行多次的 - 断开连接：TCP四次挥手
第一次挥手：由浏览器发起的，发送给服务器，我东西发送完了（请求报文），你准备关闭吧
第二次挥手：由服务器发起的，告诉浏览器，我东西接受完了（请求报文），我准备关闭了，你也准备吧
第三次挥手：由服务器发起，告诉浏览器，我东西发送完了(响应报文)，你准备关闭吧
第四次挥手：由浏览器发起，告诉服务器，我东西接受完了，我准备关闭了（响应报文），你也准备吧
六．cookie、localStorage、sessionStorage的区别
Cookie:
● 存储用户信息，获取数据需要与服务器建立连接。
● 可存储的数据有限，且依赖于服务器，无需请求服务器的数据尽量不要存放在cookie中，以免影响页面性能。
● 可设置过期时间。
localStorage：
● 存储客户端信息，无需请求服务器。
● 数据永久保存，除非用户手动清理客户端缓存。
● 开发者可自行封装一个方法，设置失效时间。
sessionStorage：
● 存储客户端信息，无需请求服务器。
● 数据保存在当前会话，刷新页面数据不会被清除，结束会话（关闭浏览器、关闭页面、跳转页面）数据失效。
七．Vue的生命周期
beforeCreate：在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法
created：data 和 methods都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作
beforeMount：执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的
mounted：执行到这个钩子的时候，就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行
beforeUpdate： 当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步
updated：页面显示的数据和data中的数据已经保持同步了，都是最新的
beforeDestory：Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于可用状态。还没有真正被销毁
destroyed： 这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于不可用状态。组件已经被销毁了。
一般created阶段进行ajax请求
八．created和mounted的区别
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
九．computed和watch的区别
计算属性computed :
1.支持缓存，只有依赖数据发生改变，才会重新进行计算
2.不支持异步，当computed内有异步操作时无效，无法监听数据的变化
3.computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
4.如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
5.如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。
侦听属性watch：
1.不支持缓存，数据变，直接会触发相应的操作；
2.watch支持异步；
3.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
4.当一个属性发生变化时，需要执行对应的操作；一对多；
5.监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，
immediate：组件加载立即触发回调函数执行，
deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。
十．普通函数和箭头函数的区别
箭头函数是匿名函数，不能作为构造函数，不能使用new。 箭头函数不绑定arguments，取而代之的是用rest参数...解决 箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值。 箭头函数通过call()或apply()方法调用一个函数时，只传入了一个参数，对this并没有影响。 普通函数（谁调用我，我的this就指向谁）
十一．svn和git
十二．页面优化
雪碧图、懒加载、减少http请求、keep alive
十三．防抖和节流
//防抖函数：一个需要频繁触发的函数，在规定时间内，只让最后一次生效，前面的不生效
function debounce(fn, delay) {
var timer = null;
//清除上一次延时器
return function () {
clearTimeout(timer);
//重新设置新的延时器
timer = setTimeout(function () {
fn.apply(this)
}, delay)
}
}
function ff2() {
console.log('防抖')
}
document.getElementById('box2').onclick = debounce(ff2, 500)
/*
函数节流：一个函数执行一次后，只有大于设定的执行周期后才会执行第二次。
有个需要频繁触发的函数，出于优化性能角度，在规定时间内，只让函数触发的第一次生效，后面不生效
*/
/* 节流函数
@param fn 要被节流的函数
@param delay 规定的时间
*/
function throttle(fn, delay) {
//记录上一次函数触发的时间
var lastTime = 0;
//记录当前函数触发的时间
return function () {
var nowTime = Date.now();
if (nowTime - lastTime > delay) {
//修正this指向问题
fn.call(this);
lastTime = nowTime
}
}
}
function ff() {
console.log('节流')
}
document.getElementById('box').onclick = throttle(ff, 1000)
addEventListener('scroll', throttle(ff, 1000))
下面一些问题可自行百度查找答案
十四．数组方法（排序、去重）、字符串
toString() 把数组转换为数组值（逗号分隔）的字符串
join() 将所有数组元素结合为一个字符串，可以规定分隔符：join("*")
pop() 从数组中删除最后一个元素，方法返回删除元素的值。
push() 在数组结尾处向数组添加一个新的元素，方法返回新数组的长度
shift() 删除首个数组元素，方法返回被删除元素的值
unshift() 在开头向数组添加新元素，方法返回新数组的长度
splice() 方法可用于向数组添加新项
let arr = ['1','2','3','4']
arr.splice(2,0,'foo','bar')
console.log(arr) //['1', '2', 'foo', 'bar', '3', '4']
第一个参数（2）定义了应添加新元素的位置，
第二个参数（0）定义应删除多少元素，
其余参数（'foo', 'bar'）定义要添加的新元素。
concat() 合并现有数组来创建一个新数组，方法不会更改现有数组，会返回一个新数组
slice() 从开始参数园区元素，直到结束参数为止
let arr = ['1','2','3','4']
arr.slice(1,3) //返回['2','3'] 不会改变原数组
十五．链式调用
例如：
$('div’).css('color', 'red').show();
优点是：链式调用这种风格有助于简化代码的编写工作，让代码更加简洁、易读，同时也避免多次重复使用一个对象变量
十六．深拷贝和浅拷贝 浅拷贝拷贝的是地址值，
深拷贝： JSON.parse(JSON.stringify(obj)) Object.create(obj)
十七．事件循环
先执行主线程上的任务，主线程的任务执行完，如果有微任务（new promise().then nextTick），先执行微任务，所有微任务执行完再执行宏任务（setTimeOut setInterval）。
十八．css画三角形、梯形
示例三角形：
<div class="box"></div>
.box{
width:0;
height:0;
border:10px solid;
border-color: transparent transparent red transparent;
/* 边框颜色对应四个位置 上 右 下 左 ，三角的一条边有颜色，其余三边设置为透明*/
}
//梯形分为左中右三个部分，左右两边是三角形，中间是长方形。
<span class="box1"></span>
<span class="box2"></span>
<span class="box3"></span>
.box1{
display:inline-block;
width:0;
height:0;
border:10px solid;
border-color: transparent red red transparent;
}
.box2{
width:20px;
height:20px;
display:inline-block;
background:red;
}
.box3{
display:inline-block;
width:0;
height:0;
border:10px solid;
border-color: transparent transparent red red ;
/* 边框颜色对应四个位置 上 右 下 左 ，三角的一条边有颜色，其余三边设置为透明*/
}
十九．Flex布局
容器的属性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
项目的属性
order
flex-grow
flex-shrink
flex-basis
flex
align-self
二十．!important和max-width
width:100px!Important; max-width:80px; 最后宽度为80px
二十一．页面安全问题
二十二．ES6的promise、解构赋值
二十三．jquery中ajax请求
$.ajax({ url: “”; type:”get/post” data: ; beforeSend: success: function(){ }; error:function(){ } })
二十四．时间戳
Date.now()
new Date().getTime()
new Date().valueOf()
二十五．Vue父子组件的created和mounted执行的先后顺序
执行顺序
父组件 created
子组件 created
子组件 mounted
父组件 mounted
二十六．兄弟、父子组件之间如何传递数据
父向子传值：v-bind 属性绑定
子向父传值：v-on 事件绑定
兄弟组件之间共享数据：EventBus
- $on 接收数据的那个组件
- $emit 发送数据的那个组件
vuex传值
二十七．定时器
setTimeout(()=>{},1000)
二十八．v-if和v-show的区别
v-show 只编译一次
v-if 不停的销毁和创建
