本发明属于react页面,具体为一种基于多引擎技术提升react页面访问性能的方法。
背景技术:
1、react是使用react库构建的web页面,react是一个用于构建用户界面的javascript库,它允许开发者创建可复用的组件,这些组件构成了整个页面的结构,react通过声明式的方式来更新和渲染dom,使得构建复杂的用户界面变得更加简单和高效,在react页面中,开发者通常会使用jsx(javascript xml)语法来编写组件的结构和样式,以及处理用户交互和状态管理。
2、现有技术通过原生容器,提前预加载的方式适当规避了js代码加载慢的问题,另外,通过js页面技术,包括懒加载、延迟加载、提前下载资源等方式来提升页面加载速度,但是这种方案需要提前预判下一步需要加载的页面,仅适用于特定场景,没有通用性,预加载只能规避js代码启动性能慢的问题,页面运行期间依然效率低,而修改js代码,需要开发人员有一定的技术能力来改造,需要很高的代码编写和维护成本,加大了人力投入,现有的recat页面优化方案,多数要求js代码做出修改才能适配,成本过大,javascript主流引擎都是为pc端设计的,功能强大但性能消耗也很大,一般采用jit的解析模式边解析边执行,灵活性高但是性能不佳,在移动端还会导致内存和cpu占用过高的现象,导致react页面性能进一步降低,因此需要在不改造现有javascript代码的前提下,解决react页面访问性能不如原生代码编写的页面的问题和移动端内存和cpu占用过高的现象。
技术实现思路
1、本发明的目的在于提供一种基于多引擎技术提升react页面访问性能的方法,以解决上述背景技术中提出的问题。
2、为了实现上述目的,本发明提供如下技术方案:一种基于多引擎技术提升react页面访问性能的方法,具体步骤如下:
3、步骤一:jsbundle动态更新
4、jsbundle动态更新如说明书附图1所示,服务端生成的react页面,统一采用js编码,无需改造,客户端多个引擎使用同一套代码;
5、客户端请求react页面时,采用bsdiff算法,仅仅只需要下载补丁代码,恢复成新的jsbundle;
6、步骤二:多引擎切换
7、核心流程图如说明书附图2所示,客户端集成多个js引擎,用于即时解析执行js源码页面;同时集成专门为移动端设计的hermes引擎,无需jit的解析过程;
8、当react框架加载一个页面时,判断是否是实时页面;如果是实时页面,则启用jscore引擎直接加载js源码,达到即时渲染的效果;
9、同时在后台,并发启动一个异步线程,开始进行js源码的aot编译,生成二进制可执行文件;
10、当下次加载该页面时,因为已经有二进制文件了,就启用hermes引擎加载,提升代码执行效率;这一步优化,能明显缩短加载时长,提升页面流畅度,达到提升用户体验效果的目的。
11、优选地,步骤一中所述react组件和库均需要经过测试,并在不同的引擎和环境下都能正常工作。
12、优选地,步骤二中所述引擎是一个专门处理javascript脚本的虚拟机,pc端引擎可以选择jscore或者v8。
13、优选地,步骤二中所述移动端引擎hermes,hermes引擎可以直接执行二进制文件。
14、优选地,步骤二中所述的aot是在程序运行之前将代码编译为机器码,以提高程序执行速度的一种编译技术。
15、优选地,步骤一所述bsdiff算法,可以确保在下载时只下载页面变更部分的代码,而不是整个jsbundle,客户端只需要下载少量的补丁代码,然后将其应用到现有的jsbundle上,从而恢复成新的jsbundle。
16、优选地,步骤二中所述进行js源码的aot编译,能够通过aot编译技术将javascript代码编译成二进制可执行文件,以供下次加载该页面时使用hermes引擎加载。
17、优选地,步骤二中所述的多引擎切换机制,通过集成多个引擎,系统可以根据不同设备和网络条件自适应地选择最合适的引擎来执行javascript代码,从而确保应用的稳定性和性能。
18、优选地,步骤二中所述的bsdiff算法和aot编译工具需要定期更新,以利用最新的性能优化和修复。
19、本发明的有益效果如下:
20、通过引入了专为移动端设计的hermes引擎,其设计优化显著降低了cpu和内存的占用,使页面运行更为流畅且高效,其次,本方法支持javascript的源码增量下发技术,即利用bsdiff算法,仅需下载新代码的补丁部分,从而快速更新jsbundle,显著增强了app的快速响应能力,此外,该方法支持多种代码运行方式,既能实时解析javascript源码,实现源码页面的即时渲染,又能在客户端并发启动异步线程,对js源码进行aot编译,生成二进制可执行文件,当再次加载页面时,通过加载已编译的二进制代码,大幅缩短了react页面的加载时间,提升了页面流畅度,从而整体上提升了用户体验效果。
1.一种基于多引擎技术提升react页面访问性能的方法,其特征在于,具体步骤如下:
2.根据权利要求1所述的一种基于多引擎技术提升react页面访问性能的方法,其特征在于:步骤一中所述react组件和库均需要经过测试,并在不同的引擎和环境下都能正常工作。
3.根据权利要求1所述的一种基于多引擎技术提升react页面访问性能的方法,其特征在于:步骤二中所述引擎是一个专门处理javascript脚本的虚拟机,pc端引擎可以选择jscore或者v8。
4.根据权利要求1所述的一种基于多引擎技术提升react页面访问性能的方法,其特征在于:步骤二中所述移动端引擎hermes,hermes引擎可以直接执行二进制文件。
5.根据权利要求1所述的一种基于多引擎技术提升react页面访问性能的方法,其特征在于:步骤二中所述的aot是在程序运行之前将代码编译为机器码,以提高程序执行速度的一种编译技术。
6.根据权利要求1所述的一种基于多引擎技术提升react页面访问性能的方法,其特征在于:步骤一所述bsdiff算法,可以确保在下载时只下载页面变更部分的代码,而不是整个jsbundle,客户端只需要下载少量的补丁代码,然后将其应用到现有的jsbundle上,从而恢复成新的jsbundle。
7.根据权利要求1所述的一种基于多引擎技术提升react页面访问性能的方法,其特征在于:步骤二中所述进行js源码的aot编译,能够通过aot编译技术将javascript代码编译成二进制可执行文件,以供下次加载该页面时使用hermes引擎加载。
8.根据权利要求1所述的一种基于多引擎技术提升react页面访问性能的方法,其特征在于:步骤二中所述的多引擎切换机制,通过集成多个引擎,系统可以根据不同设备和网络条件自适应地选择最合适的引擎来执行javascript代码,从而确保应用的稳定性和性能。
9.根据权利要求1所述的一种基于多引擎技术提升react页面访问性能的方法,其特征在于:步骤二中所述的bsdiff算法和aot编译工具需要定期更新,以利用最新的性能优化和修复。
