跳到主要内容

谈谈难点

  • 也可以说遇到什么坑，总结下来怎么解决问题
  • 遇到复杂的组件实现方式
  • 优化难点

打包优化​

将项目的体积从10M 缩小至 3M

  • 静态资源优化
  • 封装公共组件
  • 删除多余代码

文件上传难点​

投放系统的 素材库图片、视频上传

  • 分片上传+断点续传
    • 上传到阿里云

分片上传​

  • 将需要上传的文件分割成相同大小的数据块；
  • 并发传多个小的文件切片，可以大大减少上传时间
  • 当所有切片都已成功上传到服务器时，就可以进行切片合并了

断点续传​

断点续传的原理在于前端/服务端需要记住已上传的切片，这样下次上传就可以跳过之前已上传的部分，有两种方案实现记忆的功能

  • 前端使用 localStorage 记录已上传的切片 hash
  • 服务端保存已上传的切片 hash，前端每次上传前向服务端获取已上传的切片

第一种是前端的解决方案，第二种是服务端，而前端方案有一个缺陷，如果换了个浏览器就失去了记忆的效果，所以这里选后者

为什么使用断点续传

  • 1、防止网络异常，当需要上传大文件时，网络环境可能不稳定，上传过程中可能会出现网络中断或上传失败的情况。如果没有断点续传机制，用户需要重新上传整个文件，耗费时间和浪费带宽资源。
  • 2、用户体验：断点续传可以提供更好的用户体验。用户可以在上传过程中暂停、恢复或取消上传操作，而不必从头开始上传，节省时间和精力。

大屏可视化难点​

  • 大屏性能优化
  • 大数据处理
  • canvas优化
  • 实时数据方案
    • SSE
      • SSE允许服务器向客户端发送事件，但客户端不能向服务器发送数据
      • 对服务器压力小
    • WebSocket
      • 双向通信，对服务器压力大
  • 适配方案
    • scale方案
    • rem方案
  • echarts体积大小优化
    • 按需加载
    • 自定义构建

视频项目难点​

短剧视频业务相关

  • 视频播放优化
  • 缓存视频
  • 预加载视频
  • 流视频加载
  • 一屏内显示多个视频
  • 鼠标移入移出播放视频问题

视频模块注意点：​

  • 1、滑动到下一个视频后，将等待较长时间才能开始播放

    • 视频预加载解决
      • 在播放当前 video 时，预获取下一个 video 的播放链接
      • 当预获取到链接url后，需要滑动到当前 swiper-item 时才播放

  • 2、video组件会因src为空而播放失败，触发错误回调并影响播放错误监控

  • 3、倍数播放问题

  • 4、无效视频链接url问题

    • 检查视频链接完整性
    • 联系的视频云服务商或cdn服务商

  • 5、视频在开发者工具和浏览器中可播放，但是在真机上无法播放

    • 视频文件mp4存到了CDN ，可能出现CDN Referer限制，需要添加CDN Referer 白名单列表

  • 6、视频防盗链问题

    • Referer 头部的作用是防盗链，可以为小程序配置一个 Referer 白名单，只允许接受来自小程序的请求

  • 7、防录屏

    • 禁止用户录屏

西瓜视频xgplayer使用及难点​

西瓜视频xgplayer是字节开源的

视频预加载​

预加载下一个视频，提高视频的加载的速度

  • 在用户正常观看当前剧集时，自动为用户加载下一集内容，并将内容缓存到内存中，便于用户在看完当前剧集后切换到下一集可以更快地观看

请求预加载逻辑​

  • 1、请求时先查找缓存中是否存在当前剧集信息，如果不存在，则请求该剧集信息，并存到缓存中
  • 2、如果存在当前剧集信息，返回该剧集信息
  • 3、如果缓存的剧集信息存在下一集的剧集id，就预加载并解锁下一集
  • 4、剧集预加载时不会产生观看记录，需要前端手动调用观看记录上报接口进行上报

封装实现播放视频模块​

  • 基于wx.createVideoContext创建video的上下文对象，来封装视频video组件
    • 拿到这个video的上下文对象，可以对video进行操作，比如播放、停止、倍数播放、全屏等等

视频核心模块​

视频需要考虑：流畅的交互、清晰度、常见的播放问题、转码配置以及视频内容防盗

在小程序中创建短视频场景，核心模块是swiper 滑块视图容器、swiper-item和video 视频，在swiper 滑块视图容器中使用 swiper-item 组件来描述具体滑块内容，并在 swiper-item 组件内添加 video 组件

  • 流畅上下滑：swiper组件
  • 滑动预加载/预渲染
  • 倍速功能

视频画面帧问题​

  • 通过等到video视频元素，解码完成，通过seeked事件

视频时间轴canvas​

微前端难点​

qiankun难点​

keepAlive问题​

样式隔离问题​

  • Shadow DOM

组件库难点​

  • 搭建私有内部组件库
    • 业务组件，开箱即用
  • 搭建组件库文档
    • umi、vitepress、storybook

