重生前，我是一名会计学的摆烂大学生，过着早12晚3的生活，重生后，我成为了一名前端开发者，经历了接小活兼职，合伙公司使小活正规化，破产通过外包进入jd进行系统的开发工作，再然后来到这里，我的开发由html+js+css纯拼到使用工具进行开发，再然后学到工具与工具之间使用的异同，了解了数据安全，代码优化，数据分析等各个进阶信息，最后自我感觉成为一个超牛的前端工作者✌️，为此对自己五年的前端时光做个总结，说一说我认知里的开发工作流
基础信息
OSI七层模型
作为前端工作者而言，我们的工作部分主要在计算机通信部分，所以最开始我们通过OSI七层模型先认知一下网络通信
-
物理层
- 顾名思义，物理层面的，真实用光缆，无线电波，搭建电脑与远端的链接信号的一层，主要作用传送0和1的电信号，在此🫡基层工作者
-
数据链路层
- 从物理层获取的0和1，并进行解读
-
网络层
- 大致理解为IP地址，用于区分使用哪个片区的主网络，进行信息分发的，主机与主机之间进行通信
-
传输层
- 建联本地和远端存储的关系，并进行数据传输，使端口与端口之间进行通信，完善程序交流方式
-
会话层
- 建立和断开交流，并进行数据传输和分割管理
-
表示层
- 进行数据转换，将传输过来的数据转换为网页真实可使用的信息，如图片，音频等
-
应用层
- 我们使用的http，ws，文件协议的FTP等，都属于应用层，被真实使用的层面，可与会话层和表示层归于一类
前端常见监控指标（贴个学习笔记 ）
- LCP 最大内容绘制时长
- INP 事件交互到事件执行时长
- FCP 首屏渲染有内容被显示在界面的时长
- TTFB资源返回的时长（从链接输入开始到响应内容的时间）
- FID 首次事件交互到事件执行时长
- TTI 可交互时间（渲染空闲时间）
用户访问网页的真实流程
当用户进行链接访问时，我们的主机先会进行DNS解析，并且根据对应的缓存机制进行与远端建联IP的快速查找，查找到远端服务器后，由SSL或者TSL的安全协议来进行握手和挥手操作，建联后开始发送我们的用户需要访问的页面的信息，在浏览器内根据获取的html自上而下进行设置，请求，渲染，变为页面。并链接用户与远端服务器的联系，方便用户操作后远端快速操作数据库进行响应。暂时无法在飞书文档外展示此内容
人物关系
使用方
简而言之就是用户，这里的用户分为两大类，一种是我们产品面向企业，用于企业的生产制造营收等方向的使用，这时使用者为企业员工；另外一种是产品面向社会，用于平常休闲娱乐，购物分享等，这时的使用者就是社会大众。
创造方/维护方
产品从产生到上线的所有工作参与者，在这里都属于产品创造者
-
产品： 集合使用者需要，调研用户需求，设计产品的功能，定容产品需要，拉取赞助，进行汇报，进行运维的成员
-
设计（ued）：将产品的设计功能美化，落实图片（设计稿），方便开发者进行页面的搭建，同时也会设计其他一系列辅助产品推广的产物
-
开发者（排名无先后）：
- 前端/前台：进行网页搭建者
- 后端/后台：不涉及页面开发的数据操作
- 数仓：多产品联动时的公共数据存储方
- 安全：检查扫描编写的代码防止出现安全事件，安全交付
- .......还有更细致的区分不做过多的叙述
-
测试：检验开发成员成果是否符合产品需要，并保证无安全问题，刷数正常，在规定的同时访问者进行请求时的机器运行情况等
-
运营：辅助用户进行产品使用，推广产品，收集用户期望或问题反馈产品成员进行优化等
开发流程说明
以下是一个正常开发流程
以下是一个线上问题排查流程
以下时是一个我理解的数据跑向
独属前端开发的工作流
经由上述的基础信息展示，整理一下从开发到上线到优化等工作的工作流整理
开发前期准备
框架准备
确认使用框架，打包方式，工具使用，组件库使用等基础信息
组件相关
根据产品需求定容，ued设计规范等，分析页面相似部分，并由此抽离公共基础组件和公共业务组件
接口相关
基于服务端对产品需求的接口设计，整理相似部分，商定复用部分，并前后端确认开发和使用规范，将公共入参出参，接口异常处理等对齐做好
还有一个关于网关接口设计，这里有的时候由服务端处理，有的时候由前端进行处理，前端处理时需做好权限处理，中间件编写，数据安全处理和正确的服务端接口调用等，需拉齐所有开发者对初次开发拟定规范等
路由相关
商定路由开发规范，需要保证线上ningx配置，线下打包生成，多级路由嵌套等处理都正常
目录规范相关
涉及多人开发过程，需拟定目录规范，防止多风格产生导致代码不好迭代
跨层级状态管理工具相关
对于夸页面、夸组件之间的交互，确认数据交互的传输方式，发布订阅，路由传参，状态管理工具进行数据记录等，并拟定utils防止出现多种管理方式的使用
代码风格相关
千人千面的开发操作会导致代码风格差异较大，需要指定开发规范，并使用如eslint还有prettier的工具检测和转换为正确的风格
工作相关
涉及多人开发部分需要设计一个具体的开发方案文档，指定到人让其根据需求，设计自己的代码开发方案，并拉齐项目前端管理者评估方案可行度，并将冗余或可拆离复用的内容指出
git规范拟定
我本人喜欢gitflow模式，不过对于多人多需求不同时间上线的需要来说，gitflow模式不是很适用，所以还是需要开发开始前指定git分支拆解和git提交规范（推荐commitlint，在cr的时候查看工作内容很舒适）
开发过程
组件部分
需提前两三天进行准备，基础设计和ts都要在其他开发者进入开发前聚齐，保证不影响其余开发者工作
页面部分
tcc/ningx在对应开发环境添加路由，若有三级以上路由的开发，提前一天由该需求前端主负责人进行容器编写，保证进入开发的人员正常开发
联动部分
跨页面交互部分若同一开发者无需设置，若不同开发者需在开发前期确认数据传输方式，确认参数保证无后期开发时长不一致将已脱离需求的开发人员回到这个开发工作中
真实开发
开发人员结合组件，结合公共方法，按照设计稿，组合并编写对应代码，mock接口结果进行前期无数据的页面开发
开发后期
前端基础部分
提前进行内部cr，确认代码该有的优化都做好了，无遗漏的内存泄漏问题处理，代码开发规范如命名，编写顺序，实际对页面划分规划是否合理等
单测部分
确保公共使用部分内容单测覆盖率符合要求
安全部分
安全部门扫描，确认无逻辑处理问题，确认权限处理正常，无越权问题，确认接口压测正常等符合预期
产品和ued确认
确保产物符合需求设定和设计规范
错误监控和埋点工具处理
良好的工具使用对线上错误排查和用户喜爱度分析都有很大的帮助， 有很多成熟的网站可以进行使用
进入优化
当产品长久迭代，冗余代码过多，体积较大时，用户体验度下降，用户数量会流失，产品的市场下降，所以需要我们前后端进行对应的优化，后端对接口响应等优化不在这里过多阐述，主要讲前端的
-
打包优化：
- 编译方式更改，多使用chunk模式，进行分包
- 利用treeshanking不对未使用代码进行编译
- 合理使用devtool，选择较小的map拓展
- 对页面影响较小的依赖使用sdk方式加载
-
加载优化
- 改变页面资源加载顺序，合理利用浏览器并发加载，加快首屏内容反馈
- 使用异步加载模式，降低资源加载速度
- 虚拟列表，合理的css使用，减少dom体积，或减少频繁的dom渲染，减少CPU的使用
- BFC的合理使用，虚拟dom的合理使用，减少频繁更新整个界面
- dom缓存，减少频繁操作导致的dom树重新编译渲染
- 合理拆分组件方法，减少加载内容的体积
- 可以考虑使用ssr
-
操作优化
- 对于频繁的接口调用，使用ws协议进行常链接，或者使用http2以上的协议，拥有缓存，减少重连中的操作
- 合理使用缓存机制，加快服务器建联，对固定资源或不常更新资源进行缓存，加快内容响应
- 防抖节流等防止用户频繁操作
- 利用performance进行页面监控，将不合理的js队列内容进行清理，对常触发但单线程查找靠后的挂载进行提前挂载
