CN111506387B - 页面预渲染方法、装置、电子设备及存储介质 - Google Patents

页面预渲染方法、装置、电子设备及存储介质 Download PDF

Info

Publication number
CN111506387B
CN111506387B CN202010136181.6A CN202010136181A CN111506387B CN 111506387 B CN111506387 B CN 111506387B CN 202010136181 A CN202010136181 A CN 202010136181A CN 111506387 B CN111506387 B CN 111506387B
Authority
CN
China
Prior art keywords
page
hook
static
html
markup language
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.)
Active
Application number
CN202010136181.6A
Other languages
English (en)
Other versions
CN111506387A (zh
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.)
Beijing Baidu Netcom Science and Technology Co Ltd
Original Assignee
Beijing Baidu Netcom Science and Technology 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 Beijing Baidu Netcom Science and Technology Co Ltd filed Critical Beijing Baidu Netcom Science and Technology Co Ltd
Priority to CN202010136181.6A priority Critical patent/CN111506387B/zh
Publication of CN111506387A publication Critical patent/CN111506387A/zh
Priority to US17/419,245 priority patent/US11829436B2/en
Priority to PCT/CN2020/132782 priority patent/WO2021174928A1/zh
Priority to EP20904237.3A priority patent/EP3896567B1/en
Priority to JP2021536286A priority patent/JP2022525831A/ja
Application granted granted Critical
Publication of CN111506387B publication Critical patent/CN111506387B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/986—Document structures and storage, e.g. HTML extensions
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/445—Program loading or initiating
    • G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
    • G06F9/44526—Plug-ins; Add-ons
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/455—Emulation; Interpretation; Software simulation, e.g. virtualisation or emulation of application or operating system execution engines
    • G06F9/45504—Abstract machines for programme code execution, e.g. Java virtual machine [JVM], interpreters, emulators
    • G06F9/45529—Embedded in an application, e.g. JavaScript in a Web browser
    • Y—GENERAL 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
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE 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/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Databases & Information Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Data Mining & Analysis (AREA)
  • Human Computer Interaction (AREA)
  • Information Transfer Between Computers (AREA)
  • Stored Programmes (AREA)

Abstract

本申请公开了页面预渲染方法、装置、电子设备及存储介质，涉及互联网领域，其中的方法可包括：针对待处理的页面，获取页面的静态资源；获取编译后的页面的超文本标记语言结构信息；根据所述静态资源及超文本标记语言结构信息，结合网页框架原生的服务端渲染能力，生成页面的静态超文本标记语言文件。应用本申请所述方案，可提升预渲染效率等。

Description

