CN111191168A - 一种基于ssr的bi可视化展示性能优化方法 - Google Patents

一种基于ssr的bi可视化展示性能优化方法 Download PDF

Info

Publication number
CN111191168A
CN111191168A CN201911354877.XA CN201911354877A CN111191168A CN 111191168 A CN111191168 A CN 111191168A CN 201911354877 A CN201911354877 A CN 201911354877A CN 111191168 A CN111191168 A CN 111191168A
Authority
CN
China
Prior art keywords
ssr
data
request
browser
node layer
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
CN201911354877.XA
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.)
Beijing Yonghong Tech Co ltd
Original Assignee
Beijing Yonghong Tech 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 Yonghong Tech Co ltd filed Critical Beijing Yonghong Tech Co ltd
Priority to CN201911354877.XA priority Critical patent/CN111191168A/zh
Publication of CN111191168A publication Critical patent/CN111191168A/zh
Pending legal-status Critical Current

Links

Images

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/9577—Optimising the visualization of content, e.g. distillation of HTML documents
    • 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

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)

Abstract

本发明公开了一种基于SSR的BI可视化展示性能优化方法，包括以下步骤：浏览器端发起请求，Node层判断请求是否需要进行SSR处理；若不需要，则直接将请求转发到服务器端处理并向浏览器端返回数据；若需要，则执行下一步；Node层根据浏览器端的请求向服务器端请求获取相应数据，服务器端将相应数据发送至Node层进行SSR处理，将SSR处理后的数据发送至浏览器端，构建DOM结构完成本地渲染；与此同时，Node层将可重用的数据同步至客户端中；客户端从CDN或服务器端中直接加载数据，添加事件满***互需求。本发明规避了js执行慢的问题，中间层的引入增加了***架构的灵活性，可以对前后台通信进行主动干预，进行路由处理等，同时可以对搜索引擎优化。

Description

