一面

盒模型

• 標(biāo)準(zhǔn)盒模型
• IE盒模型
• box-sizing以及其屬性

position：relative和absolute

position：absolute 是相對于static定位以外的第一個父元素進(jìn)行定位。

實現(xiàn)水平垂直居中的方法

我回答了3種

• flex布局

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

如何清除浮動

我回答了兩種方法

rem和em

• 當(dāng)使用 rem 單位，他們轉(zhuǎn)化為像素大小取決于頁根元素的字體大小，即 html 元素的字體大小。 根元素字體大小乘以你 rem 值。 例如，根元素的字體大小 16px，10rem 將等同于 160px，即 10 x 16 = 160。
• 當(dāng)使用em單位時，像素值將是em值乘以使用em單位的元素的字體大小。 例如，如果一個 div 有 18px 字體大小，10em 將等同于 180px，即 10 × 18 = 180。
  http://caibaojian.com/rem-vs-em.html

閉包

就問了一下概念，問我平時有沒有用到過閉包（我說幾乎沒有）

執(zhí)行上下文 this

箭頭函數(shù)的this執(zhí)行問題

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

箭頭函數(shù)的 this
箭頭函數(shù)的 this是不進(jìn)行綁定的，即就是 通過call、apply、bind是不能改變其 this指向的

箭頭函數(shù)的 this是由定義時外圍最接近一層的非箭頭函數(shù)的 this來決定的，也就是平常所說的箭頭函數(shù)的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

手寫原型鏈，實現(xiàn)在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 是一個用于構(gòu)建用戶界面的 js 庫，它的特點是聲明式編程、組件化開發(fā)和多平臺適配。
其中聲明式編程就是我們只需要維護(hù)自己的狀態(tài)，當(dāng)狀態(tài)發(fā)生改變時，react就會根據(jù)最新的狀態(tài)去渲染UI 界面
有虛擬dome
虛擬dom其當(dāng)于是在 js 和 真實dom之間的一個緩存。然后利用 diff算法避免沒有必要的dom操作。具體來說就是在第一次渲染真實dom之前，react在內(nèi)存中生成一個與真實 dom一樣的虛擬dom；當(dāng)state或props發(fā)生變化時，會再次生成一個新的虛擬dom樹，然后通過對比找出新舊虛擬dom樹的差異，然后對這些差異做一次批處理，也就是將差異更新到真實的dom上。
這樣做的好處就是提高了渲染速度，因為每次更新的話，是只更新有差異的部分，而不是全部更新。但是這樣也會導(dǎo)致一個問題就是初次加載頁面會很慢，因為會多一次虛擬dom的計算
這時候，面試官就說其實這個初次加載頁面時間還是在s內(nèi)的，可以忽略不計，但是真正影響初次加載react項目時間很長的原因是什么呢？
react首屏頁面加載性能優(yōu)化記錄