剪映业务的大前端实践:创新以用户需求为导向

2024-01-05 14:04

本文主要是介绍剪映业务的大前端实践:创新以用户需求为导向,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

近日,由51CTO主办的WOT全球技术创新大会2023·深圳站成功举办,众多企业CTO、技术团队负责人在会场分享了优秀的技术实践。其中,剪映前端开发工程师赵培霏分享了主题为《剪映业务的大前端实践》的演讲。

近日,由51CTO主办的WOT全球技术创新大会2023·深圳站成功举办,众多企业CTO、技术团队负责人在会场分享了优秀的技术实践。其中,剪映前端开发工程师赵培霏分享了主题为《剪映业务的大前端实践》的演讲。

赵培霏主要负责剪映前端的商业化模块,在跨端、中后台领域有较多的探索和实践。在此次分享中,赵培霏从业务场景及架构、用户体验提升、端融合实践和智能化探索四方面出发,为大家带来技术实践分享。

自研Lynx架构,突破多端、多场景、高性能技术难点

赵培霏表示,目前,剪映APP的前端应用是非常广泛的,前端业务的复杂性与重要性也使得其所在的团队面临着重重挑战,其中有三个主要技术难点,即多端、多场景、高性能。多端是指剪映前端业务不仅要跨web端,还需要跨PC端,也就是说需要同时支持Mac版本和Windows版本;多场景是指前端涉及到的业务模块非常多,对应的弹框页面也非常多,并且剪映业务涉及全球多个国家和地区,也进一步增加了业务场景;高性能则要求,在用户量巨大的情况下,保证整体的用户体验。

针对以上情况,赵培霏团队使用了React Lynx架构,该方案把端渲染和自渲染结合:在iOS和安卓侧,利用端渲染,也就是使用平台原生的组件去做渲染,从而降低成本;在Mac OS和Windows侧,利用剪映自建的自渲染框架,从而实现多端适配。此外,React Lynx架构也可以帮助前端业务达成高性能目标。在编译侧,React Lynx会把业务代码分成三部分,分别是ttml.js、lepus.js和app-service.js。在运行侧,有两个线程,一个是UI线程,另一个是JS线程。UI线程直接运行在Native侧,就是原生侧,它整体的渲染速度非常快;在JS线程执行加载公共的core.js,以及业务上的JS代码,然后再去做对应的渲染。通过这个双线程的方案,缩短白屏时间,实现首屏直出。

多方案优化,提升用户应用体验

谈及用户体验感,赵培霏首先为大家介绍了两个概念,一个是活跃意愿,一个是消费意愿。活跃意愿是指用户愿意去打开APP,用户行为会提高APP的日活、月活等数据;消费意愿是指用户打开了APP,是否愿意在APP里面持续使用、持续消费。

赵培霏认为,提升用户体验可以从优化页面常规渲染流程开始,页面常规渲染流程包括静态资源加载、动态资源加载和内容渲染三部分。

首先,优化静态资源加载可以从三方面入手,第一,通过把相关资源内置到APP里,从而减少静态资源加载内容;第二,在合适的时机将用户可能会需要的静态资源提前下载下来,从而保证用户使用的流畅度;第三,业务迭代时,只更新修改过的代码,降低静态资源下载需求量。

其次,相较于静态资源,动态资源就必须得加载,因此优化方案就会针对早加载和少加载两个方向发力。赵培霏团队采取预拉取的方式,即在合适的时候提前拉取接口、图片、视频等动态资源,提早加载动态资源;通过视频、图片格式优化方式,减少内容大小。

最后,内容渲染环节优化与动态资源加载优化逻辑类似,在合适的场景,在后台创建对应的Lynx容器,对页面进行隐式渲染;再通过list、ViewPager组件自带的懒加载能力,优先渲染适合的元素节点。

此外,赵培霏还强调,因为剪映APP的特殊性,仅仅是优化页面渲染的流程还不能给用户带来优质的应用体验。因此,还需要针对不同的手机型号,做出不同的调整,从而保障用户的应用体验。

结合Lynx和Native优势,开展端融合实践

赵培霏分享的第三个部分为端融合实践。他首先介绍了Lynx组件与Native组件各自的优势,Lynx组件的整体迭代效率非常高,且开发成本低;而Native组件底层控制能力更有优势,能够带来更好的用户体验感。将两种组件融合起来,利用Native优质的底层控制能力,并在Lynx页面里面使用Native的组件,然后在对应Native的页面里面使用相应的Lynx组件,来满足应用的快速迭代需求也能提高用户应用满意度。

