小米web前端开发实习生面试

一面

盒模型

• 标准盒模型
• IE盒模型
• box-sizing以及其属性

position：relative和absolute

position：absolute 是相对于static定位以外的第一个父元素进行定位。

实现水平垂直居中的方法

我回答了3种

• flex布局

display: flex;
align-items:center;
justify-content:center;

如何清除浮动

我回答了两种方法

rem和em

• 当使用 rem 单位，他们转化为像素大小取决于页根元素的字体大小，即 html 元素的字体大小。 根元素字体大小乘以你 rem 值。 例如，根元素的字体大小 16px，10rem 将等同于 160px，即 10 x 16 = 160。
• 当使用em单位时，像素值将是em值乘以使用em单位的元素的字体大小。 例如，如果一个 div 有 18px 字体大小，10em 将等同于 180px，即 10 × 18 = 180。
  http://caibaojian.com/rem-vs-em.html

闭包

就问了一下概念，问我平时有没有用到过闭包（我说几乎没有）

执行上下文 this

箭头函数的this执行问题

var obj = {
       say(){
                console.log(this);
       },
      say2:()=>{
                console.log(this);
       }   
}
var a = obj.say;
a();              //window
obj.say();     //obj
obj.say2();   //window
obj.say2.bind(obj);   //window

箭头函数的 this
箭头函数的 this是不进行绑定的，即就是 通过call、apply、bind是不能改变其 this指向的

箭头函数的 this是由定义时外围最接近一层的非箭头函数的 this来决定的，也就是平常所说的箭头函数的this是从上层作用域中去找的，一直找不到的话即为window.

var name = 'window';

var person1 = {
  name: 'person1',
  foo1: function () {
    console.log(this.name)
  },
  foo2: () => console.log(this.name),
  foo3: function () {

    return function () {
      console.log(this.name)
    }
  },
  foo4: function () {

    return () => {
      console.log(this.name)
    }
  }
}

var person2 = { name: 'person2' }

person1.foo1();  //1
person1.foo1.call(person2);  //2

person1.foo2();   //window
person1.foo2.call(person2);   //window

function test(){ console.log(this.name);}
test()
test.call()
person1.foo3()  ();  //  window
person1.foo3.call(person2)();  //  window
person1.foo3().call(person2);   //  2
 
person1.foo4()();    //1 
person1.foo4.call(person2)   ();  //  2
person1.foo4().call(person2);  //1

手写原型链，实现在obj上找到protoName的方法

hasOwnProperty() 方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性（也就是，是否有指定的键）。

function findProp(obj, propName) {
        
    while (1) {
        if (obj === null) {
            return undefined;
        }
        if (obj.hasOwnProperty(propName)) {
            return propName;
        }
        obj = obj.__proto__;

    }
}


function Person() {}
Person.prototype.name = '111';
var person1 = new Person();
const result = findProp(person1, 'name');

手写promise.all()

 Promise.property.all = function (iterators) {
        const promises = Array.from(iterators);
        const len = promises.length;
        let count = 0;
        let resultList = [];
        return new Promise((resolve,reject)=>{
            promises.forEach((p,index) =>{
                Promise.resolve(p)
            .then((result)=>{
                count++;
                resultList[index] = result;
                if(count === len){
                    resolve(resultList);
                }
        })
        .catch(e=>{
            reject(e);
        })
        })
        })
    }

简单说一下你理解的react

react 是一个用于构建用户界面的 js 库，它的特点是声明式编程、组件化开发和多平台适配。
其中声明式编程就是我们只需要维护自己的状态，当状态发生改变时，react就会根据最新的状态去渲染UI 界面
有虚拟dome
虚拟dom其当于是在 js 和 真实dom之间的一个缓存。然后利用 diff算法避免没有必要的dom操作。具体来说就是在第一次渲染真实dom之前，react在内存中生成一个与真实 dom一样的虚拟dom；当state或props发生变化时，会再次生成一个新的虚拟dom树，然后通过对比找出新旧虚拟dom树的差异，然后对这些差异做一次批处理，也就是将差异更新到真实的dom上。
这样做的好处就是提高了渲染速度，因为每次更新的话，是只更新有差异的部分，而不是全部更新。但是这样也会导致一个问题就是初次加载页面会很慢，因为会多一次虚拟dom的计算
这时候，面试官就说其实这个初次加载页面时间还是在s内的，可以忽略不计，但是真正影响初次加载react项目时间很长的原因是什么呢？
react首屏页面加载性能优化记录