一种基于SSR的BI可视化展示性能优化方法
技术领域
本发明涉及计算机技术领域，更具体的说是涉及一种基于SSR的BI可视化展示性能优化方法。
背景技术
Web应用通常会开发一个单页应用(SPA)，单页应用在浏览器端会比传统的网页有更好的用户体验，浏览器一般会拿到一个body为空的html，然后加载script指定的js,当所有js加载完毕后，开始执行js,最后再渲染到dom中,在这个过程中，一般用户只能等待，什么都做不了，如果用户在一个高速的网络中，高配置的设备中，以上先要加载所有的js然后再执行的过程可能不是什么大问题，但是有很多情况是网速一般，设备也可能不是最好的，在这种情况下的单页应用可能具有很差的用户体验，用户可能还未体验到浏览器端SPA的好处时，就已经离开网站了，降低了网站的浏览量。
针对这一问题，现代化的UI库提供了服务端渲染(SSR)的功能，使得所开发的SPA应用也能完美地运行在服务端，大大加快了首屏渲染的时间，用户能更快的看到网页的内容，与此同时，浏览器同时加载需要的js，加载完后把所有的DOM事件，及各种交互添加到页面中，最后还是以SPA的形式运行，既提升了首屏渲染的时间，又能获得SPA的客户端用户体验，对于SEO来说也是必要的功能。
因此，如何提供一种能够解决web应用首屏渲染慢白屏时间长的问题的基于SSR的BI可视化展示性能优化方法是本领域技术人员亟需解决的问题。
发明内容
有鉴于此，本发明提供了一种基于SSR的BI可视化展示性能优化方法，利用Node的高性能完成dom构建，规避js执行的瓶颈，从而提升首屏渲染时间，同时做到搜索引擎优化(SEO)，最终提升了用户体验。
为了实现上述目的，本发明采用如下技术方案：
一种基于SSR的BI可视化展示性能优化方法，包括以下步骤：
S1：浏览器端发起请求，Node层判断所述请求是否需要进行SSR处理；若不需要进行SSR处理，则直接将请求转发到服务器端处理并向所述浏览器端返回数据；若需要进行SSR处理，则执行S2；
S2：所述Node层根据所述浏览器端的请求向所述服务器端请求获取相应数据，所述服务器端将所述相应数据发送至所述Node层进行SSR处理；
S3：将SSR处理后的数据发送至浏览器端，构建DOM结构完成本地渲染；与此同时，所述Node层将可重用的数据同步至客户端中；
S4：所述客户端从CDN或所述服务器端中直接加载数据，添加事件满***互需求。
优选的，所述服务器端通过CGI将所述相应数据发送至所述Node层进行SSR。
优选的，S2的具体内容包括：
请求获取原始HTML页面和SSR所需的参数，获取SSR所需的数据，并构建渲染逻辑所需的数据结构store。
优选的，S3中所述的SSR处理后的数据包括：最终HTML结构和可以重用的数据集。
优选的，所述最终HTML结构包括渲染后的HTML和innerCSS，所述浏览器对渲染后的HTML进行内容解析，构建所述DOM结构，将所述DOM结构结合innerCSS文件，完成本地渲染。
优选的，S3还包括：客户端向所述Node层发送请求以获取更适合前端渲染的数据。
优选的，S3中所述客户端从CDN中加载数据的过程为：所述浏览器向所述CDN发送请求js/css文件，并从所述CDN中获取js/css文件。
需要说明的是：
其中，SSR为服务端渲染，CDN为内容分发网络，CGI为公共网关接口。
经由上述的技术方案可知，与现有技术相比，本发明公开提供了一种基于SSR的BI可视化展示性能优化方法，本发明针对现有技术中需要加载完所有js后才能执行js，导致客户端可视化展示渲染慢的情况，引入node层作为中间层，在服务端获取渲染所需数据并完成渲染，然后将结果返回到客户端，从而规避了js执行慢的问题；其中，中间层的引入增加了***架构的灵活性，可以对前后台通信进行主动干预，进行路由处理等，且服务端渲染通过网页的结构布局设计和网页代码优化，使网页第一时间返回到客户端，既能让浏览器用户能够看懂，也能让搜索引擎每次抓取工具访问网页时，复制该网页并将其网址添加到索引中；相较于客户端渲染只是返回脚本然后执行渲染，SSR可以实现搜索引擎优化。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。
图1附图为本发明提供的一种基于SSR的BI可视化展示性能优化方法的流程示意图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
本发明实施例公开了一种基于SSR的BI可视化展示性能优化方法，如图1所示，包括以下步骤：
S1：浏览器端发起请求，Node层判断请求是否需要进行SSR处理；若不需要进行SSR处理，则直接将请求转发到服务器端处理并向浏览器端返回数据；若需要进行SSR处理，则执行S2；
S2：Node层根据浏览器端的请求向服务器端请求获取相应数据，服务器端将相应数据发送至Node层进行SSR处理；
S3：将SSR处理后的数据发送至浏览器端，构建DOM结构完成本地渲染；与此同时，Node层将可重用的数据同步至客户端中；
S4：客户端从CDN或服务器端中直接加载数据，添加事件满***互需求。
为了进一步实施上述技术方案，服务器端通过CGI将相应数据发送至Node层进行SSR。
为了进一步实施上述技术方案，S2的具体内容包括：
请求获取原始HTML页面和SSR所需的参数，获取SSR所需的数据，并构建渲染逻辑所需的数据结构store。
为了进一步实施上述技术方案，S3中的SSR处理后的数据包括：最终HTML结构和可以重用的数据集。
为了进一步实施上述技术方案，最终HTML结构包括渲染后的HTML和innerCSS，浏览器对渲染后的HTML进行内容解析，构建DOM结构，将DOM结构结合innerCSS文件，完成本地渲染。
为了进一步实施上述技术方案，S3还包括：客户端向Node层发送请求以获取更适合前端渲染的数据。
为了进一步实施上述技术方案，S3中客户端从CDN中加载数据的过程为：浏览器向CDN发送请求js/css文件，并从CDN中获取js/css文件。
本发明的工作原理包括：
首先，本发明引入node作为中间层，在服务端获取渲染所需数据并完成渲染，然后将结果返回到客户端，从而规避了js执行慢的问题。
其次，本发明中，客户端中存在可重用的数据，当浏览器再次发起请求时，可直接从客户端中获取数据，无需再次通过服务器获取，充分利用Node性能优势，有效减少冗余请求和传输时延，充分利用服务端和客户端可重用数据减少计算量，有效节省了渲染时间，提高了用户体验度；
另外，对通信过程的灵活可控，可以对不同请求归类处理，并根据业务需求执行额外逻辑或简化流程。
本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。
对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

Claims (7)

