35岁，做前端10年建议大家不要想太多...

安安868
0 阅读15分钟

大家好，我是一名35岁的前端开发者，今年刚好是入行的第10个年头。

2026年的春天，对我而言，比以往任何一年都要“冷”一些。本想借着“金三银四”的传统节点动一动，却发现现实的春招市场像北京的倒春寒——岗位少得可怜，且HC（招聘名额）大多挂的是“僵尸链接”。

这10年里，我经历了从jQuery到Vue/React，再从脚手架到AI辅助编程的全过程。以前总焦虑，觉得自己必须追上每一个新轮子：Vue3还没捂热，Rust在前端工具链里火起来了；Svelte刚上手，又冒出了Fresh和Astro。现在看着招聘需求上写的那一长串——“熟悉Three.js、精通WebGL、掌握Node.js底层、有微前端架构经验、熟悉大模型API调用”——说实话，不是学不会，是真的学不过来了。

25岁那年，我觉得“全栈”是唯一的出路；35岁这年，我明白了“体力是有限的，认知才是壁垒”。

面对2026年这种“僧多粥少、要求奇高”的局面，我建议大家 “不要想太多” 。这里的“不要想太多”不是躺平，而是做减法：

  1. 不要被“岗位需求”PUA： 很多公司写出的技术栈清单，其实是把想招三个人的活合并成一个人的要求。你不需要全都会，只要守住你深耕了10年的核心领域（比如性能优化、工程化架构），你就还有饭吃。
  2. 不要过度迷信“新玩具”： 2026年，AI已经能写大部分业务代码了。与其花时间去背一个新框架的API，不如花时间培养“业务嗅觉”。10年的经验，价值不在于我敲键盘多快，而在于我能预判需求的风险、能兜住项目底线的架构能力。这是AI暂时取代不了的。
  3. 接受“慢就业”的现实： 既然岗位少，就不必海投简历然后陷入自我怀疑。35岁的身体熬不动通宵了，但也输不起了。与其为了入职而临时抱佛脚去刷几百道已经变味的算法题，不如把这十年积累的实战项目拿出来，看看能不能找到真正懂价值的团队。

2026年，对于我们这些做了十年技术的人来说，确实是一个分水岭。环境在变，技术在变，唯一不变的是我们这十年踩过的坑和填过的坟。

愿大家在这个艰难的春招季，少一点焦虑，多一点钝感力。稳住，别崩，就是赢。

以下是我个人给大家带来的技术支持

用户访问页面白屏了， 原因是啥， 如何排查？

白屏处理办法

用户访问页面白屏可能由多种原因引起，以下是一些可能的原因和排查步骤：

  1. 网络问题：用户的网络连接可能存在问题，无法正确加载页面内容。可以要求用户检查网络连接，或者自己尝试在不同网络环境下测试页面的加载情况。
  2. 服务端问题：服务器未正确响应用户请求，导致页面无法加载。可以检查服务器的状态、日志和错误信息，查看是否有任何异常。同时，可以确认服务器上的相关服务是否正常运行。
  3. 前端代码问题：页面的前端代码可能存在错误或异常，导致页面无法正常渲染。可以检查浏览器的开发者工具，查看是否有任何错误信息或警告。同时，可以尝试将页面的JavaScript、CSS和HTML代码分离出来进行单独测试，以确定具体的问题所在。
  4. 浏览器兼容性问题：不同浏览器对于某些代码的支持可能不一致，导致页面在某些浏览器中无法正常加载。可以尝试在不同浏览器中测试页面的加载情况，同时使用浏览器的开发者工具检查是否有任何错误或警告。
  5. 第三方资源加载问题：页面可能依赖于某些第三方资源（如外部脚本、样式表等），如果这些资源无法加载，可能导致页面白屏。可以检查网络请求是否正常，是否有任何资源加载失败的情况。
  6. 缓存问题：浏览器可能在缓存中保存了旧版本的页面或资源，导致新版本无法加载。可以尝试清除浏览器缓存，或者通过添加随机参数或修改文件名的方式强制浏览器重新加载页面和资源。
  7. 其他可能原因：页面白屏问题还可能由于安全策略（如CSP、CORS等）限制、跨域问题、DNS解析问题等引起。可以使用浏览器的开发者工具检查网络请求和错误信息，查找可能的问题。

在排查问题时，可以根据具体情况逐步进行排查，并结合浏览器的开发者工具、服务器日志等工具来辅助定位问题所在，并且可以与用户进行进一步沟通以获取更多信息。如果问题无法解决，可以寻求专业的技术支持或咨询。

假如让你负责一个商城系统的开发，现在需要统计商品的点击量，你有什么样设计与实现的思路？****

1. 需求分析

  • 功能：统计每个商品的点击量，并提供统计数据的接口。
  • 性能要求：处理高并发点击请求，保证系统的稳定性和实时性。
  • 数据存储：选择合适的存储方式来保存点击量数据，支持高效的读写操作。

2. 设计思路

前端

  1. 事件绑定：

    • 在商品页面中，通过 JavaScript 绑定点击事件到商品元素（如按钮、图片等）。

