RN 官方框架对 dom 元素的“按需加载”与“按需卸载”支持存在着先天性不足，即“元素从屏幕外滑动到屏幕内”与“元素从屏幕内滑动到屏幕外”处理比较粗暴，不能够很好的做到“按需加载”与“按需卸载”，有大量不在屏幕上的元素被加载渲染，而滑动出屏幕的元素也不能卸载与释放，甚至有些元素一直驻留内存。
小红书 RN 业务（电商、社区）基本都包含大量的图片，上述问题则会导致有大量“冗余”图片被请求加载以及渲染，而滑出屏幕后又不能按需“卸载”。这会带来以下业务痛点：（1）大量冗余网络请求，导致网络流量的浪费；（2）内存的增加，导致 OOM 的增加；（3）冗余图片的加载与渲染，影响图片加载性能。基于以上背景我们提出了“基于 N 叉树快速检测目标是否可见机制”从底层原生框架彻底解决，并且取得了显著的成效。比如 iOS 平台流量节约（仅电商业务商详）大致 8.8%、页面容器内存平均降低 9M 左右等。

演讲提纲：
1. 问题背景

• RN 官方框架对 dom 元素的“按需加载”与“按需卸载”支持存在着先天性不足
• 小红书 RN 业务特点
• 前端方案对元素屏幕外释放机制方案存在缺陷
• 小红书 RN 业务面临痛点
  • 大量冗余网络请求，导致网络流量的浪费
  • 内存的增加，导致 OOM 的增加
  • 冗余图片的加载与渲染，影响图片加载性能
  • 业务侧对 FlatList 屏幕外元素释放优化成本较高

2. 问题分析

• 业务场景分析
  • 规则化长列表场景
  • 无规则化业务场景
  • 动画平移场景
• 问题详细分析
  • 判断节点是否在屏幕内外标准是什么？
  • 哪些节点需要检测是否在屏幕内或者外？
  • 在什么时候对节点检测比较合适？
  • 如何检测节点是否在屏幕内或者外？
• 内存降低效果如何验证？

3. 技术方案

• 目标检测算法
  • 技术方案概述：基于 N 叉树快速检测目标是否可见机制
    • 统计节点包含图片节点数目
    • 确定检测任务执行时机
    • 派发检测任务（子树递归检测任务、移除 dom tree 检测任务）
    • 系统绘制时对标记检测节点执行检测
    • 屏幕内外图片节点分别处理图片相关任务
• 内存统计优化方案

4. 优化效果

• 图片请求流量 iOS 单端电商商详业务节约大致 8.8%
• 内存优化平均降低 8.11M
• 图片加载耗时提升大约 49% 左右
• 全业务无感知，代码无侵入性，节省优化成本
• 算法方案无性能体验负反馈

5. 未来规划

• 该检测算法不局限于图片元素，算法支持指定某类型元素检测（比如视频、文本）
• 算法方案可直接应用到 iOS 原生、算法思想可扩展到其他平台比如 Android、Flutter
• 该算法方案直接可以直接应用到基于 LCP 的可交互性首屏监控
• 其他应用，视图层级统计、垃圾 view 悬挂等

你将获得：

• FlatList 在元素“按需加载”与“按需卸载”方案上深层的先天性不足
• 前端框架实现的 lazyload 方案为什么也不能从本质上解决问题
• RN 与 Weex 在 Dom 元素构造设计上存在着本质差异

要想优化它就要度量它，在做前端性能优化时，随着前端日新月异的发展，越来越多的指标可以帮助我们审视网页性能，资源压缩大小、加载时间、第一次文本渲染、接口响应时间等等。那最终什么可以代表网页的性能指标，我们结合自身产品特点，对哪些指标进行优化，可以符合用户主观的体验感受呢？演讲者将结合在华为云 PaaS 产品部的体验度量实践，分享如何以用户的视角，结合传统设计交互领域的用户研究理论知识，例如多尔蒂阈值、大脑反应时长等，讲述如何根据产品特点，根据你的目标用户群体画像、业务使用场景，站在用户主观体验感受上，建立合理的性能指标体系，指导产品完成前端交互的体验提升。不仅在指标上取得提升，更重要的是获取用户的性能提升感知反馈。

演讲提纲：
1. 站在用户的主观角度，什么样的页面交互是优秀的性能表现

