怎么做网站步骤免费的,做一个app软件大概需要多少钱,如何下载wordpress插件之前的版本,网站建设客户去哪找01 背景 随着互联网技术的持续创新和电视行业的高速发展#xff0c;通过电视观看在线视频已经逐渐成为大众的重要娱乐方式。奇异果App作为在TV设备上用户活跃度最高的应用之一#xff0c;为广大用户提供了丰富的内容播放服务#xff0c;除此之外#xff0c;同样有会员运营、… 01 背景 随着互联网技术的持续创新和电视行业的高速发展通过电视观看在线视频已经逐渐成为大众的重要娱乐方式。奇异果App作为在TV设备上用户活跃度最高的应用之一为广大用户提供了丰富的内容播放服务除此之外同样有会员运营、专题活动等上线效率要求极高的服务提供给用户。为满足后者的诉求我们调研了目前主流的动态化和跨端技术H5、Flutter 和 React Native最终从开发效率、人力成本、动态能力和性能上选择用H5方案目前H5页面承担了奇异果App内大量的收银、运营活动、专题等业务。然而H5页面在TV设备上加载耗时过长是我们面临的主要困难如何提升 H5页面在TV设备上的用户体验是我们迫切需要解决的问题。 02 面临的挑战 挑战1TV设备换机周期较长系统碎片化问题严重目前TV端 5.0系统以下的设备占比约 30%占比很高。优化首先面临的是版本的跨度兼容低版本是首要考虑。下图为TV端系统版本占比情况 挑战2TV设备性能偏低TV设备主要分为三种电视、盒子和投影仪以上设备的的配置严重低于同时期的主流手机配置在我们的性能等级划分中CPU为4核A53架构且内存超过1.5G就已可划分为高性能设备在低性能设备中仍存在较多A7架构处理器或内存为512M的设备。 挑战3App版本碎片化严重由于电视行业合作现状的复杂性渠道较多传统电视厂商追求稳定对于升级较为慎重有较多廉价设备在售且售出后接近不维护状态合作模式的复杂导致定制较多升级困难对SDK层面的优化和上线有较大挑战。 03 优化历程 1、准备工作 在优化之前最重要的工作是统一性能口径、制定统计指标。在口径层面上我们没有采取常规的前端页面加载耗时采取了更符合用户真实体验的场景从用户点击按钮开始到真正用户可见。虽然这样会导致我们统计的指标整体耗时增加但评估后这个指标更利于我们后续优化工作的方向展开。指标口径说明如下 1页面可见耗时从客户端点击开始—客户端页面跳转—web容器初始化—前端DOM渲染完成可见。 2可交互总耗时页面可见耗时 可响应用户遥控器按键总时间。 3native页面耗时客户端页面跳转耗时。 4webview初始化web容器初始化耗时。 5调用h5耗时loadUrl到h5开始执行第一行代码耗时。 6h5加载耗时h5开始执行第一行代码到页面可见耗时。 7h5可交互耗时h5页面可见到页面可响应耗时。 统计口径统一后我们在webSDK层面对以上时间点进行投递并回收线上数据根据指标反馈的问题进行针对性的优化。在未经优化的情况下H5的加载速度平均约为 5.5 秒左右用户体验很差。通过线上数据分析H5加载耗时在整体占比较大优化H5加载耗时是我们亟需解决的问题。 2、H5加载耗时优化 H5加载耗时主要依赖于前端部分的优化由于文章篇幅有限常规的H5页面优化工作不再赘述如 1) 资源合并 2) 数据请求合并 3) 业务逻辑优化 4) DOM结构优化 5) 同地址下不同模式Async路由化加载 3、SSR优化 除以上优化之外SSR(服务器端预渲染)技术进入我们的视线之内SSR是一种优化Web应用性能和SEO的技术通过在服务器端生成初始HTML提高了页面加载速度、搜索引擎优化和用户体验。通过选择适合的框架、创建路由、编写组件、服务器配置和数据获取开发人员可以实现服务器端渲染从而为用户提供更好的Web应用体验保证首屏更快的渲染。 这种降低端上处理压力的方式非常适合TV端设备性能较差的场景。SSR虽然也有自己的缺点如虽然可以提高页面整体加载速度但不利于页面的渐进加载。经过反复实验和线上数据我们仍然认为SSR的收益整体是正向的并研发上线。实验证明SSR方案显著提升了H5页面加载速度。 通过SSR优化后的H5页面加载流程如下图所示 经过前端上述方案优化后各个版本的加载速度都得到了显著提升。H5渲染部分的耗时从平均4秒减少至1.5s以下总耗时减少至3.5秒左右。此时单纯从前端角度继续优化遇到了瓶颈投入产出比也较低需要从客户端整体角度上继续思考优化手段。 4、资源离线缓存 CDN会部署一些关键的H5资源如css、js、png、ttf等其中有不少是在前端版本周期内不变的且较大客户端在适当的时候进行预下载。在渲染页面时我们可以利用 WebView内核的 shouldInterceptRequest 回调来拦截在线 H5 URL 的加载请求如果离线缓存中没有找到该资源那么就通过在线网络进行加载如果离线缓存中找到了该资源则直接从本地磁盘读取资源返回给 WebView。这种方法能够较大提升加载资源的速度。 离线缓存方案的大致流程图如下 同时在做的过程中我们发现在低版本上Android原生的请求库HttpUrlConnection还处于http1.0的阶段不能享受http2.0的优化如通道复用这就使得预加载时的请求耗时较高。而TV端目前还有大量版本为5.0以下的低版本设备因此我们选择了切换到TV端自主研发的网络库这个网络库支持http2.0从而提升了低版本设备的请求性能。另外我们看到从用户点击到H5页面打开是有一定的系统调度时间这个时间也是可以用来做优化的即下面说的并行加载。 5、并行加载 除了上述提前缓存JS/CSS等资源的方案外提前缓存html页面也是业界常用的优化手段在页面未SSR化之前由于性能瓶颈并不在html数据下载上这种缓存机制并未取得较好的效果在页面SSR化之后这种方式又进入了我们的视野在渲染数据已经生成完毕之后这样的缓存机制理论上能够发挥更大的作用。 但同时我们又遇到了其他困难由于个性化算法在业务中的应用已经非常广泛将页面提前缓存并在一定时间内保持内容不变的方式与业务上保持页面数据实时刷新的诉求形成了冲突。这使得我们需要找到更加适合业务场景的优化的技术方案。 Android系统在做Activity页面跳转切换时会有系统耗时这个耗时和设备性能成反比我们在页面跳转切换的同时拦截用户点击 web 页面的行为来提前启动任务并行加载H5页面的SSR数据。然后根据 URL 和 cookie 参数生成一个唯一的令牌。在真正走到WebView 渲染时将 URL 重定向到缓存中。同时使用多线程锁同步和超时机制以进一步提高H5的加载速度。 并行加载方案的大致流程图如下 在完成这些优化后我们的加载速度从3.5秒继续优化到了2.8秒左右提升了约23%。经过上述的一系列优化措施我们的H5加载时间从最初的平均5.5秒降低到了2.8秒左右。然而相比于纯原生Native页面这个加载速度仍然存在较大的差距需要我们继续寻找更有效的优化手段。为了进一步提高用户体验我们进行了各种技术尝试、并通过与其他技术团队的积极交流与合作我们又有了新的思路。 6、容器预热 在APP启动并且主线程空闲的时候我们可以预热WebView引擎并构建WebView缓存池这样就能实现预热容器的复用从而提升WebView的加载速度。这种优化策略主要针对中高性能设备和内存较大的低性能设备。在设备空闲时我们进行WebView容器的预热并将预热的容器添加到缓存池中。 在我们后续的使用过程中我们直接从WebView缓存池中获取预热的WebView容器。这样可以节省创建web容器和jscore的时间。 7、页面预渲染 在TV端H5有很多业务实时场景限制特别是运营活动这一类有很强的时效性这对我们的优化带来了一定的限制。但是我们找到了一些可定制化优化的场景如当非会员用户在观看会员专享内容的时候通常会有6分钟的免费试看时间试看时间结束后会自动跳转到H5。这类场景为我们进行预渲染提供了天然的优势在类似场景下当开始倒计时自动触发预渲染使得H5内容得以提前加载实现H5的秒开效果。如下GIF图所示上图是未进行优化的加载过程可以看到明显的黑屏和加载过程下图是进行了预渲染优化的结果实现了真正的秒开。 在完成以上这些优化措施后对比去年的同期的数据我们从线上数据中看到加载时间进一步降低从最初的非SSR平均5.5秒、SSR场景下3.5秒降至现在的平均2秒左右对用户体验起到了明显的改善作用。 04 成果 我们对端上的优化进行了AB实验。经过打散平均后的试验数据显示我们的优化措施使得订单生成页转化率平均提升了约21%同时支付成功率的转化也平均提升了2.4%。 实验证明提升关键业务页面的加载速度和用户体验对业务有非常直接的正向提升作用这也为我们后续持续推进优化提供了充足的信心和动力。 05 未来规划 未来我们期望通过寻找更多方法进一步降低性能指标将页面平均耗时控制在2秒以内并且控制劣化。 此外我们注意到平均数据并不能完全反映实际的用户体验一些尾部用户仍然面临较差的使用体验我们将继续分析90分位值之后的用户遇到的实际情况并进行针对性优化。同时我们将继续针对重要的业务场景如收银台进行定制化的优化进一步提升关键业务的加载速度从而不断改善用户体验和提高业务转化。 也许你还想看 安卓TV插件化9.0内联崩溃原因及解决方案 维护几十种语言和站点爱奇艺国际站WEB端网页优化实践 爱奇艺知识WEB前端组件化实践
