2020年 30K的前端架构面试题总结(持续更新)

vue部分

vue父子组件通信

props，$ emit , vuex , provide/inject , $ attrs/$ listeners，$root , $parent, $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()

简述Vue的响应式原理

vue源码学习总结深入响应式原理

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 = newValuedocument.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;}}
}

每隔1秒调用this.cc结果一样吗？为什么
一样，+new Date()不是响应式依赖，不会重新求值
修改this.a会导致this.dd重新求值吗？为什么
会，虽然this.a的改变不会导致this.dd返回值的改变，但vue底层无法辨别。this.a和this.b都是this.dd的依赖项

v-if和v-for写在同一标签上，谁的优先级高？为什么？怎么优化？

v-for优先级高；为了实现

类似的过滤；会先执行完v-for再执行v-if导致性能浪费，所以优化为把v-if提升到父标签上，或者在computed里面过滤

用户自定义watch有哪些参数

handle(newVal,oldVal){}
deep 是否深监听触发
immediated 是否立刻触发一次
asyn 是否在当前tick执行，默认false。tick表示nextTick的queueWatcher

vue2通过下标修改数组项或数组length无法触发响应式，为什么？怎么办？

请看vue官网

assets和static文件夹区别

assets文件夹会被webpack打包压缩，而static不会

SPA首屏加载慢如何解决

动态懒加载所需插件；使用CDN资源；vue-ssr

vue-ssr用于解决什么痛点

首屏加载慢；SEO优化

vue生命周期与构造函数总结

vue源码学习总结 lifecycle深度解析

vue-router的query和params传参区别

query通过url传参，刷新页面还在
params刷新页面不在了

vue-router有哪些路由钩子守卫？

vue-router官网导航守卫

$ route和$ router区别

$ router是VueRouter的实例，使用$ router.push方法导航。返回上一个历史history用$router.to(-1)
$route为当前router跳转对象。里面可以获取当前路由的name,path,query,parmas等。

介绍vuex

state => 基本数据(数据源存放地)
getters => 从基本数据派生出来的数据
mutations => 提交更改数据的方法，同步！
actions => 像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex
modules里面如果主动写namespace为true, 会导致modules里面的actions\mutaions\gatters变成局部作用域

vuex原理

vuex工作原理详解

axios弱网怎么办

重新请求3次，超过则失败

不用vuex如何对后台请求的数据缓存

通过请求参数，在vuex里面做缓存

vue nextTick怎么实现的

vue源码学习总结深入解析nextTick

vue vdom diff

写的非常棒，值得一观

宏任务、微任务、事件循环

js 宏任务与微任务总结

vue3了解多少

尤雨溪 bilibili直播
尤雨溪 bilibili直播文字版

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 问题

上下左右居中

盒子模型

BFC

介绍flex及其属性

外边距溢出，合并

css动画、js动画、jquery动画、requestAnimateFrame动画性能对比

css命名规范

BEM

css书写顺序

腾讯css书写顺序

node

小程序

微信底层怎么执行代码的

taro\uni-app怎么做到一套代码跨平台用的

electron是什么？

架构

什么是前端架构

什么是大前端

什么是前端模块化

抽取公共组件的原则

拆分代码和模块的目的与原则

如何选择合适的语言、框架、插件

BDD、TDD、自动化测试

自动化部署jenkis、gitlab ci、nginx、docker

如何code review

git分支管理

node常用来做什么？

ssr\ bff

敏捷开发

前端培训与分享

代码优化

页面加载速度优化

前端监控

前端埋点统计

杂项

工作中遇到最大的挑战是什么？怎么解决的？

最让你有成就感的项目是什么？为什么？

介绍做过的项目？

开会时，leader说的方案你有更好的解决方案，你怎么办？说了之后leader没采纳但是你仍然认为自己方案更好怎么办？

喜欢和什么性格的同事相处？

不喜欢和什么性格的同事相处？

每家公司离职原因？

每家公司薪资情况？

每家公司前端团队情况？

每家公司你的具体职责？

业余时间喜欢做什么？

未来3年的规划？

最近在学什么？关注什么新技术？

自己的不足或缺点？

你最大的优势是什么？

下一份工作比较看重什么？

你能为公司带来什么价值？

用3个词来评价下你自己？

如果用这3个词描述别人，你觉得这个人是个怎样的人？

怎么评价你的leader?

怎么评价刚刚技术面的面试官？

怎么看待加班？

你有什么想问我的？

ps: 先写这么多吧，后面再加上。
有好的答案或者问题，欢迎补充