价值百万的商用级产品架构，业务实现+开发提效双线并进, 数据埋点/运营管理/作品管理后台等业务需求 + 组件库/组件平台/脚手架等开发需求
download: Web前端架构师2022
Web前端如何进阶
JavaScript
原生 js 系列
冴羽大佬的这篇博客里，除了 undescore 的部分，你需要全部都能掌握。并且灵活的运用到开发中去。
JavaScript 深入系列、JavaScript 专题系列、ES6 系列
完全熟练掌握 eventLoop。
tasks-microtasks-queues-and-schedules
Promise
你需要阅读 Promise A+规范，注意其中的细节，并且灵活的运用到开发当中去。
Promise A+ 英文文档
你需要跟着精品教程手写一遍 Promise，对里面的细节深入思考，并且把其中异步等待、错误处理等等细节融会贯通到你的开发思想里去。
剖析 Promise 内部结构，一步一步实现一个完整的、能通过所有 Test case 的 Promise 类
最后，对于 promise 的核心，异步的链式调用，你必须能写出来简化版的代码。
最简实现 Promise，支持异步链式调用（20 行）
题外话，当时精炼这 20 行真的绕了我好久 😂，但是搞明白了会有种恍然大悟的感觉。这种异步队列的技巧要融会贯通。
async await
对于 Promise 我们非常熟悉了，进一步延伸到 async await，这是目前开发中非常非常常用的异步处理方式，我们最好是熟悉它的 babel 编译后的源码。
手写 async await 的最简实现（20 行搞定）
babel 对于 async await 配合 generator 函数，做的非常巧妙，这里面的思想我们也要去学习，如何递归的处理一个串行的 promise 链？
这个技巧在axios 的源码里也有应用。平常经常用的拦截器，本质上就是一串 promise 的串行执行。
当然，如果你还有余力的话，也可以继续深入的去看 generator 函数的 babel 编译源码。不强制要求，毕竟 generator 函数在开发中已经用的非常少了。
ES6 系列之 Babel 将 Generator 编译成了什么样子
异常处理
你必须精通异步场景下的错误处理，这是高级工程师必备的技能，如果开发中的异常被你写的库给吞掉了，那岂不是可笑。
Callback Promise Generator Async-Await 和异常处理的演进
插件机制
你需要大概理解前端各个库中的插件机制是如何实现的，在你自己开发一些库的时候也能融入自己适合的插件机制。
Koa 的洋葱中间件，Redux 的中间件，Axios 的拦截器让你迷惑吗？实现一个精简版的就彻底搞懂了。
设计模式
对于一些复杂场景，你的开发不能再是if else嵌套一把梭了，你需要把设计模式好好看一遍，在合适的场景下选择合适的设计模式。这里就推荐掘金小册吧，相信这篇小册会让你的工程能力得到质的飞跃，举例来说，在 Vue 的源码中就用到了观察者模式、发布订阅模式、策略模式、适配器模式、发布订阅模式、工厂模式、组合模式、代理模式、门面模式等等。
而这些设计模式如果你没学习过可能很难想到如何应用在工程之中，但是如果你学习过，它就变成了你内在的工程能力，往大了说，也可以是架构能力的一部分。
框架篇
对于高级工程师来说，你必须要有一个你趁手的框架，它就像你手中的一把利剑，能够让你披荆斩棘，斩杀各种项目于马下。
下面我会分为Vue和React两个方面深入去讲。
Vue
Vue 方面的话，我主要是师从黄轶老师，跟着他认真走，基本上在 Vue 这方面你可以做到基本无敌。
Web前端架构面试题总结
vue部分
vue父子组件通信
props， attrs/root , refs, eventBus
vue组件的data为什么建议写成函数返回对象而不是直接写对象？
如果是对象，多个地方的同一组件访问的是同一对象
input的input事件会自带event参数，如何同时绑定其他参数
@input=“(event)=>{handleInput(event,‘加参数’)}”
keep-alive有哪些参数？LRU算法原理？
include包含哪些组件
exclude不包含哪些组件
exclude优先于include
max最大缓存组件数
LRU：最近最久未使用算法，根据id和tag生成缓存key
ref
ref=“domName”
用法：this.$refs.domName
最早在mounted函数中可用
vue为什么不兼容ie8
因为ie8没有实现Object.defineProperty()
js实现简单的双向绑定
<body>
<div id="app">
<input type="text" id="txt">
<p id="show"></p>
</div>
</body>
<script type="text/javascript">
var obj = {}
Object.defineProperty(obj, 'txt', {
get: function () {
return obj
},
set: function (newValue) {
document.getElementById('txt').value = newValue
document.getElementById('show').innerHTML = newValue
}
})
document.addEventListener('keyup', function (e) {
obj.txt = e.target.value
})
</script>
v-modal如何实现
通过Object.defineProperty进行数据劫持
v-bind绑定一个value属性
v-on指令给当前元素绑定input（input,textarea）、change（select,checkbox,radio）事件。
computed 会重新求值吗
class Example{
data(){
return {
a:1,
b:2
}
}
computed:{
cc(){
return +new Date();
},
dd(){
console.log(this.a);
return this.b+1;
}
}
}
webpack
webpack如何配置多入口
webpack loader和plugin区别
webpack 常见loader?如何自定义loader?
webpack 常见plugin?如何自定义plugin?
webpack tree shaking目的是什么？怎么实现的？
webpack code spliting目的是什么？怎么实现的？
webpack执行过程？源码？
webpack打包出来的js文件分别是干嘛的？里面包括什么？
webpack如何减少打包体积？如何提高打包速度？如何加快首屏速度？
es5 6 7 8
数组和链表的区别？内存上的区别
跨域 | jsonp | jsonp缺点
原型链
prototype, proto, constructor
作用域链
闭包坏处？常见垃圾泄漏操作？垃圾回收机制？v8 垃圾回收机制？
let const的局部作用域和暂时性死区
手写promise
promise报错怎么办
如何Promise里面报错了，走err=>{}还是catch?
New Promise().then(succ=>{}, err=>{}).catch(e){}
走err=>{}
New Promise().catch(e){}.then(succ=>{}, err=>{})
走catch
promise.then执行顺序?为什么？
let p=new Promise();
p.then().then();
p.then();
p.then();
generate-yield实现原理？
async-await实现原理？
Reflect用过没有？干嘛的？
vue3为什么改用Proxy?
es module\ commonjs\ amd \cmd区别
浏览器底层原理
有一个100M大小的字符串，是放在栈里还是堆里？为什么？
v8垃圾回收机制
http 1 1.1 2 3区别
浏览器缓存原理
tcp 队头阻塞 滑动窗口
https加密过程？证书目的是什么？
常见网络攻击
七层网络协议
如何通过目标域名将请求发送到真实目标主机的网卡上？
粗略版：dns lookup\ tcp协议 \ ip寻址 \ arp广播
页面加载过程
dom cssom 布局树 reflow redraw 分层 分块 光栅化 合成 后缓冲区 前缓冲区
css
rem em px转换
移动端 1px 问题
上下左右居中
盒子模型
