在H5页面的SSR中,客户端需要做哪些工作?

1、前言

作为前端开发,对于H5页面的SSR,我们一般只关心webview启动之后的工作,如数据请求、水合、渲染等。实际上,H5页面的SSR,需要和客户端高度配合,才能实现所需效果。比如在笔者的上一篇文章【 手把手带你实现 Vite+React 的简易 SSR 改造【含部分原理讲解】】中,简要提到了流式SSR+FCC优化这一工作便主要是借助客户端的缓存 实现相应优化:

笔者除了前端开发外,对客户端开发也有一定了解(主要是iOS开发、flutter开发等),因此本文从iOS客户端 的角度讲解所需要关注的细节,让读者对整个SSR流程更加了解。

2、客户端核心逻辑梳理

2-1 入口启动注册

在App启动时进行SSR模块的初始化(主要是注册自定义的 URL 协议类 SSRURLProtocol):

Objective-C 复制代码
[RequestSSRHandler setup];

2-2 URL拦截和处理

  • SSRURLProtocol
    • 使用 NSURLProtocol 来拦截特定的网络请求。这些拦截基于请求 URL 的某些标志位或头字段。
    • canInitWithRequest: 方法用于判断是否对请求进行拦截,避免重复拦截,并进行必要的日志记录和异常处理。

2-3 请求发送与响应处理

  • RequestSSRHandler:
    • setup 方法设置与应用相关的请求参数,如 appkeyappverutdid 等,并进行统一管理。
    • sendRequest: 方法将请求发送给后端,可选择缓存命中的内容直接响应,优化响应时间。
    • ssrRequest:didReceiveResponse: 处理响应,检查缓存数据是否可用并适用的判断逻辑。
    • 对于特定错误进行降级处理(如网络错误),通过 requestOnline:receiver: 方法发起普通网络请求。

2-4 缓存管理

  • 缓存数据 ( SSRCacheData ) :

    • 负责序列化缓存的 HTML 数据,并保存相关的版本、过期时间等,用于快速响应请求。
    • 提供 getCacheHtmlsetCacheHtml 方法来管理缓存数据的存取,加速处理过程。
  • 缓存存储 ( FCCStorage ) :

    • 管理缓存的持久化。
    • 提供方法来保存、获取和移除缓存数据,以确保缓存的有效利用。
    • 使用特定查询参数和用户标识决定缓存的唯一键值,使缓存管理更具灵活性。

2-5 响应版本和开关校验

  • 在处理请求和响应时,对版本和开关的启用状态进行检查,确保缓存的正确性和适用性。
  • 确保在版本不匹配或开关关闭的情况下替代渲染方法,以保障应用的稳定性。

2-6 请求上下文管理

  • SSRRequestContext:
    • 管理请求的状态和数据,包括是否启用首 chunk 缓存、是否命中缓存、是否复用完缓存等。
    • produceResponse:produceData: 负责处理接收到的响应和数据,根据缓存状态进行处理,包括使用缓存、替代渲染、保存缓存等。
    • 提供 matchFirstChunkCache, saveFirstChunkCache, 和 matchFCC:cacheData:response: 等方法来管理首 chunk 缓存数据的匹配和存取。

2-7 错误处理与降级策略

  • 在请求失败的情况下,如果满足特定条件,会自动降级请求为普通在线请求,以保证系统的稳定性和用户体验。

3、附上WebViewController应有的一些逻辑

  1. WebView初始化与配置

    • 使用WKWebView,进行URL拦截。
    • 支持下拉刷新、自定义导航栏、状态栏样式等。
  2. 请求处理与拦截

    • 登录拦截。
    • URL安全校验,防止恶意链接。
    • 路由拦截,处理本地协议跳转。
  3. 性能监控与埋点

    • 页面加载时间统计。
    • 错误监控与上报。
    • 应用启动阶段H5页面加载的性能追踪。
  4. UI交互

    • 显示加载状态(自定义Loading动画)。
    • 处理横竖屏切换。
    • 导航栏返回按钮和关闭按钮的逻辑。
  5. 其他功能

    • Cookie同步、第三方验证、字体注入等。

了解客户端处理的这些逻辑之后,可以考虑h5页面首屏进一步的性能优化:webview预热和文档预请求 ,具体的实现逻辑需要笔者和读者一起去学习探索:

相关推荐
他们都不看好你,偏偏你最不争气5 小时前
iOS —— 天气预报仿写总结
ios
白玉cfc11 小时前
【iOS】网易云仿写
ui·ios·objective-c
归辞...14 小时前
「iOS」——内存五大分区
macos·ios·cocoa
HX43614 小时前
MP - List (not just list)
android·ios·全栈
忆江南18 小时前
NSProxy是啥,用来干嘛的
ios
忆江南18 小时前
dyld
ios
归辞...1 天前
「iOS」——GCD其他方法详解
macos·ios·cocoa
游戏开发爱好者82 天前
没有 Mac,如何上架 iOS App?多项目复用与流程标准化实战分享
android·ios·小程序·https·uni-app·iphone·webview
Digitally2 天前
如何将 iPhone 备份到 Mac/MacBook
macos·ios·iphone
songgeb2 天前
Concurrency in Swift学习笔记-初识
ios·swift