大厂社招-前端面经总结

一面：

Event Loop
封装FetchAPI，要求超时报错的同时，取消执行的promise，而不是继续执行
arcGis应用
网站重构怎么重构的?
原型链及6种继承优劣，js多态实现
前端优化的方式，强缓存和协商缓存的区别，HTTP0.9,1.0,1.1,2.0,3.0的特点和对队头阻塞的解决，QUIC是基于TCP的吗？
webRTC的特点
EventSouce和长轮询的差别？WebSocket是怎么保持的长连接？
Sass，双飞翼布局外其他的flex,grid,圣杯,传统浮动布局
BFC/IFC，justify-content作用, transform是否会调用GPU
webgl问了管线流程。且EL SL中，片元着色器和顶点着色器的基本应用。
requestAnimationFrame是否会被阻塞，rAF阶段是在dom渲染前还是渲染后？是否用过requestIdleCallback？React Fiber架构中，迭代器和此函数结合的优势？
canvas常见API，postMessage和worker的结合有使用过吗？
说下virtual dom在vue和react的区别？diff算法有什么不同？为什么vue叫渐进式的？

二面 webpack:

资源优化的方式
CommonJS和ES6 Module的区别，Tree Shaking的3个使用场景。
什么是依赖树？
什么是AST，有没有用过recast？
什么是热更新？怎么实现热模块替换？HMR的原理？你如何设计热模块替换？和前端的router有什么区别？提示：location hash和history。
记不记得浏览器渲染原理，重绘和重排 / 回流的区别，GC的两种类型是什么？
DLLplugin的好处是什么？
每次最小更新该如何做？[name]@[chunkhash].js, contenthash是什么？loader和plugin哪个先开启引入？runtime和manifest分别是什么？记不记得service worker，每次更新是更新全部，还是只更新manifest？
webpack中plugin和loader的区别，有没有自己写过plugin，作用是什么？
MVV和MVN是指什么？使用过SSR吗？
如何开发移动端项目？
重构网站的思路TypeScript中装饰器是怎么实现的？能不能讲下元编程，就是Proxy和Reflect的应用？有没有自己写过测试框架，自己实现Hook管理?

算法题：

/* 
* 目的：let a = {}
*       console.log(a.x) -> 1
*       console.log(a.x) -> 2
*       console.log(a.x) -> 3
*/
let a = {}

// 1.Object.defineProperties
Object.defineProperties(a, {
    "x":{
        get: function() {return this.b++;},
        set: function(val){this.b = val;}
    }
})
a.x = 0

console.log("Object.defineProperties");
console.log(a.x);
console.log(a.x);
console.log(a.x);

// 2. Proxy
a = new Proxy(a, {
    get: function(target, key){
        if(key === 'x')
            return (target.key = (target.key || 0) + 1);        
    }
})
console.log("Proxy");
console.log(a.x);
console.log(a.x);
console.log(a.x);

// 3.
a.x = 0
a.valueOf = function() {
    return this.x++;
};
console.log(a == 0 && a == 1);
console.log(a.x);
console.log(a == 2);
console.log(a.x);

// 4. iterator
// 4. iterator
let a = {}
a.valueOf = function() {
    this.x = this.x || 0;    
    return this.x++;
};

function* test(){
    let i = 1,
        j = 2;
    yield* [i, j]

    while(true){
        i = j + 1;        
        j = j + 2;        
        yield* [i, j];
    }
}

var m = test();

a = new Proxy (a, {
    get: function(target, key) {
        if(key === 'x'){             
            return m.next().value
        }
    }
})

// console.log(a == 0 && a == 1);
console.log(a.x);
// console.log(a == 2);
console.log(a.x);
console.log(a.x);