『刀刀博客』

主题

关于项目 ​

刀刀
0字
0分钟
8/17/2026
aboutprojectinterview
介绍刀刀博客项目内容，涵盖面试亮点、难点、经验总结、项目介绍和项目优化等方面。

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

划分 ​

按项目划分 ​

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

按业务划分 ​

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

难点 ​

移动端项目 ​

  1. 多屏幕适配

    多屏幕适配可以总结一套万能公式，rem 或利用工具 px 转 vw ，如 px2viewport 。实在不行上媒体查询或 js 解决。

  2. 高还原要求

    移动端项目通常有非常高的还原度要求，和设计图 1px 都不能差，这点可以体现出开发的认真和细致。

  3. 五花八门的移动框架和各种兼容问题

    微信小程序、支付宝小程序、wap 端、uniapp 等众多解决方案和适配兼容问题。

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

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

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

可视化项目 ​

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

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

其他可能用到的难点 ​

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

亮点 ​

通用工作亮点 ​

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

  1. 前端项目规范定制，并且落实到工程化工具中

    我们能做的事情

  2. 给项目开发一些组件，或者大一点，组件库，一般组件库很少从头开发了，更多是基于组件二次封装

性能优化方案 ​

  1. 首屏速度优化，体积

    1. 异步引入：把一些不是首页必须渲染的 js 代码，延后加载
    2. 利用构建工具压缩，tree-shaking
    3. Gzip 压缩
    4. 替换一些旧版本库为新版本库，尽量不要什么都用第三方库

  2. 大数据量渲染优化，一次渲染一部分是根本

  3. 体验优化，如骨架屏、兜底图片、操作反馈

  4. 组件可拓展性和易用性优化

  5. 优化接口的出错处理，并发处理，让页面响应更快，体验更佳

前端经验与水平体现 ​

方向思考 ​

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

观点 ​

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

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

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

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

代码质量的例子 ​

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

    js
    let abc = 1 // bad
let addTopNum = 1 // good
    js
    /* 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() {}
    js
    // bad
a ? (b > 1 ? 'yy' : 'xx') : 'zz'
if (a) {
  if (b > 1) {
    return 'yy'
  } else {
    return 'xx'
  }
} else {
  return 'zz'
}

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

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

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

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

常见用户体验考虑 ​

  1. 数据加载过程优化，如 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>

  2. 元素的移动尽量给出动画

    如：添加购物车、loading 旋转动画等。

  3. 提示尽量友好

兜底思维 ​

  1. 图片的兜底，加载失败兜底

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

  2. 接口返回防错兜底

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

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

  3. UI 布局边界

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

贡献者

The avatar of contributor named as duyidao duyidao
The avatar of contributor named as 刀刀 刀刀

页面历史

刀刀博客累计访客 人；文档累计访问量共 次