例如,在“剪同款”页面里,可能会因为大量的动图占用用户内存而发生OOM情况,这种情况下,赵培霏团队就会选择利用Native组件对动图内存优化的功能来提高应用流畅度。另外,视频编辑的整体界面是由Native来实现的,当涉及到部分区块进行产品迭代时,就可以由前端通过Lynx的方式去实现。

内容智能化探索,提高用户消费意愿

在这部分,赵培霏先为大家介绍了剪映APP上的几个商业化场景,包括:开屏订阅引导、固定入口引导、权益拦截弹框和订阅页权益展示。这些商业化场景往往都具有视频场景多、用户人群多、权益种类多的特点。在这种情况下,赵培霏团队通过智能分发方案来提高用户的消费意愿。也就是说,通过给对应的用户群来展示这些用户可能更感兴趣或者对用户更有吸引力的特定权益或者文案,来提高用户整体的付费意愿。

赵培霏表示,内容智能化方案主要包括两方面内容,一方面是用户模型,另一方面是权益分发。利用用户模型对用户特征进行深入挖掘,进一步分析用户的喜好,针对特定人群做定向分发策略。权益分发包括混排、精排等工作,比如,通过将付费与免费的素材进行混合排列,提高用户的付费几率。再比如,预估权益banner的点击率和转化率,将点击率和转化率高的banner提前,通过这种精排来提高用户付费率。

整体的内容智能化落地则会通过整体的内容管理后台,针对各种资源进行相关配置,不同的资源位会匹配不同的文案与权益,再通过后台代码设定,算法会自动判断并进行分发。其中,赵培霏团队还会在分发服务中做AI判断,利用AI判断的人群圈选、用户画像和算法模型相关能力,保证不同的人群能够看到不同的对他更有吸引力的相关权益和文案。最后,通过对相关数据的进一步挖掘,明晰用户画像,促进智能分发的精确性不断提高,从而提高用户的付费意愿。

结语

随着技术的不断进步和应用的不断深化,大前端扮演着越来越重要的角色。赵培霏的分享也表明,大前端的技术栈将会更丰富、更智能,业务的开发也更注重用户体验感的提升。广大前端工程师也需要不断学习和创新,以适应变化并推动技术的发展。 

这篇关于剪映业务的大前端实践:创新以用户需求为导向的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/573102

相关文章

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

Spring Boot 配置文件之类型、加载顺序与最佳实践记录

《SpringBoot配置文件之类型、加载顺序与最佳实践记录》SpringBoot的配置文件是灵活且强大的工具,通过合理的配置管理,可以让应用开发和部署更加高效,无论是简单的属性配置,还是复杂... 目录Spring Boot 配置文件详解一、Spring Boot 配置文件类型1.1 applicatio

tomcat多实例部署的项目实践

《tomcat多实例部署的项目实践》Tomcat多实例是指在一台设备上运行多个Tomcat服务,这些Tomcat相互独立,本文主要介绍了tomcat多实例部署的项目实践,具有一定的参考价值,感兴趣的可... 目录1.创建项目目录,测试文China编程件2js.创建实例的安装目录3.准备实例的配置文件4.编辑实例的

Python 中的异步与同步深度解析(实践记录)

《Python中的异步与同步深度解析(实践记录)》在Python编程世界里,异步和同步的概念是理解程序执行流程和性能优化的关键,这篇文章将带你深入了解它们的差异,以及阻塞和非阻塞的特性,同时通过实际... 目录python中的异步与同步:深度解析与实践异步与同步的定义异步同步阻塞与非阻塞的概念阻塞非阻塞同步

Python Dash框架在数据可视化仪表板中的应用与实践记录

《PythonDash框架在数据可视化仪表板中的应用与实践记录》Python的PlotlyDash库提供了一种简便且强大的方式来构建和展示互动式数据仪表板,本篇文章将深入探讨如何使用Dash设计一... 目录python Dash框架在数据可视化仪表板中的应用与实践1. 什么是Plotly Dash?1.1

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

springboot集成Deepseek4j的项目实践

《springboot集成Deepseek4j的项目实践》本文主要介绍了springboot集成Deepseek4j的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录Deepseek4j快速开始Maven 依js赖基础配置基础使用示例1. 流式返回示例2. 进阶

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处