jichu

1.左右布局，左边定宽，右边自适应，不少于三种方式

1.
.ad-banner {
    position: relative;
    .left-block {
        width: 60px;
        position: absolute;
    }
    .right-block {
        box-sizing: border-box;
        width: 100%;
        padding-left: 60px;
    }
}
2.
.ad-banner {
    position: relative;
    .left-block {
        width: 60px;
        float:left;
    }
    .right-block {
        box-sizing: border-box;
        width: 100%;
        padding-left: 60px;
    }
}
3.
.ad-banner {
    display: flex;
    .left-block {
        width: 60px;
    }
    .right-block {
        box-sizing: border-box;
        width: 100%;
    }
}

2.左右定宽，中间自适应

1.flex就直接写
2.
.middle{
 float:left;
width:100%;
padding:0 30px;
}
.left{
float:left;
width:30px;
margin-left:-100%;
}
.right{
float:left;
width:30px;
margin-left:-30px;
}

3.页面进度条如何实现

页面进度条是不可能算准确的，只能是通过预估来给用户提示，告诉用户我正在跑，没死机，如果单个页面倒是可以缓慢加载，突然加载至100%；

4.实现一个弹框

(function(window){
var Modal = function(ele){
  this.ele = ele;
  this.init();
  }
Modal.prototype.open=function(){}
Modal.prototype.close=function(){}
Modal.prototype.init=function(){
var self = this;
if（this.ele.addFunc){
  this.ele.addEventListener('click',function(e){
    e.preventDefault();
  })  
}
}
 window.Modal=Modal;
})(window)

5.输入一个URL，Enter之后发生了什么

1.先通过找浏览器的缓存和host，如果没有则找一路向上找，直到找到根dns，找到对应的IP并请求
2.进行TCP的三次握手，握手成功后，发起HTTP请求。一般当connection为keep-alive，表示持久链接，浏览器每隔45s发送一个TCP的keep-alive包来确定链接是否存在。nginx默认75s没有请求则断开。
3.浏览器开始解析页面，先解析HTML页面，当遇到js/css/img时会发送请求，同步代码解析，所以，一般js放在html最后获取解析，如果放在html前部，最好加defer进行解析。生成对应的HTML的dom树和CSS的CSS规则树。结合为渲染树。根据渲染树计算节点并进行布局。
根据计算好的节点绘制页面，TCP四次🙋断开链接。

6.玩

function P(){}
P.prototype.a = 'a';
function C(){}
C.prototype = new P();
var obj1 = new C();
通过obj1来进行修改a
1.obj1. __ proto __ .a = 'b'
2.obj1.constructor.prototype.a='b'

说一下jpg\png\gif
jpg:是经过压缩的图片，不支持动图，不支持透明，一般是产品图或者banner图，经常换
png：无压缩，支持透明，一般是logo图等小图。

7.200,301,302,304,400,404,500,503

100:服务器接收请求，客户必须继续发出请求
200:成功状态码，表示成功请求到数据
301:永久重定向，当请求为此code时，将请求引至其他页面
302:临时重定向
304:not Modified，没有修改，一般协商缓存会有此提示
400:请求的参数有错误
403:nginx请求失败
404:请求的url有错误
500:服务器内部错误
502:错误网关
503:服务器请求错误，服务不可用
504:一般是nginx超时错误

8.CSS 动画

transition：过渡
animation: 动画
transform：变形
animation：test 1s linear infiniter
@keyframe test 里边有两种，一种是from to另一种是百分比
transition: all 2s 延续时间延迟时间，放在hover内，不会有收缩回去的效果，要放在对应的box内有比较好的效果
transform：主要包括旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。

9.两个界面都是100个元素，那么为什么加载快慢不一致？怎么改进？

虚拟DOM其实已经解决了这个问题，但如果有这样的性能问题，可以等数据全拿到后，一次性innerHTML或者先display：none，往ul里面进行插入li，在display:block;这样就reflow,repaint两次了。

10.说一下二分查找

10.快速排序

11.说一下你了解的es6

let, const是块级作用域，一个是可以修改的值，一个是不可修改的值。ES5中只有函数作用域和全局作用域，循环中，变量的值容易泄漏为全局作用域中的值，ES6新增里块级作用域，外部作用域无法获取内部作用域中的值。
箭头函数：看上去是匿名函数的一种简写，但实际上他与匿名函数最大的不同在于箭头函数内部的this是词法作用域，由上下文确认，再也不用之前那种hack的写法that=this，也无法用call和apply来改变this的指向

12.写一个bind方法

Function.prototype.copyBind = function (){
var self = this;
var that = [].slice(0,1).call(arguments)
self = Arrary.prototype.slice.call(arguments,0,1);
var args = [].slice(1).call(arguments);
return function(){
var newArgs = [].slice(0).call(arguments);
self.call(that,newArgs.concat(args));
}
}

13.Promise

promise外部无法改变它的状态，那么内部能改变它的状态吗？

14.记忆化斐波那契函数（Memoization）

function fib(n, a=1,b=1){
  if(n<2){
    return b;
  }
  return fib(n-1,b , a+b)
}

15.创建 “原生(native)” 方法

console.log('hello'.repeatify(3)); // hellohellohello

String.prototype.repeatify = String.prototype.repeatify || function(times){
      var result = '';
      for(var i = 0 ; i < times; i++){
          result += this;
        }
    return result;
}

16.同字母异序

isAnagram("anagram", "nagaram") // => return true.
isAnagram("rat", "car") // => return false.

 function isAnagram(data){
  var dataArr = data.split('');

}

17.写一个闭包

 var cal = counter();
 var cal2 = counter();
   function counter(){
       var num = 0;
       function add(){
           return ++num;
        }
        return add;
   }
   cal();   //num=1
   cal();   //num=2
   cal2();   //num=1
   cal();   //num=3

18.继承

function Person(name){
    this.name=name;
}
Person.prototype.eat=function (food){console.log('eat'+food);}
function Child(pName,cName){
    Person.call(this,pName);
    this.cName=cName;
}
Child.prototype = new Person();
Child.prototype.constructor = Child;
好处：可以共享父元素的prototype，也可以向父元素传参数。
坏处：需要构造函数new两次

function copyPrototype(person, child){
  var copyPrototype = Object.create(person.prototype); //复制父类superObj的原型对象
  copyPrototype.constructor = child; //constructor指向子类构造函数
  child.prototype = copyPrototype;//再把这个对象给子类的原型对象
}
function Person(name){
this.name = name;
this.color=[1,2]
}
function Child(name){
Person.call(this,name);
}
copyPrototype(Person,Child)
var s1 = new Child('childsss');
好处：不需要new两次以及前边的所有好处
Object.create是ES6为了规范原型继承而提出的方案
function object(o){
function f(){}
f.prototype = o;
return new f()
}