流程优化

研发流程优化

我们先看一下前端研发流程：

• 技术选型(页面渲染技术和混合开发技术)，可以是页面同构直出的，或者是RN、小程序、Flutter这种开技术
• 项目初始化，以页面渲染的三大框架为例(React、Vue、Angular)，例如将基于React的项目工程目录，以及一些基本的配置(包括埋点、项目公共组件)都在项目初始化。
• 依赖模块引入，使用私有NPM，将平时项目工程的模块放到NPM上。在开发项目时，将第三方模块或者积累的模块导入项目中。
• 本地开发，使用自研发前端工具将前端研发流程串起来，它可以完成项目初始化、依赖模块引入、联调和部署等。
• 项目联调，这个阶段完成产品和业务的需求，以及前端和后端协作接口的联调。
• 效果确认，项目联调完了，业务功能也都实现了，在上线前给产品和设计师确认产品的要求和设计师的交互是否实现。
• 项目上线，前端和后端将代码通过自动化部署部署到生产环境上。

前后端协作模式

1. 在项目开始前，前端和后端会制定数据接口，这样前端通过mock来实现接口，和后端能够并行开发。
2. 前端页面制作，这个阶段将产品和UI设计稿完成。
3. 前端交互实现，可以看效果。
4. 后端开发，主要实现产品和业务的功能点，包括数据存储和业务逻辑的实现，和前端开发并行。
5. 前后端联调，这个阶段将前端mock接口去掉，换成真实的数据接口。实现页面的交互和后端接口的打通。
6. 前端上线，将前端静态资源上到CDN或服务器上。
7. 后端上线，如果是java项目部署到java服务器中。如果是新项目则后端先上线后，前端再上线。如果接口不变，仅是前端更新页面则可以前端单独上线。

自动化测试

1. UI自动化：上手简单，不过稳定性较差，工具有appium、robot framework、selenium、airtest等。
2. 接口自动化：稳定、性价比非常高，工具有：java+restassured，Python+requests，Jmeter，HttpRunner等。
3. 单元测试：性价比极高，一般由开发完成，但是有一些单元测试框架，比如junit5，pytest，unittest。测试这边可以了解，运用到自己的代码中。

自动化上线

1. 用工具拉取git仓库的代码
2. 使用自动化工具在线打包和编译
3. 代码上线部署到灰度机器，在正式发布前，先灰度一下，防止测试的不足。
4. 代码上线部署至线上全量机器
5. CDN后台静态文件更新缓存

提升代码质量

1. 在小组内或团队内制定代码规范，例如注释、换行、命名等等，这个是代码质量提升的基石。
2. 静态代码扫描，可以在上线系统里添加该流程。
3. CodeReview，高工或者小组内去做。
4. 站在巨人的肩膀上阅读框架核心源码。

上线前质量即时检测

当我们对项目进行性能优化落地之后，效果怎么样，如何度量呢？那么就需要对H5做即时的质量检测。

将项目的URL放到平台上检测一下：

1. 看看页面有没有错误，包括：

   • JS报错，有的话在平台上展示，提示JS有错误，页面不会上线。
   • 接口报错，看看接口有没有404或者超时的情况。
   • 线上环境检测，写代码可能有本地的一些接口或预发环境的接口，在打包的时候做替换，之后会不会有预发环境的接口呢？这就是在线上环境检测做的事情。
   • 页面白屏，有可能依赖于第三方库或者其他部门的库造成白屏，可以用工具来检测。

2. 检测完页面错误之后，再看一下页面的性能：

   • 页面完全加载时间检测，我们设置时间为2.5秒，看前端页面是否在2.5秒内加载，如果没有则在检测结果中打上标记。
   • 前端HTML、JS、CSS的压缩检测，如果没压缩，那么也不会通过。
   • 前端大HTML、JS、CSS、大图检测，超过设定的阈值也不会通过。
   • 前端JS、CSS个数是否超过阈值，可以通过文件合并来解决。
   • 服务器Gzip检测
   • 服务器缓存设置检测

3. 页面安全

   • HTTP和HTTPS检测
   • XSS检测

4. 页面卡口，有了性能、错误、安全检测，那么设置在哪里？

   • 运营，设置在运营平台上，在页面上线前或运营有变更，都会做质量检测
   • 研发，设置在上线平台上，对外发布前做检测

上线后性能和错误监控

1. 页面性能监控

   • JS错误监控，onerror或js其他错误都会存储到监控平台上。
   • API接口监控，接口是否超时或者有错误。
   • 日志详情，访问了哪个页面、多长时间、js原始日志等。
   • 用户轨迹，用户进入了页面后，查看用户进入了哪个页面，跳转到哪个页面，整个过程做记录。排查错误时方便查看用户在哪个页面出现问题。

2. 统计报表

   • 大盘走势，包括整个项目的H5页面的加载时间、接口响应率等，在大盘上展示出来。
   • 地域，指针对城市进行监控
   • 运营商，对运营商的监控，包括电信、移动，
   • 浏览器，将用户手机型号、浏览器版本做统计后，在开发过程中对用户的选型会有参考，满足什么类型浏览器的用户。

3. 页面管理：在接入项目之前，将所有URL都收集起来，存储起来，让后台能够查询到页面归属哪个部门，哪个研发人员。

4. 性能指标：整个项目性能是否达标，对其进行阈值的设置。

5. 报警服务：核心页面是否正常，发送短信邮件等。