页面预渲染方法、装置、电子设备及存储介质
技术领域
本申请涉及计算机应用技术，特别涉及互联网领域的页面预渲染方法、装置、电子设备及存储介质。
背景技术
AJAX技术的出现，使得web应用能够在不刷新的状态下显示不同页面的内容，这就是单页应用(SPA，Single Page Application)。AJAX为异步JavaScript和可扩展标记语言(Asynchronous JavaScript And XML)的简称。
在一个单页应用中，往往只有一个超文本标记语言(HTML，HyperText MarkupLanguage)文件，根据访问的统一资源定位符(URL，Uniform Resource Locator)来匹配对应的路由脚本，动态地渲染页面内容。单页应用在优化了用户体验的同时，也带来了诸多问题，如搜索引擎优化(SEO，Search Engine Optimization)不友好、首屏可见时间过长等。预渲染技术正是为解决这些问题而提出的。
预渲染是指在页面编译构建阶段生成匹配预渲染的路由的静态HTML文件。常用的预渲染方式包括基于无头浏览器的预渲染方式等。但这种方式针对每个页面路由都要经过一个完整的浏览器过程，消耗页面构建机资源，往往也需要安装一些额外的系统库支持无头浏览器工作，其次需要新增管道流程，产出过程缓慢等。
发明内容
有鉴于此，本申请提供了页面预渲染方法、装置、电子设备及存储介质。
一种页面预渲染方法，包括：
针对待处理的页面，获取所述页面的静态资源；
获取编译后的所述页面的超文本标记语言结构信息；
根据所述静态资源及所述超文本标记语言结构信息，结合网页框架原生的服务端渲染能力，生成所述页面的静态超文本标记语言文件。
根据本申请一优选实施例，所述获取所述页面的静态资源包括：通过监听超文本标记语言网页包插件html-webpack-plugin的第一预定钩子，获取所述静态资源；所述获取编译后的所述页面的超文本标记语言结构信息包括：通过监听超文本标记语言网页包插件html-webpack-plugin的第二预定钩子，获取所述超文本标记语言结构信息。
根据本申请一优选实施例，所述第一预定钩子包括：资源标签生成前钩子beforeAssetTagGeneration hook；所述第二预定钩子包括：模板执行后钩子afterTemplateExecution hook。
根据本申请一优选实施例，所述静态资源中包括：层叠样式表及JavaScript脚本。
根据本申请一优选实施例，所述结合网页框架原生的服务端渲染能力，生成所述页面的静态超文本标记语言文件包括：
在eval环境下执行所述JavaScript脚本，通过JavaScript文档对象模型JSDOM模拟所需的浏览器宿主环境，结合网页框架原生的服务端渲染能力，生成所述页面的静态超文本标记语言文件。
一种页面预渲染装置，包括：获取单元以及生成单元；
所述获取单元，用于针对待处理的页面，获取所述页面的静态资源，并获取编译后的所述页面的超文本标记语言结构信息；
所述生成单元，用于根据所述静态资源及所述超文本标记语言结构信息，结合网页框架原生的服务端渲染能力，生成所述页面的静态超文本标记语言文件。
根据本申请一优选实施例，所述获取单元通过监听超文本标记语言网页包插件html-webpack-plugin的第一预定钩子，获取所述静态资源；所述获取单元通过监听超文本标记语言网页包插件html-webpack-plugin的第二预定钩子，获取所述超文本标记语言结构信息。
根据本申请一优选实施例，所述第一预定钩子包括：资源标签生成前钩子beforeAssetTagGeneration hook；所述第二预定钩子包括：模板执行后钩子afterTemplateExecution hook。
根据本申请一优选实施例，所述静态资源中包括：层叠样式表及JavaScript脚本。
根据本申请一优选实施例，所述生成单元在eval环境下执行所述JavaScript脚本，通过JavaScript文档对象模型JSDOM模拟所需的浏览器宿主环境，结合网页框架原生的服务端渲染能力，生成所述页面的静态超文本标记语言文件。
一种电子设备，包括：
至少一个处理器；以及
与所述至少一个处理器通信连接的存储器；其中，
所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行如以上所述的方法。
一种存储有计算机指令的非瞬时计算机可读存储介质，所述计算机指令用于使所述计算机执行如以上所述的方法。
上述申请中的一个实施例具有如下优点或有益效果：可针对待处理的页面，分别获取页面的静态资源及编译后的页面的超文本标记语言结构信息，进而可结合网页框架原生的服务端渲染能力，生成页面的静态超文本标记语言文件，即完成预渲染，相比于现有方式，无需使用无头浏览器，从而避免了由于使用无头浏览器所带来的消耗页面构建机资源以及需要安装额外的系统库来支持无头浏览器工作的问题，进而节省了资源消耗，并可避免由于使用无头浏览器所带来的新增管道流程等问题，加速了产出过程，从而提升了预渲染效率等；其中，可分别借助于html-webpack-plugin的不同hook来获取静态资源及超文本标记语言结构信息，方便简单，易于实现；另外，可在eval环境下执行JavaScript脚本，并可通过JSDOM模拟所需的浏览器宿主环境，结合网页框架原生的服务端渲染能力，生成页面的静态超文本标记语言文件，从而提升了预渲染性能及稳定性等。
附图说明
附图用于更好地理解本方案，不构成对本申请的限定。其中：
图1为本申请所述页面预渲染方法实施例的流程图；
图2为本申请所述页面预渲染方法的整体实现过程示意图；
图3为本申请所述页面预渲染装置300实施例的组成结构示意图；
图4为根据本申请实施例所述方法的电子设备的框图。
具体实施方式
以下结合附图对本申请的示范性实施例做出说明，其中包括本申请实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本申请的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。
另外，应理解，本文中术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中字符“/”，一般表示前后关联对象是一种“或”的关系。
图1为本申请所述页面预渲染方法实施例的流程图。如图1所示，包括以下具体实现方式。
在101中，针对待处理的页面，获取页面的静态资源。
在102中，获取编译后的页面的HTML结构信息。
在103中，根据获取到的静态资源及HTML结构信息，结合网页框架原生的服务端渲染能力，生成页面的静态HTML文件。
开发者会将开发的页面推到编译构建环境，编译构建之后即可部署到线上，如部署到机房的服务器上。用户通过浏览器访问页面时，会将访问请求提交到相应服务器，服务器可根据请求的页面返回对应的HTML文件，浏览器对HTML文件进行解析，将页面展示给用户等。
HTML文件中通常包含四部分内容，分别为：页面通用内容、层叠样式表(CSS，Cascading Style Sheets)、JavaScript脚本及动态数据(或称为个性化数据等)。
在实际应用中，用户看到页面的过程是一个渐进增强的过程，并非直接看到最终页面。比如，针对返回的HTML文件，初始状态为一个空白页，即初始渲染得到一个空白页，从用户的角度来说什么也看不到，当JavaScript脚本执行后，可操作页面通用内容等，从而使得页面从初始状态变为有内容的状态，并按照CSS使其具备对应的样式，此时的状态可称为中间状态，此外，JavaScript脚本还可向服务器发送请求，请求动态数据，进而可根据请求到的动态数据更新页面内容，从而得到最终状态。
预渲染可在页面的编译构建阶段进行。从初始状态到中间状态的过程在预渲染环境下先执行，执行完之后，产出的为页面的中间状态，即预先将页面从初始状态过渡到了中间状态，这样，后续用户访问页面时，看到的将是直接从中间状态变为最终状态的页面，不再会看到初始的空白页。
本实施例中，针对待处理的页面，可首先获取页面的静态资源。所述静态资源可包括CSS以及JavaScript脚本等。优选地，可通过监听超文本标记语言网页包插件(html-webpack-plugin)的第一预定钩子，如资源标签生成前钩子(beforeAssetTagGenerationhook)，获取所述静态资源。
此外，针对待处理的页面，还可获取页面的HTML结构信息，所述HTML结构信息中可包括页面通用内容等。优选地，可通过监听html-webpack-plugin的第二预定钩子，如模板执行后钩子(afterTemplateExecution hook)，获取所述HTML结构信息。
beforeAssetTagGeneration hook和afterTemplateExecution hook均为现有html-webpack-plugin的hook。html-webpack-plugin除了可受寄生的webpack的插件系统调度外，还提供了hook供调用。
在实际应用中，本实施例所述方法的执行主体可为一个webpack预渲染插件(pre-render plugin)。pre-render plugin可调用/监听html-webpack-plugin的hook。如pre-render plugin可通过监听html-webpack-plugin的beforeAssetTagGeneration hook获取页面的静态资源，beforeAssetTagGeneration hook可从按照现有方式产生的编译(compilation)上下文中获取页面的静态资源。另外，pre-render plugin可通过监听html-webpack-plugin的afterTemplateExecution hook获取编译产生的HTML结构信息。
获取到了页面的静态资源及HTML结构信息后，可进一步结合网页框架原生的服务端渲染能力，生成页面的静态HTML文件。优选地，可在eval环境下执行JavaScript脚本，即可使用eval执行页面导出的JavaScript模块，通过JavaScript文档对象模型(JSDOM，JavaScrip Document Object Model)模拟所需的浏览器宿主环境，结合网页框架原生的服务端渲染能力，生成页面的静态HTML文件，并可写入到磁盘中。
eval是一个可以在无界面图形环境下执行JavaScript代码的库，模拟浏览器的执行过程，驱动页面从初始状态过渡到中间状态，并可通过JSDOM模拟所需的浏览器宿主环境，进而结合网页框架原生的服务端渲染能力，生成页面的静态HTML文件。
因为使用网页框架原生的服务端渲染能力，支持框架本身的全家桶，如：React的Redux、React Router等，Vue.js的Vuex、Vue Router等。
基于上述介绍，图2为本申请所述页面预渲染方法的整体实现过程示意图。如图2所示，包括以下具体实现方式。
在201～202中，webpack插件系统分别触发(apply)pre-render plugin和html-webpack-plugin。
在203中，pre-render plugin通过监听html-webpack-plugin的beforeAssetTagGeneration hook获取页面的静态资源。
静态资源中可包括CSS及JavaScript脚本等。
在204中，pre-render plugin对获取到的静态资源进行缓存。
在205中，pre-render plugin向html-webpack-plugin返回响应(callback)信息。
在206中，pre-render plugin通过监听html-webpack-plugin的afterTemplateExecution hook获取编译后的页面的HTML结构信息。
HTML结构信息中可包括页面通用内容等。
在207中，pre-render plugin对获取到的HTML结构信息进行缓存。
在208中，pre-render plugin向html-webpack-plugin返回响应信息。
在209～210中，pre-render plugin监听到html-webpack-plugin的产出前钩子(beforeEmit hook)，根据页面的静态资源及HTML结构信息，在eval环境下执行JavaScript脚本，通过JSDOM模拟所需的浏览器宿主环境，结合网页框架原生的服务端渲染能力，生成页面的静态HTML文件。
作为一种可能的实现方式，pre-render plugin可在当监听到html-webpack-plugin的beforeEmit hook时，最终生成页面的静态HTML文件。
在211中，pre-render plugin将获取到的静态HTML文件返回给html-webpack-plugin。
在212中，html-webpack-plugin将获取到的静态HTML文件返回给webpack插件系统。
webpack插件系统可将静态HTML文件按照现有方式通过控制台进行显示，控制台可实时显示产出的文件。
需要说明的是，对于前述的各方法实施例，为了简单描述，将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本申请并不受所描述的动作顺序的限制，因为依据本申请，某些步骤可以采用其它顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本申请所必须的。
在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其它实施例的相关描述。
总之，采用本申请方法实施例所述方案，可针对待处理的页面，分别获取页面的静态资源及编译后的页面的HTML结构信息，进而可结合网页框架原生的服务端渲染能力，生成页面的静态HTML文件，即完成预渲染，从而避免了现有技术中基于无头浏览器的预渲染方式所带来的问题，进而提升了预渲染效率，节省了资源消耗等；其中，可分别借助于html-webpack-plugin的不同hook来获取静态资源及HTML结构信息，方便简单，易于实现；另外，可在eval环境下执行JavaScript脚本，并可通过JSDOM模拟所需的浏览器宿主环境，结合网页框架原生的服务端渲染能力，生成页面的静态HTML文件，从而提升了预渲染性能及稳定性等。
以上是关于方法实施例的介绍，以下通过装置实施例，对本申请所述方案进行进一步说明。
图3为本申请所述页面预渲染装置300实施例的组成结构示意图。如图3所示，包括：获取单元301以及生成单元302。
获取单元301，用于针对待处理的页面，获取页面的静态资源，并获取编译后的页面的HTML结构信息。
生成单元302，用于根据静态资源及HTML结构信息，结合网页框架原生的服务端渲染能力，生成页面的静态HTML文件。
针对待处理的页面，获取单元301可首先获取页面的静态资源。所述静态资源可包括CSS以及JavaScript脚本等。优选地，可通过监听html-webpack-plugin的第一预定钩子，如beforeAssetTagGeneration hook，获取所述静态资源。
此外，针对待处理的页面，获取单元301还可获取编译后的页面的HTML结构信息，所述HTML结构信息中可包括页面通用内容等。优选地，可通过监听html-webpack-plugin的第二预定钩子，如afterTemplateExecution hook，获取所述HTML结构信息。
获取到了页面的静态资源及HTML结构信息后，生成单元302可进一步结合网页框架原生的服务端渲染能力，生成页面的静态HTML文件。优选地，生成单元302可在eval环境下执行JavaScript脚本，即可使用eval执行页面导出的JavaScript模块，通过JSDOM模拟所需的浏览器宿主环境，并结合网页框架原生的服务端渲染能力，生成页面的静态HTML文件，进而可写入到磁盘中。
eval是一个可以在无界面图形环境下执行JavaScript代码的库，模拟浏览器的执行过程，驱动页面从初始状态过渡到中间状态，并可通过JSDOM模拟所需的浏览器宿主环境，进而结合网页框架原生的服务端渲染能力，生成页面的静态HTML文件。
图3所示装置实施例的具体工作流程请参照前述方法实施例中的相关说明，不再赘述。
总之，采用本申请装置实施例所述方案，可针对待处理的页面，分别获取页面的静态资源及编译后的页面的HTML结构信息，进而可结合网页框架原生的服务端渲染能力，生成页面的静态HTML文件，即完成预渲染，从而避免了现有技术中基于无头浏览器的预渲染方式所带来的问题，进而提升了预渲染效率，节省了资源消耗等；其中，可分别借助于html-webpack-plugin的不同hook来获取静态资源及HTML结构信息，方便简单，易于实现；另外，可在eval环境下执行JavaScript脚本，并可通过JSDOM模拟所需的浏览器宿主环境，结合网页框架原生的服务端渲染能力，生成页面的静态HTML文件，从而提升了预渲染性能及稳定性等。
根据本申请的实施例，本申请还提供了一种电子设备和一种可读存储介质。
如图4所示，是根据本申请实施例所述方法的电子设备的框图。电子设备旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本申请的实现。
如图4所示，该电子设备包括：一个或多个处理器Y01、存储器Y02，以及用于连接各部件的接口，包括高速接口和低速接口。各个部件利用不同的总线互相连接，并且可以被安装在公共主板上或者根据需要以其它方式安装。处理器可以对在电子设备内执行的指令进行处理，包括存储在存储器中或者存储器上以在外部输入/输出装置(诸如，耦合至接口的显示设备)上显示图形用户界面的图形信息的指令。在其它实施方式中，若需要，可以将多个处理器和/或多条总线与多个存储器和多个存储器一起使用。同样，可以连接多个电子设备，各个设备提供部分必要的操作(例如，作为服务器阵列、一组刀片式服务器、或者多处理器系统)。图4中以一个处理器Y01为例。
存储器Y02即为本申请所提供的非瞬时计算机可读存储介质。其中，所述存储器存储有可由至少一个处理器执行的指令，以使所述至少一个处理器执行本申请所提供的方法。本申请的非瞬时计算机可读存储介质存储计算机指令，该计算机指令用于使计算机执行本申请所提供的方法。
存储器Y02作为一种非瞬时计算机可读存储介质，可用于存储非瞬时软件程序、非瞬时计算机可执行程序以及模块，如本申请实施例中的方法对应的程序指令/模块。处理器Y01通过运行存储在存储器Y02中的非瞬时软件程序、指令以及模块，从而执行服务器的各种功能应用以及数据处理，即实现上述方法实施例中的方法。
存储器Y02可以包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需要的应用程序；存储数据区可存储根据电子设备的使用所创建的数据等。此外，存储器Y02可以包括高速随机存取存储器，还可以包括非瞬时存储器，例如至少一个磁盘存储器件、闪存器件、或其他非瞬时固态存储器件。在一些实施例中，存储器Y02可选包括相对于处理器Y01远程设置的存储器，这些远程存储器可以通过网络连接至电子设备。上述网络的实例包括但不限于互联网、企业内部网、区块链网络、局域网、移动通信网及其组合。
电子设备还可以包括：输入装置Y03和输出装置Y04。处理器Y01、存储器Y02、输入装置Y03和输出装置Y04可以通过总线或者其他方式连接，图4中以通过总线连接为例。
输入装置Y03可接收输入的数字或字符信息，以及产生与电子设备的用户设置以及功能控制有关的键信号输入，例如触摸屏、小键盘、鼠标、轨迹板、触摸板、指示杆、一个或者多个鼠标按钮、轨迹球、操纵杆等输入装置。输出装置Y04可以包括显示设备、辅助照明装置和触觉反馈装置(例如，振动电机)等。该显示设备可以包括但不限于，液晶显示器、发光二极管显示器和等离子体显示器。在一些实施方式中，显示设备可以是触摸屏。
此处描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、专用集成电路、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。
这些计算程序(也称作程序、软件、软件应用、或者代码)包括可编程处理器的机器指令，并且可以利用高级过程和/或面向对象的编程语言、和/或汇编/机器语言来实施这些计算程序。如本文使用的，术语“机器可读介质”和“计算机可读介质”指的是用于将机器指令和/或数据提供给可编程处理器的任何计算机程序产品、设备、和/或装置(例如，磁盘、光盘、存储器、可编程逻辑装置)，包括，接收作为机器可读信号的机器指令的机器可读介质。术语“机器可读信号”指的是用于将机器指令和/或数据提供给可编程处理器的任何信号。
为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置(例如，阴极射线管或者液晶显示器监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。
可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网、广域网、区块链网络和互联网。
计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。
应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本申请中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本申请公开的技术方案所期望的结果，本文在此不进行限制。
上述具体实施方式，并不构成对本申请保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其它因素，可以进行各种修改、组合、子组合和替代。任何在本申请的精神和原则之内所作的修改、等同替换和改进等，均应包含在本申请保护范围之内。

Claims (8)

1.一种页面预渲染方法，其特征在于，包括：
针对待处理的页面，获取所述页面的静态资源，所述静态资源中包括：层叠样式表及JavaScript脚本；
获取编译后的所述页面的超文本标记语言结构信息；
根据所述静态资源及所述超文本标记语言结构信息，结合网页框架原生的服务端渲染能力，生成所述页面的静态超文本标记语言文件，包括：在eval环境下执行所述JavaScript脚本，通过JavaScript文档对象模型JSDOM模拟所需的浏览器宿主环境，结合所述网页框架原生的服务端渲染能力，生成所述页面的静态超文本标记语言文件，所述eval为可在无界面图形环境下执行JavaScript代码的库，模拟浏览器的执行过程，驱动页面从初始状态过渡到中间状态。
2.根据权利要求1所述的方法，其特征在于，
所述获取所述页面的静态资源包括：通过监听超文本标记语言网页包插件html-webpack-plugin的第一预定钩子，获取所述静态资源；
所述获取编译后的所述页面的超文本标记语言结构信息包括：通过监听所述html-webpack-plugin的第二预定钩子，获取所述超文本标记语言结构信息。
3.根据权利要求2所述的方法，其特征在于，
所述第一预定钩子包括：资源标签生成前钩子beforeAssetTagGeneration hook；
所述第二预定钩子包括：模板执行后钩子afterTemplateExecution hook。
4.一种页面预渲染装置，其特征在于，包括：获取单元以及生成单元；
所述获取单元，用于针对待处理的页面，获取所述页面的静态资源，并获取编译后的所述页面的超文本标记语言结构信息，所述静态资源中包括：层叠样式表及JavaScript脚本；
所述生成单元，用于根据所述静态资源及所述超文本标记语言结构信息，结合网页框架原生的服务端渲染能力，生成所述页面的静态超文本标记语言文件，包括：在eval环境下执行所述JavaScript脚本，通过JavaScript文档对象模型JSDOM模拟所需的浏览器宿主环境，结合所述网页框架原生的服务端渲染能力，生成所述页面的静态超文本标记语言文件，所述eval为可在无界面图形环境下执行JavaScript代码的库，模拟浏览器的执行过程，驱动页面从初始状态过渡到中间状态。
5.根据权利要求4所述的装置，其特征在于，
所述获取单元通过监听超文本标记语言网页包插件html-webpack-plugin的第一预定钩子，获取所述静态资源；
所述获取单元通过监听所述html-webpack-plugin的第二预定钩子，获取所述超文本标记语言结构信息。
6.根据权利要求5所述的装置，其特征在于，
所述第一预定钩子包括：资源标签生成前钩子beforeAssetTagGeneration hook；
所述第二预定钩子包括：模板执行后钩子afterTemplateExecution hook。
7.一种电子设备，其特征在于，包括：
至少一个处理器；以及
与所述至少一个处理器通信连接的存储器；其中，
所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1-3中任一项所述的方法。
8.一种存储有计算机指令的非瞬时计算机可读存储介质，其特征在于，所述计算机指令用于使所述计算机执行权利要求1-3中任一项所述的方法。
CN202010136181.6A 2020-03-02 2020-03-02 页面预渲染方法、装置、电子设备及存储介质 Active CN111506387B (zh)

Priority Applications (5)

Application Number Priority Date Filing Date Title
CN202010136181.6A CN111506387B (zh) 2020-03-02 2020-03-02 页面预渲染方法、装置、电子设备及存储介质
US17/419,245 US11829436B2 (en) 2020-03-02 2020-11-30 Method and apparatus of pre-rendering page, electronic device, and storage medium
PCT/CN2020/132782 WO2021174928A1 (zh) 2020-03-02 2020-11-30 页面预渲染方法、装置、电子设备及存储介质
EP20904237.3A EP3896567B1 (en) 2020-03-02 2020-11-30 Page pre-rendering method and apparatus, electronic device, and storage medium
JP2021536286A JP2022525831A (ja) 2020-03-02 2020-11-30 ページプリレンダリング方法、装置、電子機器、コンピュータプログラム及び記憶媒体

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010136181.6A CN111506387B (zh) 2020-03-02 2020-03-02 页面预渲染方法、装置、电子设备及存储介质

Publications (2)

Publication Number Publication Date
CN111506387A CN111506387A (zh) 2020-08-07
CN111506387B true CN111506387B (zh) 2023-09-22

Family

ID=71863854

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010136181.6A Active CN111506387B (zh) 2020-03-02 2020-03-02 页面预渲染方法、装置、电子设备及存储介质

Country Status (5)

Country Link
US (1) US11829436B2 (zh)
EP (1) EP3896567B1 (zh)
JP (1) JP2022525831A (zh)
CN (1) CN111506387B (zh)
WO (1) WO2021174928A1 (zh)

Families Citing this family (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111506387B (zh) * 2020-03-02 2023-09-22 百度在线网络技术（北京）有限公司 页面预渲染方法、装置、电子设备及存储介质
CN112100476A (zh) * 2020-09-01 2020-12-18 武汉华盛美业科技有限公司 针对单页面对多状态对象的动态数据获取方法及其系统
CN112084395A (zh) * 2020-09-25 2020-12-15 百度国际科技（深圳）有限公司 搜索方法、搜索装置、电子设备和存储介质
CN112182334B (zh) * 2020-09-27 2024-07-05 东风汽车有限公司 车载超文本标记语言文件处理方法、电子设备、服务器处理方法及服务器
CN112527374B (zh) * 2020-12-11 2024-08-27 北京百度网讯科技有限公司 标注工具生成方法、标注方法、装置、设备以及存储介质
CN112800370B (zh) * 2021-01-28 2024-04-30 金蝶蝶金云计算有限公司 业务单据的处理方法、装置、计算机设备和存储介质
CN113010827B (zh) * 2021-03-16 2024-03-22 北京百度网讯科技有限公司 页面渲染方法、装置、电子设备以及存储介质
CN113326043B (zh) * 2021-05-26 2022-05-03 上海哔哩哔哩科技有限公司 网页渲染方法、网页制作方法及网页渲染系统
CN113326456B (zh) * 2021-07-08 2022-01-21 北京达佳互联信息技术有限公司 网页资源获取方法、装置、设备、系统及存储介质
CN113703893B (zh) * 2021-08-24 2024-06-07 上海浦东发展银行股份有限公司 一种页面渲染方法、装置、终端及存储介质
CN113918263B (zh) * 2021-11-11 2023-09-05 盐城天眼察微科技有限公司 视图组件的虚拟路由方法、装置、设备及计算机存储介质
CN114756319A (zh) * 2022-04-25 2022-07-15 中国建设银行股份有限公司 小程序页面显示方法、装置、设备及存储介质

Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107066631A (zh) * 2017-05-26 2017-08-18 北京三快在线科技有限公司 页面的显示方法、装置及电子设备
WO2018022359A1 (en) * 2016-07-26 2018-02-01 Google Llc Web page display systems and methods
CN110020278A (zh) * 2017-09-08 2019-07-16 阿里巴巴集团控股有限公司 页面数据的展示、提供方法、客户端及服务器
CN110096659A (zh) * 2019-03-27 2019-08-06 北京三快在线科技有限公司 一种页面显示方法、装置、设备及可读存储介质
CN110187913A (zh) * 2019-05-17 2019-08-30 北京百度网讯科技有限公司 小程序的发布、运行方法和装置
CN110309451A (zh) * 2018-03-02 2019-10-08 拉扎斯网络科技（上海）有限公司 一种web预加载页面的生成方法及装置
CN110795195A (zh) * 2019-10-31 2020-02-14 百度在线网络技术（北京）有限公司 一种网页渲染方法、装置、电子设备及存储介质
CN110851683A (zh) * 2019-10-25 2020-02-28 陈奕博 一种用于预渲染的网页显示方法

Family Cites Families (13)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7171443B2 (en) * 2001-04-04 2007-01-30 Prodigy Communications, Lp Method, system, and software for transmission of information
US7386786B2 (en) * 2003-01-24 2008-06-10 The Cobalt Group, Inc. Method and apparatus for processing a dynamic webpage
EP1662405A1 (en) 2004-11-30 2006-05-31 Alcatel Method of displaying data on a client computer
US8554938B2 (en) * 2010-08-31 2013-10-08 Millind Mittal Web browser proxy-client video system and method
US10095663B2 (en) 2012-11-14 2018-10-09 Amazon Technologies, Inc. Delivery and display of page previews during page retrieval events
US9720888B1 (en) * 2014-05-22 2017-08-01 Amazon Technologies, Inc. Distributed browsing architecture for the delivery of graphics commands to user devices for assembling a plurality of layers of a content page
US9753904B2 (en) 2014-07-25 2017-09-05 Qualcomm Incorporated Fast rendering of websites containing dynamic content and stale content
US10115141B1 (en) * 2014-09-24 2018-10-30 Amazon Technologies, Inc. Secure proxy service
US10447759B2 (en) 2016-05-27 2019-10-15 Microsoft Technology Licensing, Llc Web page accelerations for web application hosted in native mobile application
US11206273B2 (en) * 2018-01-31 2021-12-21 Salesforce.Com, Inc. Content management system connect
US10747828B2 (en) * 2018-03-27 2020-08-18 Capital One Services, Llc Systems and methods for single page application server side renderer
US11562037B2 (en) * 2019-09-18 2023-01-24 International Business Machines Corporation Crawlability of single page applications
CN111506387B (zh) * 2020-03-02 2023-09-22 百度在线网络技术（北京）有限公司 页面预渲染方法、装置、电子设备及存储介质

Patent Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2018022359A1 (en) * 2016-07-26 2018-02-01 Google Llc Web page display systems and methods
CN107066631A (zh) * 2017-05-26 2017-08-18 北京三快在线科技有限公司 页面的显示方法、装置及电子设备
CN110020278A (zh) * 2017-09-08 2019-07-16 阿里巴巴集团控股有限公司 页面数据的展示、提供方法、客户端及服务器
CN110309451A (zh) * 2018-03-02 2019-10-08 拉扎斯网络科技（上海）有限公司 一种web预加载页面的生成方法及装置
CN110096659A (zh) * 2019-03-27 2019-08-06 北京三快在线科技有限公司 一种页面显示方法、装置、设备及可读存储介质
CN110187913A (zh) * 2019-05-17 2019-08-30 北京百度网讯科技有限公司 小程序的发布、运行方法和装置
CN110851683A (zh) * 2019-10-25 2020-02-28 陈奕博 一种用于预渲染的网页显示方法
CN110795195A (zh) * 2019-10-31 2020-02-14 百度在线网络技术（北京）有限公司 一种网页渲染方法、装置、电子设备及存储介质

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
SWAROVsky:Optimizing Resource Loading for Mobile Web Browsing;Xuanzhe Liu等;《IEEE Transactions on Mobile Computing》;第16卷(第10期);第2941-2954页 *
基于Node.js中间层Web开发的研究与实现——以微信图书借阅平台为例;仇晶 等;《河北工业科技》;第34卷(第2期);第118-124页 *

Also Published As

Publication number Publication date
US20220308900A1 (en) 2022-09-29
EP3896567A1 (en) 2021-10-20
US11829436B2 (en) 2023-11-28
EP3896567A4 (en) 2022-04-06
WO2021174928A1 (zh) 2021-09-10
EP3896567B1 (en) 2023-06-21
CN111506387A (zh) 2020-08-07
JP2022525831A (ja) 2022-05-20

Similar Documents

Publication Publication Date Title
CN111506387B (zh) 页面预渲染方法、装置、电子设备及存储介质
US11144711B2 (en) Webpage rendering method, device, electronic apparatus and storage medium
CN106991154B (zh) 网页渲染方法、装置、终端及服务器
US10643023B2 (en) Programmatic native rendering of structured content
US10207190B2 (en) Technologies for native game experience in web rendering engine
JP5679989B2 (ja) デバッグパイプライン
JP7324831B2 (ja) ディープラーニングフレームワークにおける演算子の展開方法、展開装置及び電子機器
CN108897538A (zh) 页面视图显示方法及装置、存储介质及电子终端
KR20080053293A (ko) 클라이언트 스크립트 웹 페이지에 대한 서버측 초기 콘텐츠렌더링
CN113010827B (zh) 页面渲染方法、装置、电子设备以及存储介质
TW201911020A (zh) 頁面更新方法和裝置
KR20220004807A (ko) 태깅 툴 생성 방법, 태깅 방법, 장치, 기기, 저장 매체 및 컴퓨터 프로그램
CN112506854B (zh) 页面模板文件的存储和页面生成方法、装置、设备及介质
CN111159592A (zh) 搜索结果页生成方法、装置、电子设备及存储介质
CN111857656B (zh) 数据处理方法、装置、电子设备及存储介质
CN111782181A (zh) 代码生成方法、装置、电子设备以及存储介质
KR20220009338A (ko) 모델링 매개 변수의 설정 방법, 장치, 전자 기기 및 기록 매체
US20240179224A1 (en) Systems and methods for rendering interactive web pages
CN111125597B (zh) 网页加载方法、浏览器、电子设备及存储介质
CN109582580B (zh) 用于调试页面的系统、方法和装置
CN113535175A (zh) 应用程序前端代码的生成方法、装置、电子设备及介质
US11836212B2 (en) Systems and methods for rendering interactive web pages
CN112379885B (zh) 小程序编译方法、装置、设备及可读存储介质
CN114741294A (zh) 一种页面的调试方法、装置、设备及存储介质
CN113656041A (zh) 数据处理方法、装置、设备及存储介质

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
GR01 Patent grant
GR01 Patent grant