已经走入了金九的尾巴，大家这个月的收获如何呢？
都说今年的大环境特别差，不是单指前端，各行各业好像都有影响，所以很多身边朋友都说，有个班就上着吧。
然后网络上都回评，少年英气勃发，应适当向往自由！！！
其实，我感觉都可以，狼多肉少就提升自己的专业性！！！
正文
这是一些前端提升自己专业性的整理，针对中高级的！！！
Vue PC 端模板
• Vue Router
• vite-plugin-pages：以⽂件系统为基础的路由
• vite-plugin-vue-layouts：⻚⾯布局系统
• Pinia：直接的, 类型安全的, 使⽤ Composition API 的轻便灵活的 Vue 状态管理
• vite-plugin-vue-markdown：Markdown 作为组件，也可以让组件在 Markdown 中使⽤
• markdown-it-prism：Prism 的语法⾼亮
• prism-theme-vars：利⽤ CSS 变量⾃定义 Prism.js 的主题
• Vue I18n：国际化
• VueUse：实⽤的 Composition API ⼯具合集
• @vueuse/head：响应式地操作⽂档头信息
• vite-plugin-vue-devtools：旨在增强 Vue 开发者体验的 Vite 插件
• 使⽤ Composition API 地
• TypeScript
• Vitest：基于 Vite 的单元测试框架
• Cypress：E2E 测试
Vue Mobile 端模板
• Vue Router
• vite-plugin-vue-layouts：⻚⾯布局系统
• Pinia：直接的, 类型安全的, 使⽤ Composition API 的轻便灵活的 Vue 状态管理
• vant4：轻量、可定制的移动端 Vue 组件库
• @vant/use：实⽤的基于 Vant 的 Composition API ⼯具合集
• 使⽤ Composition API 地
• TypeScript
• Vitest：基于 Vite 的单元测试框架
如何回答未来 5 年的职业⽬标是什么？
想清楚⾃⼰是什么样的⼈。
前端转型做agent应⽤开发是主流
前端擅⻓做应⽤和交互，最合适的⼯作的就是做ai agent应⽤，这个事⼉⼀定会⽕起来。⽬前ai基建能 卷的，都不是⼩公司了。但做agent应⽤，才开始。⽐如smithery 这个mcp源上才1000多个mcp服务。cline的mcp市场也刚刚开始。mcp解决了api式服务的规范问题。（mcp现在特别粗糙，都是计划）
lightpanda在ai⽆头浏览器性能也是chrome的11倍，兼容playwrite，Puppeteer（cdp模式）等。通 过⽆头浏览器做⾃动已经具备可⾏性。
所以开发agent应⽤是主流。
• 基建可⽤。会出新⼊⼝，⽐如smithery，会改变交互，甚⾄是颠覆。技术难度会⽐较⾼
• 业务可⽤。技术难度低。只要有想法，就可以像发npm包⼀样提供agent服务，按需收费。
技术部分探索
对于技术栈，摘⾃我之前的回答，还⽐较浅，⼊⻔够了。
任何时代 和⽤⼾交互 都是避免不了的，交互变⾰也会随着agent变多和管理⽽改变，⼜是⼀波新机 会。这⾥通过5步开源项⽬帮⼤家把技术串联起来。
1. ai⼊⻔：ai-chatbot
为了学习，和探索，可以研究了⼀下github.com/vercel/ai-c…，这是⼀个⾮常好的易于学习的Node.js AI Agent开发项⽬模版，各种最新的技术栈基本都覆盖了。
a. 基于next，ai-sdk，实现基于openai模型的chatbot功能，技术栈和功能很实⽤。
b. ⾜够⼩，100个ts⽂件，代码⾏数10000⾏左右，结构清晰，简单易学。
c. 前后端，典型的全栈应⽤，包含postgre db，鉴权，react，ai，⾮常全⾯了。很多最佳实践， ⽐如toast库，密码加盐处理等。
d. 可以使⽤aihubmix等openai代理服务，⽀持⽀付宝。
e. 扩展性强，使⽤其他模型，以及langchain、llamaindex等。
部署还是有点⿇烦，涉及的内容还是⽐较多的。学完这个，你发现很多⽹站，⽹⻚，都是这个上⾯缝缝补补的。
2. ai搜索：scira
这个开源项⽬也很简单，⾮常适合⼊⻔。如果已经熟悉了ai-sdk，这⾥再学⼀些搜索服务集成（⽐如 Tavily AI），也是极好的。它在应⽤层⾯上，是⾮常简单且实⽤的⽰例。
3. 深挖基础lib：langchain 和 llamaindex
深挖langchain和llamaindex，没啥好说的，这是ai世界⾥，构建rag必备的包，都是现有py版本，然 后才有js/ts版本，可⻅在应⽤开发领域，js/ts依然是最受欢迎的⽅式。
4. 探索客⼾端，基于vite + electron-forge，另外还有很多rust实现
其中agent、扩展，以及类似于Eventloop的机制，有很多很有意思的实现。
5. 探索应⽤开发。上⾯的技术基本上都包含了，⽐如llamaindex
基本上把各种ai sdk都集成了，agent、tool、workflow、rag等全部⽀持，开箱即⽤，写起来更简单。
前端项⽬经验相关⾯试考察点
-
所谓的⾯试，是在⼀众简历中选择最合适的候选⼈。⾯试之所以卷，不是指简历的内容写的多或 者项⽬多就好，⽽是在跟其他⼈竞争时，你有别⼈的简历中所没有的亮点，能够体现出你的技术 ⽔平，这才算好。所谓的⾏情不好，只是原先从简历中选择top 50%降低到了top 25%，但有亮 点的简历，始终是在top 20%以内的，所以没有亮点和深度的简历之间越来越卷，越来越供⼤于 求；但有亮点有技术深度的⼈始终是处于供不应求的情况；
-
⾯试时，技术⽔平的⾼低始终是第⼀位的，如果⽔平⾜够，但学历低，优先级也会⽐学历⾼但⽔ 平低的⼈⾼；当然，如果⽔平⼀样，肯定有限学历⾼的候选⼈；
-
现在的⾯试都是通过项⽬切⼊，根据项⽬中具体的实现的功能来引导使⽤的技术栈，考察的是针 对对应的技术栈，具体掌握的深度和⼴度；
-
⾯试的时间⼀般不会超过1⼩时，在1⼩时⾥不可能把所有的前端内容全部问完，所以⾯试官会挖 掘候选⼈的项⽬亮点，通过候选⼈的⾯试，考察候选⼈对知识技能的掌握，再逐步提升难度，摸 透候选⼈对知识掌握的边界；
-
⾯试的过程是发掘出候选⼈优势的过程，不是打压候选⼈的过程，所以不⽤担⼼个别地⽅说的不 好会不会导致⾯试不过，如果亮点项⽬很充分，能够体现出个⼈⽔平，⾯试官也不会在意⼀些边 ⽀末节的。项⽬经验通常和个⼈经历关系⽐较⼤，前端业务相关的的⼀些项⽬经验通常包括管理端、H5 直出、 Node.js、可视化，另外还包括参与⼯具开发的经验，⽅案选型、架构设计等。
项⽬相关的内容，⽐如性能优化、前端框架之类的
前端框架与⼯具库
⾸先我们来看看前端框架，不管你开发管理端、PC Web、H5，还是现在⽐较流⾏的⼩程序，总会⾯临 要使⽤某⼀个框架来开发。因此，以下的问题可能与你有关：
• 谈谈你对前端常⻅的框架（Angular/React/Vue）的理解
• 该项⽬使⽤ Angular/React/Vue 的原因是
• 如果现在你重新决策，你会使⽤什么框架
• 你有了解过这些框架都做了哪些事情，介绍⼀下是怎么实现的
• Vue 中的双向绑定是怎么实现的？
• 讲讲 React 的虚拟 DOM
• 如何进⾏状态管理，Vuex/Redux/Mobx 等⼯具是怎么做的
• 单⻚应⽤是什么？路由是如何实现的
• 如何进⾏ SEO 优化
如果你使⽤到了⼩程序，还可能会问到：
• ⼩程序和 H5 有什么不⼀样，为什么选⼩程序⽽不是 H5
• 有考虑在⼩程序⾥嵌 H5 实现吗，为什么
• 为什么⼩程序的性能要好⼀些
• ⼩程序开发有⽤到哪些框架吗、为什么
⽽⼯具库相关的就太多了，⼀般会这么问：
• 有实际使⽤过哪些第三⽅库
• 这些⼯具库有什么特性和优缺点
项⽬相关的许多问题，其实是我们⼯作中经常会遇到并需要进⾏思考的问题。如果平时有养成思考和 总结的习惯，那么这些问题很容易就能回答出来。如果平时⼯作中⽐较少进⾏这样的思考，也可以在 ⾯试准备的时候多关注下。
Node.js 与服务端
Node.js 相关的可能包括：
• 为什么要⽤ Node.js（⽽不是 PHP/JAVA/GO/C++等）
• Node.js 有哪些特点，单线程的优势和缺点是什么
• Node.js 有哪些定时功能
• Process.nextTick 和 setImmediate 的区别
• Node.js 中的异步和同步怎么理解，异步流程如何控制
• 简单介绍⼀下 Node.js 中的核⼼内置类库(事件，流，⽂件，⽹络等)
• express 是如何从⼀个中间件执⾏到下⼀个中间件的
• express、koa、egg 之间的区别
• Rest API 有使⽤过吗，介绍⼀下
以上这些都属于很基础的问题。很多时候，我们会使⽤ Node.js 去做⼀些脚本⼯程或是服务端接⼊层 等⼯作。如果项⽬中有使⽤ Node.js，⾯试官更多会结合项⽬相关的进⾏提问。
性能优化
性能优化的其实跟项⽬⽐较相关，常⻅的包括：
• 有做过性能优化相关的项⽬吗，具体的优化过程是怎样的/优化效果是怎样的
• 常⻅的性能优化包括哪些内容
• 如何理解项⽬的性能瓶颈/什么时候我们需要对⼀个项⽬进⾏优化
• 图⽚加载性能有哪些可以优化的地⽅
• 要怎么做好代码分割/降低代码包⼤⼩可以有哪些⽅式
• ⾸屏⻚⾯加载很慢，要怎么优化
• Tree Shaking 是怎样⼀个过程
• ⻚⾯有没有做什么柔性降级的处理
很多时候，性能优化也是与项⽬本⾝紧紧相关，⼀般来说会包括⾸屏耗时优化、⻚⾯内容渲染耗时优 化、内存优化等，可能涉及代码包⼤⼩、下载耗时、⾸屏直出、存储资源（内存/indexDB）等内容。
前端⼯程化
如今前端⼯程化的趋势越来越重，通常从脚⼿架开始：
• 为什么我们开发的时候要使⽤脚⼿架
• 如何理解模块化
• 为什么要使⽤ Webpack，它和 Gulp 的区别是
• 讲⼀下 Webpack 中常⽤的⼀些配置、Loader、插件
• Babel 的作⽤是什么，如何选择合适的 Babel 版本
• Webpack 是怎么将多个⽂件打包成⼀个，依赖问题如何解决
• 有写过 Webpack 插件吗，Webpack 编译的过程具体是怎样的
• CSS ⽂件打包过程中，如何避免 CSS 全局污染
• 本地开发和代码打包的流程分别是怎样的
除了脚⼿架相关，如今⾃动化、流程化的使⽤也越来越多了：
• 怎么理解持续集成和持续部署
• 你们的项⽬有使⽤ CI/CD 吗，为什么
• 你们的代码有写单元测试/⾃动化测试吗，为什么
• 前端代码⽀持⾃动化发布吗，如何做到的
⼯程化和⾃动化是如今前端的⼀个趋势，由于团队协作越来越多，如何提升团队协作的效率也是⼀个 可具备的技能。
开发效率提升
效能提升的意识在⼯作中很重要，⼤家都不喜欢低效的加班。通常可能问到的问题包括：
• 做了很多的管理端/H5，有考虑过怎么提升开发效率吗
• 你的项⽬⾥，有没有哪些⼯作是可以⽤⼯具完成的
• 项⽬中有进⾏组件和公共库的封装吗
• 如何管理这些公共组件/⼯具的兼容问题
• ⽇常⼯作中，如何提升⾃⼰的⼯作效率
监控、灰度与发布
发布和监控这部分，可能较⼤的业务才会有，涉及的问题可以有:
• ⽇常开发过程中，怎么保证⻚⾯质量
• 版本发布有进⾏灰度吗？灰度的过程是怎样的
• 版本发布过程中，如何及时地发现问题
• 发⽣异常，要怎么快速地定位到具体位置
• 如何观察线上代码的运⾏质量
对于⼤型项⽬来说，灰度发布⼏乎是开发必备，⽽监控和问题定位也需要各式各样的⼯具来辅助优 化。
多⼈协作
⼀些较⼤的项⽬，通常由多个开发合作完成。⽽多⼈协作的经验也很有帮助：
• 多⼈开发过程中，代码冲突如何解决
• 项⽬中有使⽤ Git 吗？介绍⼀下 Git flow 流程
• 如果项⽬频繁交接，如何提升开发效率
• 有遇到代码习惯差异的问题吗，如何解决
• 有哪些常⽤的代码校验的⼯具
• 怎么强制进⾏ Code Review
看到这么多内容不要慌，⼀般来说⾯试官只会根据你的⼯作经历来询问对应的问题，所以如果你并没 有完全掌握某⼀块的内容，请不要写在简历上，你永远也不知道⾯试官会延伸到哪
以下给大家整理了一些场景，今年面试中经常出现，不得不防！！
40.css实现翻牌效果【热度:116】
41.flex:1代表什么【热度:400】
42.一般是怎么做代码重构的
43.如何清理源码里面没有被应用的代码，主要是JS、TS.CSS代码【热度：329】
44.前端应用如何做国际化？【热度：199】
45.应用如何做应用灰度发布【热度:247】
46.「微前端]为何通常在微前端应用隔离，不选择iframe方案【热度：280】
47.[微前端]Qiankun是如何做Js隔离的【热度：228】
48.[微前端]微前端架构一般是如何做JavaScript隔离
49.[React]循环渲染中为什么推荐不用index 做key【热度:320】
50.[React]如何避免使用context的时候，引起整个挂载节点树的重新渲染【热度：420】
51.前端如何实现截图？
52.当QPS达到峰值时，该如何处理？
53.js超过Number最大值的数怎么处理？
54.使用同一个链接，如何实现PC打开是web应用、手机打开是-个H5应用？【腾讯二面】
55.如何保证用户的使用体验【字节一面】
56.如何解决页面请求接口大规模并发问题【必会】
57.设计一套全站请求耗时统计工具
58.大文件上传了解多少【百度一面】
59.H5如何解决移动端适配问题【美团一面】
60.站点一键换肤的实现方式有哪些？【美团一面】
61.如何实现网页加载进度条？【百度一面】
62.常见图片懒加载方式有哪些？【京东一面】
63.cookie构成部分有哪些【百度一面】
64.扫码登录实现方式【腾讯一面]
65.DNS协议了解多少【字节一面】
66.函数式编程了解多少？【京东一面】
67.前端水印了解多少？【腾讯一面】
68.什么是领域模型【必会】
69.一直在window上面挂东西是否有什么风险【百度一面】
70.深度SEO优化的方式有哪些，从技术层面来说
71.小程序为什么会有两个线程【腾讯一面】
72.web应用中如何对静态资源加载失败的场景做降级处理
73.html中前缀为data-开头的元素厘性是什么？
74.移动端如何实现上拉加载，下拉刷新？【字节一面】
75.如何判断dom元素是否在可视区域【字节一面】
76.前端如何用canvas来做电影院选票功能【美团一面】
77.如何通过设置失效时间清除本地存储的数据？【腾讯二面】
78.如果不使用脚手架，如果用webpack构建一个自己的react应用
79.用nodejs实现一个命令行工具，统计输入目录下面指定代码的行数
80.packagejson里面 sideEffects厘性的作用是啥【必会】
81.script标签上有那些厘性，分别作用是啥？【必会】
82.为什么SPA应用都会提供一个hash路由，好处是什么？
83.{React如何进行路由变化监听【字节一面】
84.单点登录是是什么，具体流程是什么【腾讯一面】
85.web网页如何禁止别人移除水印【百度一面】
86.用户访问页面白屏了，原因是啥，如何排查？
87.[代码实现]s中如何实现大对象深度对比
88.如何理解数据驱动视图，有哪些核心要素？【腾讯二面】
89.vue-cli都做了哪些事儿，有哪些功能？
90JS执行100万个任务，如何保证浏览器不卡顿？【百度一面】
91.JS放在head里和放在body里有什么区别？
92.Eslint代码检查的过程是啥？【必会】
93.虚拟混动加载原理是什么，用Js代码简单实现一个虚拟滚动加加载
94.[React]react-router和原生路由区别
95.html的行内元素和块级元素的区别【京东一面】
96.介绍-下 requestlIdleCallback api
97.documentFragment api是什么，有哪些使用场景？【必会】
- git pull和 git fetch 有啥区别?
99.前端如何做页面主题色切换【腾讯一面】
100.前端视角-如何保证系统稳定性【字节一面]
101.如何统计长任务时间、长任务执行次数【腾讯二面】
102.V8里面的JT是什么？【京东一面]
103.用Js写一个cookies解析函数，输出结果为一个对象
104.vue中Scoped Styles是如何实现样式隔离的，原理是啥
105.样式阿商方式有哪些【字节一面】
106.在JS中，如何解决递归导致栈溢出问题？
107.站点如何防止爬虫？【百度一面】
108.ts项目中，如何使用nodemodules里面定义的全局类型包到自己项目src下面使用？【百度二面】
109.不同标签页或窗口间的【主动推送消息机制】的方式有哪些？（不借助服务端）
110.[React】在react项目开发过程中，是否可以不用reactrouter使用浏览器原生history路由来组织页面路由？
111.在表单校验场景中，如何实现页面视口滚动到报错的位置
112,如何一次性渲染十万条数据还能保证页面不卡顿【百度二面】
113.【webpack】打包时hash码是如何生成的【必会】
114.如何从0到1搭建前端基建【京东一面】
115.你在开发过程中，使用过哪些TS的特性或者能力？【美团一面】
116.JS的加载会阻塞浏览器渲染吗？【百度一面】
117.浏览器对队头阻寒有什么优化？【百度一面）
118.Webpack项目中通过script标签引I入资源，在项目中如何处理？
119.应用上线后，怎么通知用户刷新当前页面？【腾讯一面】
120.Eslint代码检查的过程是啥？
121.HTTP是一个无状态的协议，那么Web应用要怎么保持用户的登录态呢？
122.如何检测网页空闲状态（一定时间内无操作）【百度二面】
123.为什么Vite速度比Webpack 快?
124.列表分页，快速翻页下的竟态问题【百度二面】
125.JS执行100万个任务，如何保证浏览器不卡顿？
126.git 仓库迁移应该怎么操作
127.如何禁止别人调试自己的前端页面代码？【字节二面】
128.web系统里面，如何对图片进行优化？【必会】
129.0Auth2.0是什么登录方式
130.单点登录是如何实现的？
131.常见的登录鉴权方式有哪些？
132.需要在跨域请求中携带另外一个域名下的Cookie该如何操作？
133.vite和webpack 在热更新上有啥区别？
134.封装一个请求超时，发起重试的代码
135.前端如何设置请求超时时间timeout【必会】
136.nodejs如何充分利用多核CPU?【字节二面】
137.后端一次性返回树形结构数据，数据量非常大前端该如何处理？
138.你认为组件封装的一些基本准则是什么？
139.页面加载速度提升(性能优化)应该从哪些反向来思考？
140.前端日志埋点SDK设计思路
141.token进行身份验证了解多少？【腾讯一面】
142.在前端应用如何进行权限设计？【字节二面】
143.【低代码】代码平台一般消染是如何设计的？
144.【低代码】代码平台一般底层协议是怎么设计的
145.[Webpack】有哪些优化项目的手段？
146.IndexedDB存储空间大小是如何约束的?
147.浏览器的存储有哪些【腾讯一面】
148.【Webpack】如何打包运行时chunk，且在项自工程中如何去加载这个运行时chunk？
149.为何现在市面上做表格泊染可视化技术的，大多数都是canvas，而很少用svg的？
150.在你的项目中，使用过哪些webpack plugin,说一下他们的作用
151.在你的项目中，使用过哪些webpackloader,说一下他们的作用
152.【React】如何避免不必要的染？【美团一面】
153.全局样式命名冲突和样式盖问题怎么解决？
154.【React】如何实现专场动画？
155.【React】从React层面上，能做的性能优化有哪些?
156.【VUE】中为何不要把v-f和v-for同时用在同一个元素上，原理是什么？
157.将静态资源缓存在本地的方式有哪些？
158.SPA首屏加载速度慢的怎么解:决
159.axios是如何区分是nodejs环境还是浏览器环境的?
160.如何拦截web应用的请求
好了，今天的内容就到这里了，以上内容都可以嗱，欢迎大家指出错误，欢迎大家讨论，也希望你们能度过一个美好的假日，顺带拿一个心仪的offer就更好不过了！！！
