记～近期的海外项目

最近公司的海外项目终于告一段落了，算是从业以来第一次全程主导、从零到一开发的一个项目，项目名字就不方便透露了，毕竟你懂的。项目开发过程中遇到了不少的问题，包括初次面临这一状况的无力感、频繁的高强度工作、巨大的项目压力，还有就是需要时刻追逐日新月异的行业热点。整个大项目合集的开发和迭代历时一年多，有诸多感悟，特此总结，以待后用和他人学习！

本篇从以下几个方面出发，总结项目开发的心路历程以及一些技术总结。

• 性能优化
• 数据安全
• 数据源的处理
• 项目部署
• 脚手架搭建

性能优化

性能优化算是项目最先感知到的一方面。一开始项目本身的功能点和内容承载量都比较小，开发过程中只是简单的做了一些习惯性的处理。

• 搜索功能添加防抖；一些滚动监测、页面缩放监测添加节流；
• 大量数据的列表使用虚拟列表；
• CSS定义的时候注意选择器的设定（⚠️匹配选择器从后往前匹配）；
• 图片设置懒加载； 设置路由懒加载；
• 打包时启用分包；涉及到的组件库设置按需引入；打包开启Gzip格式。 配置打包压缩、缓存插件

随着项目的迭代，添加了很重的功能页，需要展示NFT项目的实时的销售信息、挂单信息等，还要展示一些处理后的图表数据；需求还伴随着复杂的预设，后续的迭代会存在页面内容越来越繁重的情况。对于这个页面来说，单纯的coding是不足以支持这个页面的，必须要针对性的处理：

接口协同firebase：

首先，这个页面要求极高的时效性，一开始与后端定的轮询，是行不通的；时间间隔短了，服务端的压力会极大，另外是不少的NFT的发行量都是极大的，数据量是建立在其本身的发行量上的；过大的数据量也会导致普通接口的速度减慢。通过调研和对比一些竞品之后，明显感知到轮训是远不如websocket的；但是作为一个c端产品，socket服务也会给服务端造成极大的压力；考虑到成本问题，自建服务是不可行的。最终决定使用第三方的firebase服务来推数据，这样兼顾了低成本、高时效。

试用体验之后，发现单纯的firebase还是不够。firebase初始化的时候需要拉取大量的数据，存在不小的时间间隔；考虑到更好的体验，决定在此之前通过接口，先拉取一批近期的数据；保证进入页面就能看到部分数据，然后通过firebase以极小的时差更新全量数据。就此保证了整体的极高的体验度。

跳床函数：

时效性的问题解决了，页面的显示速度还是慢，而且在firebase大批量数据进入的瞬间会造成页面的卡顿。通过debug定位到是之前的数据处理方法优化差，简单的使用递归导致大量的内存占用；这里用了跳床函数解决内存的问题。

async function trampoline(f) {
   
  while (f && f instanceof Function) {
   
    f = await f();
  }
  return f;
}

web worker：

由于过大的数据量，还是会在一定程度上阻塞页面渲染；最后又利用上了web worker，通过额外的线程来专门处理数据，主进程只负责接收，这样算是彻底解决卡顿的问题，让用户无感获取全量数据！（具体的实现内容后续有空再做详细介绍，此处仅作记录）

数据冻结：

处理完后的大体量数据的内部是不会再其他地方变更，