货拉拉前端面经

（工作经验：不到一年，难度应该是校招水平）

一面：

1、做个自我介绍吧，为什么这个，为什么那个, 你前端的学习路线是怎么样的？

2、DOM编程

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <p>4</p>
</ul>

不可以改变html文档，只可以使用DOM+CSS：

（1）将最后一个 li 的文字颜色设置为 red，至少使用3种方法

（2）将 p 去除，至少使用3种方法

（3）实现三栏布局，至少使用3种方法（补充问题：flex=1 是哪些内容的缩写）

（4）点击每一个 li ，输出对应的数字，使用

3、实现一个sum函数，参数数量任意，例子： sum( 1,2,3 ) , 输出 6

// 递归写法（我也不知道我的第一想法为什么是递归...）
function sum(a, ...args) {
    if(args.length === 0) return a;
    let b = args.shift();
    return a + sum(b, ...args);
}

// 迭代写法
function sum(...args) {
    let res = 0;
    for(let i of args) res += i;
    return res;
}

4、假如上一问的sum函数计算时耗时很大，如何使得第一次运行后再次计算的时间大大减少？

我使用了个Map 进行缓存。

5、我们不希望这个缓存消耗的空间不断变大，请实现一个LRU缓存置换算法

 class ListNode {
    constructor(key, val) {
        this.key = key;
        this.val = val;
        this.pre = null;
        this.next = null;
    }
}

var LRUCache = function(capacity) {
    this.size = capacity;
    this.map = new Map();
    this.head = new ListNode(null, null);
    this.tail = new ListNode(null, null);
    this.head.next = this.tail;
    this.tail.pre = this.head;
};

LRUCache.prototype.get = function(key) {
    if(!this.map.has(key)) return-1;
    let val = this.map.get(key).val;
    this.put(key,val);
    return val;
};

LRUCache.prototype.put = function(key, value) {
    if(!this.map.has(key)) {
        if(this.map.size === this.size) {
            let node = this.tail.pre;
            let k = node.key;
            this.tail.pre = node.pre;
            node.pre.next = this.tail;
            node.pre = null;
            node.next = null;
            node = null;
            this.map.delete(k);
        }
        let node = new ListNode(key, value);
        node.next = this.head.next;
        node.pre = this.head;
        node.next.pre = node;
        node.pre.next = node;
        this.map.set(key,node);
    }
    else {
        let node = this.map.get(key);
        node.val = value;
        if(node.pre !== this.head) {
            node.pre.next = node.next;
            node.next.pre = node.pre;
            node.pre = this.head;
            node.next = this.head.next;
            node.pre.next = node;
            node.next.pre = node;
        }
    }
};

6、讲下this的指向，并说下这个程序的输出，为什么？（题目忘记了）

7、Vue组件间是如何通信的？

8、Vue2 的数据劫持如何实现的，有什么缺陷吗？ Vue3的是如何实现的？

9、说下什么是跨域问题？如何解决跨域问题？

10、讲下TCP三次握手的过程？稍微详细些

11、在浏览器搜索栏中输入一个url，详细讲讲浏览器渲染环节会发生什么？

12、我改变一个可见元素的宽高，会发生 reflow 还是 repaint？使用translateX呢？

13、你有什么问题想问我的吗？

二面: