首页 > 货拉拉前端面经
头像
nk12581
编辑于 2021-08-11 12:21
+ 关注

货拉拉前端面经

(工作经验:不到一年,难度应该是校招水平)

一面

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 ,输出对应的数字,使用

    1
    2
    3
    4

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、你有什么问题想问我的吗?

二面:

  1. 自我介绍

  2. 你做过的项目有什么亮点吗

  3. 如何实现一张图片绕着鼠标旋转的效果

见我回答不出来,将问题拆分成了以下两个子问题:

  1. 如何使一张图片随着鼠标移动

  2. 如何使一张图片以固定的半径绕着一个点旋转

  3. 如何不用new,实现一个构造器的实例化

  4. nginx实现跨域,nginx进行反向代理会有什么问题

  5. 你最近还有在研究什么吗?数据结构与算法,异步编程。那讲下异步编程吧

  6. 有什么想问我的吗

HR面

聊了很多,貌似不刷人

更多模拟面试

全部评论

(10) 回帖
加载中...
话题 回帖

推荐话题

相关热帖

历年真题 真题热练榜 24小时
技术(软件)/信息技术类
查看全部

近期精华帖

热门推荐