前端系统设计

获取详细信息

userAgent

前端系统将会被用到哪里?电脑、手机、平板?如果大部分用户的browser版本老旧,例如IE11,对开发产生什么样的影响?

user & scale

用户群体是什么样的?年龄?性别?需求?将来有无大幅扩大规模的可能性?mvp的上线最重要的是抓住主要需求,以QQ的MVP举例: 如果用户有很多特殊群体,也需要考虑产品的Accessbility(a11y)

i18n

如果用户分布在相当广的情况下,考虑使用CDN来分发静态资源,加快访问速度。

MVP需求分析

功能性需求

以朋友圈为例,发布一条朋友圈,好友点赞,按照时间顺序浏览朋友圈等等,这些都是功能性需求。

非功能性需求

非功能性需求更多集中在用户不可见的部分。例如:响应式、无网络状态下的访问、是否实时推送等等。

组件功能设计

设计一些小的compenents时候,需要考虑到一些功能,例如,删除操作、拒绝等不可逆操作需要二次弹窗确认,

状态管理

使用pinia、redux或是props在组件当中通信。

接口设计

对于发明机会数据类型,endpoint地址,要和后端有详细的约定

网络请求

实现类似chatGPT的流式输出,使用fetchEventSource这一个微软提供的库,基于SSE

性能

提升前端性能核心指标:LCP, CLS, FID等

  1. 打包工具
  2. 异步请求
  3. 使用支持treeshaking的库、手写方法
  4. CDN、懒加载
  5. 图片按照大小base64或者异步加载
  6. 合并小数据量接口
  7. 骨架屏、loading

A11y

使用更加语义化的HTML标签,例如:使用button而非div、使用img的alt属性

reference: medhat.dev/blog/cracki... open.alipay.com/portal/foru...

相关推荐
爱学习的狮王8 分钟前
ubuntu18.04安装nvm管理本机node和npm
前端·npm·node.js·nvm
东锋1.312 分钟前
使用 F12 查看 Network 及数据格式
前端
zhanggongzichu15 分钟前
npm常用命令
前端·npm·node.js
anyup_前端梦工厂21 分钟前
从浏览器层面看前端性能:了解 Chrome 组件、多进程与多线程
前端·chrome
chengpei14729 分钟前
chrome游览器JSON Formatter插件无效问题排查,FastJsonHttpMessageConverter导致Content-Type返回不正确
java·前端·chrome·spring boot·json
我命由我1234538 分钟前
NPM 与 Node.js 版本兼容问题:npm warn cli npm does not support Node.js
前端·javascript·前端框架·npm·node.js·html5·js
每一天,每一步1 小时前
react antd点击table单元格文字下载指定的excel路径
前端·react.js·excel
浪浪山小白兔1 小时前
HTML5 语义元素详解
前端·html·html5
小魔女千千鱼1 小时前
【真机调试】前端开发:移动端特殊手机型号有问题,如何在电脑上进行调试?
前端·智能手机·真机调试
16年上任的CTO1 小时前
一文大白话讲清楚webpack基本使用——11——chunkIds和runtimeChunk
前端·webpack·node.js·chunksid·runtimechunk