关于项目

刀刀

0字

0分钟

2026/8/17

前端面试项目亮点和难点

划分

按项目划分

移动端项目
B 端项目——公司业务后台，数字化办公
可视化项目

按业务划分

具体的业务功能（如果能命中公司也做的业务，加分）
基础设施建设
项目的优化

难点

移动端项目

多屏幕适配
多屏幕适配可以总结一套万能公式，rem 或利用工具 px 转 vw ，如 px2viewport 。实在不行上媒体查询或 js 解决。
高还原要求
移动端项目通常有非常高的还原度要求，和设计图 1px 都不能差，这点可以体现出开发的认真和细致。
五花八门的移动框架和各种兼容问题
微信小程序、支付宝小程序、wap 端、uniapp 等众多解决方案和适配兼容问题。

B 端项目——公司业务后台，数字化办公

一些办公系统，常见一些给政府开发的办公系统，给医院开发的医疗信息系统，各种公司的后台管理系统等。

文件上传、大文件上传、断点续传
excel 、pdf 、word 预览，导入导出，在线 excel 等等
富文本编辑器，二次开发富文本功能

可视化项目

主要是一些公司的数据大屏，一些政府的智慧 xx 系统。

熟悉各种可视化工具 echarts、g2
画过一些比较难的图表比如高度定制的地图，流程图，关系图
按公司 UI 设计自定义了图表的风格和样式，形成公司风格 UI 图表组件库
3D 可视化绘图

其他可能用到的难点

即时通讯 websocket，常见于消息提醒，在线协作
webrtc
webgl 3d 模型操作
很多 canvas 功能，比如用原生 canvas 绘制数据、在线绘图、图片操作（滤镜、裁剪、压缩、标注）等

亮点

通用工作亮点

一些事情是几乎每个项目都有的，一定程度上能体现出水平。

前端项目规范定制，并且落实到工程化工具中
给项目开发一些组件，或者大一点，组件库，一般组件库很少从头开发了，更多是基于组件二次封装

性能优化方案

首屏速度优化，体积
1. 异步引入：把一些不是首页必须渲染的 js 代码，延后加载
2. 利用构建工具压缩，tree-shaking
3. Gzip 压缩
4. 替换一些旧版本库为新版本库，尽量不要什么都用第三方库
大数据量渲染优化，一次渲染一部分是根本
体验优化，如骨架屏、兜底图片、操作反馈
组件可拓展性和易用性优化
优化接口的出错处理，并发处理，让页面响应更快，体验更佳

前端经验与水平体现

方向思考

能否实现效果，不是，效果实现很多地方都能查询搜索到，再不济也能问 AI
会的东西多不多，如果都会水平是很高，但是对公司和项目意义不大
设计项目架构，不是，很少有人能接触到
代码质量高不高，关键，代码质量高写代码不会差
性能优化，大部分项目都没有优化的情况，能体现但无法起决定的作用

观点

不是实现了功能，而是好好地实现了功能。

代码写的可读性、可维护性、执行性能
能否主动考虑到功能的体验问题
功能是否有边界处理，减少意外

不断发觉业务开发中的麻烦，去沉淀开发一些基础设施。

发现项目里常常重复的业务功能，沉淀为高可用组件
发现项目开发中的一些麻烦，开发一些工具或者脚本，让这个过程更快

代码质量的例子

可读性：注释，命名，代码分区，不写过多判断和表达式

命名.js代码分区.js过多的判断.js

let abc = 1 // bad
let addTopNum = 1 // good

/* bad */
let a = 1
let b = 1
let c = 1
computed(() => {})
computed(() => {})
computed(() => {})
function f1() {}
function f2() {}
function f3() {}

/* good */
// 功能1
let a = 1
computed(() => {})
function f1() {}

// 功能2
let b = 1
function f2() {}
computed(() => {})

// 功能2
let c = 1
computed(() => {})
function f3() {}

// bad
a ? (b > 1 ? 'yy' : 'xx') : 'zz'
if (a) {
  if (b > 1) {
    return 'yy'
  } else {
    return 'xx'
  }
} else {
  return 'zz'
}

可维护性：如果以后发生更改，是否能很好的修改

// 后端接口返回一个字段 res.a，a的值可能是some1，可能是some2。后续可能会改成Some1和Some2
const RESSTATUS = {
  status1: 'some1',
  status2: 'some2',
}

// 后续不要直接判断some1、some2，而是根据常量枚举来判断
if (res.a === RESSTATUS.status1) {
  // do something
}

执行性能：执行频次尽量减少

常见用户体验考虑

数据加载过程优化，如 loading ，1 秒以下的接口不需要加 loading ，尽量避免闪烁，及时反馈。
例如用户权限根据接口获取是否有该权限时，可以先添加文字「查询权限中」，而不是直接显示无权限，等到接口回来时改称有权限。再例如点击删除按钮，点击后给用户一个反馈，如「删除中...」
vue
```
<template>
  <div v-if="status === ''">查询权限中...</div>
  <div v-else-if="status === 'xx'">有权限</div>
  <div v-else>无权限</div>

  <button>{{ delete ? '删除中...' : '删除' }}</button>
</template>
```
1
2
3
4
5
6
7
元素的移动尽量给出动画
如：添加购物车、loading 旋转动画等。
提示尽量友好

兜底思维

图片的兜底，加载失败兜底
如：用户头像没上传，接口返回空字符串，应该给个默认头像图片；表格数据返回空，不要直接加载一个空表格，而是添加文本提示暂无数据等。

接口返回防错兜底

如：接口返回 null 或者 undefined，应该给个默认值，而不是直接使用 null 或者 undefined。

let a = ref({}) // 假设这是后端返回的数据
watch(() => {
  // 添加一个可选链，避免报错页面白屏
  a.value?.arr.forEach((item) => {
    console.log(item.name)
  })
})

UI 布局边界
如现在写的布局是否适配所有尺寸屏幕等。

贡献者

duyidao

刀刀

页面历史

最后编辑于大约 12 小时前

查看完整历史

关于项目 ​

前端面试项目亮点和难点 ​

划分 ​

按项目划分 ​

按业务划分 ​

难点 ​

移动端项目 ​

B 端项目——公司业务后台，数字化办公 ​

可视化项目 ​

其他可能用到的难点 ​

亮点 ​

通用工作亮点 ​

性能优化方案 ​

前端经验与水平体现 ​

方向思考 ​

观点 ​

代码质量的例子 ​

常见用户体验考虑 ​

兜底思维 ​

贡献者