近期与多位前端从业者及技术负责人交流,发现行业风向正在发生显著变化。过去常被诟病为'切图仔'的前端岗位,如今正朝着更深入、更多元的方向发展。企业数字化转型的深入,将前端推向了更核心的位置,单纯还原设计稿已不再是唯一标准,跨端开发、工程化建设、性能优化等能力成为新的核心竞争力。
核心能力方向
当前市场重点考察的能力主要集中在以下五个维度:
- 跨端开发:掌握 Uni-app、Taro、Flutter 等框架,实现一套代码多端运行。
- 工程化搭建:熟悉 Webpack、Vite、CI/CD 流程,从写代码升级为造工具。
- 性能优化:深入浏览器底层原理,解决首屏卡顿,保障用户体验。
- 组件库封装:沉淀企业级组件,提升团队效率,体现架构思维。
- 可视化开发:运用 ECharts、Three.js 等技术,实现数据大屏与 3D 交互。
这些能力的积累并非一蹴而就,而是需要结合业务场景持续深耕。对于求职者而言,理解这些趋势有助于在面试中展现对行业发展的认知。
高频面试题汇总
为了帮助大家更好地准备面试,我整理了针对上述能力及基础知识的常见面试题,涵盖 JavaScript、CSS、HTML、主流框架、算法及 TypeScript 等领域。
JavaScript
- 不会冒泡的事件有哪些?
- mouseEnter 和 mouseOver 有什么区别?
- MessageChannel 是什么,有什么使用场景?
- async、await 实现原理。
- Proxy 能够监听到对象中的对象的引用吗?
- 如何让
var [a, b] = {a: 1, b: 2}解构赋值成功? - 描述下列代码的执行结果(需结合实际代码)。
- 什么是作用域链?
- bind、call、apply 有什么区别?如何实现一个 bind?
- common.js 和 es6 中模块引入的区别?
- script 标签放在 header 里和放在 body 底部里有什么区别?
- 为什么 Node 在使用 es module 时必须加上文件扩展名?
- package.json 文件中的 devDependencies 和 dependencies 对象有什么区别?
- 函数式编程了解多少?
- 一直在 window 上面挂东西是否有什么风险?
- cookie 可以实现不同域共享吗?
- axios 是否可以取消请求?
- DOM 里面,如何判定 a 元素是否是 b 元素的子元素?
- 判断一个对象是否为空,包含了其原型链上是否有自定义数据或者方法。该如何判定?
- JS 如何判空?「空」包含了:空数组、空对象、空字符串、0、undefined、null、空 map、空 set。
- CSS 实现翻牌效果。
- flex:1 代表什么?
- 一般是怎么做代码重构的?
- 如何清理源码里面没有被应用的代码,主要是 JS、TS、CSS 代码?
- 前端应用如何做国际化?
- 应用如何做应用灰度发布?
- 微前端为何通常在微前端应用隔离不选择 iframe 方案?
- Qiankun 是如何做 JS 隔离的?
- 微前端架构一般是如何做 JavaScript 隔离?
- 当 QPS 达到峰值时,该如何处理?
- JS 超过 Number 最大值的数怎么处理?
- 使用同一个链接,如何实现 PC 打开是 web 应用、手机打开是一个 H5 应用?
- 如何解决页面请求接口大规模并发问题?
- 设计一套全站请求耗时统计工具。
- 大文件上传了解多少?
- H5 如何解决移动端适配问题?
- 站点一键换肤的实现方式有哪些?
- 如何实现网页加载进度条?
- 常见图片懒加载方式有哪些?
- cookie 构成部分有哪些?
- 扫码登录实现方式。
- DNS 协议了解多少?
- 前端水印了解多少?

