CN116186439A - 浏览器页面渲染方法、装置、电子设备及可读存储介质 - Google Patents

浏览器页面渲染方法、装置、电子设备及可读存储介质 Download PDF

Info

Publication number
CN116186439A
CN116186439A CN202310102272.1A CN202310102272A CN116186439A CN 116186439 A CN116186439 A CN 116186439A CN 202310102272 A CN202310102272 A CN 202310102272A CN 116186439 A CN116186439 A CN 116186439A
Authority
CN
China
Prior art keywords
page
rendering
logic
browser
thread
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202310102272.1A
Other languages
English (en)
Inventor
林敏毅
何贤俊
贺朝辉
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Zhongshan Camry Electronic Co Ltd
Original Assignee
Zhongshan Camry Electronic Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Zhongshan Camry Electronic Co Ltd filed Critical Zhongshan Camry Electronic Co Ltd
Priority to CN202310102272.1A priority Critical patent/CN116186439A/zh
Publication of CN116186439A publication Critical patent/CN116186439A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • YGENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02DCLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Information Transfer Between Computers (AREA)

Abstract

本发明提供了一种浏览器页面渲染方法、装置、电子设备及可读存储介质,涉及互联网技术领域。该方法应用于安装有浏览器且运行有浏览器的逻辑线程和渲染线程的电子设备,其中当逻辑线程在设定时间内未生成新的页面数据更新事件时,将触发器队列中的全部页面数据更新事件推送至渲染线程;渲染线程基于获得的页面模板代码和全部页面数据更新事件渲染浏览器页面。相较于现有技术,本方案采用双线程机制,由逻辑线程提交触发器队列中的全部页面数据更新事件给渲染线程,使得渲染线程基于此一次性渲染出浏览器页面,避免了单线程机制的多次渲染造成浏览器页面卡顿。

Description