// 假设商品按钮有一个 class 为 'product-btn' document.querySelectorAll('.product-btn').forEach(button => { button.addEventListener('click', (event) => { const productId = event.target.getAttribute('data-product-id'); // 调用函数发送点击事件到后端 trackClick(productId); }); }); function trackClick(productId) { // 发送 AJAX 请求到后端 fetch('/api/track-click', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ productId }), }); }

  1. 优化：

    • 使用防抖或节流技术，减少频繁的网络请求，避免因网络延迟造成的数据丢失。

后端

  1. 接口设计：

    • 设计一个 API 接口来接收前端发送的点击数据。例如 /api/track-click。

// Express.js 示例 const express = require('express'); const app = express(); app.use(express.json()); app.post('/api/track-click', (req, res) => { const { productId } = req.body; // 调用数据处理函数 trackProductClick(productId); res.status(200).send('OK'); }); function trackProductClick(productId) { // 实现点击量统计逻辑 // 例如：保存到数据库或缓存系统 }

  1. 数据存储：

    • 使用高性能的数据库或缓存系统来存储点击量数据，例如 Redis、MongoDB、MySQL 等。
    • 对于高并发场景，考虑使用缓存（如 Redis）进行预处理，定期将缓存数据写入持久存储。

const redis = require('redis'); const client = redis.createClient(); function trackProductClick(productId) { client.incr(product:${productId}:clicks, (err, newClickCount) => { if (err) { console.error('Error updating click count:', err); } else { console.log(Product ${productId} click count updated to ${newClickCount}); } }); }

  1. 性能优化：

    • 使用异步处理和队列来处理高并发请求。

    • 设计合理的缓存机制来减少数据库的读取压力。

    • 定期对数据进行归档和清理，以保持数据的高效管理。

3. 数据展示

  • 管理后台：

    • 设计管理后台接口和页面，用于查看和分析商品的点击量数据。

    • 提供图表和报表功能，方便管理人员进行数据分析。

  • 实时监控：

    • 实现实时数据监控功能，帮助跟踪用户的点击行为和趋势。

2026年前端面试场景题板块

1.如何判断用户设备

2.将多次提交压缩成一次提交

3.介绍下navigator.sendBeacon方法

4.混动跟随导航（电梯导航）该如何实现

5退出浏览器之前，发送积压的埋点数据请求，该如何做？

6如何统计页面的long task（长任务）【热度：140】

7.PerfoemanceObserver如何测量页面性能

移动端如何实现下拉滚动加载（顶部加载）

9.判断页签是否为活跃状态

10.在网络带宽一定的情况下，切片上传感觉和整体上传消费的时间应该是差不多的这种说法正确吗？

11.大文件切片上传的时候，确定切片数量的时候，有那些考量因素

12.页面关闭时执行方法，该如何做

13.如何统计用户pv访问的发起请求数量

14.长文本溢出，展开/收起如何实现

15.如何实现鼠标拖拽

16.统计全站每一个静态资源加载耗时，该如何做

17.防止前端页面重复请求

18.ResizeObserver作用是什么

19.要实时统计用户浏览器窗口大小，该如何做

20.当项目报错，你想定位是哪个commit引l入的错误的时，该怎么做

21.如何移除一个指定的commit

22.如何还原用户操作流程

23.可有办法将请求的调用源码地址包括代码行数也上报上去？

24.请求失败会弹出一个toast,如何保证批量请求失败，只弹出一个toast【热度：420）

25.如何减少项目里面if-else【热度:310】

26.babel-runtime作用是啥【热度:200】

27.如何实现预览PDF文件

28.如何在划词选择的文本上添加右键菜单（划词：标滑动选择一组字符，对组字符进行操作【热度：100】

29.富文本里面，是如何做到划词的（鼠标滑动选择一组字符，对组字符进行操作？【热度：100】

30.如何做好前端监控方案【热度：672】

31.如何标准化处理线上用户反馈的问题【热度：631】

32.px 如何转为rem【热度：545】

33.浏览器有同源策略，但是为何cdn请求资源的时候不会有跨域限制【热度：579】

34.cookie可以实现不同域共享吗【热度：533】

35.axios是否可以取消请求【热度：532】

36.前端如何实现折叠面板效果？

37.dom里面，如何判定a元素是否是b元素的子元素【热度：400】

38.判断一个对象是否为空，包含了其原型链上是否有自定义数据或者方法。该如何判定？

39.is如何判空？「空」包含了：空数组、空对象、空字符串、0、undefined、null、空map、空set都属于为空的数据【热度:640】

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网页如何禁止别人移除水印【百度一面】

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应用的请求

161.前端有哪些跨页面通信方式？

162.H5下拉刷新如何实现？

163.如何修改第三方npm包？

1.JavaScript (323题)
2.CSS (61题)
3.HTML (57题)
4. React (83题)
5. Vue(80题)
6.算法(19题)
7.计算机网络(71题)
8.Node.js (27题)
9. TypeScript (46题)
10.性能优化(25题)
11.前端安全(21题)
12.小程序(9题)
13.ES6 (32题
14.编程题(50题)
15.设计模式(7题)
16.工程化(34题)

本文包含前端面试中会遇到的绝大部分难题，包括各种技术上的提升也有相关资源，最近还在准备前端面试的可以试试

最后祝大家金三银四有所收获！

avatar
文章
阅读
粉丝