1.一种基于SSR的BI可视化展示性能优化方法，其特征在于，包括以下步骤：
S1：浏览器端发起请求，Node层判断所述请求是否需要进行SSR处理；若不需要进行SSR处理，则直接将请求转发到服务器端处理并向所述浏览器端返回数据；若需要进行SSR处理，则执行S2；
S2：所述Node层根据所述浏览器端的请求向所述服务器端请求获取相应数据，所述服务器端将所述相应数据发送至所述Node层进行SSR处理；
S3：将SSR处理后的数据发送至浏览器端，构建DOM结构完成本地渲染；与此同时，所述Node层将可重用的数据同步至客户端中；
S4：所述客户端从CDN或所述服务器端中直接加载数据，添加事件满***互需求。
2.根据权利要求1所述的一种基于SSR的BI可视化展示性能优化方法，其特征在于，所述服务器端通过CGI将所述相应数据发送至所述Node层进行SSR。
3.根据权利要求1所述的一种基于SSR的BI可视化展示性能优化方法，其特征在于，S2的具体内容包括：
请求获取原始HTML页面和SSR所需的参数，获取SSR所需的数据，并构建渲染逻辑所需的数据结构store。
4.根据权利要求1所述的一种基于SSR的BI可视化展示性能优化方法，其特征在于，S3中所述的SSR处理后的数据包括：最终HTML结构和可以重用的数据集。
5.根据权利要求4所述的一种基于SSR的BI可视化展示性能优化方法，其特征在于，所述最终HTML结构包括渲染后的HTML和innerCSS，所述浏览器对渲染后的HTML进行内容解析，构建所述DOM结构，将所述DOM结构结合innerCSS文件，完成本地渲染。
6.根据权利要求4所述的一种基于SSR的BI可视化展示性能优化方法，其特征在于，S3还包括：客户端向所述Node层发送请求以获取更适合前端渲染的数据。
7.根据权利要求1所述的一种基于SSR的BI可视化展示性能优化方法，其特征在于，S3中所述客户端从CDN中加载数据的过程为：所述浏览器向所述CDN发送请求js/css文件，并从所述CDN中获取js/css文件。
CN201911354877.XA 2019-12-25 2019-12-25 一种基于ssr的bi可视化展示性能优化方法 Pending CN111191168A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201911354877.XA CN111191168A (zh) 2019-12-25 2019-12-25 一种基于ssr的bi可视化展示性能优化方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201911354877.XA CN111191168A (zh) 2019-12-25 2019-12-25 一种基于ssr的bi可视化展示性能优化方法

Publications (1)

Publication Number Publication Date
CN111191168A true CN111191168A (zh) 2020-05-22

Family

ID=70705877

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201911354877.XA Pending CN111191168A (zh) 2019-12-25 2019-12-25 一种基于ssr的bi可视化展示性能优化方法

Country Status (1)

Country Link
CN (1) CN111191168A (zh)

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109684575A (zh) * 2018-10-30 2019-04-26 平安科技（深圳）有限公司 网页数据的处理方法及装置、存储介质、计算机设备
CN110321510A (zh) * 2019-05-09 2019-10-11 苏州乐米信息科技股份有限公司 页面渲染方法和***
CN110442325A (zh) * 2019-07-24 2019-11-12 上海易点时空网络有限公司 基于nodejs渲染池的架构模型以及页面处理方法

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109684575A (zh) * 2018-10-30 2019-04-26 平安科技（深圳）有限公司 网页数据的处理方法及装置、存储介质、计算机设备
CN110321510A (zh) * 2019-05-09 2019-10-11 苏州乐米信息科技股份有限公司 页面渲染方法和***
CN110442325A (zh) * 2019-07-24 2019-11-12 上海易点时空网络有限公司 基于nodejs渲染池的架构模型以及页面处理方法

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
单茹楠: "基于微服务化前端架构的研究与实现", 《中国优秀博硕士学位论文全文数据库（硕士）信息科技辑》 *
黑马程序员: "《ThinkPHP 5框架原理与实战》", 31 August 2019 *

Similar Documents

Publication Publication Date Title
US11144711B2 (en) Webpage rendering method, device, electronic apparatus and storage medium
US9582600B1 (en) Cloud browser DOM-based client
TWI451335B (zh) ＷｅｂＫｉｔ瀏覽器裝置與應用於其上之網頁內容載入方法
EP3518124A1 (en) Webpage rendering method and related device
US10002115B1 (en) Hybrid rendering of a web page
US9167054B2 (en) Remote browsing session management
US8577963B2 (en) Remote browsing session between client browser and network based browser
US8706860B2 (en) Remote browsing session management
EP2724251B1 (en) Methods for making ajax web applications bookmarkable and crawlable and devices thereof
JP5805867B2 (ja) 遠隔ブラウジングセッション管理
US10521485B1 (en) Measuring page value
US20130007100A1 (en) Remote browsing session management
KR20140038989A (ko) 자동화된 사용자 인터페이스 객체 변환 및 코드 생성
US9740791B1 (en) Browser as a service
CN113010827B (zh) 页面渲染方法、装置、电子设备以及存储介质
CN110990736A (zh) 页面加载方法、装置、终端设备和存储介质
US20170359434A1 (en) Web caching with image and local storage
US20120066641A1 (en) Methods and apparatus for expandable window border
CN109344351B (zh) 网页加载方法、中间服务器和网页加载***
CA2840420C (en) Remote browsing session management
CN112182445A (zh) 一种优化客户端页面性能的方法和装置
CN112926002A (zh) 一种服务请求的处理方法及装置
CN111191168A (zh) 一种基于ssr的bi可视化展示性能优化方法
CN110321506A (zh) 网页页面数据加载方法、装置、计算机设备和存储介质
CN104219277A (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
RJ01 Rejection of invention patent application after publication

Application publication date: 20200522

RJ01 Rejection of invention patent application after publication