关于前端项目设计的思考

[adodo0829]

前端怎样去设计一个项目

当我们接到一个项目需求, 单从前端的角度来思考, 我们需要做哪些事情呢?从哪些方面去考虑和架构一个项目? 这也是考验是否有独立完成项目的能力...我大概想到以下几个方面吧, 先写个目录, 以后有时间再进行扩展

1.项目技术预研(大局观能力考察)

• 项目背景
• 项目体量
• 功能需求收集
• 多端应用(web端:PC,H5, 客户端: APP, 桌面端: electron)

2.项目分析分解(流程架构图能力考察)

• 基础层和业务层的模块划分
• 业务按照页面page进行解耦
• 基础层按UI组件化,功能(接口)模块化
• 可分为数据、模块、模板、页面几种实体

3.项目技术选型(html,css,js应用能力考察)

• 前后端分离模式 数据接口(如果用 node 写后端接口, 可以考虑一个人完成整个项目)
• 应用开发模式
  • 单页应用 SPA; 页面解耦,独立开发
  • 多页应用 MPA;
  • 服务端渲染应用 SSR;
• 组件化管理: UI组件分解;
• 兼容 && 适配: vw 和 媒体查询解决 DPR: 像素比, 物理像素与逻辑像素px(缩放比例) 分辨率: 1, 2, 3 倍屏

4.项目工具链体系(node应用能力考察)

• 项目结构搭建
• 项目规范管理
• 项目编码设计
• 项目打包构建
• 项目模块测试
• 项目工程部署
• 项目持续集成 脚手架搭建,自动化测试,部署,发布

5.项目性能优化(web体系能力考察)

• 现状评估和建立指标 页面加载性能 动画与操作性能 内存消耗
• 技术方案 1.静态资源优化(利用网络和缓存特性) 缓存 请求复用(DNS,HTTP2) 减少请求数(文件打包压缩合并等) 减小文件 CDN 2.动态运行时优化 如何利用语言特性,框架特性,算法机制(空间内存和时间的取舍) 客户端代码运行时优化 交互优化
• 执行
• 结果评估和监控 performance API

6.项目功能迭代和维护(工程管理能力考察)

• 版本管理
• 代码规范
• 文档记录

7.项目监控(兜底防错能力考察)

• 前端埋点
• 异常上报

[LeoWangJ]

你好, 想請問下關於. 动态运行时优化 中的 客户端代码运行时优化 可以麻煩你描述一下大概有什麼方法或關鍵字嗎? 目前對這方面沒有什麼概念, 所以也不知道要下什麼關鍵字去搜尋