HTML和css篇
1、说下你常用的几种布局方式
1.浮动布局
float+margin的方式
2.百分比布局
宽度百分比自适应
3.双飞翼布局（改进版）
.wrap{
padding: 0 200px;
position: relative;
}
.left{
width:200px;
height:400px;
background:red;
position: absolute;
top:0;
left:0;
}
.right{
width:200px;
height:400px;
background:green;
position: absolute;
top:0;
right:0;
}
.center{
width: 100%;
height:400px;
background:pink;
}
5.Flex布局
6.grid网格布局
2、实现水平居中的几中方式
1.绝对定位（父元素宽度未知）
.parent{
position: relative;
}
.child{
position: absolute;
left:50%;
}
2.使用text-align（父元素宽度未知）
.parent{
text-align: center;
}
.child{
display: inline-block;
width: 100px;
height: 100px;
background-color: aqua;
}
3.使用 margin:0 auto;(固定宽度)
4.使用transform(水平垂直居中)
.parent{
width: 300px;
height: 200px;
ackground: pink;
position: relative;
}
.child{
width: 100px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
}
3、animate和translate有没有用过，介绍一下常见的属性
animate属性：
animation-name：绑定到选择器keyframes名称
animation-duration 规定完成动画的时间,以秒或毫秒记
animation-iteration-count 动画播放的次数
transform属性：
translate(x,y) 2d平移
translate3d(x,y,z) 3d转换
scale(x,y) 2d缩放
rotate(deg) 2d旋转
rotate3d(deg) 3d旋转
skew(x-angle,y-angle) x轴和y轴的2d倾斜转换
transition属性（允许css属性在一定的时间内平滑过渡）
property:css属性，比如width或者color
duration:持续时间
delay:延迟
4、CSS实现宽度自适应100%，宽高16:9的比例的矩形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,html{
margin:0;
padding:0;
}
.b169 {
width: 100%;
height: 0;
padding-bottom: 56.25%; //实现的关键
position: relative;
background:red;
}
.b169>.innerb169 {
width: 100%;
height: 100%;
background-color: gainsboro;
position: absolute;
}
</style>
</head>
<body>
<div class="b169">
<div class="innerb169">your hstml</div>
</div>
</body>
</html>
5、如何实现左边两栏一定比例，左栏高度随右栏高度自适应
javscript篇
1、变量提升
2、说一下对闭包的理解，什么场景下会用到闭包
闭包：
闭包是在一个函数的主体内定义的另一个函数，一般有两种情况，一是函数作为返回值，二是函数作为参数传递，闭包的重要特性是即使在外部函数返回后，内部函数仍然可以访问外部函数的变量，因为外部函数的执行上下文不会被销毁。所以使用闭包会增加内存开销，在不需要使用的时候要即使清除，避免内存泄漏。
场景：
保护函数内的变量安全：如迭代器，生成器
在内存中维持变量：如缓存数据，柯里化
将函数关联到对象的实例方法
封装相关的功能集
3、说一下你对原型和原型链的了解，有几种方式可以实现继承，用原型实现继承有什么缺点，怎么解决？
原型和原型链：
在javascript中，每个对象都会在内部引用一个叫做prototype的对象，被称之为原型，而这个原型对象也会引用自己的原型对象，并以此类推，这个链式引用被称之为原型链，原型链的末尾是一个以null为原型的对象。而javascript就是通过原型链机制来实现继承的，当一个对象引用了不属于自身的属性时，就会向上查找，遍历原型链，直到找到该属性，如果没有找到，则说明该属性未定义。
实现继承的方式：
//构造父类
function Class(name){
this.name=name || "张三";
this.sleep=function(){
console.log(this.name+"正在睡觉！");
}
}
//原型方法
Class.prototype.eat=function(food){
console.log(this.name+"正在吃"+food);
}
（1）原型链继承（使用prototype,将父类的实例作为子类的原型）
function Wwp(){
}
Wwp.prototype=new Class();
Wwp.prototype.name="wwp";
var wwp=new Wwp();
console.log("1:"+wwp.name);
wwp.eat("fish");
wwp.sleep();
（2）构造继承
function Wwp(name){ //构造继承
Class.call(this);
this.name=name || "李四";
}
var wwp=new Wwp();
console.log(wwp.name);
//wwp.eat("fish");//不能继承原型属性
wwp.sleep();
（3）实例继承
function Wwp(name){
var clas =new Class();
clas.name=name || "李四";
return clas;
}
var wwp=new Wwp();
console.log(wwp.name);
wwp.eat("fish");
wwp.sleep();
（4）组合继承
优点：可以继承原型属性
function Wwp(name){
Class.apply(this);
this.name=name || "李四";
}
Wwp.prototype=new Class();
Wwp.prototype.constructor=Wwp; //修复构造函数指向
var wwp=new Wwp();
console.log(wwp.name);
wwp.eat("fish");
wwp.sleep();
（5）拷贝继承
function Wwp(){
var clas=new Class();
for(var p in clas){
Wwp.prototype[p]=clas[p];
}
Wwp.prototype.name=name || "李四";
}
var wwp=new Wwp();
console.log(wwp.name);
wwp.eat("fish");
wwp.sleep();
（6）寄生组合继承
function Wwp(name){ //寄生组合继承
Class.call(this);
this.name=name || "李四";
}
(function(){
var Super =function(){};
Super.prototype=Class.prototype;
Wwp.prototype=new Super();
})();
Wwp.prototype.constructor=Wwp; //修复构造函数指向
var wwp=new Wwp();
console.log(Wwp.prototype.constructor);
console.log(wwp.name);
wwp.eat("fish");//不能继承原型属性
wwp.sleep();
原型实现继承的缺点：
1.来自原型对象的引用属性是所有实例对象共享的。
2.创建子类实例时，不能向父类构造函数传参。
解决：
使用 【组合继承】或者 【寄生组合继承】
4、iframe的优缺点有那些？
优点：
1.iframe可以原封不动的把嵌入的网页展现出来.
2.如果有多个网页调用iframe，只需要修改iframe的内容，就可以实现对调用iframe的每个页面内容的更改。
3.增加复用性。
缺点：
1.页面比较多，不容易管理。
2.几个iframe都出现滚动条时，严重影响美观，且占据很大空间。
3.必须设置正确的链接，否则会形成框架套框架的情况。
4.设备兼容性差。
5.阻塞主页面的onloade事件。
5、ajax的原生写法？
function getAjax(url){
var _xhr=null;
if(window.XMLHttpRequest){
_xhr=new XMLHttpRequest();
}else if(window.ActiveXObject){
_xhr=new ActiveXObject("Msxml2.XMLHTTP");
}
_xhr.onread=function(){
if(Request.readyState===4 && Request.status===200){
console.log(_xhr.responseText);
}
}
_xhr.open("get",url,true);
_xhr.send();
}
6、为什么会有同源策略？
为了安全起见，如果没有同源策略，那各个网页的cookie或localStorage都可以用document.cookie被随意获取，用户信息就会被随意泄露。
7、前端处理跨域的方式有哪几种方式解决？
1.jsonp,只支持GET请求
2.CORS，w3c标准，全称为“跨域资源共享”
服务器端一般需增加：
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400
3.代理，通过服务端发送请求
4.window.postMessage(),可以向其他window对象发送消息，需要注意的得等到所有脚本执行完毕才能发送MessageEvent,否则会让后边的函数超时无法执行。
8、怎么判断两个对象是否相等？
function isObjValueEqual(a,b){
//返回该对象可枚举和不可枚举的属性的名称，该方法返回的是一个数组
var propa=Object.getOwnPropertyNames(a);
var propb=Object.getOwnPropertyNames(b);
//先判断长度是否相等，如果不相等，直接返回false
if(propa.length!=propb.length){
return false;
}else{ //然后遍历每个属性值是否相等，
for(var i=0;i<propa.length;i++){
var propName=propa[i];
console.log("propName"+propName)
console.log(a[propName],b[propName])
if(a[propName]!==b[propName]){
return false;
}
}
return true;
}
}
9、代码实现一个对象的深拷贝？
1.通过JSON实现
var newObj=JSON.parse(JSON.stringify(obj)); //会忽略函数对象和自定义原型属性
2.通过递归实现
function deepClone(obj){
var objArray=Array.isArray(obj)?[]:{}; //定义一个对象，来确定参数是数组还是对象
if(obj && typeof obj === "object"){ //如果对象存在且类型为对象
for(var key in obj){
if(obj.hasOwnProperty(key)){ //如果是原型链上的自定义属性，则不拷贝
//如果obj的子元素是对象，递归操作
if(obj[key] && typeof obj[key] === "object"){
objArray[key]=deepClone(obj[key]);
}else{
//如果不是，直接复制
objArray[key]=obj[key];
}
}
}
}
return objArray;
}
10、从发送一个URL地址到返回页面，中间发生了什么？
0.输入URL
1.解析URL
2.构造并发送http请求
3.http报文传输过程
4.服务器接收并处理http报文
5.服务器构造并发送响应报文
6.浏览器接收报文，并开始构造页面
7.浏览器发送静态资源请求
8.浏览器发送Ajax请求
9.页面构建完成
11、说下工作中你做过的一些性能优化处理的例子？
ES6篇
箭头函数中的this指向谁？
因为箭头函数实际上根本没有自己的this，所以导致内部的this实际上就是外层代码块的this，也就是父对象环境中的this。
如何实现一个promise，promise的原理，以及它的两个参数是什么？
var promise=new Promise(function(resolve,reject){
if("异步执行成功"){
resolve(value);
}else{
reject(error);
}
})
参数：
resolve：将promise对象的状态从“未完成”变为“成功”,在异步操作成功时调用，并将异步操作的结果，作为参数传递出去
reject：将promise对象的状态从“未完成”变为“失败”，在异步操作失败时调用，并将异步操作的error，作为参数传递出去
promise中第二个参数的reject中执行的方法和promise.catch()都是失败执行的，分别这么写有什么区别，什么情况下会两个都同时用到？
map和set有没有用到，如何实现一个数组去重，map数据结构有什么优点？
数组去重：
Set是一个类似于数组的数据结构，但是成员的值是唯一的，没有重复的值
new Set([1,2,3,2,4,5,4,3])
Map数据结构的优点：
传统对象Object本质上是键值对的集合，但是只能用字符串当作键，而Map这种是数据结构类似于对象，也是键值对的集合，但是“键”的范围不局限于字符串，各种类型的值都可以作为键
计算机网络篇
http、https、以及websocket的区别
http协议是用在应用层的协议，他是基于tcp协议的，http协议建立链接时需要经过三次握手才能发送信息,每一个request对应一个response.http协议分为短链接和长连接，长连接是指在一定时间内，客户端和服务端保持TCP链接不断开，但是必须由客户端发起请求，然后服务端响应请求返回结果，端口为80。
https协议是在http协议的基础上增加了SSL协议，SSL依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信加密，端口为443。
websocket协议也是一个应用层协议，产生的原因是为了解决http不能保持持久连接的问题，使得服务器可以主动向客户端推送信息，客户端也可以主动向服务端发送信息，真正的双向平等对话。
http常见的状态码，400，401，403状态码分别代表什么？
301：请求的网页已经永久移动到新的位置
302：临时移动，请求者应继续使用原有位置进行以后的请求
400：访问的页面域名不存在或者请求错误
401：请求要求身份验证
403：服务器拒绝请求
500：服务器内部错误
协商缓存和强缓存的区别
协商缓存：
强缓存：
说下计算机的相关协议？