Shopee前端一面凉经

新鲜出炉刚刚面完。

个人研究和项目方向与前端毫无关系所以问的内容偏基础，参考价值可能不太大。

1. css 中 position 属性可以设置为哪些值？

->追问：设置成inherit，initial，unset之后的position是怎样的？

2. 布局题：使用flex布局模型，用 display: flex 实现一个三栏布局，左右定宽 100px，中间自适应。

3. 跨域：追问->怎么解决浏览器的xhr跨域请求限制？

    a.test.shopee.com
    b.test.shopee.com
    c.shopee.io
    
    a网站下是否能访问b域名下: 
    -<img src="http://b.test.shopee.com/abc.png"/>
    -xhr请求b域名

    a网站下，请求c服务
    -xhr请求c域名

4. 根据代码写输出

    (function(){
        var x = y = 1;
    })();
    var z;
    
    console.log(y); // 1
    console.log(z); // undefined
    console.log(x); // ReferenceError

5. 根据代码写输出

    var obj = {x:1}
    function foo(o) {
        o.x = 2;
        o = 100;
    }
    foo(obj);

6. JSON.stringify：输出的foo的key是什么？

    let foo={}
    let obj = {}
    foo[obj]='hello'
    
    console.log(JSON.stringify(foo))

7. this指向问题：

    var a = 10
    var obj = {
      a: 20,
      say: () => {
        console.log(this.a)
      }
    }
    obj.say() 
    var anotherObj={a:30} 
    obj.say.apply(anotherObj)

8. 原型链：

    function Parent() {
      this.a = 'Parent'
    }
    
    function Child() {
      this.a = 'Child'
    }
    
    Function.prototype.print = function() {
      console.log(this.a)
    }
    
    Parent.print()
    Child.print()
    
    var p = new Parent()
    p.print()

9. 事件循环：

 console.log(1);
    
    setTimeout(() => {
      console.log(2);
      Promise.resolve().then(() => {
        console.log(3)
      });
    });
    
    new Promise((resolve, reject) => {
      console.log(4)
      resolve(5)
    }).then((data) => {
      console.log(data);
    })
    
    setTimeout(() => {
      console.log(6);
    })
    
    console.log(7);

10. HTTP2.0与HTTP1.1的区别。

->HTTP2.0的多路复用原理是什么？

11. cookie可以携带什么属性？

->HttpOnly属性的作用？

12. 单页面应用有什么缺点？

13. 代码优化（求解答！）

    const getUserTips = (userType, status) => {
        // normal user
        if(userType === 1) {
            if(status === 1) {
                return 'normal user'
            } else if(status === 2) {
                return 'frozen user'
            } else {
                return 'unknown user'
            }
        } else if(userType === 2) {
        // vip user 
            if(status === 1) {
                return 'normal vip user'
            } else if(status === 2) {
                return 'vip user forever'
            } else {
                return 'unknown vip user'
            }
        } else {
            return 'unknown status user'
        }
    }

14. 简单编程：打印红绿灯: 打印red，停10s，打印yellow，停2s，打印 green 停 5s。继续打印red，停10s...，以此类推循环5次。

大概就是以上内容，可能有小知识点遗漏了。

#面经##Shopee##前端工程师##校招#