小程序首页离线缓存渲染:保存页面的时机选择

2024-11-23
来源:网络整理

由于小程序的启动是受生命周期控制的,从->->->->用户操作->离开首页过程中的任何一个环节都可能因客观或主观原因而中断,这可能会导致保存的离线页面不准确,并在启动时向用户显示不正确的页面。

因此,为了首页离线缓存渲染的效果,保存页面的时机非常重要。我们提供了开发人员可以配置的时间。配置的时机有两种:渲染完成时和离开主页前。渲染完成时,首页渲染完成,在用户执行任何操作之前,将页面保存为离线缓存页面。离开主页之前,是指用户在主页上进行一系列操作后,在跳转到其他页面之前看到的页面被保存为离线缓存页面。

为了解决离开主页前保存页面的问题,我们设计了一个事件队列。小程序生命周期内可能改变首页的事件会被捕获并放入队列中。异步线程将定期从队列中获取事件。 ,然后延迟执行保存主页。由于保存操作经常在浏览器内核上进行,对性能有影响,因此这些事件会被合并处理,最终以最后一次正确保存的主页为准。

2.替换离线缓存主页和动态渲染主页时的闪屏

出现闪屏问题的场景是因为缓存页面和真实渲染页面是分开的,是两个独立的页面。缓存页面是静态页面,而真实页面是通过js动态创建的页面,所以常规做法是创建真实页面后替换缓存页面时会出现闪屏。

为了解决这个问题,我们使用虚拟DOM来解决。当加载缓存页面时,我们将缓存页面放入初始虚拟DOM中。创建真实页面后生成的虚拟 DOM 与缓存页面的虚拟 DOM 进行比较,进行 DOM diff,将变化的内容传递给浏览器内核并渲染对应的页面,这样就只显示部分变化的页面内容可以更新,无需更新整个页面,保证内容的准确性和实时性。

实测数据表明,这一优化可以实现小程序的冷启动秒级启动。

虚拟dom优化

小程序的页面渲染也采用了业界常用的虚拟DOM技术。该技术可以保证更新页面时只更新变化的部分,提高了更新的效率。缺点是虚拟DOM也是使用js实现的,运行时消耗大量CPU,执行效率不高。

它是一种弱动态类型语言,与静态类型的C和Java语言不同。相比之下,JS 的运行性能会更差,因为类型的不确定性限制了 JIT 优化编译器生成的代码质量。

鉴于这种情况,我们选择虚拟DOM作为实现方向,虚拟DOM是一种新的Web标准,它定义了网页中可执行代码的二进制格式以及相应的类汇编语言格式。他的目标是使执行代码几乎与本机机器代码一样快。它作为加速Web应用程序性能关键部分的补充,因此我们利用技术重新实现虚拟DOM的核心代码,改善小程序的页面渲染。

在进行此优化时,我们面临着桥接 js 代码性能不佳的挑战。因为js引擎和js是两个独立的引擎,他们之间的交互比js对js的性能差很多。针对这个问题,我们参考了业界的一些实现,对V8代码进行了优化,解决了js<->交互性能差的问题。

在做这个优化之前,我们首先要了解一下是什么原因导致js和交互性能不佳。由于JS和JS是两种不同类型的语言,因此引擎在执行过程中遇到语言切换时需要做一些“翻译”工作。这些翻译任务需要考虑各种情况,需要跳转到专门的存根进行处理。

由于小程序前端框架的实现代码是国内开发的,所以框架在调用 dom函数时可以传入具体的参数类型,并且参数的顺序也是固定的,但是这些参数类型和参数顺序未来不会改变。 js引擎,所以需要做一些额外的“翻译”工作,降低了交互的性能。

我们的想法是简化这些翻译任务,并在开发层面修复框架和交互代码的参数类型和顺序,防止它们发生变化。同时我们让js引擎支持参数类型和参数序列的传递。编译时会保存代码的参数类型和参数序列。运行时,js代码和类型文件被传递给js引擎,以便js引擎可以直接识别它们。函数的参数类型,以便可以直接执行参数转换然后调用方法,避免跳转到公共参数转换存根。

实测数据显示,与之前的实现相比,新实现的代码执行效率提升了50%。

开发者工具

开发者工具怎么调试小程序_开发者选项调试应用_调试器开发

支付宝小程序的目标是为用户提供优质的服务。这些服务都是我们开发者来实现的,所以如何帮助开发者提供高质量的小程序,如何保证线上小程序的质量,是我们一直在努力的事情。支付宝小程序提供了从开发、调试、发布到运维的全链路工具。这些工具不断得到改进和增强,让开发者能够更高效地开发出高质量的小程序。

开发者工具IDE支持mac和两个平台的运行,并通过开放研发平台、数据监控、日志收集等系统的访问,进一步保证桌面客户端的稳定性。提供多终端开发能力。通过集成通用能力并适应各个终端的差异,帮助开发者实现代码的多终端调试和运行,并可以一键发布到多个终端。

对于新手开发者来说,构建一套完整的后端应用过于复杂,涉及到服务器购买、域名购买、环境配置等一系列问题,每一个问题都可能阻碍开发者下一步的发展。为此,我们提供以下两种一站式云服务解决方案,让开发者快速高效地构建一套完整的后端服务:

小程序云测试服务可以帮助开发者更全面地检测小程序缺陷,评估产品质量,提高通过率。我们提供整套小程序云真机自动检测解决方案,在IDE中申请云测试服务,执行完成后自动生成测试报告。

云测试服务提供“快速测试”和“深度测试”两种测试模式,满足多维度的测试需求,并提供性能测试和优化建议。开发者可以根据优化建议对小程序代码进行优化,以提供更好的用户体验。

在线巡检

支付宝小程序目前拥有数十万生态合作伙伴。随着小程序生态的不断壮大,合作伙伴的数量也在快速增加。如何有效控制生态合作伙伴提供的服务,如何保证小程序的质量,这是我们面临的新挑战。面对这一问题,我们在制定相应的技术标准和运营规范的同时,还从质量、体验、安全、合规、效率等维度,构建了小程序从进入到运营的平台化质量和风险管控能力。

检查是开发商生态质量和风险保障的重要内容,也是发现问题的重要手段。小程序为开发者提供的服务场景非常丰富且复杂。为了解决这一系列问题,我们自建识别引擎,整合蚂蚁、阿里云等多个基础检测单位的服务能力,实现“技术+集成+平台”的方式构建主动检测能力(巡检),即巡检平台。

在平台建设过程中,我们面临的挑战包括:

开发商提供的服务场景非常丰富复杂,如支付、医疗、保险、旅游等服务,产品多元化;

小程序提供前端框架,服务内容由服务器动态呈现,随时变化,即使是上千人;

小程序技术的灵活性因素,如允许内联、Js动态加载等;

小程序规模庞大,拥有数百万个应用程序、数千万个页面,并且还在不断增长。

该检测平台具有以下特点:

小程序审核平台上线以来,实现智能效率提升94%,小程序平均审核时间从70.59小时缩短至4.27小时,实现零积压。根据业务需求,以不同频率进行检查。截至目前,已发现并处理数以万计的问题小程序,提升了线上小程序服务质量。

多面性

在支付宝小程序的开发过程中,集团内部各BU也有强烈的需求,希望在自己的应用上运行小程序,以拓展业务场景,增加用户活跃度。为了避免重复发明轮子,与大家共享小程序生态,我们需要从业务和技术角度打通小程序技术栈,输出支付宝小程序技术,帮助集团内部BU有运行能力小程序。

调试器开发_开发者选项调试应用_开发者工具怎么调试小程序

目前,支付宝小程序正在逐步打通阿里巴巴生态。开发者一次开发即可,阿里巴巴的各大应用可以在多个终端上运行,通过小程序连接阿里巴巴经济体。小程序的对外输出技术主要包括两部分。一是小程序运行时的SDK,需要集成到连接的客户端中。另外就是小程序的互操作性,需要接入平台和小程序。平台互联,大家共享同一个小程序生态。

小程序SDK

小程序输出的SDK包含基础引擎和能力插件两部分。基本引擎是必要且不可替代的。它承载了小程序的基础能力,包括前端框架和容器的核心能力,以及提供渲染的内核。它提供了小程序的核心运行时和基础核心组件,同时也提供了能力插件的插件容器。插件容器具有良好的隔离性,不会因为插件而导致容器失败,保证了小程序的核心运行时。稳定。

小程序互通

小程序的技术栈除了前端框架和客户端运行时之外,还包括开发者的入口,小程序的创建、开发和上线,以及后续的维护和运营管理。为了给用户和开发者提供更好的体验,小程序的互操作性是小程序技术输出的必要组成部分。

平台互通:开发者可以在自己入驻的开放平台上对下发到所有终端的小程序进行管理,包括小程序开发、调试、测试、发布、运维、管理等一系列工作。

研发平台互通基于支付宝开放平台能力,通过门户接入和互通、开发者系统接入和互通、审计能力接入和互通、小程序研发链路接入和互通、小程序运营链路接入和互通,统一开发和发布流程。互操作性使开发人员能够进行一次开发并在多个设备上交付。

运营管理平台通过统一的跟踪SDK提供多终端小程序的自动跟踪能力,并输出标准化的行为、异常和性能数据模型。通过数据分析平台,为各端小程序提供实时数据分析能力,进一步提供用户特征分析、页面分析、用户留存分析支撑小程序自主开发和运营可视化数据的能力。同时还支持为小程序定制数据采集点配置开发,并开放分析管理,支持对小程序中的用户行为进行精细化跟踪分析,满足页面访问等标准统计之外的个性化分析需求。

工具平台为开发者提供统一的开发者工具,帮助开发者更好地开发和测试小程序。同时,接入的终端可以扩展模拟器和开发者工具的特色接口,方便开发者在终端内创建功能。调试能力。

能力互通:支付宝的支付、会员、优惠券、信用等特殊能力可以通过扩展或插件导出到连接的客户端。同样,连接的客户端也可以将自己独特的能力导出到小程序中。联盟的另一端服务于更多的用户。所有终端的基础能力都是一致的,客户端的特殊能力可以通过扩展集成到小程序API中,也可以以插件的形式发布到插件市场。用户在使用时可以动态下载插件,屏蔽终端差异。

用户互通:多终端下发的小程序需要绑定账号,用户无需登录,为用户提供一致的用户体验。 SDK提供了一套完整的注册、登录、授权、账户绑定管理等基础功能,完成多个APP之间的账户互通,保证整个流程安全可控。通过账户通行证,可以扩大小程序服务的覆盖范围,将支付能力和X服务能力覆盖给更多客户,让服务接入便捷、多终端权益开放、多终端体验统一。

小程序的技术栈不仅输出阿里巴巴集团内部,还可以输出到外部应用商家,帮助应用商家丰富业务场景,为用户提供更有价值的服务。欢迎加入支付宝小程序联盟,通过小程序连接阿里巴巴经济体,共同做强小程序生态。

推荐活动

GMTC 2019全球大前端技术大会将于6月在北京盛大开幕。来自BAT、美团、京东、滴滴等前端前端专家将与您面对面畅谈前端及大咖最新技术动态和趋势前端。最佳实践示例。目前,会议门票正在以最低 30% 的价格购买。讲师和课题的招募也在进行中。点击“阅读原文”了解更多会议详情!

分享