虚拟滚动难点​

只渲染可视区域的列表，非可见区域中的数据不渲染，大大的提高了渲染的性能

实现原理​

  • 1、会固定容器的高度，用来只渲染可视区域的容器的部分
    • 可以使用css来控制来设置这个高度，或者动态计算这个容器高度
    • 比如虚拟树、虚拟表格，都是要设置这个固定的高度
  • 2、以及设置每个列表项的高度
  • 3、计算出当前可视区域可以容纳的列表项的数量
  • 4、当进行滚动的时候，动态计算出可见数据项的范围，进行只渲染可视区域的部分数据

什么场景需要使用虚拟滚动？​

在某些情况下，后端可能无法直接通过数据库分页，需要前端来处理大量数据

  • 实时数据流

    • 如果后端提供的是实时数据流，例如实时销售、实时监控等，这些数据可能没有固定的数据库结构和分页方式，需要一次性展示给前端

    • 实时数据通常是数据流式更新，不断地产生新数据，数据库如果要查询的话，会有一定的延迟，无法满足实时性

  • 异步加载树节点

    • 异步加载树，父节点异步加载子节点，子节点可能有大量数据 【子节点有上万条数据】
    • 如展示区域，城市对应门店，省对应城市
    • 如展示城市区域视频监控的树节点，某个城市拥有的视频监控数量是很大的，当时使用了异步加载，但是子节点数据还是太多页面卡顿，最后通过虚拟滚动来解决

虚拟列表如何优化​

  • 1、可变高度项处理：如果列表中的项具有不同的高度，这可能会导致滚动时的用户体验。通过使用动态高度计算和缓存，可以减少这些问题，并提高滚动的平滑度
  • 2、节流和防抖：为滚动事件和数据加载事件应用节流和防抖技术。节流可以限制事件的触发频率，而防抖可以在一定时间内只执行最后一次触发的事件。这可以减少频繁的数据加载和渲染操作，提高性能
  • 3、预加载：当用户接近列表末尾时，可以通过预加载一些数据，提前获取下一页或多个页面的数据，以减少用户等待时间并提供平滑的滚动体验。

worker优化​

  • 将复杂计算逻辑，抽取出来，使用worker

场景：

  • 组合支付：卷、播豆、优惠卷叠加计算、储值组合支付方式
  • 文件上传，对于大文件生成hash比较耗时，通过放在worker里计算优化，避免影响主线程

小程序和h5坑​

  • 导航栏问题
    • 原生顶部导航栏，在ios和安卓的表现是不一样的，安卓的标题是左边，ios是居中
    • 抖音小程序自定义导航需要申请
    • h5在钉钉导航栏问题，需要使用钉钉的SDK才可以修改钉钉导航栏
  • 存储问题
    • 小程序的存储Storage缓存，存储的Boolean值在快手不支持，最好使用字符串/数字来替代
  • 快手小程序问题
    • 切换tabbar改变样式，模拟机会有问题，真机没有问题
    • 快手小程序 sticky定位可能会失效, 内容容器需要使用scrollview包裹，指定y轴滚动可解决
    • 快手小程序 修改状态栏颜色兼容有问题，ios是正常，安卓不正常
  • 样式问题
    • 修改第三方组件
      • 使用styleIsolation: 'shared', 表示设置样式共享。这使得你的组件的样式可以影响到第三方组件

广告加载的控制​

  • 当时官网和h5小说使用了google广告的adsense
  • 有时候广告无法填充，或者广告加载失败问题
    • 广告不在可视区域内，加载广告可能会失败
    • 请求过多广告，也有可能加载不出来，导致填充的效率不高
  • 需要考虑广告失败重试次数问题

解析csv文件，csv文件编辑操作​

  • 需要考虑编码问题
  • 需要兼容utf-8和gbk
    • 有些文件保存的时候，如果没保存特定的编码格式，解析出来会乱码
    • 当用utf-8解析乱码时，在用gbk去解码解析
    • 利于原生的api方法，TextDecoder方法去解析文本
  • 利于papaparse这个库，去解析csv文件

深度链接跳转app问题​

  • 深度链接和onelink链接跳转app和应用商店

  • 需要同时兼容两种链接跳转

    • 先使用深度链接跳转，如果在1秒内还停留在当前页面，表示深度链接跳转失败，则使用onelink跳转

  • 跳转问题：

    • 在Facebook内部浏览器打开h5，拉起深度链接问题，当用户没有安装app时，直接通过深度链接是无法跳转的，需要配合增加onelink链接，当前发现一个问题，当深度链接跳转失败时候，会阻塞后面的脚本执行到时候onelink也无法跳转，因为跳转app时候，浏览器需要等待一定时间来唤起app，如果唤起不成功会失败，可能后阻塞后面的，当前解决方案是，通过创建一个独立的Iframe环境隔离，即使失败了，也不会阻塞主线程