2024年前端架构八大设计准则(1)，2024年最新腾讯+字节+阿里面经真题汇总

最新推荐文章于 2024-08-01 08:00:00 发布

2301_82243710

最新推荐文章于 2024-08-01 08:00:00 发布

阅读量980

点赞数 8

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2301_82243710/article/details/138830077

版权

程序员专栏收录该内容

196 篇文章 1 订阅

订阅专栏

总结

=============================================================

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。
大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

本人比较喜欢钻研架构，目前在某大型互联网公司任职前端架构师。

谨以此文献给需要接触到前端架构以及想接触这块的小伙伴们，希望能够帮到大家。

适度设计（第一准则）

无论是前端还是后台，这一条是通用的。

架构设计应以满足一定周期内的需求为目标。周期一般考虑一年即可，需求包括功能性与非功能性（优化，扩展等）。在这两方面都满足，并考虑一定的前瞻性的前提下（前瞻性：业务以及技术发展的方向）。架构应尽量简单：降低成本，缩短实现周期，使质量更高。

能少一个组件就少一个组件

这可能是大家所忽略的：每增加一个组件，包括研发、测试、运维、硬件资源占用的总体成本就可能会上升数万元。

能不用微服务就不用微服务

微服务是有一些优点，最近也很火。但缺点也很明显：响应时间增加、综合成本上升、管理复杂度高。对于中小型系统、不需要频繁发布的系统，采用微服务架构就像是用高射炮打蚊子。

2. 避免问题扩大化

解决一个问题时尽量直接解决，不要间接解决而引入新的问题。

举个例子，当我们用A插件的时候，发现它存在一些问题，然后我们又引入了B插件来解决这个A插件存在的问题，依此类推。正确的做法是直接把A插件换掉，避免引发新的问题。

3. 本质思考

作为架构师，应当有广博的知识面，能够透过现象看到问题的本质。

脑海中印象很深的一件事是，有一次我们做了一个文件上传的功能，刚开始有用户反馈上传速度太慢了有时候还上传失败，大家一致认为是用户的网络有问题，直到后面又有客户反馈这个问题。我立马就意识到，这肯定不是网络的问题，而是单文件过大，IIS的限制导致问题的发生。后续的方案是采取了分片上传、修改IIS限制，解决了棘手这个问题。

4. 技术选型

技术选型以需求为主，而不是人员现状。

经常看到这样的情况，在做技术选型决策时，明知某种技术是最优的，但还是选择当前团队掌握的技术。这种决策可以理解，但对产品长远发展不利，极有可能在与竞品的PK中落于下风（性能以及用户体验上）。

技术行业最经典的一句话：没有解决不了的技术问题，只有解决不了问题的人。始终坚信项目是可以推动团队技术发展的。

5. 重视成本

很多架构师可能有这样一种思维：把架构设计得简单了，会显得自己很平庸。弄一个高大上的架构出来，方显本事，在领导面前述职时也有善可陈。

可是，如果太超前去搞这种复杂的架构，会白白增加成本。

架构师的每一个决定都会影响到成本。包括研发成本、第三方软硬件采购成本和上线后的运营成本。不同的方案，在成本分布和最终的总体成本上会不尽相同。需要我们综合权衡，才能决策出成本最优的方案。

成本关系着企业利润，最终也会影响到个人奖金。这种因果关系的体现周期虽然较长，也不是很透明直接，但道理不会错。身为架构师，每做一个决策前，先问问自己，这个方案会花费多少成本。

6. 慎重审视“拿来”的东西

技术这块，一直都有“借鉴”的习惯，说的不好听一点，就是抄袭。前端这块更是严重，诞生了许多的“CV”工程师。

有的人做架构设计，完全是拿来主义，不从自己系统的实际情况出发；而另一种人，则完全自己发挥，不去调查类似系统的设计方案。

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
…