• 页面加载时间、白屏时间等常见网页度量指标有的时候并不直接与用户主观性能体验感知直接挂钩
• 结合用户交互的理论研究，我们如何定义用户直观的性能感官
  • 心理学时间感知
  • 多尔蒂阈值

2. 华为体验度量模型 SEEEP

• 结合用户交互的理论研究，我们如何定义用户体验中的性能感官
• 华为体验度量模型 SEEEP
  • S：Stablility
  • E：Engagement
  • E：Ease of use
  • E：Efficiency
  • P：Pleasure
• 稳定性展开
  • 性能
    • 指标构成
    • 结合用户交互理论，SEEEP 性能得分公式
    • 大数据下的计算策略，降噪、P90、加权
  • Js 错误

3. 华为云 PaaS 产品部实践案例

• Devcloud 与 clouddragon 共计前端服务 50+ 的整体性能提升实践与效果
• 业务性能看护工具 Furion
• 自动化预警与告警策略
• 产品化的性能优化建议，业务团队自主定位解决
• 自动生成的可视化双周、月度性能报告

4. 总结与展望

你将获得：

• 华为云体验度量指标体系
• 前端体验优化实践
• 构建适配你产品特点的性能指标体系
   

QUIC 协议作为新一代传输协议，解决了 TCP 协议的诸多问题，得到了 IETF、W3C 标准化组织的支持和推荐，在互联网传输的重要性越来越大。在腾讯使用 QUIC 的业务和流量逐渐增多，我们基于过去几年在协议优化上的工作，为业务量身打造了 TQUIC 网络库，这里分享在协议栈研发、弱网场景下传输性能优化等技术，介绍 TQUIC 在业务上的收益，以及对未来的展望。

演讲提纲：
1. 介绍 QUIC 协议的发展及应用

• QUIC 协议介绍
• QUIC 协议解决了什么问题
• 在 Web 和移动端的应用场景

2. 腾讯 TQUIC 介绍

• 现状和问题
• TQUIC 网络库功能特性介绍
• 腾讯云 CLB QUIC 功能介绍

3. 弱网传输体验优化

• 弱网及跨网场景下面临的问题
• 握手延迟极致优化
• 基于连接迁移、启发式评估技术实现无卡顿
• QUIC 实时传输

4. 总结及前景展望

• QUIC 在腾讯落地效果总结
• 协议前景展望，WebTransport 带来的新变化

你将获得：

• 网络库研发经验，实践和落地方法
• 弱网场景如何提升用户体验
• QUIC 协议前沿特性的研究及展望

传统 Native 开发需求上线周期长，研发效率低，随着需求迭代，包体越来越大，为了解决这些痛点，美团引入了 RN 技术栈。RN 的页面在启动时需要经历下载 js bundle，创建 js 引擎，加载 js bundle，运行 js bundle 这些步骤，因此基于 RN 技术栈的页面首屏加载时间普遍都较高，影响用户体验。对于 js bundle 的下载，可以利用缓存技术避免每次下载，我们也可以提前创建一些空的 js 引擎，节约引擎创建的时间，进一步，可以复用页面用过的引擎，节约 js 加载时间。除了加快引擎的创建，网络请求前置也是常用的优化手段，但是这些常规手段对于一些低频页面的冷启动却很难奏效，因为这些低频页面没有可复用的引擎，首次 js 代码加载和运行是很慢的，尤其是对于性能较差的设备。RN SSR 创新的将 SSR 引入 RN 技术栈，通过服务端渲染出构建页面的序列，这些序列在客户端直接创建 view 树，不需要等待 js 引擎的创建和代码运行，大大降低了首屏的加载时间，提升了用户体验。

演讲提纲：
1. 阐述背景

• 常规 RN 页面优化手段无法优化低频页面的加载性能

2. RN SSR 原理

• 序列生成
• 同构

3. RN SSR 工程化

• 客户端
  • 事件绑定
  • 降级策略
• 服务端
  • RN SSR 基本问题
  • RN SSR 服务端工程化

4. 总结与展望

• Serverless SSR
• 服务端预渲染

你将获得：

• RN SSR 的原理
• RN SSR 工程化的经验
• 提升基于 RN 技术栈页面的首屏加载性能新思路