浏览器页面渲染方法、装置、电子设备及可读存储介质
技术领域
本发明涉及互联网技术领域,具体而言,涉及一种浏览器页面渲染方法、装置、电子设备及可读存储介质。
背景技术
随着互联网技术的发展,人们随时随地可以上网,上网过程中经常会用到浏览器。现有技术中,在浏览器的使用过程中,其页面渲染机制如下:
当用户在浏览器打开页面时,JS(JavaScript)线程会先执行同步任务,执行完同步任务之后会执行微任务队列的微任务,当微任务队列清空后,JS线程停滞,如果前面执行的任务涉及到页面渲染更新,GUI(Graphical User Interface,图形用户界面)线程就会立即启动,执行页面渲染。页面渲染完毕后,JS线程继续执行宏任务,此时执行宏任务的过程中可能会产生新的同步任务甚至微任务需要执行,这个过程中都可能会涉及页面更新使得GUI线程继续启动执行页面渲染。
在这种情况下,如果有多个宏任务,可能会导致GUI线程连续进行页面渲染,多次连续的页面渲染任意导致浏览器界面卡顿,使得用户体验较差。
发明内容
本发明的目的在于提供一种浏览器页面渲染方法、装置、电子设备及可读存储介质,以改善现有技术存在的问题。
本发明的实施例可以这样实现:
第一方面,本发明提供一种浏览器页面渲染方法,应用于电子设备,所述电子设备安装有浏览器,且运行有所述浏览器的逻辑线程和渲染线程,所述逻辑线程维护有触发器队列;所述方法包括:
当所述逻辑线程在设定时间内未生成新的页面数据更新事件时,将所述触发器队列中的全部页面数据更新事件推送至所述渲染线程;
所述渲染线程基于获得的页面模板代码和所述全部页面数据更新事件渲染浏览器页面。
在可选的实施方式中,在当所述逻辑线程在设定时间内未生成新的页面数据更新事件时,将所述触发器队列中全部页面数据更新事件推送至所述渲染线程的步骤之前,所述方法还包括:
所述浏览器获得页面资源;所述页面资源包括所述浏览器页面的逻辑代码和所述页面模板代码;
所述逻辑线程基于所述逻辑代码,生成至少一个页面数据更新事件,并依次将每个所述页面数据更新事件放入所述触发器队列。
在可选的实施方式中,所述逻辑代码包括至少一段触发器代码;所述逻辑线程基于所述逻辑代码,生成至少一个页面数据更新事件的步骤包括:
查找所述逻辑代码中全部的触发器代码;
针对每个所述触发器代码,生成所述触发器代码对应的页面数据更新事件。
在可选的实施方式中,在所述浏览器获得页面资源的步骤之前,所述方法还包括:
所述浏览器响应于用户针对所述浏览器的点击操作,获得初始页面资源;所述初始页面资源包括初始浏览界面的初始逻辑代码和初始页面模板代码;
所述浏览器开启所述逻辑线程;
所述逻辑线程执行所述初始逻辑代码,并在触发初始渲染事件时将所述初始渲染事件推送至渲染线程;
所述渲染线程基于初始页面模板代码执行所述初始渲染事件以渲染所述初始浏览界面。
第二方面,本发明提供一种浏览器页面渲染装置,应用于电子设备,所述电子设备安装有浏览器;所述装置包括所述浏览器的逻辑模块和渲染模块;
所述逻辑模块用于维护触发器队列,并在当在设定时间内未生成新的页面数据更新事件时,将所述触发器队列中全部页面数据更新事件推送至所述渲染模块;
所述渲染模块用于基于获得的页面模板代码和所述全部页面数据更新事件渲染浏览器页面。
在可选的实施方式中,所述装置还包括获取模块,在所述逻辑模块用于将所述触发器队列中全部页面数据更新事件推送至所述渲染线程之前:
所述获取模块用于获得页面资源;所述页面资源包括所述浏览器页面的逻辑代码和所述页面模板代码;
所述逻辑模块还用于基于所述逻辑代码,生成至少一个页面数据更新事件,并依次将每个所述页面数据更新事件放入所述触发器队列。
在可选的实施方式中,所述逻辑代码包括至少一段触发器代码;所述逻辑模块用于基于所述逻辑代码,生成至少一个页面数据更新事件时,具体用于:
查找所述逻辑代码中全部的触发器代码;
针对每个所述触发器代码,生成所述触发器代码对应的页面数据更新事件。
在可选的实施方式中,在所述获取模块用于获得页面资源之前,所述获取模块还用于:
响应于用户针对所述浏览器的点击操作,获得初始页面资源;所述初始页面资源包括初始浏览界面的初始逻辑代码和初始页面模板代码;
开启所述逻辑线程;
所述逻辑模块还用于:
执行所述初始逻辑代码,并在触发初始渲染事件时将所述初始渲染事件推送至渲染线程;
基于初始页面模板代码执行所述初始渲染事件以渲染所述初始浏览界面。
第三方面,本发明提供一种电子设备,包括:存储器和处理器,所述存储器存储有所述处理器可执行的机器可读指令,当所述电子设备运行时所述处理器执行所述机器可读指令以实现如前述实施方式中任一项所述的浏览器页面渲染方法。
第四方面,本发明提供一种计算机可读存储介质,所述计算机可读存储介质存储有计算机程序,所述计算机程序被处理器执行时实现前述实施方式中任一项所述的浏览器页面渲染方法。
与现有技术相比,本发明实施例提供了一种浏览器页面渲染方法、装置、电子设备及可读存储介质,该方法应用于安装有浏览器且运行有浏览器的逻辑线程和渲染线程的电子设备,其中当逻辑线程在设定时间内未生成新的页面数据更新事件时,将触发器队列中的全部页面数据更新事件推送至渲染线程;渲染线程基于获得的页面模板代码和全部页面数据更新事件渲染浏览器页面。相较于现有技术,本方案采用双线程机制,由逻辑线程提交触发器队列中全部页面数据更新事件给渲染线程,使得渲染线程基于此一次性渲染出浏览器页面,避免了单线程机制的多次渲染造成浏览器页面卡顿。
附图说明
为了更清楚地说明本发明实施例的技术方案,下面将对实施例中所需要使用的附图作简单地介绍,应当理解,以下附图仅示出了本发明的某些实施例,因此不应被看作是对范围的限定,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他相关的附图。
图1为本发明实施例提供的一种浏览器页面渲染方法的流程示意图之一。
图2为本发明实施例提供的一种浏览器页面渲染方法的流程示意图之二。
图3为本发明实施例提供的一种浏览器页面渲染装置的结构示意图。
图4为本发明实施例提供的一种电子设备的结构示意图。
具体实施方式
为使本发明实施例的目的、技术方案和优点更加清楚,下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例是本发明一部分实施例,而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。
因此,以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围,而是仅仅表示本发明的选定实施例。基于本发明中的实施例,本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都属于本发明保护的范围。
应注意到:相似的标号和字母在下面的附图中表示类似项,因此,一旦某一项在一个附图中被定义,则在随后的附图中不需要对其进行进一步定义和解释。
需要说明的是,在不冲突的情况下,本发明的实施例中的特征可以相互结合。
在此,首先对本发明涉及的关键词或者关键术语进行介绍:
1、DOM:Document Object Model(文档对象模型),DOM是HTML(Hyper Text MarkupLanguage,超文本标记语言)和XML(Hyper Text Markup Language,可扩展标记语言)文档的编程接口。它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容。DOM将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合。简言之,它会将Web页面和脚本或程序语言连接起来;
2、React:用于构建用户界面的JS库,是一个将数据渲染为HTML视图的开源JS库;
3、Vue:一套用于构建用户界面的渐进式JavaScript框架。
为了解决上述背景技术提及的现有技术中多次连续的页面渲染任意导致浏览器界面卡顿的问题,当前现有技术的一种主流做法为采用虚拟DOM架构,例如React、Vue。
采用虚拟DOM架构解决页面连续重复渲染的主要思路为:将页面渲染需要执行的操作,变成一系列虚拟的任务。
这样的话,在原先需要执行渲染任务时,将渲染任务转化为虚拟任务(该虚拟任务此时并不执行,即GUI将不会执行页面渲染),然后JS线程将会继续执行宏任务,直到最后一个宏任务执行完毕,虚拟DOM架构将这些累积的虚拟任务一次性转化为实际渲染任务,这样的话,浏览器会将多次页面渲染合并成一次渲染,达到提高用户体验的效果。
以vue举例,在Vue中,由于框架的限定,已经将代码区分为template(模板代码)和script(逻辑代码)。代码编译运行时,编译器(包括但不限于webpack,rollup等)会将template代码转换为虚拟dom代码进行渲染,达到优化渲染的效果。
采用虚拟DOM架构的优势为:代码层级解耦视图和数据,方便维护;减少页面渲染次数,达到提高用户体验的效果。
但是采用虚拟DOM架构也存在以下缺点:
对于开发人员来讲,为了实现渲染任务转虚拟任务,在开发阶段需要***数据量较大的架构代码,这样庞大的架构代码会增加大量的代码维护工作;
为了方便代码维护,底层每次数据更新时都需要对比虚拟DOM的前后异同,再做出对应的页面更新操作,代价成本过高;
由于JS是解释型语言,运行时需要通过解释器来转化为机器语言再执行,在计算上也比各种编译型语言效率慢得多。
基于上述技术问题的发现,发明人经过创造性劳动提出下述技术方案以解决或者改善上述问题。需要注意的是,以上现有技术中的方案所存在的缺陷,均是发明人在经过实践并仔细研究后得出的结果,因此,上述问题的发现过程以及下文中本申请实施例针对上述问题所提出的解决方案,都应该是发明人在发明创造过程中对本申请做出的贡献,而不应当理解为本领域技术人员所公知的技术内容。
有鉴于此,本发明实施例提供一种浏览器页面渲染方法,摒弃现有的DOM架构,采用双线程机制,由逻辑线程提交触发器队列中全部页面数据更新事件给渲染线程,使得渲染线程基于此一次性渲染出浏览器页面,避免了单线程机制的多次渲染造成浏览器页面卡顿。以下通过实施例,并配合所附附图,进行详细说明。
请参考图1,图1为本发明实施例提供的一种浏览器页面渲染方法的流程示意图,该方法的执行主体可以是安装有浏览器的电子设备,且该电子设备运行有浏览器的逻辑线程和渲染线程,逻辑线程维护有触发器队列。该方法包括以下步骤:
S170、当逻辑线程在设定时间内未生成新的页面数据更新事件时,将触发器队列中的全部页面数据更新事件推送至渲染线程。
可以理解,触发器队列可以用于存储一系列的页面数据更新事件,每个页面数据更新事件可以指示浏览器页面上某个组件对象涉及的数据更改。
S180、渲染线程基于获得的页面模板代码和全部页面数据更新事件渲染浏览器页面。
在本实施例中,渲染线程不用执行任何业务逻辑代码,只暴露出接口提供给逻辑线程调用。所以,逻辑线程可以通过调用渲染线程提供的接口,从而将触发器队列中的全部页面数据更新事件推送至渲染线程。
进而,渲染线程可以基于获得的页面模板代码和全部页面数据更新事件一次性完成浏览器页面的渲染。
本发明实施例提供的浏览器页面渲染方法该方法应用于安装有浏览器且运行有浏览器的逻辑线程和渲染线程的电子设备,其中当逻辑线程在设定时间内未生成新的页面数据更新事件时,将触发器队列中的全部页面数据更新事件推送至渲染线程;渲染线程基于获得的页面模板代码和全部页面数据更新事件渲染浏览器页面。相较于现有技术,本方案采用双线程机制,由逻辑线程提交触发器队列的全部页面数据更新事件给渲染线程,使得渲染线程基于此一次性渲染出浏览器页面,避免了单线程机制的多次渲染造成浏览器页面卡顿。同时本方案也摒弃了虚拟DOM架构,能够一定程度上减少浏览器处理的代码量。
在可选的实施方式中,请继续参见图1,在上述步骤S170之前,还可以包括:
S150、浏览器获得页面资源。
在一种可能的情况中,在用户使用浏览器的过程中,可以在浏览器的地址栏输入需要访问的网页的***,或者,用户点击浏览器页面某处,地址栏自动跳转出***;接着浏览器可以通过DNS(Domain Name System,域名***)解析查到上述***中域名映射的IP地址;然后浏览器与该IP地址取得链接,同时浏览器向该IP地址所在的服务器进行HTTP(Hyper Text Transfer Protocol,超文本传输协议)请求,等待其响应;
IP地址所在服务器接收到HTTP请求,并等待处理该请求;服务器处理HTTP请求后向浏览器返回页面资源。
在另一种可能的情况中,服务器存在主动推送机制,服务器可以定时或者按照一定的规则向浏览器推送消息,浏览器可以从推送消息中获得页面资源。
可选的,页面资源包括浏览器页面的逻辑代码和页面模板代码。
S160、逻辑线程基于逻辑代码,生成至少一个页面数据更新事件,并依次将每个页面数据更新事件放入触发器队列。
可以理解,逻辑线程会先执行逻辑代码,本身在执行逻辑代码的过程中,逻辑线程会执行同步任务、微任务、宏任务等,同时在此过程中每次涉及页面更新时会生成一个页面数据更新事件,将页面数据更新事件放入触发器队列,继续执行任务。
并且若是在设定时间内不存在页面更新,就不会生成新的页面数据更新事件,逻辑线程就可以将触发器队列中累积的全部页面数据更新事件推送至渲染线程使之进行渲染。需要说明的是,逻辑线程将触发器队列中所有页面数据更新事件推送至渲染线程,意味着触发器队列被清空,等待后续逻辑线程生成新的页面数据更新事件。
可选的,设定时间的大小可以基于实际用户等待的可接受时长进行适应性设置。例如,设定时间可以设置为200ms或者300ms等,该举例仅为示例,在此不作限制。
可以理解,针对当前浏览器页面,若是用户连续进行多次页面交互,那么浏览器则会连续向服务器请求数据,服务器可以在预设时间(例如200~300毫秒)内向浏览器连续返回反馈数据。
然后逻辑线程会基于连续接收的反馈数据生成若干页面数据更新事件存放至触发器队列。当在设定时间内未生成新的页面数据更新事件,逻辑线程就会将触发器队列中的全部页面数据更新事件推送在渲染线程。从而渲染线程既可以基于当前浏览器页面的页面模板代码和全部页面数据更新事件进行渲染,使得在当前浏览器页面呈现出多次页面交互的交互结果。
可选的,在逻辑代码中,可以包括不止一个触发器代码,对应地,S160的子步骤可以包括:
S161、逻辑线程查找逻辑代码中全部的触发器代码;
S162、针对每个触发器代码,逻辑线程生成触发器代码对应的页面数据更新事件。
可以理解,触发器代码并非开发人员写的源码,而是在开发出现的编译阶段***的代码段。开发人员在进行网页开发时,任然编写当前广泛使用的View/Model类框架的代码,在编译时:
本方案中,template代码(页面模板代码)可以无需经过编译器转换为虚拟DOM,而是可以直接渲染到页面上的;编译器会对script代码(逻辑代码)按照AST(AbstractSyntaxTree,抽象语法树)结构进行解析,解析完成后,在代码中每处涉及页面更新的地方***触发器代码。
在可选的实施方式中,以下对浏览器启动时的流程进行介绍。在图1的基础上,请参见图2,在上述步骤S150之前,还可以包括:
S110、浏览器响应于用户针对浏览器的点击操作,获得初始页面资源。
在本实施例中,初始页面资源包括初始浏览界面的初始逻辑代码和初始页面模板代码。
S120、浏览器开启逻辑线程。
可选的,本身会存在的JS线程(渲染线程)可以利用web worker或者WebAssembly等开启新的线程(逻辑线程)。
S130、逻辑线程执行初始逻辑代码,并在触发初始渲染事件时将初始渲染事件推送至渲染线程。
S140、渲染线程基于初始页面模板代码执行初始渲染事件以渲染初始浏览界面。
以电子设备为手机为例,当用户点击手机桌面的浏览器图标时,浏览器开始运行,浏览器可以先获得初始浏览界面的初始页面资源,同时浏览器开启逻辑线程,然后由逻辑线程执行初始逻辑代码,并在触发初始渲染事件时将初始渲染事件推送至渲染线程,由渲染线程基于初始页面模板代码执行初始渲染事件以渲染初始浏览界面。
需要说明的是,上述方法实施例中各个步骤的执行顺序不以附图所示为限制,各步骤的执行顺序以实际应用情况为准。
与现有技术相比,本发明实施例具有以下有益效果:
采用双线程机制将逻辑与渲染分离,减少页面渲染次数,达到提高用户体验的效果。不再需要虚拟DOM中间层,去除diff算法,接近原生JavaScript编写的效果。可以代码层级解耦视图和数据,方便维护。框架植入基本只有渲染线程的代码,运行时代码大大减少。
为了执行上述方法实施例及各个可能的实施方式中的相应步骤,下面分别给出一种浏览器页面渲染装置的实现方式。
请参见图3,图3示出了本发明实施例提供的浏览器页面渲染装置的结构示意图。该浏览器页面渲染装置200应用于安装有浏览器电子设备,浏览器页面渲染装置200包括浏览器的逻辑模块220和渲染模块230。
逻辑模块220用于维护触发器队列,并在当在设定时间内未生成新的页面数据更新事件时,将触发器队列中全部页面数据更新事件推送至渲染模块;
渲染模块230用于基于获得的页面模板代码和全部页面数据更新事件渲染浏览器页面。
在可选的实施方式中,浏览器页面渲染装置200还可以包括获取模块210,在逻辑模块220用于将触发器队列中全部页面数据更新事件推送至渲染线程之前:
获取模块210可以用于获得页面资源;页面资源包括浏览器页面的逻辑代码和页面模板代码;
逻辑模块220还用于基于逻辑代码,生成至少一个页面数据更新事件,并依次将每个页面数据更新事件放入触发器队列。
在可选的实施方式中,逻辑代码包括至少一段触发器代码;逻辑模块220用于基于逻辑代码,生成至少一个页面数据更新事件时,具体可以用于:查找逻辑代码中全部的触发器代码;针对每个触发器代码,生成触发器代码对应的页面数据更新事件。
在可选的实施方式中,在获取模块210用于获得页面资源之前,获取模块210还用于:响应于用户针对浏览器的点击操作,获得初始页面资源;初始页面资源包括初始浏览界面的初始逻辑代码和初始页面模板代码;开启逻辑线程。逻辑模块220还用于:执行初始逻辑代码,并在触发初始渲染事件时将初始渲染事件推送至渲染线程;基于初始页面模板代码执行初始渲染事件以渲染初始浏览界面。
所属领域的技术人员可以清楚地了解到,为描述的方便和简洁,上述描述的浏览器页面渲染装置200的具体工作过程,可以参考前述方法实施例中的对应过程,在此不再赘述。
请参见图4,图4为本发明实施例提供的一种电子设备的结构示意图。该电子设备300包括处理器310、存储器320和总线330,处理器310通过总线330与存储器320连接。
存储器320可用于存储软件程序,例如,图3所示的浏览器页面渲染装置200。其中,存储器320可以是但不限于,随机存取存储器(Random Access Memory,RAM),只读存储器(Read Only Memory,ROM),闪存存储器(Flash),可编程只读存储器(Programmable Read-Only Memory,PROM),可擦除只读存储器(Erasable Programmable Read-Only Memory,EPROM),电可擦除只读存储器(Electric Erasable Programmable Read-Only Memory,EEPROM)等。
处理器310可以是一种集成电路芯片,具有信号处理能力。该处理器310可以是通用处理器,包括中央处理器(Central Processing Unit,CPU)、网络处理器(NetworkProcessor,NP)等;还可以是数字信号处理器(Digital Signal Processing,DSP)、专用集成电路(Application Specific Integrated Circuit,ASIC)、现场可编程门阵列(Field-Programmable Gate Array,FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。
存储器320存储有处理器310可执行的机器可读指令。处理器310执行机器可读指令时,实现上述实施例揭示的浏览器页面渲染方法。
可以理解,电子设备300可以是但不限于智能手机、智能平板、个人电脑、服务器、虚拟机等。且图3所示的结构仅为示意,电子设备300还可以包括比图3中所示更多或者更少的组件,或者具有与图3所示不同的配置。图3中所示的各组件可以采用硬件、软件或其组合实现。
本发明实施例还提供一种计算机可读存储介质,该计算机可读存储介质上存储有计算机程序,该计算机程序被处理器运行时实现上述实施例揭示的浏览器页面渲染方法。该计算机可读存储介质可以是但不限于:U盘、移动硬盘、ROM、RAM、PROM、EPROM、EEPROM、FLASH磁碟或者光盘等各种可以存储程序代码的介质。
综上,本发明实施例提供了一种浏览器页面渲染方法、装置、电子设备及可读存储介质,该方法应用于安装有浏览器且运行有浏览器的逻辑线程和渲染线程的电子设备,其中当逻辑线程在设定时间内未生成新的页面数据更新事件时,将触发器队列中的全部页面数据更新事件推送至渲染线程;渲染线程基于获得的页面模板代码和全部页面数据更新事件渲染浏览器页面。相较于现有技术,本方案采用双线程机制,由逻辑线程提交触发器队列的全部页面数据更新事件给渲染线程,使得渲染线程基于此一次性渲染出浏览器页面,避免了单线程机制的多次渲染造成浏览器页面卡顿。
以上,仅为本发明的具体实施方式,但本发明的保护范围并不局限于此,任何熟悉本技术领域的技术人员在本发明揭露的技术范围内,可轻易想到的变化或替换,都应涵盖在本发明的保护范围之内。因此,本发明的保护范围应以权利要求的保护范围为准。

Claims (10)

1.一种浏览器页面渲染方法,其特征在于,应用于电子设备,所述电子设备安装有浏览器,且运行有所述浏览器的逻辑线程和渲染线程,所述逻辑线程维护有触发器队列;所述方法包括:
当所述逻辑线程在设定时间内未生成新的页面数据更新事件时,将所述触发器队列中的全部页面数据更新事件推送至所述渲染线程;
所述渲染线程基于获得的页面模板代码和所述全部页面数据更新事件渲染浏览器页面。
2.根据权利要求1所述的方法,其特征在于,在当所述逻辑线程在设定时间内未生成新的页面数据更新事件时,将所述触发器队列中全部页面数据更新事件推送至所述渲染线程的步骤之前,所述方法还包括:
所述浏览器获得页面资源;所述页面资源包括所述浏览器页面的逻辑代码和所述页面模板代码;
所述逻辑线程基于所述逻辑代码,生成至少一个页面数据更新事件,并依次将每个所述页面数据更新事件放入所述触发器队列。
3.根据权利要求2所述的方法,其特征在于,所述逻辑代码包括至少一段触发器代码;所述逻辑线程基于所述逻辑代码,生成至少一个页面数据更新事件的步骤包括:
查找所述逻辑代码中全部的触发器代码;
针对每个所述触发器代码,生成所述触发器代码对应的页面数据更新事件。
4.根据权利要求2所述的方法,其特征在于,在所述浏览器获得页面资源的步骤之前,所述方法还包括:
所述浏览器响应于用户针对所述浏览器的点击操作,获得初始页面资源;所述初始页面资源包括初始浏览界面的初始逻辑代码和初始页面模板代码;
所述浏览器开启所述逻辑线程;
所述逻辑线程执行所述初始逻辑代码,并在触发初始渲染事件时将所述初始渲染事件推送至渲染线程;
所述渲染线程基于初始页面模板代码执行所述初始渲染事件以渲染所述初始浏览界面。
5.一种浏览器页面渲染装置,其特征在于,应用于电子设备,所述电子设备安装有浏览器;所述装置包括所述浏览器的逻辑模块和渲染模块;
所述逻辑模块用于维护触发器队列,并在当在设定时间内未生成新的页面数据更新事件时,将所述触发器队列中全部页面数据更新事件推送至所述渲染模块;
所述渲染模块用于基于获得的页面模板代码和所述全部页面数据更新事件渲染浏览器页面。
6.根据权利要求5所述的装置,其特征在于,所述装置还包括获取模块,在所述逻辑模块用于将所述触发器队列中全部页面数据更新事件推送至所述渲染线程之前:
所述获取模块用于获得页面资源;所述页面资源包括所述浏览器页面的逻辑代码和所述页面模板代码;
所述逻辑模块还用于基于所述逻辑代码,生成至少一个页面数据更新事件,并依次将每个所述页面数据更新事件放入所述触发器队列。
7.根据权利要求6所述的装置,其特征在于,所述逻辑代码包括至少一段触发器代码;所述逻辑模块用于基于所述逻辑代码,生成至少一个页面数据更新事件时,具体用于:
查找所述逻辑代码中全部的触发器代码;
针对每个所述触发器代码,生成所述触发器代码对应的页面数据更新事件。
8.根据权利要求6所述的装置,其特征在于,在所述获取模块用于获得页面资源之前,所述获取模块还用于:
响应于用户针对所述浏览器的点击操作,获得初始页面资源;所述初始页面资源包括初始浏览界面的初始逻辑代码和初始页面模板代码;
开启逻辑线程;
所述逻辑模块还用于:
执行所述初始逻辑代码,并在触发初始渲染事件时将所述初始渲染事件推送至渲染线程;
基于初始页面模板代码执行所述初始渲染事件以渲染所述初始浏览界面。
9.一种电子设备,其特征在于,包括:存储器和处理器,所述存储器存储有所述处理器可执行的机器可读指令,当所述电子设备运行时所述处理器执行所述机器可读指令以实现如权利要求1-4中任一项所述的浏览器页面渲染方法。
10.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质存储有计算机程序,所述计算机程序被处理器执行时实现权利要求1-4中任一项所述的浏览器页面渲染方法。
CN202310102272.1A 2023-02-07 2023-02-07 浏览器页面渲染方法、装置、电子设备及可读存储介质 Pending CN116186439A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202310102272.1A CN116186439A (zh) 2023-02-07 2023-02-07 浏览器页面渲染方法、装置、电子设备及可读存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202310102272.1A CN116186439A (zh) 2023-02-07 2023-02-07 浏览器页面渲染方法、装置、电子设备及可读存储介质

Publications (1)

Publication Number Publication Date
CN116186439A true CN116186439A (zh) 2023-05-30

Family

ID=86441816

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202310102272.1A Pending CN116186439A (zh) 2023-02-07 2023-02-07 浏览器页面渲染方法、装置、电子设备及可读存储介质

Country Status (1)

Country Link
CN (1) CN116186439A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN118132880A (zh) * 2024-05-06 2024-06-04 宁波奥克斯电气股份有限公司 一种页面渲染优化方法、装置、浏览器***和介质

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN118132880A (zh) * 2024-05-06 2024-06-04 宁波奥克斯电气股份有限公司 一种页面渲染优化方法、装置、浏览器***和介质

Similar Documents

Publication Publication Date Title
EP3518124A1 (en) Webpage rendering method and related device
US8365203B2 (en) Method for creating a native application for mobile communications device in real-time
CN109144567B (zh) 跨平台的网页渲染方法、装置、服务器及存储介质
CN110806863A (zh) 接口文档生成方法及装置、电子设备、存储介质
US9497248B2 (en) System for enabling rich network applications
JP2018517206A (ja) アプリケーションページクイックアクセス
WO2016177341A1 (zh) 接口调用方法、装置及终端
TW201732647A (zh) 一種網頁腳本載入方法和裝置
US10838744B2 (en) Web component design and integration system
CN102929599A (zh) 移动终端浏览器界面的修改方法及装置、移动终端
US20070204216A1 (en) System and method for creating layouts using a layout editor
CN108595697B (zh) 网页集成方法、装置及***
CN111913705B (zh) 一种基于差异更新算法的JavaScript模板实现方法
EP3156919A1 (en) Methods for transforming a server side template into a client side template and devices thereof
CN110727429B (zh) 一种前端页面的生成方法、装置及设备
CN111831384A (zh) 语言切换方法和装置、设备及存储介质
CN116186439A (zh) 浏览器页面渲染方法、装置、电子设备及可读存储介质
US11930096B2 (en) Systems and methods for rendering interactive web pages
CN111783019A (zh) 浏览器子页面创建方法、装置、计算机设备和存储介质
CN111723314B (zh) 网页展示方法、装置、电子设备及计算机可读存储介质
CN111310005A (zh) 网络请求的处理方法及装置、服务器和存储介质
Oh et al. Automated transformation of template-based web applications into single-page applications
CN114491354A (zh) 一种页面生成方法、装置及计算机可读存储介质
CN115438290A (zh) 自动分析单页面应用静态资源并预加载的方法及***
Oh et al. MVC architecture driven restructuring to achieve client-side web page composition

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination