CN110321510A - 页面渲染方法和系统 - Google Patents

页面渲染方法和系统 Download PDF

Info

Publication number
CN110321510A
CN110321510A CN201910386404.1A CN201910386404A CN110321510A CN 110321510 A CN110321510 A CN 110321510A CN 201910386404 A CN201910386404 A CN 201910386404A CN 110321510 A CN110321510 A CN 110321510A
Authority
CN
China
Prior art keywords
page
parameter
rendered
rendering
entry file
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
CN201910386404.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.)
Suzhou Le Meters Information Polytron Technologies Inc
Original Assignee
Suzhou Le Meters Information Polytron Technologies Inc
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 Suzhou Le Meters Information Polytron Technologies Inc filed Critical Suzhou Le Meters Information Polytron Technologies Inc
Priority to CN201910386404.1A priority Critical patent/CN110321510A/zh
Publication of CN110321510A publication Critical patent/CN110321510A/zh
Pending legal-status Critical Current

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/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Information Transfer Between Computers (AREA)
  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)

Abstract

本发明涉及一种页面渲染方法及系统。其中方法包括以下步骤：获取待渲染页面的页面参数；将页面参数与预设入口文件相关联；在预设入口文件中查找与页面参数对应的渲染数据；基于渲染数据对待渲染页面进行渲染，生成目标页面。上述页面渲染方法可以让浏览器边下载javascript文件的同时渲染html页面，而不需要像传统方式那样等到所有javascript文件下载并执行完成之后才去渲染页面。同时SSR对服务器的压力也是相对较大的，和服务器简单输出静态文件相比，通过node去渲染出页面再传递给客户端显然开销是比较大的，需要注意准备好相应的服务器负载。与传统相比更快的首屏渲染速度，减少了页面等待时间。同时可以更好的有利于SEO，便于页面抓取。

Description

页面渲染方法和系统
技术领域
本发明涉及计算机信息领域，特别是涉及一种页面渲染方法及系统。
背景技术
SSR是Server Side Render的缩写，即服务器端渲染。在没有SPA之前，绝大多数的网页都是通过服务器渲染生成的：用户向服务器发送请求，服务器获取请求，然后再查询数据库，根据查询的数据动态的生成一张网页，最后将网页内容返回给浏览器端。
目前，SPA(single page web application，单页Web应用)技术可以为用户提供更好的浏览体验，但是SPA技术只有一个Web页面，其余页面均通过JS(JavaScript，文件扩展)控制加载。另外，SEO(Search Engine Optimization，搜索引擎优化)可以使网站更适合搜索引擎的索引原则，但是因为SPA的上述结构使得不利于SEO对页面进行抓取。为了便于SEO对页面的抓取，需要将所有的页面全部渲染成静态页面。
现有的渲染技术采用传统的开发方法，通过前端生成HTML页面，后端对HTML页面进行绑定数据并将HTML页面渲染成静态页面；这样便会造成信息处理的延迟，增加页面的等待时间。
发明内容
基于此，有必要针对上述传统服务器渲染技术会造成信息处理延迟，增加页面的等待时间的问题，提供一种能够解决上述问题的页面渲染方法及系统。
一种页面渲染方法，包括以下步骤：
获取待渲染页面的页面参数；
将页面参数与预设入口文件相关联；
在预设入口文件中查找与页面参数对应的渲染数据；
基于渲染数据对待渲染页面进行渲染，生成目标页面。
在其中一个优选实施方式中，所述获取待渲染页面的页面参数的步骤包括：
读取待渲染页面；
对所述待渲染页面的各地址参数进行配置，并对所述待渲染页面的页面参数进行配置；
将所述待渲染页面与各所述地址参数进行关联。
在其中一个优选实施方式中，所述将将页面参数与预设入口文件相关联的步骤包括：
通过Webpack工具将所述页面参数和所述预设入口文件进行关联，得到数据包；
将所述数据包输入至所述待渲染页面。
在其中一个优选实施方式中，所述通过Webpack工具将所述页面参数和所述预设入口文件进行关联，得到数据包的步骤中，所述通过Webpack工具分别对服务端打包配置及客户端打包配置。
在其中一个优选实施方式中，所述预设入口文件包括客户端入口文件、服务端入口文件。
本实施方式中的上述页面渲染方法可以让浏览器边下载javascript文件的同时渲染html页面，而不需要像传统方式那样等到所有javascript文件下载并执行完成之后才去渲染页面。同时SSR对服务器的压力也是相对较大的，和服务器简单输出静态文件相比，通过node去渲染出页面再传递给客户端显然开销是比较大的，需要注意准备好相应的服务器负载。与传统相比更快的首屏渲染速度，减少了页面等待时间。同时可以更好的有利于SEO，便于页面抓取。
一种页面渲染系统，包括：
参数获取模块，用以获取待渲染页面的页面参数；
参数关联模块，用以将页面参数与预设入口文件相关联；
数据查找模块，用以在预设入口文件中查找与页面参数对应的渲染数据；
页面渲染模块，基于渲染数据对待渲染页面进行渲染，生成目标页面。
，参数获取模块包括：
读取单元，用以读取待渲染页面；
配置单元，用以对所述待渲染页面的各地址参数进行配置，并对所述待渲染页面的页面参数进行配置；
关联单元，用以将所述待渲染页面与各所述地址参数进行关联。
在其中一个优选实施方式中，所述参数关联模块包括：
Webpack打包单元，用以通过Webpack工具将所述页面参数和所述预设入口文件进行关联，得到数据包；
数据包输入单元，用以将所述数据包输入至所述待渲染页面。
在其中一个优选实施方式中，Webpack打包单元分别对服务端打包配置及客户端打包配置。
在其中一个优选实施方式中，所述预设入口文件包括客户端入口文件、服务端入口文件。
本实施方式中的上述页面渲染系统可以让浏览器边下载javascript文件的同时渲染html页面，而不需要像传统方式那样等到所有javascript文件下载并执行完成之后才去渲染页面。同时SSR对服务器的压力也是相对较大的，和服务器简单输出静态文件相比，通过node去渲染出页面再传递给客户端显然开销是比较大的，需要注意准备好相应的服务器负载。与传统相比更快的首屏渲染速度，减少了页面等待时间。同时可以更好的有利于SEO，便于页面抓取。
附图说明
图1为本发明一优选实施方式中的页面渲染方法的流程图；
图2为本发明一优选实施方式中的页面渲染系统的模块图。
具体实施方式
为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
需要说明的是，当元件被称为“设置于”另一个元件，它可以直接在另一个元件上或者也可以存在居中的元件。当一个元件被认为是“连接”另一个元件，它可以是直接连接到另一个元件或者可能同时存在居中元件。本文所使用的术语“垂直的”、“水平的”、“左”、“右”以及类似的表述只是为了说明的目的，并不表示是唯一的实施方式。
除非另有定义，本文所使用的所有的技术和科学术语与属于本发明的技术领域的技术人员通常理解的含义相同。本文中在本发明的说明书中所使用的术语只是为了描述具体的实施例的目的，不是旨在于限制本发明。本文所使用的术语“及/或”包括一个或多个相关的所列项目的任意的和所有的组合。
一种页面渲染方法，包括以下步骤：
S10：获取待渲染页面的页面参数；
具体的，待渲染页面可以为HTML(Hyper Text Markup Language，超文本标记语言)模板。通常情况下，对于同一个功能的页面(也即，待渲染页面)，当页面显示的语言不同时，其URL(Uniform Resource Locator，统一资源定位符)地址也不同，也即页面显示的语言与URL地址存在对应关系，但是同一个功能页面的页面参数是一致的，其中，URL地址也即前述地址参数。因此，对于同一个待渲染页面，其页面参数携带有多个地址参数。
具体地，本步骤中包括读取待渲染页面，并对所述待渲染页面的各地址参数进行配置，并对所述待渲染页面的页面参数进行配置；
将所述待渲染页面与各所述地址参数，例如是URL地址参数进行关联。
S20：将页面参数与预设入口文件相关联；
可以通过Webpack工具将页面参数与预设入口文件进行关联，得到数据包，并将数据包输入至待渲染页面。其中，Webpack工具是一个前端资源加载/打包工具，也即通过Webpack工具将上述页面参数和预设入口文件进行打包，并传入待渲染页面。另外，预设入口文件中包括页面参数和渲染数据的对应关系，以便于根据页面参数获取对应的渲染数据，进而对待渲染页面进行渲染。
所述通过Webpack工具分别对服务端打包配置及客户端打包配置。
所述预设入口文件包括客户端入口文件、服务端入口文件。
S30：在预设入口文件中查找与页面参数对应的渲染数据；
本实施方式中，进一步的，可以通过JS模板语言读取数据包内的页面参数和预设语言包，其中，JS可以利用普通的JavaScript代码生成HTML页面。另外，因为不同地址参数的渲染数据可能不同，因此在查找到与页面参数对应的渲染数据后，需要进一步获取页面参数携带的各地址参数，并在与页面参数对应的渲染数据中查找与各地址参数对应的渲染数据。
S40：基于渲染数据对待渲染页面进行渲染，生成目标页面。
查找到对应的渲染数据后，便可基于该渲染数据对上述待渲染页面进行渲染，得到静态页面(也即，目标页面)，将静态页面保存。进一步的，因为待渲染页面中还可以包括字体、音频和图片等资源，所以还应基于渲染数据对上述资源进行渲染得到静态资源文件并保存。
本实施方式中的上述页面渲染方法可以让浏览器边下载javascript文件的同时渲染html页面，而不需要像传统方式那样等到所有javascript文件下载并执行完成之后才去渲染页面。同时SSR对服务器的压力也是相对较大的，和服务器简单输出静态文件相比，通过node去渲染出页面再传递给客户端显然开销是比较大的，需要注意准备好相应的服务器负载。与传统相比更快的首屏渲染速度，减少了页面等待时间。同时可以更好的有利于SEO，便于页面抓取。
一种页面渲染系统100，包括参数获取模块110、参数关联模块120、数据查找模块130、页面渲染模块140。
参数获取模块110，用以获取待渲染页面的页面参数；
该参数获取模块110包括读取单元、配置单元及关联单元。
其中，读取单元用以读取待渲染页面；配置单元，用以对所述待渲染页面的各地址参数进行配置，并对所述待渲染页面的页面参数进行配置；关联单元，用以将所述待渲染页面与各所述地址参数进行关联。
具体的，待渲染页面可以为HTML(Hyper Text Markup Language，超文本标记语言)模板。通常情况下，对于同一个功能的页面(也即，待渲染页面)，当页面显示的语言不同时，其URL(Uniform Resource Locator，统一资源定位符)地址也不同，也即页面显示的语言与URL地址存在对应关系，但是同一个功能页面的页面参数是一致的，其中，URL地址也即前述地址参数。因此，对于同一个待渲染页面，其页面参数携带有多个地址参数。
参数关联模块120，用以将页面参数与预设入口文件相关联；参数关联模块包括webpack打包单元及数据包输入单元，Webpack打包单元用以通过Webpack工具将所述页面参数和所述预设入口文件进行关联，得到数据包；数据包输入单元用以将所述数据包输入至所述待渲染页面。
具体地，可以通过Webpack工具将页面参数与预设入口文件进行关联，得到数据包，并将数据包输入至待渲染页面。其中，Webpack工具是一个前端资源加载/打包工具，也即通过Webpack工具将上述页面参数和预设入口文件进行打包，并传入待渲染页面。另外，预设入口文件中包括页面参数和渲染数据的对应关系，以便于根据页面参数获取对应的渲染数据，进而对待渲染页面进行渲染。
Webpack打包单元分别对服务端打包配置及客户端打包配置。所述预设入口文件包括客户端入口文件、服务端入口文件。
数据查找模块130用以在预设入口文件中查找与页面参数对应的渲染数据。
本实施方式中，进一步的，可以通过JS模板语言读取数据包内的页面参数和预设语言包，其中，JS可以利用普通的JavaScript代码生成HTML页面。另外，因为不同地址参数的渲染数据可能不同，因此在查找到与页面参数对应的渲染数据后，需要进一步获取页面参数携带的各地址参数，并在与页面参数对应的渲染数据中查找与各地址参数对应的渲染数据。
页面渲染模块140基于渲染数据对待渲染页面进行渲染，生成目标页面。
查找到对应的渲染数据后，便可基于该渲染数据对上述待渲染页面进行渲染，得到静态页面(也即，目标页面)，将静态页面保存。进一步的，因为待渲染页面中还可以包括字体、音频和图片等资源，所以还应基于渲染数据对上述资源进行渲染得到静态资源文件并保存。
本实施方式中的上述页面渲染系统可以让浏览器边下载javascript文件的同时渲染html页面，而不需要像传统方式那样等到所有javascript文件下载并执行完成之后才去渲染页面。同时SSR对服务器的压力也是相对较大的，和服务器简单输出静态文件相比，通过node去渲染出页面再传递给客户端显然开销是比较大的，需要注意准备好相应的服务器负载。与传统相比更快的首屏渲染速度，减少了页面等待时间。同时可以更好的有利于SEO，便于页面抓取。
以上所述实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。
以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (10)

1.一种页面渲染方法，其特征在于，包括以下步骤：
获取待渲染页面的页面参数；
将页面参数与预设入口文件相关联；
在预设入口文件中查找与页面参数对应的渲染数据；
基于渲染数据对待渲染页面进行渲染，生成目标页面。
2.根据权利要求1所述的页面渲染方法，其特征在于，所述获取待渲染页面的页面参数的步骤包括：
读取待渲染页面；
对所述待渲染页面的各地址参数进行配置，并对所述待渲染页面的页面参数进行配置；
将所述待渲染页面与各所述地址参数进行关联。
3.根据权利要求1所述的页面渲染方法，其特征在于，所述将将页面参数与预设入口文件相关联的步骤包括：
通过Webpack工具将所述页面参数和所述预设入口文件进行关联，得到数据包；
将所述数据包输入至所述待渲染页面。
4.根据权利要求3所述的页面渲染方法，其特征在于，所述通过Webpack工具将所述页面参数和所述预设入口文件进行关联，得到数据包的步骤中，所述通过Webpack工具分别对服务端打包配置及客户端打包配置。
5.根据权利要求1所述的页面渲染方法，其特征在于，所述预设入口文件包括客户端入口文件、服务端入口文件。
6.一种页面渲染系统，其特征在于，包括：
参数获取模块，用以获取待渲染页面的页面参数；
参数关联模块，用以将页面参数与预设入口文件相关联；
数据查找模块，用以在预设入口文件中查找与页面参数对应的渲染数据；
页面渲染模块，基于渲染数据对待渲染页面进行渲染，生成目标页面。
7.根据权利要求6所述的页面渲染方法，其特征在于，参数获取模块包括：
读取单元，用以读取待渲染页面；
配置单元，用以对所述待渲染页面的各地址参数进行配置，并对所述待渲染页面的页面参数进行配置；
关联单元，用以将所述待渲染页面与各所述地址参数进行关联。
8.根据权利要求6所述的页面渲染方法，其特征在于，所述参数关联模块包括：
Webpack打包单元，用以通过Webpack工具将所述页面参数和所述预设入口文件进行关联，得到数据包；
数据包输入单元，用以将所述数据包输入至所述待渲染页面。
9.根据权利要求8所述的页面渲染方法，其特征在于，Webpack打包单元分别对服务端打包配置及客户端打包配置。
10.根据权利要求6所述的页面渲染方法，其特征在于，所述预设入口文件包括客户端入口文件、服务端入口文件。
CN201910386404.1A 2019-05-09 2019-05-09 页面渲染方法和系统 Pending CN110321510A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910386404.1A CN110321510A (zh) 2019-05-09 2019-05-09 页面渲染方法和系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910386404.1A CN110321510A (zh) 2019-05-09 2019-05-09 页面渲染方法和系统

Publications (1)

Publication Number Publication Date
CN110321510A true CN110321510A (zh) 2019-10-11

Family

ID=68118911

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910386404.1A Pending CN110321510A (zh) 2019-05-09 2019-05-09 页面渲染方法和系统

Country Status (1)

Country Link
CN (1) CN110321510A (zh)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110825355A (zh) * 2019-11-05 2020-02-21 北京集奥聚合科技有限公司 基于建模平台前端页面表单自动提交方法以及装置
CN111191168A (zh) * 2019-12-25 2020-05-22 北京永洪商智科技有限公司 一种基于ssr的bi可视化展示性能优化方法
CN112948011A (zh) * 2019-11-26 2021-06-11 上海哔哩哔哩科技有限公司 一种二级页面加载的方法及装置

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20170177549A1 (en) * 2014-03-13 2017-06-22 Go Daddy Operating Company, LLC Lightweight web page generation
CN107229633A (zh) * 2016-03-24 2017-10-03 北京神州泰岳软件股份有限公司 静态页面生成方法、网页访问方法及装置
CN108334517A (zh) * 2017-01-20 2018-07-27 华为技术有限公司 一种网页渲染方法及相关设备
CN109614569A (zh) * 2018-12-07 2019-04-12 万兴科技股份有限公司 页面渲染方法、装置及智能终端

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20170177549A1 (en) * 2014-03-13 2017-06-22 Go Daddy Operating Company, LLC Lightweight web page generation
CN107229633A (zh) * 2016-03-24 2017-10-03 北京神州泰岳软件股份有限公司 静态页面生成方法、网页访问方法及装置
CN108334517A (zh) * 2017-01-20 2018-07-27 华为技术有限公司 一种网页渲染方法及相关设备
CN109614569A (zh) * 2018-12-07 2019-04-12 万兴科技股份有限公司 页面渲染方法、装置及智能终端

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110825355A (zh) * 2019-11-05 2020-02-21 北京集奥聚合科技有限公司 基于建模平台前端页面表单自动提交方法以及装置
CN112948011A (zh) * 2019-11-26 2021-06-11 上海哔哩哔哩科技有限公司 一种二级页面加载的方法及装置
CN112948011B (zh) * 2019-11-26 2023-08-08 上海哔哩哔哩科技有限公司 一种二级页面加载的方法及装置
CN111191168A (zh) * 2019-12-25 2020-05-22 北京永洪商智科技有限公司 一种基于ssr的bi可视化展示性能优化方法

Similar Documents

Publication Publication Date Title
CN110968824B (zh) 页面数据处理方法和装置
US10839027B2 (en) System and apparatus for providing, via conventional web browsing, browsing capability for search engine web crawlers between remote/virtual windows and from remote/virtual windows to conventional hypertext documents
JP6898452B2 (ja) データ取得方法およびデバイス
CN109614569B (zh) 页面渲染方法、装置及智能终端
US8935798B1 (en) Automatically enabling private browsing of a web page, and applications thereof
US8468145B2 (en) Indexing of URLs with fragments
CN105095280B (zh) 一种浏览器缓存方法和装置
US8745341B2 (en) Web server cache pre-fetching
US8424004B2 (en) High performance script behavior detection through browser shimming
JP6203374B2 (ja) ウェブページ・スタイルアドレスの統合
US9454535B2 (en) Topical mapping
CN103678321A (zh) 页面元素确定方法及设备、用户行为路径确定方法及装置
CN106372130B (zh) 一种静态资源管理方法
CN110321510A (zh) 页面渲染方法和系统
US8930807B2 (en) Web content management based on timeliness metadata
CN107590145A (zh) 一种页面静态资源的处理方法和装置
US10594764B2 (en) Request cache to improve web applications performance
US9648078B2 (en) Identifying a browser for rendering an electronic document
CN106126693A (zh) 一种网页的相关数据的发送方法及装置
CN108874922A (zh) 客户端设备、基于单页应用的网页渲染方法和存储介质
CN110365724A (zh) 任务处理方法、装置及电子设备
US9465814B2 (en) Annotating search results with images
CN103559097B (zh) 一种浏览器中进程间通信的方法、装置和浏览器
CN110309386B (zh) 一种网页爬取的方法和装置
US20090276425A1 (en) Encoding search results as a search permanent link uniform resource locator

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
RJ01 Rejection of invention patent application after publication

Application publication date: 20191011

RJ01 Rejection of invention patent application after publication