快手秋招

目录

一面： 

1、BFC ？ 两列等高 ？清除浮动 ？ 水平居中 ？rem和em区别 ？

     移动端1px问题及解决方案 ？ viewport ?

2、Http方法 ？ get 、post区别 ？ 前端缓存 ？Expires、Etag等是怎么设置的？

3、深克隆 （多种情况）

4、输出结果

5、输出结果

6、call apply bind 区别 ？ bind实现（原型链编程） ？传参数怎么实现？

7、异步？promise.all（）实现？下面输出结果？

8、函数柯里化？

9、找出最大差

10、防抖节流？ 性能优化？

11、vue ？ react？$.nextTick()?   $refs?  父子组件通信？  inject？ vuex原理？ vue-router？（三种模式区别）

12、构建工具？ webpack 用过哪些插件？

二面：

实现一个jq自定义事件，EventEmiter（）；on（）；emit（）；给回调函数传参数？

三面：

1、找出前十个质数并且优化，各种优化（包括变量接收、/2、开跟号）

2、promise原理、promise输出结果、实现promise.all() 

3、数组方法map和reduce和forEach区别

4、margin塌陷问题 给一段css代码 让说结果 、问为什么会有margin塌陷现象

5、display：none和visibility：hidden区别，联系重排重绘

6、重排重绘区别，改变字体或者字号会不会触发重排重绘

---

一面： 

目录

一面： 

1、BFC ？ 两列等高 ？清除浮动 ？ 水平居中 ？rem和em区别 ？

     移动端1px问题及解决方案 ？ viewport ?

2、Http方法 ？ get 、post区别 ？ 前端缓存 ？

3、深克隆 （多种情况）

4、输出结果

5、输出结果

6、call apply bind 区别 ？ bind实现（原型链编程） ？传参数怎么实现？

7、异步？promise.all（）实现？下面输出结果？

8、函数柯里化？

9、找出最大差

10、防抖节流？ 性能优化？

11、vue ？ react？$.nextTick()?   $refs?  父子组件通信？  inject？ vuex原理？ vue-router？（三种模式区别）

12、构建工具？ webpack 用过哪些插件？

二面：

实现一个jq自定义事件，EventEmiter（）；on（）；emit（）；给回调函数传参数？

---

 

1、BFC ？ 两列等高 ？清除浮动 ？ 水平居中 ？rem和em区别 ？

     移动端1px问题及解决方案 ？<meta> viewport ?

//移动端1px细线
//移动端的window有一个属性devicePixelRatio,表示物理像素和css像素之间比例
//在retina屏的iphone手机上, 这个值为2或3, css里写的1px长度映射到物理像素上就有2px或3px那么长.
//淘宝的flexible.js
//把veiwport宽度设置为实际设备的物理宽度， css里的1px不就等于实际1px长了。
//<meta name=”viewport”>里面的scale值指的是对ideal viewport的缩放, flexible.js检测到
//IOS机型, 会算出scale = 1/devicePixelRatio, 然后设置viewport

metaEl = doc.createElement('meta');
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
//devicePixelRatio=2时输出meta如下, 这样viewport与ideal viewport的比是0.5, 也就与设备物理像素一致

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

//另外html元素上的font-size会被设置为屏幕宽的1/10, 这样css可以以rem为基础长度单位进行改写,
//比如rem是28px, 原先的7px就是0.25rem. border的宽度能直接写1px.

function refreshRem() {
    var width = docEl.getBoundingClientRect().width;
    if (width / dpr > 540) { //大于540px可以不认为是手机屏
        width = 540 * dpr;
    }
    var rem = width / 10; 
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}

 

2、Http方法 ？ get 、post区别 ？ 前端缓存 ？Expires、Etag等是怎么设置的？

3、深克隆 （多种情况）

var obj = {
    a: 'hello',
    b: /abc/g,
    c: obj,
    d: function() {
    }
};

4、输出结果

var fullname = '1';
var obj = {
   fullname: '2',
   prop: {
      fullname: '3',
      getFullname: function() {
         return this.fullname;
      } 
   }
};

console.log(obj.prop.getFullname());//3

var test = function() {
         return this.fullname;
      } ;

console.log(test());//1

5、输出结果

    if([]==false){console.log(1)}//1
    if({}==false){console.log(2)}
    if([]==0){console.log(3)}//3
    if([1]==[1]){console.log(4)} //引用值不能相等

{} == true  //true 因为{}在toString时候会被转化为[object，object] 
[] == false //ture 因为[]=0
！[] == false //true  因为！会把[]强转为true
[] = ！[] //因为都是false

6、call apply bind 区别 ？ bind实现（原型链编程） ？传参数怎么实现？

7、异步？promise.all（）实现？下面输出结果？

setTimeout(function() {
  console.log(1)
}, 0);
new Promise(function executor(resolve) {
  console.log(2);
  for( var i=0 ; i<10000 ; i++ ) {
    i == 9999 && resolve();
  }
  console.log(3);
}).then(function() {
  console.log(4);
});
console.log(5); 

8、函数柯里化？

9、找出最大差

var array = [7, 8, 4, 9, 9, 15, 3, 1, 10];
// [7, 8, 4, 9, 9, 15, 3, 1, 10] would return `11` based on the difference between `4` and `15`
// Notice: It is not `14` from the difference between `15` and `1` because 15 comes before 1.

findLargestDifference(array);

function findLargestDifference (arr) {
//找出最大差  
}

10、防抖节流？ 性能优化？

11、vue ？ react？$.nextTick()?   $refs?  父子组件通信？  inject？ vuex原理？ vue-router？（三种模式区别）

12、构建工具？ webpack 用过哪些插件？

二面：

实现一个jq自定义事件，EventEmiter（）；on（）；emit（）；给回调函数传参数？

class EventEmiter {
    constructor() {
        this.events = {}
    }
    on(type, cb){
        if(this.events[type]) {
            this.events[type].push(cb)
        }else{
            this.events[type] = []
            this.events[type].push(cb)
        }
    }
    emit(type,...args) {
       // if(args.length>1) {
           // var list = this.events[type]
            //list.forEach((arg)=>{
              //  if(args.includes(arg)){
                //    arg()
               // }               
           //})
       // }else{
         let func =  async  ()=>{
            await  this.events[type].forEach((event)=>{
                //console.log(args)
                event.call(this,args)               
            })
           // await args.forEach((args)=>{
             //   arg.call(this,args)
            
        }
        func()

       // }
    }
}
const sss =new EventEmiter()
const text =function (txt) {console.log(txt)}
const text2= function (){ console.log('text2')}
sss.on('test',text)
sss.on('test',text2)
sss.emit('test', 'hello songshuangshaung')

三面：

1、找出前十个质数并且优化，各种优化（包括变量接收、/2、开跟号）

2、promise原理、promise输出结果、实现promise.all() 

3、数组方法map和reduce和forEach区别

4、margin塌陷问题 给一段css代码 让说结果 、问为什么会有margin塌陷现象

5、display：none和visibility：hidden区别，联系重排重绘

6、重排重绘区别，改变字体或者字号会不会触发重排重绘